@ackplus/react-tanstack-data-table 1.0.19-beta-0.6 → 1.0.19-beta-0.8

package/src/lib/components/pagination/data-table-pagination.js

@@ -0,0 +1,25 @@
+"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))] }));
+});

package/src/lib/components/pagination/index.d.ts

@@ -0,0 +1 @@
+export * from './data-table-pagination';

package/src/lib/components/pagination/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./data-table-pagination"), exports);

package/src/lib/components/rows/data-table-row.d.ts

@@ -0,0 +1,13 @@
+import { Row } from '@tanstack/react-table';
+import { ReactNode } from 'react';
+export interface DataTableRowProps<T> {
+    row: Row<T>;
+    enableHover?: boolean;
+    enableStripes?: boolean;
+    isOdd?: boolean;
+    renderSubComponent?: (row: Row<T>) => ReactNode;
+    disableStickyHeader?: boolean;
+    slots?: Record<string, any>;
+    slotProps?: Record<string, any>;
+}
+export declare function DataTableRow<T>({ row, enableHover, enableStripes, isOdd, renderSubComponent, disableStickyHeader, slots, slotProps, }: DataTableRowProps<T>): import("react/jsx-runtime").JSX.Element;

package/src/lib/components/rows/data-table-row.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataTableRow = DataTableRow;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_table_1 = require("@tanstack/react-table");
+const utils_1 = require("../../utils");
+const slot_helpers_1 = require("../../utils/slot-helpers");
+function DataTableRow({ row, enableHover = true, enableStripes = false, isOdd = false, renderSubComponent, disableStickyHeader = false, slots, slotProps, }) {
+    const CellSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'cell', material_1.TableCell);
+    const ExpandedRowSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'expandedRow', material_1.TableRow);
+    const TableRowSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'row', material_1.TableRow);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TableRowSlot, { hover: enableHover, sx: {
+                    backgroundColor: enableStripes && isOdd ? 'action.hover' : 'transparent',
+                }, children: row.getVisibleCells().map(cell => {
+                    const isPinned = cell.column.getIsPinned();
+                    const pinnedPosition = isPinned ? cell.column.getStart('left') : undefined;
+                    const pinnedRightPosition = isPinned === 'right' ? cell.column.getAfter('right') : undefined;
+                    const alignment = (0, utils_1.getColumnAlignment)(cell.column.columnDef);
+                    return ((0, jsx_runtime_1.jsx)(CellSlot, Object.assign({ align: alignment, sx: Object.assign({}, (0, utils_1.getPinnedColumnStyle)({
+                            width: cell.column.getSize() || 'auto',
+                            isPinned,
+                            pinnedPosition,
+                            pinnedRightPosition,
+                            zIndex: isPinned ? 9 : 1,
+                            disableStickyHeader,
+                            isLastLeftPinnedColumn: isPinned === 'left' && cell.column.getIsLastColumn('left'),
+                            isFirstRightPinnedColumn: isPinned === 'right' && cell.column.getIsFirstColumn('right'),
+                        })) }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.cell, { children: (0, react_table_1.flexRender)(cell.column.columnDef.cell, cell.getContext()) }), cell.id));
+                }) }), row.getIsExpanded() && renderSubComponent ? ((0, jsx_runtime_1.jsx)(ExpandedRowSlot, { children: (0, jsx_runtime_1.jsx)(CellSlot, { colSpan: row.getVisibleCells().length + 1, sx: { py: 0 }, children: (0, jsx_runtime_1.jsx)(material_1.Collapse, { in: row.getIsExpanded(), timeout: "auto", unmountOnExit: true, children: renderSubComponent(row) }) }) })) : null] }));
+}

package/src/lib/components/rows/empty-data-row.d.ts

@@ -0,0 +1,6 @@
+export declare function EmptyDataRow({ colSpan, message, slots, slotProps }: {
+    colSpan: number;
+    message: string;
+    slots: Record<string, any>;
+    slotProps: Record<string, any>;
+}): import("react/jsx-runtime").JSX.Element;

package/src/lib/components/rows/empty-data-row.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EmptyDataRow = EmptyDataRow;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const slot_helpers_1 = require("../../utils/slot-helpers");
+function EmptyDataRow({ colSpan, message, slots, slotProps }) {
+    const EmptyRowSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'emptyRow', material_1.TableRow);
+    const EmptyCellSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'cell', material_1.TableCell);
+    return ((0, jsx_runtime_1.jsx)(EmptyRowSlot, { children: (0, jsx_runtime_1.jsx)(EmptyCellSlot, Object.assign({ colSpan: colSpan, align: "center", sx: { py: 4 } }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.emptyCell, { children: message })) }));
+}

