Pagination

Description

Data can be displayed per page using top and skip option of initialDataState object and pageable option.

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,
    },
    {
      name: "Alex",
      lastActive: "2018-07-17T10:09:00.662Z",
      score: 8.5,
    },
    {
      name: "Alen",
      lastActive: "2018-07-15T10:09:00.662Z",
      score: 14.5,
    },
    {
      name: "Chris",
      lastActive: "2018-07-14T10:09:00.662Z",
      score: 7.5,
    },
    {
      name: "Emma",
      lastActive: "2018-07-21T10:09:00.662Z",
      score: 13.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,
    pageable: true,
    initialDataState: {
      top: 5,
      skip: 0,
    },
  };
  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
Alex	17/07/2018	8.5
Alen	15/07/2018	14.5

1 - 5 of 7 items