@ackplus/react-tanstack-data-table 1.0.34 → 1.1.1

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

@@ -0,0 +1,17 @@
+/**
+ * Toolbar components for DataTable
+ */
+
+// Main toolbar component
+export { DataTableToolbar } from './data-table-toolbar';
+
+// Individual toolbar building blocks - export for custom toolbars
+export { ColumnVisibilityControl } from './column-visibility-control';
+export { ColumnPinningControl } from './column-pinning-control';
+export { ColumnResetControl } from './column-reset-control';
+export { TableExportControl } from './table-export-control';
+export { TableSizeControl } from './table-size-control';
+export { ColumnFilterControl } from './column-filter-control';
+// Bulk actions
+export { BulkActionsToolbar } from './bulk-actions-toolbar';
+export type { BulkActionsToolbarProps } from './bulk-actions-toolbar';

package/src/lib/components/toolbar/table-export-control.tsx

@@ -0,0 +1,179 @@
+import { CloudDownloadOutlined } from '@mui/icons-material';
+import React from 'react';
+import {
+    IconButton,
+    Tooltip,
+    MenuItem,
+    ListItemIcon,
+    ListItemText,
+    Typography,
+    Box,
+    IconButtonProps,
+    SxProps,
+} from '@mui/material';
+
+import { MenuDropdown } from '../droupdown/menu-dropdown';
+import { useDataTableContext } from '../../contexts/data-table-context';
+import { ExcelIcon, CsvIcon } from '../../icons';
+import { getSlotComponent, mergeSlotProps, extractSlotProps } from '../../utils/slot-helpers';
+
+interface TableExportControlProps {
+    // Optional props to override context defaults
+    exportFilename?: string;
+    // onServerExport?: (filters?: Partial<TableFilters>, selection?: SelectionState) => Promise<{ data: any[]; total: number }>;
+    // onExportProgress?: (progress: { processedRows?: number; totalRows?: number; percentage?: number }) => void;
+    // onExportComplete?: (result: { success: boolean; filename: string; totalRows: number }) => void;
+    // onExportError?: (error: { message: string; code: string }) => void;
+    // Enhanced customization props
+    iconButtonProps?: IconButtonProps;
+    tooltipProps?: any;
+    menuSx?: SxProps;
+    menuItemProps?: any;
+    [key: string]: any;
+}
+
+export function TableExportControl(props: TableExportControlProps = {}) {
+    const {
+        exportFilename: propsExportFilename,
+        iconButtonProps,
+        tooltipProps,
+        menuSx,
+        menuItemProps,
+    } = props;
+
+    const {
+        apiRef,
+        slots,
+        slotProps,
+        isExporting,
+        // Export callbacks from context (DataTable props)
+        exportFilename: contextExportFilename,
+    } = useDataTableContext();
+
+    // Use props if provided, otherwise fall back to context values
+    const exportFilename = propsExportFilename || contextExportFilename || 'export';
+
+    // Extract slot-specific props with enhanced merging
+    const exportIconSlotProps = extractSlotProps(slotProps, 'exportIcon');
+    const csvIconSlotProps = extractSlotProps(slotProps, 'csvIcon');
+    const excelIconSlotProps = extractSlotProps(slotProps, 'excelIcon');
+
+    const ExportIconSlot = getSlotComponent(slots, 'exportIcon', CloudDownloadOutlined);
+    const CsvIconSlot = getSlotComponent(slots, 'csvIcon', CsvIcon);
+    const ExcelIconSlot = getSlotComponent(slots, 'excelIcon', ExcelIcon);
+
+    const handleExport = async (format: 'csv' | 'excel') => {
+        if (!apiRef?.current) return;
+
+        try {
+            if (format === 'csv') {
+                await apiRef.current.export.exportCSV({
+                    filename: exportFilename,
+                });
+            } else {
+                await apiRef.current.export.exportExcel({
+                    filename: exportFilename,
+                });
+            }
+        } catch (error) {
+            console.error('Export failed:', error);
+        }
+    };
+
+    // Merge all props for maximum flexibility
+    const mergedIconButtonProps = mergeSlotProps(
+        {
+            size: 'small',
+            disabled: isExporting,
+            sx: { flexShrink: 0 },
+        },
+        exportIconSlotProps,
+        iconButtonProps || {}
+    );
+
+    const mergedMenuItemProps = mergeSlotProps(
+        {
+            sx: { minWidth: 150 },
+        },
+        menuItemProps || {}
+    );
+
+    return (
+        <MenuDropdown
+            anchor={(
+                <Tooltip 
+                    title={isExporting ? 'Export in progress...' : 'Export data'}
+                    {...tooltipProps}
+                >
+                    <IconButton
+                        {...mergedIconButtonProps}
+                    >
+                        <ExportIconSlot {...exportIconSlotProps} />
+                    </IconButton>
+                </Tooltip>
+            )}
+        >
+            {({ handleClose }: { handleClose: () => void }) => (
+                <Box
+                    sx={{
+                        minWidth: 200,
+                        ...menuSx,
+                    }}
+                >
+                    <Typography
+                        variant="subtitle2"
+                        sx={{ p: 2, pb: 1 }}
+                    >
+                        Export Format
+                    </Typography>
+                    
+                    <MenuItem
+                        onClick={() => {
+                            handleExport('csv');
+                            handleClose();
+                        }}
+                        disabled={isExporting}
+                        {...mergedMenuItemProps}
+                    >
+                        <ListItemIcon>
+                            <CsvIconSlot {...csvIconSlotProps} />
+                        </ListItemIcon>
+                        <ListItemText
+                            primary="CSV"
+                            secondary="Comma-separated values"
+                        />
+                    </MenuItem>
+
+                    <MenuItem
+                        onClick={() => {
+                            handleExport('excel');
+                            handleClose();
+                        }}
+                        disabled={isExporting}
+                        {...mergedMenuItemProps}
+                    >
+                        <ListItemIcon>
+                            <ExcelIconSlot {...excelIconSlotProps} />
+                        </ListItemIcon>
+                        <ListItemText
+                            primary="Excel"
+                            secondary="Microsoft Excel format"
+                        />
+                    </MenuItem>
+
+                    {isExporting && (
+                        <Box sx={{ p: 2, pt: 1 }}>
+                            <Typography
+                                variant="caption"
+                                color="text.secondary"
+                                sx={{ display: 'block', textAlign: 'center' }}
+                            >
+                                Export in progress...
+                            </Typography>
+                        </Box>
+                    )}
+                </Box>
+            )}
+        </MenuDropdown>
+    );
+}

