@ackplus/react-tanstack-data-table 1.0.35 → 1.1.3

package/src/lib/components/headers/table-header.tsx

@@ -0,0 +1,173 @@
+/**
+ * TableHeader Component
+ *
+ * Unified header component that combines:
+ * - Sortable functionality
+ * - Draggable column reordering
+ * - Column resizing
+ * - Pinning support
+ */
+import React, { ReactElement } from 'react';
+import { TableHead, TableRow, TableCell, Box, useTheme, TableHeadProps, TableRowProps, TableCellProps, SxProps } from '@mui/material';
+import { Header } from '@tanstack/react-table';
+
+import { DraggableHeader } from './draggable-header';
+import { useDataTableContext } from '../../contexts/data-table-context';
+import { getPinnedColumnStyle, getColumnAlignment } from '../../utils';
+import { getSlotComponent, mergeSlotProps, extractSlotProps } from '../../utils/slot-helpers';
+
+export interface TableHeaderProps extends TableHeadProps {
+    draggable?: boolean;
+    enableColumnResizing?: boolean;
+    enableStickyHeader?: boolean;
+    fitToScreen?: boolean;
+    onColumnReorder?: (draggedColumnId: string, targetColumnId: string) => void;
+    // Enhanced customization props
+    headerRowProps?: TableRowProps;
+    headerCellProps?: TableCellProps;
+    containerSx?: SxProps;
+    resizeHandleSx?: SxProps;
+    slots?: Record<string, any>;
+    slotProps?: Record<string, any>;
+    [key: string]: any;
+}
+
+/**
+ * Renders table headers with sorting, dragging, and resizing capabilities
+ */
+export function TableHeader<T>(props: TableHeaderProps): ReactElement {
+    const {
+        draggable = false,
+        enableColumnResizing = false,
+        enableStickyHeader = false,
+        fitToScreen = true,
+        onColumnReorder,
+        headerRowProps,
+        headerCellProps,
+        containerSx,
+        resizeHandleSx,
+        slots,
+        slotProps,
+        ...otherProps
+    } = props;
+
+    const theme = useTheme();
+    const { table } = useDataTableContext();
+
+    // Extract slot-specific props with enhanced merging
+    const headerCellSlotProps = extractSlotProps(slotProps, 'headerCell');
+    const headerRowSlotProps = extractSlotProps(slotProps, 'headerRow');
+    const headerSlotProps = extractSlotProps(slotProps, 'header');
+
+    const HeaderCellSlot = getSlotComponent(slots, 'headerCell', TableCell);
+    const HeaderRowSlot = getSlotComponent(slots, 'headerRow', TableRow);
+    const HeaderSlot = getSlotComponent(slots, 'header', TableHead);
+
+    // Merge all props for maximum flexibility
+    const mergedHeaderProps = mergeSlotProps(
+        {
+            sx: containerSx,
+        },
+        headerSlotProps,
+        otherProps
+    );
+
+    const mergedHeaderRowProps = mergeSlotProps(
+        {},
+        headerRowSlotProps,
+        headerRowProps || {}
+    );
+
+    const renderHeaderCell = (header: Header<T, unknown>) => {
+        const isPinned = header.column.getIsPinned();
+        const pinnedPosition = isPinned ? header.column.getStart('left') : undefined;
+        const pinnedRightPosition = isPinned === 'right' ? header.column.getAfter('right') : undefined;
+        const alignment = getColumnAlignment(header.column.columnDef);
+        const enableSorting = header.column.getCanSort();
+        const wrapText = header.column.columnDef.wrapText ?? false;
+        const canResize = enableColumnResizing && header.column.getCanResize();
+
+        const mergedHeaderCellProps = mergeSlotProps(
+            {
+                align: alignment,
+                sx: {
+                    ...getPinnedColumnStyle({
+                        width: (fitToScreen && !enableColumnResizing) ? 'auto' : header.getSize(),
+                        isPinned,
+                        pinnedPosition,
+                        isLastLeftPinnedColumn: isPinned === 'left' && header.column.getIsLastColumn('left'),
+                        isFirstRightPinnedColumn: isPinned === 'right' && header.column.getIsFirstColumn('right'),
+                        pinnedRightPosition,
+                        zIndex: isPinned ? 10 : 1,
+                        disableStickyHeader: enableStickyHeader,
+                        wrapText,
+                    }),
+                },
+            },
+            headerCellSlotProps,
+            headerCellProps || {}
+        );
+
+        const mergedResizeHandleProps = mergeSlotProps(
+            {
+                onMouseDown: header.getResizeHandler(),
+                onTouchStart: header.getResizeHandler(),
+                sx: {
+                    position: 'absolute',
+                    right: 0,
+                    top: '25%',
+                    height: '50%',
+                    width: '3px',
+                    cursor: 'col-resize',
+                    userSelect: 'none',
+                    touchAction: 'none',
+                    borderRadius: '4px',
+                    backgroundColor: header.column.getIsResizing() ? 'primary.main' : theme.palette.grey[300],
+                    '&:hover': {
+                        backgroundColor: theme.palette.primary.main,
+                    },
+                    ...resizeHandleSx,
+                },
+            }
+        );
+
+        return (
+            <HeaderCellSlot
+                key={header.id}
+                {...mergedHeaderCellProps}
+            >
+                <DraggableHeader
+                    header={header}
+                    enableSorting={enableSorting}
+                    draggable={!!(draggable && !isPinned)}
+                    onColumnReorder={onColumnReorder}
+                    slots={slots}
+                    slotProps={slotProps}
+                    alignment={alignment}
+                />
+
+                {/* Column resizer */}
+                {canResize ? (
+                    <Box
+                        {...mergedResizeHandleProps}
+                    />
+                ) : null}
+            </HeaderCellSlot>
+        );
+    };
+
+    return (
+        <HeaderSlot
+            {...mergedHeaderProps}
+        >
+            {table.getHeaderGroups().map(headerGroup => (
+                <HeaderRowSlot
+                    key={headerGroup.id}
+                    {...mergedHeaderRowProps}
+                >
+                    {headerGroup.headers.map(renderHeaderCell)}
+                </HeaderRowSlot>
+            ))}
+        </HeaderSlot>
+    );
+}

