Function Pagination

export default function Pagination({ table }: { table: Table<Product> }) {
  return (
    <div className="flex items-center gap-2">
      <span className="flex items-center gap-1">
        <IconButton
          size="small"
          className={`border rounded p-1 ${styles['pagination-button']}`}
          onClick={() => table.setPageIndex(0)}
          disabled={!table.getCanPreviousPage()}
        >
          <KeyboardDoubleArrowLeftIcon fontSize="small" />
        </IconButton>
        <IconButton
          size="small"
          className={styles['pagination-button']}
          onClick={() => table.previousPage()}
          disabled={!table.getCanPreviousPage()}
        >
          <KeyboardArrowLeftIcon fontSize="small" />
        </IconButton>
        <input
          type="number"
          min="1"
          max={table.getPageCount()}
          defaultValue={table.getState().pagination.pageIndex + 1}
          onChange={(e) => {
            const page = e.target.value ? Number(e.target.value) - 1 : 0;
            table.setPageIndex(page);
          }}
          className={`border p-1 rounded w-16 ${styles['pagination-button']}`}
        />
      </span>
      <select
        value={table.getState().pagination.pageSize}
        onChange={(e) => {
          table.setPageSize(Number(e.target.value));
        }}
      >
        {[10, 20, 30, 40, 50].map((pageSize) => (
          <option key={pageSize} value={pageSize}>
            Show {pageSize}
          </option>
        ))}
      </select>
      <IconButton
        size="small"
        className={styles['pagination-button']}
        onClick={() => table.nextPage()}
        disabled={!table.getCanNextPage()}
      >
        <KeyboardArrowRightIcon fontSize="small" />
      </IconButton>
      <IconButton
        size="small"
        className={`border rounded p-1 ${styles['pagination-button']}`}
        onClick={() => table.setPageIndex(table.getPageCount() - 1)}
        disabled={!table.getCanNextPage()}
      >
        <KeyboardDoubleArrowRightIcon fontSize="small" />
      </IconButton>
    </div>
  );
}
Copy