package/src/lib/components/toolbar/table-search-control.tsx

@@ -0,0 +1,155 @@
+import { Clear, Search } from '@mui/icons-material';
+import { Box, Tooltip, IconButton, Collapse, OutlinedInput, InputAdornment, IconButtonProps, OutlinedInputProps, SxProps } from '@mui/material';
+import React, { useCallback, useEffect, useRef, useState, ReactElement } from 'react';
+
+import { useDataTableContext } from '../../contexts/data-table-context';
+import { getSlotComponent, mergeSlotProps, extractSlotProps } from '../../utils/slot-helpers';
+
+export interface TableSearchControlProps {
+    // Allow full customization of any prop
+    placeholder?: string;
+    autoFocus?: boolean;
+    searchIconProps?: IconButtonProps;
+    clearIconProps?: IconButtonProps;
+    inputProps?: OutlinedInputProps;
+    containerSx?: SxProps;
+    tooltipProps?: any;
+    [key: string]: any;
+}
+
+export function TableSearchControl(props: TableSearchControlProps = {}): ReactElement {
+    const { table, slots, slotProps } = useDataTableContext();
+    const [searchVisible, setSearchVisible] = useState(false);
+    const searchInputRef = useRef<HTMLInputElement>(null);
+    const globalFilter = table.getState().globalFilter || '';
+    const hasSearch = globalFilter.length > 0;
+
+    // Extract slot-specific props with enhanced merging
+    const searchIconSlotProps = extractSlotProps(slotProps, 'searchIcon');
+    const clearIconSlotProps = extractSlotProps(slotProps, 'clearIcon');
+    
+    const SearchIconSlot = getSlotComponent(slots, 'searchIcon', Search);
+    const ClearIconSlot = getSlotComponent(slots, 'clearIcon', Clear);
+    
+    const handleChange = useCallback(
+        (e: any) => {
+            table.setGlobalFilter(e.target.value);
+        },
+        [table],
+    );
+
+    const handleSearchToggle = () => {
+        if (searchVisible || hasSearch) {
+            // If search is visible or has text, hide it and clear
+            setSearchVisible(false);
+            table.setGlobalFilter('');
+        } else {
+            // Show search input
+            setSearchVisible(true);
+        }
+    };
+
+    const handleSearchClear = () => {
+        table.setGlobalFilter('');
+        if (searchInputRef.current) {
+            searchInputRef.current.focus();
+        }
+    };
+
+    const handleSearchBlur = () => {
+        // Only auto-hide if search is empty
+        if (searchVisible && !hasSearch) {
+            setSearchVisible(false);
+        }
+    };
+
+    useEffect(() => {
+        if (searchVisible && searchInputRef.current) {
+            // Add a delay to ensure the Collapse animation completes
+            const timer = setTimeout(() => {
+                searchInputRef.current?.focus();
+            }, 200);
+            return () => clearTimeout(timer);
+        }
+        return undefined;
+    }, [searchVisible]);
+
+    // Merge all props for maximum flexibility
+    const mergedSearchIconProps = mergeSlotProps(
+        {
+            size: 'small',
+            onClick: handleSearchToggle,
+            color: hasSearch ? 'primary' : 'default',
+            sx: { flexShrink: 0 },
+        },
+        searchIconSlotProps,
+        props.searchIconProps || {}
+    );
+
+    const mergedClearIconProps = mergeSlotProps(
+        {
+            size: 'small',
+            onClick: handleSearchClear,
+        },
+        clearIconSlotProps,
+        props.clearIconProps || {}
+    );
+
+    const mergedInputProps = mergeSlotProps(
+        {
+            inputRef: searchInputRef,
+            size: 'small',
+            placeholder: props.placeholder || 'Search...',
+            value: globalFilter,
+            onChange: handleChange,
+            onBlur: handleSearchBlur,
+            autoFocus: props.autoFocus,
+            sx: { minWidth: 200 },
+        },
+        props.inputProps || {}
+    );
+
+    return (
+        <Box
+            sx={{
+                display: 'flex',
+                alignItems: 'center',
+                ...props.containerSx,
+            }}
+        >
+            {!(searchVisible || hasSearch) && (
+                <Tooltip 
+                    title="Search"
+                    {...props.tooltipProps}
+                >
+                    <IconButton
+                        {...mergedSearchIconProps}
+                    >
+                        <SearchIconSlot {...searchIconSlotProps} />
+                    </IconButton>
+                </Tooltip>
+            )}
+
+            <Collapse
+                in={searchVisible || hasSearch}
+                orientation="horizontal"
+                timeout={200}
+            >
+                <OutlinedInput
+                    {...mergedInputProps}
+                    endAdornment={
+                        hasSearch ? (
+                            <InputAdornment position="end">
+                                <IconButton
+                                    {...mergedClearIconProps}
+                                >
+                                    <ClearIconSlot {...clearIconSlotProps} />
+                                </IconButton>
+                            </InputAdornment>
+                        ) : null
+                    }
+                />
+            </Collapse>
+        </Box>
+    );
+}

