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

package/src/lib/features/selection.feature.ts

@@ -0,0 +1,318 @@
+/**
+ * Custom Selection Feature for TanStack Table
+ * 
+ * This feature adds custom selection capabilities to TanStack Table
+ * following the official custom features pattern (same as CustomColumnFilterFeature)
+ */
+import {
+    Table,
+    TableFeature,
+    RowData,
+    Updater,
+    functionalUpdate,
+    makeStateUpdater,
+    Row,
+} from '@tanstack/react-table';
+
+// Selection state interface
+export interface SelectionState {
+    ids: string[];
+    type: 'include' | 'exclude';
+    selectMode?: 'page' | 'all';
+}
+
+// Row selectability function type (like MUI DataGrid)
+export type IsRowSelectableFunction<T = any> = (params: { row: T; id: string }) => boolean;
+
+// Selection mode type
+export type SelectMode = 'page' | 'all';
+
+// Options for the custom selection feature
+export interface SelectionOptions {
+    enableAdvanceSelection?: boolean;
+    selectMode?: SelectMode;
+    isRowSelectable?: IsRowSelectableFunction;
+    onSelectionStateChange?: (updater: Updater<SelectionState>) => void;
+}
+
+// Table state interface for selection
+export interface SelectionTableState {
+    selectionState: SelectionState;
+}
+
+// Declaration merging to extend TanStack Table types
+declare module '@tanstack/react-table' {
+    interface TableState extends SelectionTableState { }
+    interface TableOptionsResolved<TData extends RowData>
+        extends SelectionOptions { }
+    interface Table<TData extends RowData> extends SelectionInstance<TData> { }
+}
+
+// Table instance methods for custom selection
+export interface SelectionInstance<TData extends RowData> {
+    // Basic selection methods
+    setSelectionState: (updater: Updater<SelectionState>) => void;
+    toggleAllRowsSelected: () => void;
+    toggleRowSelected: (rowId: string) => void;
+    selectRow: (rowId: string) => void;
+    deselectRow: (rowId: string) => void;
+    selectAll: () => void;
+    deselectAll: () => void;
+
+    // State checkers
+    getIsAllRowsSelected: () => boolean;
+    getIsSomeRowsSelected: () => boolean;
+    getIsRowSelected: (rowId: string) => boolean;
+
+    // Getters
+    getSelectionState: () => SelectionState;
+    getSelectedCount: () => number;
+    getSelectedRows: () => Row<TData>[];
+    getSelectedRowIds: () => string[];
+
+    // Helper methods
+    canSelectRow: (rowId: string) => boolean;
+}
+
+// The custom selection feature implementation (same pattern as CustomColumnFilterFeature)
+export const SelectionFeature: TableFeature<any> = {
+    // Define the feature's initial state
+    getInitialState: (state): SelectionTableState => {
+        return {
+            selectionState: {
+                ids: [],
+                type: 'include',
+                selectMode: 'page',
+            },
+            ...state,
+        };
+    },
+
+    // Define the feature's default options
+    getDefaultOptions: <TData extends RowData>(
+        table: Table<TData>
+    ): SelectionOptions => {
+        return {
+            enableAdvanceSelection: true,
+            selectMode: 'page',
+            onSelectionStateChange: makeStateUpdater('selectionState', table),
+        } as SelectionOptions;
+    },
+
+    // Define the feature's table instance methods
+    createTable: <TData extends RowData>(table: Table<TData>): void => {
+        table.setSelectionState = (updater) => {
+            if (!table.options.enableAdvanceSelection) return;
+            const safeUpdater: Updater<SelectionState> = (old) => {
+                const newState = functionalUpdate(updater, old);
+                return newState;
+            };
+            return table.options.onSelectionStateChange?.(safeUpdater);
+        };
+
+        // === BASIC SELECTION METHODS ===
+        table.selectRow = (rowId: string) => {
+            if (!table.options.enableAdvanceSelection) return;
+            if (!table.canSelectRow(rowId)) return;
+
+            table.setSelectionState((old) => {
+                if (old.type === 'exclude') {
+                    // In exclude mode, selecting means removing from exclude list
+                    return {
+                        ...old,
+                        ids: old.ids.filter(id => id !== rowId),
+                    };
+                } else {
+                    // In include mode, selecting means adding to include list
+                    const newIds = old.ids.includes(rowId) ? old.ids : [...old.ids, rowId];
+                    return {
+                        ...old,
+                        ids: newIds,
+                    };
+                }
+            });
+        };
+
+        table.deselectRow = (rowId: string) => {
+            if (!table.options.enableAdvanceSelection) return;
+            table.setSelectionState((old) => {
+                if (old.type === 'exclude') {
+                    // In exclude mode, deselecting means adding to exclude list
+                    const newIds = old.ids.includes(rowId) ? old.ids : [...old.ids, rowId];
+                    return {
+                        ...old,
+                        ids: newIds,
+                    };
+                } else {
+                    // In include mode, deselecting means removing from include list
+                    return {
+                        ...old,
+                        ids: old.ids.filter(id => id !== rowId),
+                    };
+                }
+            });
+        };
+
+        table.toggleRowSelected = (rowId: string) => {
+            if (!table.options.enableAdvanceSelection) return;
+            if (table.getIsRowSelected(rowId)) {
+                table.deselectRow(rowId);
+            } else {
+                table.selectRow(rowId);
+            }
+        };
+
+        table.selectAll = () => {
+            if (!table.options.enableAdvanceSelection) return;
+            const selectMode = table.options.selectMode || 'page';
+
+            const currentRows =
+                table.getPaginationRowModel?.()?.rows ||
+                table.getRowModel().rows;
+
+            if (selectMode === 'all') {
+                // In 'all' mode, use exclude type with empty list (select all)
+                table.setSelectionState((old) => ({
+                    ...old,
+                    ids: [],
+                    type: 'exclude',
+                }));
+            } else {
+                // In 'page' mode, select current page rows
+                const selectableRowIds = currentRows
+                    .filter(row => table.canSelectRow(row.id))
+                    .map(row => row.id);
+
+                table.setSelectionState((old) => ({
+                    ...old,
+                    ids: selectableRowIds,
+                    type: 'include',
+                }));
+            }
+        };
+
+        table.deselectAll = () => {
+            if (!table.options.enableAdvanceSelection) return;
+            table.setSelectionState((old) => ({
+                ...old,
+                ids: [],
+                type: 'include',
+            }));
+        };
+
+        table.toggleAllRowsSelected = () => {
+            if (!table.options.enableAdvanceSelection) return;
+            if (table.getIsAllRowsSelected()) {
+                table.deselectAll();
+            } else {
+                table.selectAll();
+            }
+        };
+
+        // === STATE CHECKERS ===
+        table.getIsRowSelected = (rowId: string) => {
+            const state = table.getSelectionState();
+            if (state.type === 'exclude') {
+                // In exclude mode, selected if NOT in exclude list
+                return !state.ids.includes(rowId);
+            } else {
+                // In include mode, selected if in include list
+                return state.ids.includes(rowId);
+            }
+        };
+
+        table.getIsAllRowsSelected = () => {
+            const state = table.getSelectionState();
+            const selectMode = table.options.selectMode || 'page';
+
+            if (selectMode === 'all') {
+                const totalCount = table.getRowCount();
+                if (totalCount === 0) return false;
+
+                if (state.type === 'exclude') {
+                    return state.ids.length === 0;
+                } else {
+                    return state.ids.length === totalCount;
+                }
+            } else {
+                // Page mode - check if all selectable rows on current page are selected
+                const currentPageRows = table.getPaginationRowModel?.()?.rows || table.getRowModel().rows;
+                const selectableRows = currentPageRows.filter(row => table.canSelectRow(row.id));
+
+                if (selectableRows.length === 0) return false;
+                return selectableRows.every(row => table.getIsRowSelected(row.id));
+            }
+        };
+
+        table.getIsSomeRowsSelected = () => {
+            const state = table.getSelectionState();
+            const selectMode = table.options.selectMode || 'page';
+
+            if (selectMode === 'all' && state.type === 'exclude') {
+                // In exclude mode, we have some selected if not all are excluded
+                const totalCount = table.getRowCount();
+                return totalCount > 0 && state.ids.length < totalCount;
+            } else {
+                // In include mode, we have some selected if list has items
+                return state.ids.length > 0;
+            }
+        };
+
+        // === GETTERS ===
+        table.getSelectionState = () => {
+            return table.getState().selectionState || {
+                ids: [],
+                type: 'include',
+                selectMode: 'page',
+            };
+        };
+
+        table.getSelectedCount = () => {
+            const state = table.getSelectionState();
+            const selectMode = table.options.selectMode || 'page';
+
+            if (selectMode === 'all' && state.type === 'exclude') {
+                // For server-side data, use rowCount which includes total from server
+                // For client-side data, this will be the same as getRowModel().rows.length
+                const totalCount = table.getRowCount();
+                return Math.max(0, totalCount - state.ids.length);
+            } else {
+                return state.ids.length;
+            }
+        };
+
+        table.getSelectedRowIds = () => {
+            const state = table.getSelectionState();
+            if (state.type === 'exclude') {
+                console.warn(
+                    '[SelectionFeature] getSelectedRowIds() is not accurate in exclude mode. Use getSelectionState() to interpret selection properly.'
+                );
+                return []; // Return empty to avoid misleading API
+            }
+            return state.ids;
+        };
+
+        table.getSelectedRows = () => {
+            const state = table.getSelectionState();
+            const allRows = table.getRowModel().rows;
+
+            if (state.type === 'exclude') {
+                // Return all rows except excluded ones
+                return allRows.filter(row => !state.ids.includes(row.id))
+            } else {
+                // Return only included rows
+                return allRows.filter(row => state.ids.includes(row.id))
+            }
+        };
+
+        // === HELPER METHODS ===
+        table.canSelectRow = (rowId: string) => {
+            if (!table.options.isRowSelectable) return true;
+
+            const row = table.getRowModel().rows.find(r => r.id === rowId);
+            if (!row) return false;
+
+            return table.options.isRowSelectable({ row: row.original, id: rowId });
+        };
+    },
+};

