Mantine DataTable

'use client';

import { DataTable } from 'mantine-datatable';
import dayjs from 'dayjs';
import { useEffect, useState } from 'react';
import employees from '~/data/employees.json';

const PAGE_SIZE = 15;

export default function PaginationExample() {
  const [page, setPage] = useState(1);
  const [records, setRecords] = useState(employees.slice(0, PAGE_SIZE));

  useEffect(() => {
    const from = (page - 1) * PAGE_SIZE;
    const to = from + PAGE_SIZE;
    // eslint-disable-next-line react-hooks/set-state-in-effect
    setRecords(employees.slice(from, to));
  }, [page]);

  return (
    <DataTable
      height={300}
      withTableBorder
      records={records}
      columns={[
        { accessor: 'firstName', width: 100 },
        { accessor: 'lastName', width: 100 },
        { accessor: 'email', width: '100%' },
        {
          accessor: 'birthDate',
          textAlign: 'right',
          width: 120,
          render: ({ birthDate }) => dayjs(birthDate).format('MMM D YYYY'),
        },
      ]}
      totalRecords={employees.length}
      recordsPerPage={PAGE_SIZE}
      page={page}
      onPageChange={(p) => setPage(p)}
      // 👇 uncomment the next line to use a custom pagination size
      // paginationSize="md"
      // 👇 uncomment the next line to use a custom loading text
      // loadingText="Loading..."
      // 👇 uncomment the next line to display a custom text when no records were found
      // noRecordsText="No records found"
      // 👇 uncomment the next line to use a custom pagination text
      // paginationText={({ from, to, totalRecords }) => `Records ${from} - ${to} of ${totalRecords}`}
      // 👇 uncomment the next lines to use custom pagination colors
      // paginationActiveBackgroundColor="green"
      // paginationActiveTextColor="#e6e348"
    />
  );
}

'use client';

import { DataTable } from 'mantine-datatable';
import dayjs from 'dayjs';
import { useEffect, useState } from 'react';
import employees from '~/data/employees.json';

const PAGE_SIZES = [10, 15, 20];

export default function PaginationExampleWithPageSizeSelector() {
  const [pageSize, setPageSize] = useState(PAGE_SIZES[1]);
  const [page, setPage] = useState(1);
  const [records, setRecords] = useState(employees.slice(0, pageSize));

  useEffect(() => {
    // eslint-disable-next-line react-hooks/set-state-in-effect
    setPage(1);
  }, [pageSize]);

  useEffect(() => {
    const from = (page - 1) * pageSize;
    const to = from + pageSize;
    // eslint-disable-next-line react-hooks/set-state-in-effect
    setRecords(employees.slice(from, to));
  }, [page, pageSize]);

  return (
    <DataTable
      withTableBorder
      records={records}
      columns={[
        { accessor: 'firstName', width: 100 },
        { accessor: 'lastName', width: 100 },
        { accessor: 'email', width: '100%' },
        {
          accessor: 'birthDate',
          textAlign: 'right',
          width: 120,
          render: ({ birthDate }) => dayjs(birthDate).format('MMM D YYYY'),
        },
      ]}
      totalRecords={employees.length}
      paginationActiveBackgroundColor="grape"
      recordsPerPage={pageSize}
      page={page}
      onPageChange={(p) => setPage(p)}
      recordsPerPageOptions={PAGE_SIZES}
      onRecordsPerPageChange={setPageSize}
    />
  );
}

<DataTable
  // other props...
  // 👇 custom "Jump to page" control using renderPagination callback
  renderPagination={({ state, actions, Controls }) => (
    <>
      <Controls.Text />
      <Controls.PageSizeSelector />
      <Group gap="xs">
        <Text size={state.paginationSize}>Jump to page</Text>
        <NumberInput
          // 👇 custom input height to match pagination button height
          styles={{ wrapper: { '--input-height-sm': '26px' } }}
          hideControls
          w={80}
          size={state.paginationSize}
          onChange={(p) => typeof p === 'number' && actions.setPage(p)}
          min={1}
          max={max}
          value={page}
        />
      </Group>
      <Controls.Pagination />
    </>
  )}
/>

<DataTable
  // other props...
  getPaginationControlProps={(control) => {
    if (control === 'previous') {
      const title = 'Go to previous page';
      return { title, 'aria-label': title };
    } else if (control === 'next') {
      const title = 'Go to next page';
      return { title, 'aria-label': title };
    }
    return {};
  }}
/>