@ackplus/react-tanstack-data-table 1.1.20 → 1.1.21

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

@@ -1,175 +0,0 @@
-/**
- * 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;
-    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,
-        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 minSize = header.column.columnDef.minSize;
-        const maxSize = header.column.columnDef.maxSize;
-        const canResize = enableColumnResizing && header.column.getCanResize();
-
-        const mergedHeaderCellProps = mergeSlotProps(
-            {
-                align: alignment,
-                sx: {
-                    ...getPinnedColumnStyle({
-                        width: header.getSize(),
-                        minWidth: minSize !== undefined ? minSize : undefined,
-                        maxWidth: maxSize !== undefined ? maxSize : undefined,
-                        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

@@ -1,21 +0,0 @@
-/**
- * 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

@@ -1,111 +0,0 @@
-// data-table-pagination.tsx
-import { TablePagination, Box, TablePaginationProps, SxProps } from '@mui/material';
-import { memo, ReactNode, useEffect, useMemo } 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();
-    const pageSize = pagination?.pageSize || 1;
-    const maxPageIndex = Math.max(0, Math.ceil(totalRow / pageSize) - 1);
-    const safePageIndex = useMemo(
-        () => Math.min(Math.max(pagination?.pageIndex ?? 0, 0), maxPageIndex),
-        [maxPageIndex, pagination?.pageIndex]
-    );
-
-    useEffect(() => {
-        if ((pagination?.pageIndex ?? 0) !== safePageIndex) {
-            table?.setPageIndex(safePageIndex);
-        }
-    }, [pagination?.pageIndex, safePageIndex, table]);
-
-    // 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: safePageIndex,
-            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

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

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

@@ -1,218 +0,0 @@
-/**
- * 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;
-        
-        // Check for various interactive elements
-        const isCheckboxClick = target.closest('input[type="checkbox"]') !== null;
-        const isButtonClick = target.closest('button') !== null;
-        const isLinkClick = target.closest('a') !== null;
-        // Check for elements with interactive roles (button, checkbox, switch, etc.)
-        const isInteractiveRole = target.closest('[role="button"]') !== null || 
-                                  target.closest('[role="checkbox"]') !== null ||
-                                  target.closest('[role="switch"]') !== null ||
-                                  target.closest('[role="menuitem"]') !== null;
-        
-        // Determine if this is an interactive element click
-        const isInteractiveClick = isCheckboxClick || isButtonClick || isLinkClick || isInteractiveRole;
-
-        // If selectOnRowClick is enabled and it's not an interactive element click, toggle selection
-        if (selectOnRowClick && !isInteractiveClick && table?.toggleRowSelected) {
-            table.toggleRowSelected(row.id);
-        }
-
-        // Only call onRowClick if it's not an interactive element click
-        if (onRowClick && !isInteractiveClick) {
-            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(),
-                                    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

@@ -1,69 +0,0 @@
-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.ts

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