@rtdui/datatable/cjs/DataTable/TablePagination.cjs

React DataTable component based on Rtdui components

'use client';
'use strict';

var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var core = require('@rtdui/core');

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

exports.TablePagination = TablePagination;
//# sourceMappingURL=TablePagination.cjs.map