package/{lib/components/rows/index.js → src/lib/components/rows/index.d.ts}

@@ -1,6 +1,3 @@
-/**
- * Row components for DataTable
- */
 export * from './data-table-row';
 export * from './empty-data-row';
 export * from './loading-rows';

package/src/lib/components/rows/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./data-table-row"), exports);
+tslib_1.__exportStar(require("./empty-data-row"), exports);
+tslib_1.__exportStar(require("./loading-rows"), exports);

package/src/lib/components/rows/loading-rows.d.ts

@@ -0,0 +1,5 @@
+export declare function LoadingRows({ rowCount, slots, slotProps, }: {
+    rowCount?: number;
+    slots?: Record<string, any>;
+    slotProps?: Record<string, any>;
+}): import("react/jsx-runtime").JSX.Element;

package/src/lib/components/rows/loading-rows.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoadingRows = LoadingRows;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const material_2 = require("@mui/material");
+const data_table_context_1 = require("../../contexts/data-table-context");
+const utils_1 = require("../../utils");
+const slot_helpers_1 = require("../../utils/slot-helpers");
+function LoadingRows({ rowCount = 5, slots, slotProps, }) {
+    const { table } = (0, data_table_context_1.useDataTableContext)();
+    const visibleColumns = table.getVisibleLeafColumns();
+    const CellSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'cell', material_1.TableCell);
+    const TableRowSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'row', material_1.TableRow);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Array.from({ length: rowCount }, (_, rowIndex) => ((0, jsx_runtime_1.jsx)(TableRowSlot, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.row, { children: visibleColumns.map((column, colIndex) => {
+                var _a;
+                const isPinned = column.getIsPinned();
+                const pinnedPosition = isPinned ? column.getStart('left') : undefined;
+                const pinnedRightPosition = isPinned === 'right' ? column.getAfter('right') : undefined;
+                const columnMeta = (_a = column.columnDef) === null || _a === void 0 ? void 0 : _a.meta;
+                const isDateColumn = (columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.type) === 'date';
+                const isBooleanColumn = (columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.type) === 'boolean';
+                const isNumberColumn = (columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.type) === 'number';
+                const isSelectionColumn = column.id === 'select';
+                return ((0, jsx_runtime_1.jsx)(CellSlot, Object.assign({ sx: (0, utils_1.getPinnedColumnStyle)({
+                        width: column.getSize() || 'auto',
+                        isPinned,
+                        pinnedPosition,
+                        pinnedRightPosition,
+                        zIndex: isPinned ? 9 : 1,
+                        isLastLeftPinnedColumn: isPinned === 'left' && column.getIsLastColumn('left'),
+                        isFirstRightPinnedColumn: isPinned === 'right' && column.getIsFirstColumn('right'),
+                    }) }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.cell, { children: (() => {
+                        if (isSelectionColumn) {
+                            return ((0, jsx_runtime_1.jsx)(material_2.Skeleton, { variant: "rectangular", width: 20, height: 20 }));
+                        }
+                        if (isBooleanColumn) {
+                            return ((0, jsx_runtime_1.jsx)(material_2.Skeleton, { variant: "circular", width: 20, height: 20 }));
+                        }
+                        if (isDateColumn) {
+                            return ((0, jsx_runtime_1.jsx)(material_2.Skeleton, { variant: "text", width: "80%", height: 20, animation: "wave" }));
+                        }
+                        if (isNumberColumn) {
+                            return ((0, jsx_runtime_1.jsx)(material_2.Skeleton, { variant: "text", width: "60%", height: 20, animation: "wave" }));
+                        }
+                        return ((0, jsx_runtime_1.jsx)(material_2.Skeleton, { variant: "text", width: `${Math.random() * 40 + 60}%`, height: 20, animation: "wave" }));
+                    })() }), `skeleton-${column.id || colIndex}-${rowIndex}`));
+            }) }), `skeleton-row-${rowIndex}`))) }));
+}

package/src/lib/components/table/data-table.d.ts

@@ -0,0 +1,3 @@
+import { DataTableProps } from './data-table.types';
+import { DataTableApi } from '../../types/data-table-api';
+export declare const DataTable: import("react").ForwardRefExoticComponent<DataTableProps<any> & import("react").RefAttributes<DataTableApi<any>>>;