Server Filtering

Description

filtering data is possible by passing the attribute filter in the initialDataState object

Structure

const initialDataState = {
  filter: [
    {
      id: "score",
      filterFn: "gt",
      value: 10,
    },
  ],
};

this example filters the data by only showing people with score superior than 10

for full documentation, please refer to DataStateFilter

Example

Code

import CustomDataTable from "@components/custom-data-table/CustomDataTable";

function Demo() {
  const data = [
    {
      name: "Bob",
      lastActive: "2018-07-18T10:09:30.662Z",
      score: 10.5,
    },
    {
      name: "Jane",
      lastActive: "2018-07-13T10:09:30.662Z",
      score: 12,
    },
    {
      name: "Fred",
      lastActive: "2018-07-19T10:09:00.662Z",
      score: 9.5,
    },
  ];
  const columns = [
    { accessorKey: "name", header: "Name" },
    {
      accessorKey: "lastActive",
      header: "Last Active",
      meta: { dataType: "date" },
    },
    { accessorKey: "score", header: "Score", meta: { dataType: "decimal" } },
  ];
  const options = {
    data: data,
    columns: columns,
    initialDataState: {
      filter: [
        {
          id: "score",
          filterFn: "gt",
          value: 10,
        },
      ],
    },
  };
  return <CustomDataTable options={options}></CustomDataTable>;
}

Result

Name	Last Active	Score
Bob	18/07/2018	10.5
Jane	13/07/2018	12