Pagination

To add pages, import the Pager component and specify values of the required attributes:

• total - the number of all data rows to be displayed
• pageSize - the number of rows per page
• value - the current page (starting from 1); set to 1 by default

import { useState, useEffect } from "react";
import { Pager } from "@svar-ui/react-core";
import { Grid } from "@svar-ui/react-grid";
import { getData } from "./common/data";

const { allData, columns } = getData();

export default function Example() {
  const [data, setData] = useState([]);

  function setPage(ev) {
    const { from, to } = ev;
    setData(allData(from, to));
  }

  useEffect(() => {
    setPage({ from: 0, to: 8 });
  }, []);

  return (
    <>
      <Pager total={allData.length} pageSize={8} onChange={setPage} />
      <Grid data={data} columns={columns} />
    </>
  );
}

Notes:

• The Pager component invokes the onChange handler with an object { from, to }.
• total, pageSize and value props keep the same semantics as in the original API; the event handler prop is mapped to React's camelCase onChange.