Develop Reference

Can I make a Material-Table column render data like this?

I am using a standard Material-Table. I would like to render the column status like in the image down below. I could use ANT Design to do this, but Material-Table requires a lot less code to allow for searching and filtering.
Here is a very simple example of my table. I am using some options to set the header color, font etc. I am also using rowStyle to alternate colors on each row.
const [intakes, setIntakes] = useState([]);
const columns = [
{ title: "Status", field: "Status" },
];
function Table() {
return (
<MaterialTable data={intakes.intakes} columns={columns} />
);
}

In your columns definition, you will need to use the render property of the column object. A similar question is here
code example:
<MaterialTable
columns={[
{ title: "Name", field: "name" },
{ title: "Surname", field: "surname" },
{ title: "Id", field: "tableData.id" },
{ title: "Id+1", render: rowData => rowData.tableData.id + 1 },
]}/>
This is the important part here:
render: rowData => rowData.tableData.id + 1
using the rowData, you can call a function here using a specific field other than the id in the example (let's say
render: rowData => generateFlagText(rowData.tableData.Status)
And your function should return some div with classNames to display those status

Save slickgrid cell autocomplete value

I have a slickgrid cell with an autocompletion and a custom formatter. The cell value is a key field of dynamically loading autocompletion list. The list is shown as labels (e.g. Contract: ABCDEF-123, thick:10, width:210, City: Chicago) and when I select one it appears in the according input field. The point is that the formatter does not know that label, it only knows the key (order_id).
function contractFormatter(row, cell, value, columnDef, dataContext) {
var res = '';
var val = get_contract_list()[value] ? get_contract_list()[value]['label'] : '';
res = '<span class="' + getSpanClass() + '" style="float: left;"></span>\n\
'+ (val =='' ? '<span style="color:slategrey;"> Enter 3 symbols </span>' + val : val) + '';
return res;
}
The function get_contract_list returns the whole list of contracts and it is very big, so it was decided to make that list dynamic. So the function is empty now and it would be nice just to take the selected label into val.
Is there any way to achieve it?

You have to remember that Formatters are synchronous and it must return right away in a string format, if it requires a lot of processing power while staying synchronous then you'll end up slowing down your grid. You should probably cache your list once in a separate variable and use it afterward instead of reloading the list every time. If you load something that takes time and is asynchronous (a delayed output) then you'll want to look up the asyncPostRenderer (you can see this Example)
So going back to displaying the associated key to a label, I've done something similar in my lib in this Example and a live demo here, in my use case the value is a key index and I use the complexityLevelList to find its associated object which I can then read its label to display in the formatter.
export class MyExample {
complexityLevelList = [
{ value: 0, label: 'Very Simple' },
{ value: 1, label: 'Simple' },
{ value: 2, label: 'Straightforward' },
{ value: 3, label: 'Complex' },
{ value: 4, label: 'Very Complex' },
];
prepareGrid() {
this.columnDefinitions = [
{
id: 'complexity', name: 'Complexity', field: 'complexity', minWidth: 100,
formatter: (_row, _cell, value) => this.complexityLevelList[value].label,
filter: {
model: Filters.multipleSelect,
collection: this.complexityLevelList
},
editor: {
model: Editors.singleSelect,
collection: this.complexityLevelList,
massUpdate: true
},
},
];
}
}
Note that the Filters & Editors are specific to my lib Slickgrid-Universal, but you should get the idea on how to refactor your code to make it work.

Extjs 6- filter grid

I have textfield where I can filter a grid, the problem is it can't filter all column but only one of this, so I want to filter all column with any value enter on the textfield, even it's type or name or email or something, like a gridsearch. Thanks
snippet of my code:
xtype: 'textfield',
label: 'search',
emptyText: 'Enter type...',
listeners: {
change: function (field, value) {
var grid = this.up('grid'),
store = grid.getStore();
if (!value) {
store.getFilters().removeAll();
} else {
store.filter([{property:'type',//can be other property
value:value}]);
}
}
}

If your store has remoteFilter: true, you can use a custom filter function, as explained here
http://docs.sencha.com/extjs/6.0.2/classic/Ext.util.Filter.html
If your store has remoteFilter: false, you need to address the custom filtering server side, implementing an OR clause.

How to add tooltip to text form field in extjs6

I have function for creating/rendering input fields but i don't know how to add tool tip on it in EXTjs6
this is my function:
createInputField: function(value, fieldsMarginBottom, readonly) {
var fieldStyle = this.getFieldStyle(readonly);
var nameField = Ext.create('Ext.form.field.Text', {
name: 'name',
readOnly: true,
hideLabel: true,
value: value,
width: this.fieldWidth,
style: {
marginBottom: fieldsMarginBottom + 'px'
},
//My try which is not working
tooltip: {
trackMouse: true,
width: 140,
renderer: function(tip, item){
tip.setTitle('name');
tip.update('Count: ');
}
},
fieldStyle: fieldStyle
});
return nameField;
}
I hope you guys can help me. If you need any additional informations, please let me know and I'll provide. Thank you

As can be seen in the textfield docs, fields do not have a way to add a tooltip to their configuration, so you would have to create the tooltip manually.
If you look at the docs for Ext.tip.ToolTip how to do that, you may find a small example, where you just have to change the target as per the target configuration description:
var tip = Ext.create('Ext.tip.ToolTip', {
target: nameField.getEl(),
html: 'Press this button to clear the form'
});

Above answer is correct. Here is example of generic function which you write once and use wherever you required in project by using using attributes.
addToolTip : function (id, msg) {
new Ext.ToolTip({
target : id,
dismissDelay : 0,
anchor : 'right',
html : msg
});
};

Dojo Dgrid - canedit on filteringselect

I have a dgrid assigned to a REST service with JSON.
It works fine.
I have a filterselect in one of the columns.
The filterselect is populated from another dojo store.
My question is, how can I disable the filterselect when it's value is for example 10?
I tried canEdit, but it does not work.
Any suggestions?
Thanks!
Editor({
label: 'Size', autoSave: true, field: 'picsubtype',
canEdit: function(object, value) {
return value != 10;
},
widgetArgs: {
store: filesubtypeStore, maxHeight: 150, style: "height: 20px;"
},
}, FilteringSelect)
This code does not work...

Have you tried setting up a onChange handler in the widgetArgs?
Something like:
onChange: function(newValue) { if(newValue === 10) { this.set('disabled', true); } }
But how would the widget get re-enabled?