Overview

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

Description

this component allows to show an array in a data table view
it uses DataTable of Tag Component and supports filtering and displays the data count

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

Props

Name	Type	Description
data	Array	The data that drives the table content
url	string	The url used to get remote data
columns	Array<Column>(see column props below )	The column definitions
initialDataState	DataState	the state to be applied on data
pageable	boolean	enable/disable pagination
filterable	boolean	enable/disable filtering for all columns
sortable	boolean	enable/disable column sorting
sticky	left,right	if left then first column will be sticky else the last column will be sticky
tableProps	Object	contains DataTable Props (see DataTable Tag Props)

Column Props

All the column options from DataTable Tag are available, in addition to the following:

Name	Type	Description
filterable	boolean	enable/disable column filtering
customColumnFilter	CustomColumnFilter	used to display column filter based on list options