Client Filtering

Description

CustomDataTable contains a column filter option and this can be enabled/disabled:

• for all columns by using the filterable option in the global props
• for specific columns by the filterable option in the column props
  the filter uses meta.dataType to extract the column type and displays the corresponding filter functions. the default column type is string

Usage 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", filterable: false },
    {
      accessorKey: "lastActive",
      header: "Last Active",
      meta: { dataType: "date" },
    },
    { accessorKey: "score", header: "Score", meta: { dataType: "decimal" } },
  ];
  const options = {
    data: data,
    columns: columns,
    filterable: true,
  };
  return <CustomDataTable options={options}></CustomDataTable>;
}

Result

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