The table filters are not yet the exact same as in the old application. However, it is questionable if all of them should be made the same. For example, the table component offers a fuzzy filter by default, as well as other options - you can also make a dropdown menu for the user to decide which type of filter to use. The old version had custom-programmed filters such as using < or > signs or wildcard operator %.
The default fuzzy filter, however, does not always work great. For example, in References table, with input "curatorial" in the Title filter (which uses journal_title field) the table shows 28 pages of results, and the ones that actually contain "curatorial" are not shown among the first page. This was fixed by setting in the column filterFn: 'contains'. Also, I set an accessorFn to check if the value is null and return empty string instead, because the contains-filter would throw an error in the console for null values.
We need input from product owners & users as to what filters should be implemented. Then just look at the documentation and decide & try which filter fits bets, and write your own custom filter logic if necessary, or put a dropdown menu so the user can decide the filter themselves (shown in the guide).
iritmaximus
commented
1 week ago
The table filters are not yet the exact same as in the old application. However, it is questionable if all of them should be made the same. For example, the table component offers a fuzzy filter by default, as well as other options - you can also make a dropdown menu for the user to decide which type of filter to use. The old version had custom-programmed filters such as using < or > signs or wildcard operator %.
The default fuzzy filter, however, does not always work great. For example, in References table, with input "curatorial" in the Title filter (which uses journal_title field) the table shows 28 pages of results, and the ones that actually contain "curatorial" are not shown among the first page. This was fixed by setting in the column
filterFn: 'contains'. Also, I set anaccessorFnto check if the value is null and return empty string instead, because the contains-filter would throw an error in the console for null values.The material-react-table has a pretty good documentation on column filtering: https://www.material-react-table.com/docs/guides/column-filtering#column-filtering-feature-guide
We need input from product owners & users as to what filters should be implemented. Then just look at the documentation and decide & try which filter fits bets, and write your own custom filter logic if necessary, or put a dropdown menu so the user can decide the filter themselves (shown in the guide).