Pagination

pagination={{
  showInfo: true,
}}

pagination={{
  showButtons: true,
}}

pagination={{
  className: 'custom-pagination',
}}

pagination={{
  classes: {
    labelShort: 'text-sm font-medium',
    labelLong: 'text-sm text-muted-foreground',
  },
}}

<ActiveGrid
  mode="client"
  data={allData} // All rows
  columns={columns}
  pagination={{
    enabled: true,
    pageSizeOptions: [10, 20, 50],
  }}
  initialPageSize={20}
  {...}
/>

<ActiveGrid
  mode="server"
  fetchFn={async (params) => {
    // params.pageIndex: Current page (0-based)
    // params.pageSize: Rows per page

    const response = await api.getUsers({
      page: params.pageIndex + 1, // Convert to 1-based if needed
      limit: params.pageSize,
    });

    return {
      data: response.data,
      totalCount: response.total, // Required for pagination
    };
  }}
  pagination={{
    enabled: true,
  }}
  initialPageSize={20}
  {...}
/>

import {useActiveGrid} from '@workspace/active-grid';

function MyComponent() {
  const table = useActiveGrid();

  // Navigate pages
  const goToFirstPage = () => table.setPageIndex(0);
  const goToLastPage = () => table.setPageIndex(table.getPageCount() - 1);
  const nextPage = () => table.nextPage();
  const previousPage = () => table.previousPage();

  // Change page size
  const changePageSize = (size: number) => {
    table.setPageSize(size);
  };

  // Get pagination info
  const pageIndex = table.getState().pagination.pageIndex;
  const pageSize = table.getState().pagination.pageSize;
  const pageCount = table.getPageCount();
  const canNextPage = table.getCanNextPage();
  const canPrevPage = table.getCanPreviousPage();
}

import { useState } from 'react';
import { PaginationState } from '@tanstack/react-table';

function MyComponent() {
  const [pagination, setPagination] = useState<PaginationState>({
    pageIndex: 0,
    pageSize: 20,
  });

  return (
    <ActiveGrid
      columns={columns}
      data={data}
      state={{ pagination }}
      onPaginationChange={setPagination}
      pagination={{ enabled: true }}
      {...}
    />
  );
}

import { useActiveGrid } from '@workspace/active-grid';

function CustomPagination() {
  const table = useActiveGrid();
  const { pageIndex, pageSize } = table.getState().pagination;

  return (
    <div className="flex items-center gap-4">
      <Button
        onClick={() => table.previousPage()}
        disabled={!table.getCanPreviousPage()}
      >
        Previous
      </Button>

      <span>
        Page {pageIndex + 1} of {table.getPageCount()}
      </span>

      <Button
        onClick={() => table.nextPage()}
        disabled={!table.getCanNextPage()}
      >
        Next
      </Button>

      <select
        value={pageSize}
        onChange={(e) => table.setPageSize(Number(e.target.value))}
      >
        {[10, 20, 50, 100].map(size => (
          <option key={size} value={size}>
            Show {size}
          </option>
        ))}
      </select>
    </div>
  );
}

<ActiveGrid
  columns={columns}
  data={data}
  pagination={{ enabled: true }}
  {...}
/>

<ActiveGrid
  columns={columns}
  data={data}
  initialPageSize={25}
  pagination={{
    enabled: true,
    pageSizeOptions: [10, 25, 50, 100, 250],
  }}
  {...}
/>

<ActiveGrid
  columns={columns}
  data={data}
  pagination={{
    enabled: true,
    position: 'top',
  }}
  {...}
/>

<ActiveGrid
  columns={columns}
  data={data}
  pagination={{
    enabled: true,
    showPageSize: false,
    showInfo: false,
  }}
  {...}
/>

<ActiveGrid
  columns={columns}
  data={data}
  pagination={{
    enabled: true,
    className: 'border-t bg-muted/50 p-4',
    classes: {
      labelShort: 'text-xs font-bold',
      labelLong: 'text-xs text-muted-foreground',
    },
  }}
  {...}
/>

<ActiveGrid
  columns={columns}
  data={data}
  pagination={{ enabled: false }}
  {...}
/>

import { PaginationState } from '@tanstack/react-table';

type User = {
  id: string;
  name: string;
};

const [pagination, setPagination] = useState<PaginationState>({
  pageIndex: 0,
  pageSize: 20,
});

<ActiveGrid<User>
  columns={columns}
  data={users}
  state={{ pagination }}
  onPaginationChange={setPagination}
  pagination={{
    enabled: true,
    pageSizeOptions: [10, 20, 50],
  }}
  {...}
/>