@ackplus/react-tanstack-data-table/src/lib/components/pagination/data-table-pagination.js

A powerful React data table component built with MUI and TanStack Table

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DataTablePagination = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const material_1 = require("@mui/material");
const react_1 = require("react");
const data_table_context_1 = require("../../contexts/data-table-context");
exports.DataTablePagination = (0, react_1.memo)((_a) => {
    var { footerFilter = null, pagination, totalRow } = _a, props = tslib_1.__rest(_a, ["footerFilter", "pagination", "totalRow"]);
    const { table } = (0, data_table_context_1.useDataTableContext)();
    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
            display: 'flex',
            alignItems: 'center',
            gap: 1,
            justifyContent: 'space-between',
            px: 2,
        }, children: [footerFilter, (0, jsx_runtime_1.jsx)(material_1.TablePagination, Object.assign({ component: "div", count: totalRow, rowsPerPage: pagination === null || pagination === void 0 ? void 0 : pagination.pageSize, page: pagination === null || pagination === void 0 ? void 0 : pagination.pageIndex, onPageChange: (_, page) => {
                    table.setPageIndex(page);
                }, onRowsPerPageChange: e => {
                    const newPageSize = Number(e.target.value);
                    table.setPageIndex(0);
                    table.setPageSize(newPageSize);
                }, showFirstButton: true, showLastButton: true, labelRowsPerPage: "Rows per page:", labelDisplayedRows: ({ from, to, count }) => `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}` }, props))] }));
});