How do you get the filter type (equals, greaterThan, etc)

[joey-kwl]

I'm using server-side filtering and I can't figure out on how to get the filter type fo my dueDate column. I can only see the values of the filter inside columnFilters, but not the type.

const columns = useMemo(() => [
	{
		accessorKey: "id",
		header: "ID",
		enableColumnFilterModes: false,
		size: 10
	},
	{
		accessorKey: "dueDate",
		header: "date",
		Cell: ({ cell }) => cell.getValue().toLocaleDateString("nl-NL"),
		accessorFn: (row) => new Date(row.dueDate),
		Filter: ({ column }) => <DateFilter column={column} />,
		columnFilterModeOptions: ["greaterThan", "between", "lessThan", "equals"]
	},
])

table:

const [columnFilters, setColumnFilters] = useState([]);

<MaterialReactTable
	columns={columns}
	data={rows}
	muiTableBodyRowProps={({ row }) => ({
		onClick: () => { navigate(`/issues/${row.original.id}`) },
		sx: { cursor: "pointer" },
	})}
	manualFiltering
	enableRowSelection
	enableColumnOrdering
	enableColumnFilterModes
	getRowId={(row) => row.id}
	onRowSelectionChange={setRowSelection}
	state={{ rowSelection, columnFilters }}
	initialState={{
		columnVisibility: {
			type: false
		},
		density: "compact",
	}}
	onColumnFiltersChange={setColumnFilters}
	renderToolbarInternalActions={
		({ table }) => <ToolBar table={table} selection={rowSelection} />
	}
/>

[KevinVandy]

Here is all of the states you can manage and read: https://www.material-react-table.com/docs/api/state-options

That includes columnFilterFns

[jorgemoralespou]

is it possible that you post your solved solution to this problem? I'm stuck in similar problem, and can't figure out what to do form docs.

[joey-kwl]

I did something like this:

const locale = table?.options.localization
let filterName = "Unknown"

if (table?.getState().columnFilterFns && column.id && locale) {
  const colFns = table?.getState().columnFilterFns[column.id]
  const localeKeyName = `filter${colFns ? colFns[0].toUpperCase() + colFns.slice(1) : ""}`;
  
  filterName = locale[localeKeyName as keyof MRT_Localization] || localeKeyName
}

And because I have few custom filters I added this to the table:

localization: {
  filterEqualsFn: "Equals",
  filterBeforeFn: "Before",
  filterAfterFn: "After",
  filterExactFn: "Exact"
}

[KevinVandy]

I was thinking something way simpler, akin to the Remote Example.

In the same way you "manage" these states, you can also just manage the columnFilterFns state.

[KevinVandy]

      onColumnFiltersChange={setColumnFilters}
      onColumnFilterFnsChange={setColumnFilterFns}
      onGlobalFilterChange={setGlobalFilter}
      onPaginationChange={setPagination}
      onSortingChange={setSorting}
      rowCount={rowCount}
      state={{
        columnFilters,
        columnFilterFns,
        globalFilter,
        isLoading,
        pagination,
        showAlertBanner: isError,
        showProgressBars: isRefetching,
        sorting,
      }}

[joey-kwl]

I did use columnFilterFns and onColumnFilterFnsChange={setColumnFilterFns} , but for the custom filters I couldn't get the name correct. It would show up as Filter: filterAfterFn instead of Filter: After.

That is why I have that hacky way to parse the name from the localization