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

package/src/lib/components/toolbar/column-pinning-control.tsx

@@ -0,0 +1,275 @@
+import { ArrowLeftOutlined, ArrowRightOutlined, PushPinOutlined } from '@mui/icons-material';
+import {
+    Box,
+    Typography,
+    Divider,
+    IconButton,
+    Tooltip,
+    List,
+    ListItem,
+    ListItemText,
+    IconButtonProps,
+    SxProps,
+} from '@mui/material';
+import { ColumnPinningState, Column } from '@tanstack/react-table';
+import React, { useCallback, useMemo } from 'react';
+
+import { MenuDropdown } from '../droupdown/menu-dropdown';
+import { useDataTableContext } from '../../contexts/data-table-context';
+import {
+    UnpinIcon,
+} from '../../icons';
+import { getSlotComponent, mergeSlotProps, extractSlotProps } from '../../utils/slot-helpers';
+
+export interface ColumnPinningControlProps {
+    // Allow full customization of any prop
+    title?: string;
+    titleSx?: SxProps;
+    menuSx?: SxProps;
+    iconButtonProps?: IconButtonProps;
+    tooltipProps?: any;
+    badgeProps?: any;
+    clearButtonProps?: any;
+    [key: string]: any;
+}
+
+export function ColumnPinningControl(props: ColumnPinningControlProps = {}) {
+    // Use context if no props provided (MUI DataGrid style)
+    const { table, slots, slotProps } = useDataTableContext();
+
+    // Extract slot-specific props with enhanced merging
+    const pinIconSlotProps = extractSlotProps(slotProps, 'pinIcon');
+    const unpinIconSlotProps = extractSlotProps(slotProps, 'unpinIcon');
+    const leftIconSlotProps = extractSlotProps(slotProps, 'leftIcon');
+    const rightIconSlotProps = extractSlotProps(slotProps, 'rightIcon');
+
+    const PinIconSlot = getSlotComponent(slots, 'pinIcon', PushPinOutlined);
+    const UnpinIconSlot = getSlotComponent(slots, 'unpinIcon', UnpinIcon);
+    const LeftIconSlot = getSlotComponent(slots, 'leftIcon', ArrowLeftOutlined);
+    const RightIconSlot = getSlotComponent(slots, 'rightIcon', ArrowRightOutlined);
+
+    const columnPinning = table?.getState().columnPinning || {};
+
+    const allColumns: Column<any, unknown>[] = useMemo(() => {
+        if (slotProps?.columnsPanel?.getPinnableColumns) {
+            return slotProps?.columnsPanel?.getPinnableColumns(table?.getAllLeafColumns() || []);
+        }
+        return table?.getAllLeafColumns()?.filter(column => column.getCanPin()) || [];
+    }, [slotProps?.columnsPanel, table]);
+
+    const handlePinColumn = (columnId: string, position: 'left' | 'right' | 'none') => {
+        const currentPinning = table?.getState().columnPinning || {};
+        const newPinning: ColumnPinningState = { ...currentPinning };
+
+        // Remove from current position
+        newPinning.left = (newPinning.left || []).filter(id => id !== columnId);
+        newPinning.right = (newPinning.right || []).filter(id => id !== columnId);
+
+        // Add to new position
+        if (position === 'left') {
+            // Left-pinned: append to end (appears leftmost to rightmost)
+            newPinning.left = [...(newPinning.left || []), columnId];
+        } else if (position === 'right') {
+            // Right-pinned: prepend to beginning (appears rightmost to leftmost)
+            // First column pinned appears rightmost, second appears to its left, etc.
+            newPinning.right = [columnId, ...(newPinning.right || [])];
+        }
+
+        table?.setColumnPinning(newPinning);
+    };
+
+    const getColumnPinStatus = (columnId: string): 'left' | 'right' | 'none' => {
+        if (columnPinning.left?.includes(columnId)) return 'left';
+        if (columnPinning.right?.includes(columnId)) return 'right';
+        return 'none';
+    };
+
+    const getColumnDisplayName = (column: any) => {
+        if (typeof column.columnDef.header === 'string') {
+            return column.columnDef.header;
+        }
+        return column.id;
+    };
+
+    const handleUnpinAll = useCallback(() => {
+        table?.setColumnPinning(table?.initialState?.columnPinning || {});
+    }, [table]);
+
+    // Count only user-pinned columns (exclude system columns like select and action)
+    const userPinnedLeft = (columnPinning.left?.filter((id) => allColumns.some((column: any) => column.id === id)) || []);
+    const userPinnedRight = (columnPinning.right?.filter((id) => allColumns.some((column: any) => column.id === id)) || []);
+    const totalPinned = userPinnedLeft.length + userPinnedRight.length;
+
+    // Merge all props for maximum flexibility
+    const mergedIconButtonProps = mergeSlotProps(
+        {
+            size: 'small',
+            sx: { flexShrink: 0 },
+        },
+        pinIconSlotProps,
+        props.iconButtonProps || {}
+    );
+
+    return (
+        <MenuDropdown
+            anchor={(
+                <Tooltip
+                    title="Pin columns"
+                    {...props.tooltipProps}
+                >
+                    <IconButton
+                        {...mergedIconButtonProps}
+                    >
+                        <PinIconSlot {...pinIconSlotProps} />
+                        {totalPinned > 0 && (
+                            <Box
+                                sx={{
+                                    position: 'absolute',
+                                    top: -2,
+                                    right: -2,
+                                    backgroundColor: 'primary.main',
+                                    color: 'white',
+                                    borderRadius: '50%',
+                                    width: 16,
+                                    height: 16,
+                                    fontSize: 10,
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    ...props.badgeProps?.sx,
+                                }}
+                                {...props.badgeProps}
+                            >
+                                {totalPinned}
+                            </Box>
+                        )}
+                    </IconButton>
+                </Tooltip>
+            )}
+        >
+
+            <Box
+                sx={{
+                    p: 2,
+                    minWidth: 300,
+                    maxWidth: 400,
+                    ...props.menuSx,
+                }}
+            >
+                <Typography
+                    variant="subtitle2"
+                    sx={{
+                        mb: 1,
+                        ...props.titleSx,
+                    }}
+                >
+                    {props.title || 'Pin Columns'}
+                </Typography>
+                <Divider sx={{ mb: 2 }} />
+
+                {totalPinned > 0 && (
+                    <Box sx={{ mb: 2 }}>
+                        <IconButton
+                            size="small"
+                            onClick={handleUnpinAll}
+                            color="warning"
+                            {...props.clearButtonProps}
+                        >
+                            <UnpinIconSlot {...unpinIconSlotProps} />
+                        </IconButton>
+                        <Typography variant="caption" sx={{ ml: 1 }}>
+                            Unpin all columns
+                        </Typography>
+                    </Box>
+                )}
+
+                <List
+                    dense
+                    sx={{ py: 0 }}
+                >
+                    {allColumns.map((column: any) => {
+                        const pinStatus = getColumnPinStatus(column.id);
+                        const displayName = getColumnDisplayName(column);
+
+                        return (
+                            <ListItem
+                                key={column.id}
+                                sx={{ py: 0.25 }}
+                                secondaryAction={(
+                                    <Box
+                                        sx={{
+                                            display: 'flex',
+                                            gap: 0.5,
+                                        }}
+                                    >
+                                        {/* Pin Left */}
+                                        <Tooltip title="Pin left">
+                                            <IconButton
+                                                size="small"
+                                                onClick={() => handlePinColumn(column.id, pinStatus === 'left' ? 'none' : 'left')}
+                                                color={pinStatus === 'left' ? 'primary' : 'default'}
+                                            >
+                                                <LeftIconSlot
+                                                    fontSize="small"
+                                                    {...leftIconSlotProps}
+                                                />
+                                            </IconButton>
+                                        </Tooltip>
+
+                                        {/* Pin Right */}
+                                        <Tooltip title="Pin right">
+                                            <IconButton
+                                                size="small"
+                                                onClick={() => handlePinColumn(column.id, pinStatus === 'right' ? 'none' : 'right')}
+                                                color={pinStatus === 'right' ? 'secondary' : 'default'}
+                                            >
+                                                <RightIconSlot
+                                                    fontSize="small"
+                                                    {...rightIconSlotProps}
+                                                />
+                                            </IconButton>
+                                        </Tooltip>
+
+                                        {/* Unpin */}
+                                        {pinStatus !== 'none' && (
+                                            <Tooltip title="Unpin">
+                                                <IconButton
+                                                    size="small"
+                                                    onClick={() => handlePinColumn(column.id, 'none')}
+                                                >
+                                                    <UnpinIconSlot
+                                                        fontSize="small"
+                                                        {...unpinIconSlotProps}
+                                                    />
+                                                </IconButton>
+                                            </Tooltip>
+                                        )}
+                                    </Box>
+                                )}
+                            >
+                                <ListItemText
+                                    primary={displayName}
+                                    secondary={
+                                        pinStatus === 'left' ? 'Pinned left' :
+                                            pinStatus === 'right' ? 'Pinned right' :
+                                                'Not pinned'
+                                    }
+                                    slotProps={{
+                                        primary: {
+                                            variant: 'body2',
+                                            fontWeight: pinStatus !== 'none' ? 600 : 400,
+                                        },
+                                        secondary: {
+                                            variant: 'caption',
+                                            color: pinStatus !== 'none' ? 'primary.main' : 'text.secondary',
+                                        },
+                                    }}
+                                />
+                            </ListItem>
+                        );
+                    })}
+                </List>
+            </Box>
+        </MenuDropdown>
+    );
+}