package/src/lib/icons/add-icon.tsx

@@ -0,0 +1,23 @@
+import React, { ReactElement } from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+
+export function AddIcon(props: SvgIconProps): ReactElement {
+    return (
+        <SvgIcon
+            {...props}
+            viewBox="0 0 24 24"
+        >
+            <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+            <circle
+                cx="12"
+                cy="12"
+                r="9"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="0.5"
+                opacity="0.3"
+            />
+        </SvgIcon>
+    );
+}

package/src/lib/icons/csv-icon.tsx

@@ -0,0 +1,15 @@
+import React, { ReactElement } from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+
+export function CsvIcon(props: SvgIconProps): ReactElement {
+    return (
+        <SvgIcon
+            {...props}
+            viewBox="0 0 24 24"
+        >
+            <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z" />
+            <path d="M7,12.5A0.5,0.5 0 0,1 7.5,12H8.5A0.5,0.5 0 0,1 9,12.5V13.5A0.5,0.5 0 0,1 8.5,14H7.5A0.5,0.5 0 0,1 7,13.5M10.5,12.5A0.5,0.5 0 0,1 11,12H12A0.5,0.5 0 0,1 12.5,12.5V13.5A0.5,0.5 0 0,1 12,14H11A0.5,0.5 0 0,1 10.5,13.5M14,12.5A0.5,0.5 0 0,1 14.5,12H15.5A0.5,0.5 0 0,1 16,12.5V13.5A0.5,0.5 0 0,1 15.5,14H14.5A0.5,0.5 0 0,1 14,13.5" />
+        </SvgIcon>
+    );
+}

