@rtdui/datatable/esm/DataTable/TablePagination.mjs

React DataTable component based on Rtdui components

'use client';
import { jsxs, jsx } from 'react/jsx-runtime';
import React from 'react';
import { Pagination, TextInput, Select } from '@rtdui/core';

function TablePagination(props) {
  const { table } = props;
  const [page, setPage] = React.useState(1);
  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 my-4 md:flex-row md:items-center", children: [
    /* @__PURE__ */ jsx(
      Pagination,
      {
        count: table.getPageCount(),
        size: "sm",
        page,
        showFirstButton: false,
        showPrevButton: false,
        showNextButton: false,
        showLastButton: false,
        onChange: (page2) => {
          setPage(page2);
          table.setPageIndex(page2 - 1);
        }
      }
    ),
    /* @__PURE__ */ jsx("div", { className: "divider divider-horizontal mx-0" }),
    /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
      "Go to page:",
      /* @__PURE__ */ jsx(
        TextInput,
        {
          type: "number",
          min: 1,
          max: table.getPageCount(),
          defaultValue: table.getState().pagination.pageIndex + 1,
          onChange: (e) => {
            const page2 = e.target.value ? Number(e.target.value) - 1 : 0;
            setPage(page2 + 1);
            table.setPageIndex(page2);
          }
        }
      )
    ] }),
    /* @__PURE__ */ jsx("div", { className: "divider divider-horizontal mx-0" }),
    /* @__PURE__ */ jsx(
      Select,
      {
        value: table.getState().pagination.pageSize.toString(),
        onChange: (val) => {
          table.setPageSize(Number(val));
        },
        className: "w-20",
        data: ["10", "20", "30", "40", "50"]
      }
    )
  ] });
}

export { TablePagination };
//# sourceMappingURL=TablePagination.mjs.map