package/src/lib/components/toolbar/column-reset-control.tsx

@@ -0,0 +1,74 @@
+import React, { ReactElement } from 'react';
+import { Autorenew } from '@mui/icons-material';
+import { IconButton, Tooltip, IconButtonProps } from '@mui/material';
+
+import { useDataTableContext } from '../../contexts/data-table-context';
+import { getSlotComponent, mergeSlotProps, extractSlotProps } from '../../utils/slot-helpers';
+
+export interface ColumnResetControlProps {
+    // Allow full customization of any prop
+    iconButtonProps?: IconButtonProps;
+    tooltipProps?: any;
+    resetActions?: ('columnOrder' | 'columnPinning' | 'columnSizing' | 'columnVisibility' | 'filters' | 'sorting' | 'pagination')[];
+    [key: string]: any;
+}
+
+export function ColumnResetControl(props: ColumnResetControlProps = {}): ReactElement {
+    const { apiRef, slots, slotProps } = useDataTableContext();
+
+    // Extract slot-specific props with enhanced merging
+    const resetIconSlotProps = extractSlotProps(slotProps, 'resetIcon');
+    const ResetIconSlot = getSlotComponent(slots, 'resetIcon', Autorenew);
+
+    const handleResetLayout = () => {
+        const actions = props.resetActions || ['columnOrder', 'columnPinning', 'columnSizing'];
+        if (!apiRef?.current) return;
+
+        // Reset based on specified actions
+        if (actions.includes('columnOrder')) {
+            apiRef?.current?.columnOrdering?.resetColumnOrder();
+        }
+        if (actions.includes('columnPinning')) {
+            apiRef?.current?.columnPinning?.resetColumnPinning();
+        }
+        if (actions.includes('columnSizing')) {
+            apiRef?.current?.columnResizing?.resetColumnSizing();
+        }
+        if (actions.includes('columnVisibility')) {
+            apiRef?.current?.columnVisibility?.resetColumnVisibility();
+        }
+        if (actions.includes('filters')) {
+            apiRef?.current?.filtering?.clearAllFilters();
+        }
+        if (actions.includes('sorting')) {
+            apiRef?.current?.sorting?.resetSorting();
+        }
+        if (actions.includes('pagination')) {
+            apiRef?.current?.pagination?.resetPagination();
+        }
+    };
+
+    // Merge all props for maximum flexibility
+    const mergedIconButtonProps = mergeSlotProps(
+        {
+            size: 'small',
+            onClick: handleResetLayout,
+            sx: { flexShrink: 0 },
+        },
+        resetIconSlotProps,
+        props.iconButtonProps || {}
+    );
+
+    return (
+        <Tooltip
+            title="Reset layout"
+            {...props.tooltipProps}
+        >
+            <IconButton
+                {...mergedIconButtonProps}
+            >
+                <ResetIconSlot {...resetIconSlotProps} />
+            </IconButton>
+        </Tooltip>
+    );
+}