package/src/lib/components/toolbar/table-size-control.tsx

@@ -0,0 +1,102 @@
+import React, { ReactElement } from 'react';
+import { LineWeightOutlined } from '@mui/icons-material';
+import { MenuItem, ListItemIcon, ListItemText, Tooltip, IconButton, IconButtonProps, SxProps } from '@mui/material';
+
+import { MenuDropdown } from '../droupdown/menu-dropdown';
+import { useDataTableContext } from '../../contexts/data-table-context';
+import { ViewComfortableIcon, ViewCompactIcon } from '../../icons';
+import { getSlotComponent, mergeSlotProps, extractSlotProps } from '../../utils/slot-helpers';
+
+export interface TableSizeControlProps {
+    // Allow full customization of any prop
+    iconButtonProps?: IconButtonProps;
+    menuProps?: any;
+    tooltipProps?: any;
+    containerSx?: SxProps;
+    [key: string]: any;
+}
+
+export function TableSizeControl(props: TableSizeControlProps = {}): ReactElement {
+    const { tableSize, onTableSizeChange, slotProps, slots } = useDataTableContext();
+    
+    // Extract slot-specific props with enhanced merging
+    const tableSizeIconSlotProps = extractSlotProps(slotProps, 'tableSizeIcon');
+    const tableSizeSmallIconSlotProps = extractSlotProps(slotProps, 'tableSizeSmallIcon');
+    const tableSizeMediumIconSlotProps = extractSlotProps(slotProps, 'tableSizeMediumIcon');
+    
+    const TableSizeIconSlot = getSlotComponent(slots, 'tableSizeIcon', LineWeightOutlined);
+    const TableSizeSmallIconSlot = getSlotComponent(slots, 'tableSizeSmallIcon', ViewCompactIcon);
+    const TableSizeMediumIconSlot = getSlotComponent(slots, 'tableSizeMediumIcon', ViewComfortableIcon);
+
+    const SIZE_OPTIONS = [
+        {
+            value: 'small' as const,
+            label: 'Compact',
+            description: 'Small padding, compact rows',
+            icon: <TableSizeSmallIconSlot {...tableSizeSmallIconSlotProps} />,
+        },
+        {
+            value: 'medium' as const,
+            label: 'Standard',
+            description: 'Default padding and spacing',
+            icon: <TableSizeMediumIconSlot {...tableSizeMediumIconSlotProps} />,
+        },
+    ];
+
+    // Merge all props for maximum flexibility
+    const mergedIconButtonProps = mergeSlotProps(
+        {
+            size: 'small',
+            sx: { flexShrink: 0 },
+        },
+        tableSizeIconSlotProps,
+        props.iconButtonProps || {}
+    );
+
+    return (
+        <MenuDropdown
+            anchor={(
+                <Tooltip 
+                    title="Table size"
+                    {...props.tooltipProps}
+                >
+                    <IconButton
+                        {...mergedIconButtonProps}
+                    >
+                        <TableSizeIconSlot {...tableSizeIconSlotProps} />
+                    </IconButton>
+                </Tooltip>
+            )}
+        >
+            {SIZE_OPTIONS.map((option) => (
+                <MenuItem
+                    key={option.value}
+                    selected={tableSize === option.value}
+                    onClick={() => onTableSizeChange(option.value)}
+                    sx={{
+                        minWidth: 200,
+                        ...props.containerSx,
+                    }}
+                >
+                    <ListItemIcon sx={{ minWidth: 36 }}>
+                        {option.icon}
+                    </ListItemIcon>
+                    <ListItemText
+                        primary={option.label}
+                        secondary={option.description}
+                        slotProps={{
+                            primary: {
+                                variant: 'body2',
+                                fontWeight: tableSize === option.value ? 600 : 400,
+                            },
+                            secondary: {
+                                variant: 'caption',
+                                color: 'text.secondary',
+                            },
+                        }}
+                    />
+                </MenuItem>
+            ))}
+        </MenuDropdown>
+    );
+}