package/src/lib/components/index.ts

@@ -0,0 +1,21 @@
+/**
+ * DataTable Components
+ *
+ * Organized component exports for the MUI TanStack DataTable
+ */
+// Header components
+export * from './headers';
+
+// Row components
+export * from './rows';
+
+// Toolbar components
+export * from './toolbar';
+
+// Filter components
+export * from './filters';
+
+
+// Pagination components
+export * from './pagination';
+export * from './droupdown/menu-dropdown';

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

@@ -0,0 +1,99 @@
+// data-table-pagination.tsx
+import { TablePagination, Box, TablePaginationProps, SxProps } from '@mui/material';
+import { memo, ReactNode } from 'react';
+
+import { useDataTableContext } from '../../contexts/data-table-context';
+import { mergeSlotProps } from '../../utils/slot-helpers';
+
+export interface DataTablePaginationProps extends Omit<TablePaginationProps, 'count' | 'rowsPerPage' | 'page' | 'onPageChange' | 'onRowsPerPageChange'> {
+    totalRow: number;
+    footerFilter?: ReactNode | null;
+    pagination: {
+        pageIndex: number;
+        pageSize: number;
+    };
+    // Enhanced customization props
+    containerSx?: SxProps;
+    paginationProps?: TablePaginationProps;
+    footerSx?: SxProps;
+    slots?: Record<string, any>;
+    slotProps?: Record<string, any>;
+    [key: string]: any;
+}
+
+export const DataTablePagination = memo((props: DataTablePaginationProps) => {
+    const {
+        footerFilter = null,
+        pagination,
+        totalRow,
+        containerSx,
+        paginationProps,
+        footerSx,
+        ...otherProps
+    } = props;
+
+    const { table, tableSize } = useDataTableContext();
+
+    // Extract slot-specific props with enhanced merging
+    // const paginationSlotProps = extractSlotProps(slotProps, 'pagination');
+
+    // Merge all props for maximum flexibility
+    const mergedContainerProps = mergeSlotProps(
+        {
+            sx: {
+                display: 'flex',
+                alignItems: 'center',
+                gap: 1,
+                justifyContent: 'space-between',
+                px: 2,
+                ...containerSx,
+            },
+        }
+    );
+
+
+
+    const mergedPaginationProps: any = mergeSlotProps(
+        {
+            component: 'div',
+            size: tableSize === 'small' ? 'small' : 'medium',
+            count: totalRow,
+            rowsPerPage: pagination?.pageSize,
+            page: pagination?.pageIndex,
+            onPageChange: (_, page: number) => {
+                // Use TanStack Table's native pagination methods
+                table.setPageIndex(page);
+            },
+            onRowsPerPageChange: (e: React.ChangeEvent<HTMLInputElement>) => {
+                const newPageSize = Number(e.target.value);
+                // Use TanStack Table's native pagination methods
+                table.setPageIndex(0);
+                table.setPageSize(newPageSize);
+            },
+            showFirstButton: true,
+            showLastButton: true,
+            labelRowsPerPage: 'Rows per page:',
+            labelDisplayedRows: ({ from, to, count }: { from: number; to: number; count: number }) =>
+                `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`,
+        },
+        { ...paginationProps, ...otherProps }
+    );
+
+    return (
+        <Box
+            {...mergedContainerProps}
+        >
+            {footerFilter && (
+                <Box sx={footerSx}>
+                    {footerFilter as any}
+                </Box>
+            )}
+
+            <TablePagination
+                {...mergedPaginationProps}
+            />
+        </Box>
+    );
+});
+
+DataTablePagination.displayName = 'DataTablePagination';

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