package/src/lib/components/toolbar/column-visibility-control.tsx

@@ -0,0 +1,105 @@
+import { ViewColumnOutlined } from '@mui/icons-material';
+import { Box, Checkbox, CheckboxProps, Divider, FormControlLabel, SxProps, FormGroup, IconButton, Tooltip, Typography, FormControlLabelProps } from '@mui/material';
+import React, { useMemo } from 'react';
+
+import { MenuDropdown } from '../droupdown/menu-dropdown';
+import { useDataTableContext } from '../../contexts/data-table-context';
+import { getSlotComponent, mergeSlotProps, extractSlotProps } from '../../utils/slot-helpers';
+
+export interface ColumnVisibilityControlProps {
+    // Allow full customization of any prop
+    title?: string;
+    titleSx?: SxProps;
+    menuSx?: SxProps;
+    checkboxProps?: CheckboxProps;
+    labelProps?: FormControlLabelProps;
+    [key: string]: any;
+}
+
+export function ColumnVisibilityControl(props: ColumnVisibilityControlProps = {}) {
+    // Use context if no props provided (MUI DataGrid style)
+    const { table, slots, slotProps } = useDataTableContext();
+
+    // Extract slot-specific props with enhanced merging
+    const iconSlotProps = extractSlotProps(slotProps, 'columnIcon');
+    const ColumnIconSlot = getSlotComponent(slots, 'columnIcon', ViewColumnOutlined);
+
+    const columns = useMemo(() => {
+        if (slotProps?.columnsPanel?.getTogglableColumns) {
+            return slotProps?.columnsPanel?.getTogglableColumns(table?.getAllLeafColumns() || []);
+        }
+        return table?.getAllLeafColumns()?.filter(column => column.getCanHide()) || [];
+    }, [slotProps?.columnsPanel, table]);
+
+    const handleColumnVisibilityChange = ((columnId: string, visible: boolean) => {
+        table?.getColumn(columnId)?.toggleVisibility(visible);
+    });
+
+    // Merge all props for maximum flexibility
+    const mergedProps = mergeSlotProps(
+        {
+            // Default props
+            size: 'small',
+            sx: { flexShrink: 0 },
+        },
+        slotProps?.columnVisibilityControl || {},
+        props
+    );
+
+    return (
+        <MenuDropdown
+            anchor={(
+                <Tooltip title="Column visibility">
+                    <IconButton
+                        {...mergedProps}
+                    >
+                        <ColumnIconSlot
+                            {...iconSlotProps}
+                        />
+                    </IconButton>
+                </Tooltip>
+            )}
+        >
+            <Box
+                sx={{
+                    p: 2,
+                    minWidth: 200,
+                    // Allow user to override these styles
+                    ...mergedProps.menuSx,
+                }}
+            >
+                <Typography
+                    variant="subtitle2"
+                    sx={{
+                        mb: 1,
+                        // Allow user to override title styles
+                        ...mergedProps.titleSx,
+                    }}
+                >
+                    {mergedProps.title || 'Show/Hide Columns'}
+                </Typography>
+                <Divider sx={{ mb: 1 }} />
+                <FormGroup>
+                    {columns.map((column: any) => (
+                        <FormControlLabel
+                            key={column.id}
+                            control={(
+                                <Checkbox
+                                    disabled={!column.getCanHide()}
+                                    checked={column.getIsVisible()}
+                                    onChange={(e: any) => handleColumnVisibilityChange(column.id, e.target.checked)}
+                                    size="small"
+                                    // Allow user to override checkbox props
+                                    {...mergedProps.checkboxProps}
+                                />
+                            )}
+                            label={typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id}
+                            // Allow user to override label props
+                            {...mergedProps.labelProps}
+                        />
+                    ))}
+                </FormGroup>
+            </Box>
+        </MenuDropdown>
+    );
+}

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