package/src/lib/icons/delete-icon.tsx

@@ -0,0 +1,30 @@
+import React, { ReactElement } from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+
+export function DeleteIcon(props: SvgIconProps): ReactElement {
+    return (
+        <SvgIcon
+            {...props}
+            viewBox="0 0 24 24"
+        >
+            <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
+            <rect
+                x="9"
+                y="8"
+                width="2"
+                height="9"
+                fill="currentColor"
+                opacity="0.6"
+            />
+            <rect
+                x="13"
+                y="8"
+                width="2"
+                height="9"
+                fill="currentColor"
+                opacity="0.6"
+            />
+        </SvgIcon>
+    );
+}

package/src/lib/icons/excel-icon.tsx

@@ -0,0 +1,15 @@
+import React, { ReactElement } from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+
+export function ExcelIcon(props: SvgIconProps): ReactElement {
+    return (
+        <SvgIcon
+            {...props}
+            viewBox="0 0 24 24"
+        >
+            <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z" />
+            <path d="M11.5,15L9.75,12.5L11.5,10H10L8.75,11.5L7.5,10H6L7.75,12.5L6,15H7.5L8.75,13.5L10,15H11.5M15,10V12H17V10H15M15,14V16H17V14H15Z" />
+        </SvgIcon>
+    );
+}

package/src/lib/icons/unpin-icon.tsx