@@ -0,0 +1,5 @@
+/**
+ * Pagination components for DataTable
+ */
+
+export * from './data-table-pagination';

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

@@ -0,0 +1,208 @@
+/**
+ * DataTableRow Component
+ *
+ * Renders individual table rows with support for:
+ * - Column pinning
+ * - Row expansion
+ * - Hover effects
+ * - Striped styling
+ */
+import { TableRow, TableCell, Collapse, TableRowProps, TableCellProps, SxProps, tableRowClasses } from '@mui/material';
+import { flexRender, Row } from '@tanstack/react-table';
+import { ReactNode, ReactElement } from 'react';
+
+import { getPinnedColumnStyle, getColumnAlignment } from '../../utils';
+import { getSlotComponent, mergeSlotProps, extractSlotProps } from '../../utils/slot-helpers';
+import { useDataTableContext } from '../../contexts/data-table-context';
+
+export interface DataTableRowProps<T> extends TableRowProps {
+    row: Row<T>;
+    enableHover?: boolean;
+    enableStripes?: boolean;
+    isOdd?: boolean;
+    renderSubComponent?: (row: Row<T>) => ReactNode;
+    disableStickyHeader?: boolean;
+    // Row click props
+    onRowClick?: (event: React.MouseEvent<HTMLTableRowElement>, row: Row<T>) => void;
+    selectOnRowClick?: boolean; // If true, row click will toggle selection (default: false)
+    // Enhanced customization props
+    cellProps?: TableCellProps;
+    expandedRowProps?: TableRowProps;
+    expandedCellProps?: TableCellProps;
+    containerSx?: SxProps;
+    expandedContainerSx?: SxProps;
+    // Cell slot management
+    slots?: Record<string, any>;
+    slotProps?: Record<string, any>;
+    [key: string]: any;
+}
+
+/**
+ * Individual table row component with cell rendering and expansion support
+ */
+export function DataTableRow<T>(props: DataTableRowProps<T>): ReactElement {
+    const {
+        row,
+        enableHover = true,
+        enableStripes = false,
+        isOdd = false,
+        renderSubComponent,
+        disableStickyHeader = false,
+        onRowClick,
+        selectOnRowClick = false,
+        cellProps,
+        expandedRowProps,
+        expandedCellProps,
+        containerSx,
+        expandedContainerSx,
+        slots,
+        slotProps,
+        ...otherProps
+    } = props;
+    const { table } = useDataTableContext();
+
+    // Extract slot-specific props with enhanced merging
+    const cellSlotProps = extractSlotProps(slotProps, 'cell');
+    const expandedRowSlotProps = extractSlotProps(slotProps, 'expandedRow');
+    const rowSlotProps = extractSlotProps(slotProps, 'row');
+
+    const CellSlot = getSlotComponent(slots, 'cell', TableCell);
+    const ExpandedRowSlot = getSlotComponent(slots, 'expandedRow', TableRow);
+    const TableRowSlot = getSlotComponent(slots, 'row', TableRow);
+
+    // Handle row click
+    const handleRowClick = (event: React.MouseEvent<HTMLTableRowElement>) => {
+        // Check if click target is a checkbox, button, or interactive element
+        const target = event.target as HTMLElement;
+        const isCheckboxClick = target.closest('input[type="checkbox"]') !== null;
+        const isButtonClick = target.closest('button') !== null;
+        const isLinkClick = target.closest('a') !== null;
+
+        // If selectOnRowClick is enabled and it's not a checkbox/interactive element click, toggle selection
+        if (selectOnRowClick && !isCheckboxClick && !isButtonClick && !isLinkClick && table?.toggleRowSelected) {
+            table.toggleRowSelected(row.id);
+        }
+
+        // Always call onRowClick if provided
+        if (onRowClick) {
+            onRowClick(event, row);
+        }
+    };
+
+    // Merge all props for maximum flexibility
+    const mergedRowProps = mergeSlotProps(
+        {
+            hover: enableHover,
+            selected: !!table?.getIsRowSelected?.(row.id),
+            onClick: (onRowClick || selectOnRowClick) ? handleRowClick : undefined,
+            sx: (theme) => ({
+                // set the row background as a variable
+                '--row-bg': enableStripes && isOdd
+                    ? theme.palette.action.hover
+                    : theme.palette.background.paper,
+                backgroundColor: 'var(--row-bg)',
+                // keep the variable in sync for hover/selected
+                ...(enableHover && {
+                    '&:hover': { '--row-bg': theme.palette.action.hover },
+                }),
+                [`&.${tableRowClasses.selected}`]: {
+                    '--row-bg': theme.palette.action.selected,
+                    backgroundColor: 'var(--row-bg)',
+                },
+                // Add cursor pointer if row is clickable
+                ...((onRowClick || selectOnRowClick) && {
+                    cursor: 'pointer',
+                }),
+                ...containerSx,
+            }),
+        },
+        rowSlotProps,
+        otherProps
+    );
+    const mergedExpandedRowProps = mergeSlotProps(
+        {
+            sx: expandedContainerSx,
+        },
+        expandedRowSlotProps,
+        expandedRowProps || {}
+    );
+
+    return (
+        <>
+            <TableRowSlot
+                {...mergedRowProps}
+            >
+                {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);
+
+                    // Get minSize and maxSize from column definition
+                    const minSize = cell.column.columnDef?.minSize;
+                    const maxSize = cell.column.columnDef.maxSize;
+                    const wrapText = cell.column.columnDef.wrapText ?? false;
+
+                    const mergedCellProps = mergeSlotProps(
+                        {
+                            align: alignment,
+                            sx: {
+                                ...getPinnedColumnStyle({
+                                    width: cell.column.getSize() || 'auto',
+                                    minWidth: minSize !== undefined ? minSize : undefined,
+                                    maxWidth: maxSize !== undefined ? maxSize : undefined,
+                                    isPinned,
+                                    pinnedPosition,
+                                    pinnedRightPosition,
+                                    zIndex: isPinned ? 9 : 1,
+                                    disableStickyHeader,
+                                    isLastLeftPinnedColumn: isPinned === 'left' && cell.column.getIsLastColumn('left'),
+                                    isFirstRightPinnedColumn: isPinned === 'right' && cell.column.getIsFirstColumn('right'),
+                                    wrapText,
+                                }),
+                            },
+                        },
+                        cellSlotProps,
+                        cellProps || {}
+                    );
+
+                    return (
+                        <CellSlot
+                            key={cell.id}
+                            {...mergedCellProps}
+                        >
+                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                        </CellSlot>
+                    );
+                })}
+            </TableRowSlot>
+
+            {row.getIsExpanded() && renderSubComponent ? (
+                <ExpandedRowSlot
+                    {...mergedExpandedRowProps}
+                >
+                    <CellSlot
+                        colSpan={row.getVisibleCells().length}
+                        sx={{
+                            py: 0,
+                            ...expandedCellProps?.sx,
+                        }}
+                        {...mergeSlotProps(
+                            {},
+                            cellSlotProps,
+                            expandedCellProps || {}
+                        )}
+                    >
+                        <Collapse
+                            in={row.getIsExpanded()}
+                            timeout="auto"
+                            unmountOnExit
+                        >
+                            {renderSubComponent(row) as any}
+                        </Collapse>
+                    </CellSlot>
+                </ExpandedRowSlot>
+            ) : null}
+        </>
+    );
+}

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

