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

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

@@ -0,0 +1,42 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * DataTableRow Component
+ *
+ * Renders individual table rows with support for:
+ * - Column pinning
+ * - Row expansion
+ * - Hover effects
+ * - Striped styling
+ */
+import { TableRow, TableCell, Collapse } from '@mui/material';
+import { flexRender } from '@tanstack/react-table';
+import { getPinnedColumnStyle, getColumnAlignment } from '../../utils';
+import { getSlotComponent } from '../../utils/slot-helpers';
+/**
+ * Individual table row component with cell rendering and expansion support
+ */
+export function DataTableRow({ row, enableHover = true, enableStripes = false, isOdd = false, renderSubComponent, disableStickyHeader = false, slots, slotProps, }) {
+    const CellSlot = getSlotComponent(slots, 'cell', TableCell);
+    const ExpandedRowSlot = getSlotComponent(slots, 'expandedRow', TableRow);
+    const TableRowSlot = getSlotComponent(slots, 'row', TableRow);
+    return (_jsxs(_Fragment, { children: [_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 = getColumnAlignment(cell.column.columnDef);
+                    return (_jsx(CellSlot, { align: alignment, sx: {
+                            ...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?.cell, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
+                }) }), row.getIsExpanded() && renderSubComponent ? (_jsx(ExpandedRowSlot, { children: _jsx(CellSlot, { colSpan: row.getVisibleCells().length + 1, sx: { py: 0 }, children: _jsx(Collapse, { in: row.getIsExpanded(), timeout: "auto", unmountOnExit: true, children: renderSubComponent(row) }) }) })) : null] }));
+}

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

@@ -0,0 +1 @@
+{"version":3,"file":"empty-data-row.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/rows/empty-data-row.tsx"],"names":[],"mappings":"AAKA,wBAAgB,YAAY,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAAE,2CAgBpK"}

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TableCell, TableRow } from '@mui/material';
+import { getSlotComponent } from '../../utils/slot-helpers';
+export function EmptyDataRow({ colSpan, message, slots, slotProps }) {
+    const EmptyRowSlot = getSlotComponent(slots, 'emptyRow', TableRow);
+    const EmptyCellSlot = getSlotComponent(slots, 'cell', TableCell);
+    return (_jsx(EmptyRowSlot, { children: _jsx(EmptyCellSlot, { colSpan: colSpan, align: "center", sx: { py: 4 }, ...slotProps?.emptyCell, children: message }) }));
+}

package/lib/components/rows/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/rows/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC"}

package/lib/components/rows/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"loading-rows.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/rows/loading-rows.tsx"],"names":[],"mappings":"AAQA,wBAAgB,WAAW,CAAC,EACxB,QAAY,EACZ,KAAK,EACL,SAAS,GACZ,EAAE;IACC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CACnC,2CA+FA"}

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

@@ -0,0 +1,46 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { TableCell, TableRow } from '@mui/material';
+import { Skeleton } from '@mui/material';
+import { useDataTableContext } from '../../contexts/data-table-context';
+import { getPinnedColumnStyle } from '../../utils';
+import { getSlotComponent } from '../../utils/slot-helpers';
+export function LoadingRows({ rowCount = 5, slots, slotProps, }) {
+    const { table } = useDataTableContext();
+    const visibleColumns = table.getVisibleLeafColumns();
+    const CellSlot = getSlotComponent(slots, 'cell', TableCell);
+    const TableRowSlot = getSlotComponent(slots, 'row', TableRow);
+    return (_jsx(_Fragment, { children: Array.from({ length: rowCount }, (_, rowIndex) => (_jsx(TableRowSlot, { ...slotProps?.row, children: visibleColumns.map((column, colIndex) => {
+                const isPinned = column.getIsPinned();
+                const pinnedPosition = isPinned ? column.getStart('left') : undefined;
+                const pinnedRightPosition = isPinned === 'right' ? column.getAfter('right') : undefined;
+                // Determine skeleton type based on column meta or content
+                const columnMeta = column.columnDef?.meta;
+                const isDateColumn = columnMeta?.type === 'date';
+                const isBooleanColumn = columnMeta?.type === 'boolean';
+                const isNumberColumn = columnMeta?.type === 'number';
+                const isSelectionColumn = column.id === 'select';
+                return (_jsx(CellSlot, { sx: 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?.cell, children: (() => {
+                        if (isSelectionColumn) {
+                            return (_jsx(Skeleton, { variant: "rectangular", width: 20, height: 20 }));
+                        }
+                        if (isBooleanColumn) {
+                            return (_jsx(Skeleton, { variant: "circular", width: 20, height: 20 }));
+                        }
+                        if (isDateColumn) {
+                            return (_jsx(Skeleton, { variant: "text", width: "80%", height: 20, animation: "wave" }));
+                        }
+                        if (isNumberColumn) {
+                            return (_jsx(Skeleton, { variant: "text", width: "60%", height: 20, animation: "wave" }));
+                        }
+                        return (_jsx(Skeleton, { variant: "text", width: `${Math.random() * 40 + 60}%`, height: 20, animation: "wave" }));
+                    })() }, `skeleton-${column.id || colIndex}-${rowIndex}`));
+            }) }, `skeleton-row-${rowIndex}`))) }));
+}

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/table/data-table.tsx"],"names":[],"mappings":"AA2CA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AA+B1D;;GAEG;AACH,eAAO,MAAM,SAAS,mHAw5BpB,CAAC"}