I use ag-grid and wrote 2 custom functions for sorting. In documentation I found sortingOrder. In example it is used like this: sortingOrder: ["desc", "asc", null]. If I add in array my own functions sortingOrder: [() => customASC(), () => customDESC(), null] it doesn't work. How i can use sortingOrder of custom functions?
Looking at the docs, you need to add your custom sorting functions as comparator.
You don't need to put it in the sortingOrder, but next to it - within columnDefs. There isn't a concrete example for this, but you could try adding it to column definitions like this:
var columnDefs = [
{
headerName: "Date",
field: "date",
comparator: customComparator, // your custom comparing function
sortingOrder: ['desc', 'asc'] // override default sorting order
}
]
function customComparator() {
// your custom code here
}
You need to test whether the default behavior is as expected (i.e. 'asc > desc > null' according to your custom sorting, and then you should be able to re-arrange the order using sortingOrder.
Related
I'm currently using Redux to fetch data from an API. I am then using this data to populate a DataGrid component from Material-UI. Below is what the api response looks like:
Below is what I currently have setup for the column definitions:
The DataGrid seems to be able to recognize the id field from the results, as seen below, however, I cannot seem to drill down into attributes to get further details.
I'm looking for a solution that will allow me to display the attribute data, along with the id. All help is appretiated, thank you!
You can use valueGetter:
const columns = [
// ...
{
field: 'attributeName',
headerName: 'Attribute Name',
valueGetter: (params) => {
return params.getValue(params.id, "attributes").name;
}
},
// ...
];
You may also need a sortComparator to handle the sorting of this column.
try something like this to map the data out obviously change around the names as needed
const detailsRows = rows.map((row) => {
return {
id: row.item_id,
model: row.model_no,
title: row.title,
};
and then pass it in to DataGrid like this
<DataGrid rows={detailsRows} columns={props.columns} pageSize={10}/>
One of the columns of the DataTable implemented is somewhat like this
{ field: 'FieldValuesAsText#XYZ', header: 'XYZ', width: '150px', sort: true, filterElement: 'No' }
<Column key={col.field}
field={col.field}
header={col.header}
body={this.trimContent}
filter={true}
filterMatchMode="contains"
sortable={col.sort}/>
The FieldValuesAsText is a object with XYZ as one of it's attribute. The custom function used in the body property successfully retrieves the value but the problem is when I try to do the filter operation. Since the filter defaults to field which in this case is FieldValuesAsText#XYZ, so it is obviously going to return undefined. How will I be able to make my filter properly work?
You need to implement a custom filter function.
Here is a custom function that I have used to filter a similar column in my Datatable.
filterMatchMode="custom" filterFunction={customFunction}
export const customFunction = (value, filter) => {
return value.toUpperCase().indexOf(filter.toUpperCase()) >= 0
}
as you notice below, I'm using Ext.Array.merge to render columns within initComponent.
I'm try to set columns' flex property as default in initComponent.
How can I achieve to this arrangement?
initComponent: function () {
var me = this;
Ext.on('resize', function () { me.height = window.innerHeight - App.MAIN_FOOTER_HEIGHT - App.MAIN_HEADER_HEIGHT - 100 });
me.createGridMenu();
me.columns = Ext.Array.merge(me.getListColsStart(), me.getListCols(), me.getListColsEnd());
//I need to set through here. Any solution such as setDefaults or dot notation to fetch defaults of columns?
me.callParent(arguments);
},
and here is one of overrided functions
getListCols: function () {
return [];
},
UPDATE:
Related second question moved to Setting defaults to panel items for nested objects post. FYI.
Here is an excerpt from the API Docs, from the columns documentation (it also contains an example related to your question):
This can also be a configuration object for a
Ext.grid.header.Container which may override certain default
configurations if necessary. For example, the special layout may be
overridden to use a simpler layout, or one can set default values
shared by all columns:
So, in your case, here is how you can setup flex as a default config for all columns:
me.columns = {
items: Ext.Array.merge(
me.getListColsStart(),
me.getListCols(),
me.getListColsEnd()
),
defaults: {
flex: 1
}
}
EDIT
If the flex property must be applied only to a subset of columns, one way to achieve this is by applying the array map function on the needed subset:
me.columns = Ext.Array.merge(
me.getListColsStart(),
Ext.Array.map(me.getListCols(), function(listColConfig) {
listColConfig.flex = 1;
return listColConfig;
}),
me.getListColsEnd()
)
I am using ant-design react components to make a dashboard and have used a table component where I can define how the filters and sorters once the data is populated.
If have a requirement where I want to apply default sorting(descending) on ID column and in environment column I want prod to be selected by default(to show only prod alerts by default). Since I can't ask usage question on ant-design website, I wanted to know if someone knows about it and can help me with this. I am open to a different approach if you can share.
function onChange(pagination, filters, sorter) {
console.log('params', pagination, filters, sorter);
let order_by = sorter.field;
if (sorter.order == 'descend'){
order_by = `-${order_by}`;
console.log(order_by);
}
let offset = ((pagination.current - 1) * pagination.pageSize);
let url = `${baseUrl}&offset=${offset}&ordering=${order_by}`;
this.fetchResults(url);
}
output for console.log
>>> params Object { showQuickJumper: true, pageSize: 20, current: 1, total: 301 } Object { env: Array['prod'], incident_type: Array['loadChk'] } Object { }
Use defaultSortOrder like defaultSortOrder: 'descend'
You can pass a default the sortOrder value: This can be ascend, descend or false; that would allow you to set a default sort order.
https://ant.design/components/table/#Column
As far as the default filter goes, you need to set the filteredValue prop as #Panther has mentioned above.
You can use defaultFilteredValue for setting a default filter value. Give the value you want to display as a string array.
Eg:
{
title: 'STATUS',
dataIndex: 'status',
key: 'status',
filters: createFilterArray(status),
defaultFilteredValue : ['Open'],
onFilter: (value, filters) => filters.status.indexOf(value) === 0,
},
For default sort use defaultSortOrder. It can take ascend and descend as values.
I'm using an Angular UI Grid in my app. I set enableFiltering to true in the options which made some filter boxes show up above my columns. This is great, but the filters don't work exactly as desired.
If a cell contains the text "I like pizza" and I type "I like", that cell's row is shown as a match. I would also think that if I type "pizza", the "I like pizza" cell/row should show up, but that's not the case.
How can I get the filters to allow searching anywhere in the text, not just from the beginning?
You can use filter: {condition: uiGridConstants.filter.CONTAINS} in the column definition to allow that column to search anywhere in the text.
Here's a sample column definition with this in place:
columnDefs: [
// default
{ field: 'name',
filter: {condition: uiGridConstants.filter.CONTAINS} },
...
You can pass a custom filter object that takes a condition property, which can be a function that takes searchTerm and cellValue. Will display if the function returns true.
Plunkr
{ field: 'name', filter: {
condition: function(searchTerm, cellValue) {
return cellValue.indexOf(searchTerm) > -1
}
}}