chakra-paginated-table/dist/PaginatedTable.js

**Chakra Paginated Table** is a customizable and feature-rich table component built with Chakra UI, inspired by the pagination functionality of Ant Design (antd). It allows you to easily render a paginated table by providing data and column configurations

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = require("react");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_2 = require("@chakra-ui/react");
const react_3 = require("react");
const Pagination_1 = __importDefault(require("./Pagination"));
/**@description - Renders a chakra table with features such as pagination
 * and dynamic data input.
 * @example <PaginatedTable<Record<string,string> dataSource={[]} columns={[]} rowKey={(record)=>record.id} />
 */
function PaginatedTable({ dataSource, columns, rowKey, pagination, containerProps = {}, TBodyProps: tBodyProps = {}, THeadProps: tHeadProps = {}, TableProps: tableProps = {}, TrProps: TrProps = {}, ThProps = {}, }) {
    const [dataToShow, setDataToShow] = (0, react_3.useState)([]);
    (0, react_3.useEffect)(() => {
        if (pagination) {
            const { page, pageSize } = pagination;
            const upperBoundary = page * pageSize;
            const lowerBoundary = page * pageSize - pageSize;
            setDataToShow(pagination
                ? dataSource.filter((_, dataKey) => dataKey < upperBoundary && dataKey >= lowerBoundary)
                : dataSource);
        }
        else {
            setDataToShow(dataSource);
        }
    }, [pagination, dataSource]);
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [pagination &&
                pagination.position &&
                !["bottomLeft", "bottomRight"].includes(pagination.position) && ((0, jsx_runtime_1.jsx)(Pagination_1.default, { paginationData: pagination })), pagination && !pagination.position && ((0, jsx_runtime_1.jsx)(Pagination_1.default, { paginationData: pagination })), (0, jsx_runtime_1.jsx)(react_2.TableContainer, { ...containerProps, children: (0, jsx_runtime_1.jsxs)(react_2.Table, { ...tableProps, children: [(0, jsx_runtime_1.jsx)(react_2.Thead, { ...tHeadProps, children: (0, jsx_runtime_1.jsx)(react_2.Tr, { children: columns.map((eachCol) => ((0, react_1.createElement)(react_2.Th, { ...ThProps, key: eachCol.key }, eachCol.title))) }) }), (0, jsx_runtime_1.jsx)(react_2.Tbody, { ...tBodyProps, children: dataToShow.map((eachRecord, recordIndex) => {
                                return ((0, jsx_runtime_1.jsx)(react_2.Tr, { ...(typeof TrProps === "function"
                                        ? TrProps(eachRecord, recordIndex)
                                        : TrProps), children: columns.map((eachCol, colIndex) => {
                                        const tdValue = eachCol.dataKey && eachRecord[eachCol.dataKey];
                                        const cellRender = typeof eachCol["dataKey"] != "undefined"
                                            ? eachCol.render?.(tdValue, eachRecord, recordIndex)
                                            : eachCol.render?.(eachRecord, recordIndex);
                                        return ((0, jsx_runtime_1.jsx)(react_2.Td, { onClick: () => eachCol.onClick?.(eachRecord, recordIndex), children: cellRender ??
                                                (typeof tdValue === "object" ? "[Object]" : tdValue) }, colIndex));
                                    }) }, rowKey(eachRecord, recordIndex)));
                            }) })] }) }), pagination &&
                pagination.position &&
                ["bottomRight", "bottomLeft"].includes(pagination.position) && ((0, jsx_runtime_1.jsx)(Pagination_1.default, { paginationData: pagination }))] }));
}
exports.default = PaginatedTable;