Question: Filter rows with complex data based on Select component
See original GitHub issueHi! thanks for your efforts and this library!
I’m on the middle of implementing it in a project of mine (and doing great with it), but I came to a problem to which I cannot find an answer from de demos:
Imagine you have a table with data like this:
const tableData = [
{name: 'Rafael', age: 10, group: {id: 2, name: 'Developer'}},
{name: 'Alex', age: 20, group: {id: 1, name: 'Admin'}},
...
]
As you can see, the “group” field is of object type, not a scalar. I am trying to add a custom RowFilter like this:
(I am referring to the last column, with a “Unidades” header) In this case, the column shows “Units” information but the rough use case is the same.
I cannot find a way to implement that column filter, because the actions provided (updateFilterRowValue
) only let me change the “value” of the filter but not the comparation function.
example, I can set “value” to {id: 2, name: "Developer"}
, but the ka-table internally doesn’t seem to know how to handle that kind of data.
Something like the “search” function passed in the props would be great, so I can do something like:
function customFilter(cellProps) {
if (cellProps.column.key === 'Group') {
// allows me to return a function that will handle the filter in this scenario,
// but keeping the default filtering system otherwise:
return (filterValue, cellValue) => filterValue.name === cellValue.name
}
}
Is there a way to implement this? I have also found the “extendedFilter” function, but it seems to take only the tableData as parameter, and not the filter value or the column configuration, so it’s kind of hard to use in this case.
Resuming: The use case is having a rowFilter which displays a Select component, and each cell in that column also has a Select component.
The filter might be a Simple select (exact match) or a MultiSelect (pick N items), and each of these cases probably would require specialized filter functions, which I should provide
Issue Analytics
- State:
- Created 3 years ago
- Reactions:3
- Comments:7 (4 by maintainers)
Top GitHub Comments
Hi @barucAlmaguer
6.8.0
has been released please have a look at these two guys: https://komarovalexander.github.io/ka-table/#/filter-row-custom-logic https://komarovalexander.github.io/ka-table/#/sorting-custom-logicBtw, small note regarding objects in data: you can access field using dots in field name: columns:[{ key: ‘group.name’ }] - maybe it could be useful for simple cases with single selection and for sorting as well - it is just FYI, anyway, additional customization abilities will be added