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
}
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}/>
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.
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.
we are using UI GRID to display data and we are using celltemplate in one column to filter data from ID to employee and we have enabled filters for every column.
sampledata:{ID:1 ,salary:3000,Gender:male}
$scope.gridOptions = {
enableFiltering: true,
data:sampledata,
columnDefs: [{Name:Employeetype, Field:ID,
cellTemplate: '<div class="ngCellText"> {{row.entity.ID | ID2EMp}}</div>'}
{Name: salary, field:salary}
{Name:Gender field:Gender}]
}
my filter is something like below:
app.filter('ID2EMp', function() {
return function(text) {
if (text=='1') {
return 'Employee';
}
if (text=='2')
return 'Contractor';
}
});
so now if try to filter grid using UI GRID text filter it wont work if i Type'Employee'/'Contractor' but it will work if i type '1'/'2'..Can anyone please advise how can i make filter work in this situation where i should be able to filter using EMployee keyword.
Also, is there any other way i can manipulate the data to display cell as Employee if ID=1 using filter but not using celltemplate.i have tried with cellfilter but it doesn't seem to work
You can do that in two way. Both with cellTemplate. First use filter like always, {{field | filter }} or use right condition in ng-if statement.
Edit:
First cellTemplate: '<div>{{row.entity.field | filter }} </div>'
where field is field from variable which you pass to ui-grid as data and filter is just filter.
Second: cellTemplate: '<div ng-if="some_condition">{{row.entity.filed}}</div> where field like in first. And some_condition is a condition statement which rows show.
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
}
}}