Reputation: 1
Has anyone had a problem with the fact that after applying filters (select) where we choose a row - the subrow disappears and the row is no longer expanded?
I use customFilterFunction ,
{
id: 'name',
accessorFn: (row) => row.name,
header: ({ column }) => (
<DataTableColumnHeader column={column} />
),
cell: ({ row }) => (
<div className="flex" style={{ paddingLeft: `${row.depth * 1.5}rem` }}>
{row.getCanExpand() && (
<button onClick={row.getToggleExpandedHandler()} style={{ cursor: 'pointer' }}>
{row.getIsExpanded() ? <ArrowDownIcon /> : <ArrowRightIcon />}
</button>
)}
<span>{row.original.name}</span>
</div>
),
filterFn: customNameFilter,
},
const table = useReactTable({
data: data,
columns,
enableRowSelection: true,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
getSortedRowModel: getSortedRowModel(),
getFilteredRowModel: getFilteredRowModel(),
onColumnVisibilityChange: setColumnVisibility,
getFacetedUniqueValues: getFacetedUniqueValues(),
getFacetedRowModel: getFacetedRowModel(),
getFacetedMinMaxValues: getFacetedMinMaxValues(),
getSubRows: (row) => row.subItems,
getExpandedRowModel: getExpandedRowModel(),
onExpandedChange: setExpanded,
filterFns: {
fuzzy: customNameFilter,
select: selectFilter,
},
globalFilterFn: customNameFilter,
state: {
pagination,
sorting,
columnFilters,
columnVisibility,
expanded,
},
});
I want subRows not to disappear after applying a filter to the main row
Upvotes: 0
Views: 43