package/src/lib/contexts/data-table-context.tsx

@@ -0,0 +1,112 @@
+import { Table } from '@tanstack/react-table';
+import React, { createContext, useContext, ReactNode, useMemo, RefObject, ReactElement } from 'react';
+
+import { ColumnFilterState, TableSize } from '../types';
+import { DataTableApi } from '../types/data-table-api';
+
+
+/**
+ * Context value for the DataTable
+ */
+interface DataTableContextValue<T = any> {
+    table?: Table<T>;
+    apiRef?: RefObject<DataTableApi<T> | null>;
+    dataMode?: 'client' | 'server';
+    tableSize?: TableSize;
+    onTableSizeChange?: (size: TableSize) => void;
+    columnFilter?: ColumnFilterState;
+    onChangeColumnFilter?: (filter: ColumnFilterState) => void;
+    slots?: Record<string, any>;
+    slotProps?: Record<string, any>;
+
+    // Export state - managed by the DataTable component
+    isExporting?: boolean;
+    exportController?: AbortController | null;
+    onCancelExport?: () => void;
+
+    // Export callbacks - passed from DataTable props
+    exportFilename?: string;
+    onExportProgress?: (progress: { processedRows?: number; totalRows?: number; percentage?: number }) => void;
+    onExportComplete?: (result: { success: boolean; filename: string; totalRows: number }) => void;
+    onExportError?: (error: { message: string; code: string }) => void;
+    onServerExport?: (filters?: Partial<any>) => Promise<{ data: any[]; total: number }>;
+}
+
+const DataTableContext = createContext<DataTableContextValue | null>(null);
+
+interface DataTableProviderProps<T = any> extends DataTableContextValue<T> {
+    children: ReactNode;
+}
+
+export function DataTableProvider<T = any>({
+    children,
+    table,
+    apiRef,
+    dataMode,
+    tableSize,
+    onTableSizeChange,
+    columnFilter,
+    onChangeColumnFilter,
+    slots = {},
+    slotProps = {},
+    isExporting,
+    exportController,
+    onCancelExport,
+    exportFilename,
+    onExportProgress,
+    onExportComplete,
+    onExportError,
+    onServerExport,
+}: DataTableProviderProps<T>): ReactElement {
+    const value = useMemo(() => ({
+        table,
+        apiRef,
+        dataMode,
+        tableSize,
+        onTableSizeChange,
+        columnFilter,
+        onChangeColumnFilter,
+        slots,
+        slotProps,
+        isExporting,
+        exportController,
+        onCancelExport,
+        exportFilename,
+        onExportProgress,
+        onExportComplete,
+        onExportError,
+        onServerExport,
+    }), [
+        table,
+        apiRef,
+        dataMode,
+        tableSize,
+        onTableSizeChange,
+        columnFilter,
+        onChangeColumnFilter,
+        slots,
+        slotProps,
+        isExporting,
+        exportController,
+        onCancelExport,
+        exportFilename,
+        onExportProgress,
+        onExportComplete,
+        onExportError,
+        onServerExport,
+    ]);
+
+    return (
+        <DataTableContext.Provider value={value}>
+            {children}
+        </DataTableContext.Provider>
+    );
+}
+
+export function useDataTableContext<T = any>(): DataTableContextValue<T> {
+    const context = useContext(DataTableContext);
+    if (!context) {
+        throw new Error('useDataTableContext must be used within a DataTableProvider');
+    }
+    return context;
+}