@@ -0,0 +1,18 @@
+import React, { ReactElement } from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+
+export function UnpinIcon(props: SvgIconProps): ReactElement {
+    return (
+        <SvgIcon
+            {...props}
+            viewBox="0 0 24 24"
+        >
+            <path
+                d="M2 5.27L3.28 4 20 20.72 18.73 22l-3.41-3.41V22h-1.6v-6H8v-2l2-2V9.27L2 5.27zM16 12V4h1V2H7v2h1v3.73l8 8z"
+                opacity="0.7"
+            />
+            <path d="M14.73 12L16 10.73V4h1V2H7v2h1v3.73l2.27 2.27z" />
+        </SvgIcon>
+    );
+}

package/src/lib/icons/view-comfortable-icon.tsx

@@ -0,0 +1,45 @@
+import React, { ReactElement } from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+
+export function ViewComfortableIcon(props: SvgIconProps): ReactElement {
+    return (
+        <SvgIcon
+            {...props}
+            viewBox="0 0 24 24"
+        >
+            <rect
+                x="3"
+                y="3"
+                width="18"
+                height="3"
+                fill="currentColor"
+                rx="1"
+            />
+            <rect
+                x="3"
+                y="8"
+                width="18"
+                height="3"
+                fill="currentColor"
+                rx="1"
+            />
+            <rect
+                x="3"
+                y="13"
+                width="18"
+                height="3"
+                fill="currentColor"
+                rx="1"
+            />
+            <rect
+                x="3"
+                y="18"
+                width="18"
+                height="3"
+                fill="currentColor"
+                rx="1"
+            />
+        </SvgIcon>
+    );
+}

package/src/lib/icons/view-compact-icon.tsx

@@ -0,0 +1,55 @@
+import React, { ReactElement } from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+
+export function ViewCompactIcon(props: SvgIconProps): ReactElement {
+    return (
+        <SvgIcon
+            {...props}
+            viewBox="0 0 24 24"
+        >
+            <rect
+                x="3"
+                y="4"
+                width="18"
+                height="2"
+                fill="currentColor"
+            />
+            <rect
+                x="3"
+                y="7"
+                width="18"
+                height="2"
+                fill="currentColor"
+            />
+            <rect
+                x="3"
+                y="10"
+                width="18"
+                height="2"
+                fill="currentColor"
+            />
+            <rect
+                x="3"
+                y="13"
+                width="18"
+                height="2"
+                fill="currentColor"
+            />
+            <rect
+                x="3"
+                y="16"
+                width="18"
+                height="2"
+                fill="currentColor"
+            />
+            <rect
+                x="3"
+                y="19"
+                width="18"
+                height="2"
+                fill="currentColor"
+            />
+        </SvgIcon>
+    );
+}

package/src/lib/types/column.types.ts

@@ -0,0 +1,44 @@
+import { ColumnDef, RowData, Column } from '@tanstack/react-table';
+import { ColumnFilterRule } from '../features';
+
+
+export const DEFAULT_SELECTION_COLUMN_NAME = '_selection';
+export const DEFAULT_EXPANDING_COLUMN_NAME = '_expanding';
+
+/**
+ * Column Definition Types
+ * Consolidated column-related interfaces from various files
+ */
+
+/**
+ * Module augmentation to extend TanStack Table's ColumnMeta interface
+ * This automatically extends all ColumnDef types since they use ColumnMeta in their meta property
+ */
+declare module '@tanstack/react-table' {
+    interface ColumnDefBase<TData extends RowData, TValue> {
+        type?: 'boolean' | 'number' | 'date' | 'select' | 'text';
+        options?: {
+            label: string;
+            value: string;
+        }[];
+        align?: 'left' | 'center' | 'right';
+        filterable?: boolean;
+        hideInExport?: boolean;
+        wrapText?: boolean; // If true, text will wrap; if false, text will truncate with ellipsis (default: false)
+        editComponent?: React.ComponentType<{
+            value: any;
+            onChange: (value: any) => void;
+            filter: ColumnFilterRule;
+            column: Column<TData, TValue>;
+        }>;
+        filterComponent?: React.ComponentType<{
+            value: any;
+            onChange: (value: any) => void;
+            filter: ColumnFilterRule;
+            column: Column<TData, TValue>;
+        }>;
+    }
+}
+export type DataTableColumn<TData extends RowData, TValue = unknown> = ColumnDef<TData, TValue> & {
+// All custom properties are now defined in the module augmentation above
+}