@@ -0,0 +1,69 @@
+import { TableCell, TableRow, TableRowProps, TableCellProps, SxProps } from '@mui/material';
+import React, { ReactElement, ReactNode } from 'react';
+import { getSlotComponent, mergeSlotProps, extractSlotProps } from '../../utils/slot-helpers';
+
+export interface EmptyDataRowProps {
+    colSpan: number;
+    message: string | ReactNode;
+    // Enhanced customization props
+    rowProps?: TableRowProps;
+    cellProps?: TableCellProps;
+    containerSx?: SxProps;
+    messageSx?: SxProps;
+    slots?: Record<string, any>;
+    slotProps?: Record<string, any>;
+}
+
+export function EmptyDataRow(props: EmptyDataRowProps): ReactElement {
+    const {
+        colSpan,
+        message,
+        rowProps,
+        cellProps,
+        containerSx,
+        messageSx,
+        slots,
+        slotProps,
+    } = props;
+
+    // Extract slot-specific props with enhanced merging
+    const emptyRowSlotProps = extractSlotProps(slotProps, 'emptyRow');
+    const cellSlotProps = extractSlotProps(slotProps, 'cell');
+    
+    const EmptyRowSlot = getSlotComponent(slots, 'emptyRow', TableRow);
+    const EmptyCellSlot = getSlotComponent(slots, 'cell', TableCell);
+
+    // Merge all props for maximum flexibility
+    const mergedRowProps = mergeSlotProps(
+        {
+            sx: containerSx,
+        },
+        emptyRowSlotProps,
+        rowProps || {}
+    );
+
+    const mergedCellProps = mergeSlotProps(
+        {
+            colSpan,
+            align: 'center',
+            sx: {
+                py: 4,
+                ...messageSx,
+            },
+        },
+        cellSlotProps,
+        cellProps || {}
+    );
+
+    return (
+        <EmptyRowSlot
+            {...mergedRowProps}
+        >
+            <EmptyCellSlot
+                {...mergedCellProps}
+            >
+                {message}
+            </EmptyCellSlot>
+        </EmptyRowSlot>
+    );
+}

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

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