@@ -0,0 +1,229 @@
+import {
+    Stack,
+    Toolbar,
+    Typography,
+    Box,
+    ToolbarProps,
+    SxProps,
+} from '@mui/material';
+import React, { ReactNode, ReactElement } from 'react';
+
+import { ColumnFilterControl } from './column-filter-control';
+import { ColumnPinningControl } from './column-pinning-control';
+import { ColumnResetControl } from './column-reset-control';
+import { ColumnVisibilityControl } from './column-visibility-control';
+import { TableExportControl } from './table-export-control';
+import { TableSearchControl } from './table-search-control';
+import { TableSizeControl } from './table-size-control';
+import { useDataTableContext } from '../../contexts/data-table-context';
+import { getSlotComponent, mergeSlotProps, extractSlotProps } from '../../utils/slot-helpers';
+
+export interface DataTableToolbarProps extends ToolbarProps {
+    extraFilter?: ReactNode;
+    enableGlobalFilter?: boolean;
+    title?: string;
+    subtitle?: string;
+    enableColumnVisibility?: boolean;
+    enableExport?: boolean;
+    enableReset?: boolean;
+    enableColumnFilter?: boolean;
+    enableTableSizeControl?: boolean;
+    enableColumnPinning?: boolean;
+    // Enhanced styling props
+    titleSx?: SxProps;
+    subtitleSx?: SxProps;
+    containerSx?: SxProps;
+    leftSectionSx?: SxProps;
+    rightSectionSx?: SxProps;
+    // Allow full customization of any prop
+    [key: string]: any;
+}
+
+export function DataTableToolbar(props: DataTableToolbarProps = {}): ReactElement {
+    const {
+        extraFilter = null,
+        enableGlobalFilter = true,
+        title,
+        subtitle,
+        enableColumnVisibility = true,
+        enableExport = true,
+        enableReset = true,
+        enableColumnFilter = true,
+        enableTableSizeControl = true,
+        enableColumnPinning = true,
+        titleSx,
+        subtitleSx,
+        containerSx,
+        leftSectionSx,
+        rightSectionSx,
+        ...otherProps
+    } = props;
+
+    const { table, slots, slotProps = {} } = useDataTableContext();
+    
+    // Extract slot-specific props with enhanced merging
+    const toolbarSlotProps = extractSlotProps(slotProps, 'toolbar');
+    const searchInputSlotProps = extractSlotProps(slotProps, 'searchInput');
+    const tableSizeControlSlotProps = extractSlotProps(slotProps, 'tableSizeControl');
+    const columnCustomFilterControlSlotProps = extractSlotProps(slotProps, 'columnCustomFilterControl');
+    const columnPinningControlSlotProps = extractSlotProps(slotProps, 'columnPinningControl');
+    const columnVisibilityControlSlotProps = extractSlotProps(slotProps, 'columnVisibilityControl');
+    const resetButtonSlotProps = extractSlotProps(slotProps, 'resetButton');
+    const exportButtonSlotProps = extractSlotProps(slotProps, 'exportButton');
+    
+    const ToolbarSlot = getSlotComponent(slots, 'toolbar', Toolbar);
+    const TableSearchControlSlot = getSlotComponent(slots, 'searchInput', TableSearchControl);
+    const TableSizeControlSlot = getSlotComponent(slots, 'tableSizeControl', TableSizeControl);
+    const ColumnCustomFilterControlSlot = getSlotComponent(slots, 'columnCustomFilterControl', ColumnFilterControl);
+    const ColumnPinningControlSlot = getSlotComponent(slots, 'columnPinningControl', ColumnPinningControl);
+    const ColumnVisibilityControlSlot = getSlotComponent(slots, 'columnVisibilityControl', ColumnVisibilityControl);
+    const ColumnResetControlSlot = getSlotComponent(slots, 'resetButton', ColumnResetControl);
+    const TableExportControlSlot = getSlotComponent(slots, 'exportButton', TableExportControl);
+
+    // Merge all props for maximum flexibility
+    const mergedToolbarProps = mergeSlotProps(
+        {
+            // Default toolbar props
+            table,
+            ...otherProps,
+        },
+        toolbarSlotProps
+    );
+
+    return (
+        <ToolbarSlot
+            {...mergedToolbarProps}
+        >
+            <Box 
+                sx={{ 
+                    width: '100%',
+                    ...containerSx,
+                }}
+            >
+                {(title || subtitle) ? (
+                    <Box sx={{ mb: 2 }}>
+                        {title ? (
+                            <Typography
+                                variant="h6"
+                                component="div"
+                                sx={titleSx}
+                            >
+                                {title}
+                            </Typography>
+                        ) : null}
+                        {subtitle ? (
+                            <Typography
+                                variant="body2"
+                                color="text.secondary"
+                                sx={subtitleSx}
+                            >
+                                {subtitle}
+                            </Typography>
+                        ) : null}
+                    </Box>
+                ) : null}
+
+                <Stack
+                    direction="row"
+                    spacing={2}
+                    justifyContent="space-between"
+                    alignItems="center"
+                >
+                    {/* Left Section - Search, Filters, Actions, and Status */}
+                    <Stack
+                        direction="row"
+                        spacing={0.5}
+                        alignItems="center"
+                        sx={{ 
+                            flex: 1,
+                            ...leftSectionSx,
+                        }}
+                    >
+                        {/* Table Actions and Filters */}
+                        {enableTableSizeControl ? (
+                            <TableSizeControlSlot 
+                                {...mergeSlotProps(
+                                    {},
+                                    tableSizeControlSlotProps,
+                                    props.tableSizeControlProps || {}
+                                )}
+                            />
+                        ) : null}
+
+                        {enableColumnFilter ? (
+                            <ColumnCustomFilterControlSlot 
+                                {...mergeSlotProps(
+                                    {},
+                                    columnCustomFilterControlSlotProps,
+                                    props.columnFilterProps || {}
+                                )}
+                            />
+                        ) : null}
+
+                        {enableColumnPinning ? (
+                            <ColumnPinningControlSlot 
+                                {...mergeSlotProps(
+                                    {},
+                                    columnPinningControlSlotProps,
+                                    props.columnPinningProps || {}
+                                )}
+                            />
+                        ) : null}
+
+                        {enableColumnVisibility ? (
+                            <ColumnVisibilityControlSlot 
+                                {...mergeSlotProps(
+                                    {},
+                                    columnVisibilityControlSlotProps,
+                                    props.columnVisibilityProps || {}
+                                )}
+                            />
+                        ) : null}
+
+                        {enableReset ? (
+                            <ColumnResetControlSlot 
+                                {...mergeSlotProps(
+                                    {},
+                                    resetButtonSlotProps,
+                                    props.resetButtonProps || {}
+                                )}
+                            />
+                        ) : null}
+
+                        {enableExport ? (
+                            <TableExportControlSlot 
+                                {...mergeSlotProps(
+                                    {},
+                                    exportButtonSlotProps,
+                                    props.exportButtonProps || {}
+                                )}
+                            />
+                        ) : null}
+
+                        {/* Search */}
+                        {enableGlobalFilter ? (
+                            <TableSearchControlSlot 
+                                {...mergeSlotProps(
+                                    {},
+                                    searchInputSlotProps,
+                                    props.searchInputProps || {}
+                                )}
+                            />
+                        ) : null}
+                    </Stack>
+
+                    {/* Right Section - Extra Filter and More Menu */}
+                    <Stack
+                        direction="row"
+                        spacing={1}
+                        alignItems="center"
+                        sx={rightSectionSx}
+                    >
+                        {/* Extra Filter */}
+                        {extraFilter as any}
+                    </Stack>
+                </Stack>
+            </Box>
+        </ToolbarSlot>
+    );
+}