@ackplus/react-tanstack-data-table/src/lib/components/table/data-table.types.d.ts

A powerful React data table component built with MUI and TanStack Table

import { Row, SortingState, ColumnResizeMode, ColumnPinningState, RowData } from '@tanstack/react-table';
import { ReactNode } from 'react';
import type { CustomColumnFilterState, TableFilters, TableState } from '../../types';
import { DataTableColumn } from '../../types';
import { DataTableSlots, PartialSlotProps } from '../../types/slots.types';
import { DataTableSize } from '../../utils/table-helpers';
import { SelectionState } from '../../features/custom-selection.feature';
export type SelectMode = 'page' | 'all';
declare module '@tanstack/table-core' {
    interface ColumnMeta<TData extends RowData, TValue> {
    }
}
export interface DataTableProps<T> {
    columns: DataTableColumn<T>[];
    data?: T[];
    totalRow?: number;
    idKey?: keyof T;
    extraFilter?: ReactNode | null;
    footerFilter?: ReactNode | null;
    dataMode?: 'client' | 'server';
    initialState?: Partial<TableState>;
    initialLoadData?: boolean;
    onDataStateChange?: (filters: Partial<TableState>) => void;
    onFetchData?: (filters: Partial<TableFilters>) => Promise<{
        data: T[];
        total: number;
    }>;
    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<TableState>, selection?: SelectionState) => Promise<{
        data: any[];
        total: number;
    }>;
    onExportCancel?: () => void;
    enableRowSelection?: boolean | ((row: Row<T>) => boolean);
    enableMultiRowSelection?: boolean;
    selectMode?: SelectMode;
    isRowSelectable?: (params: {
        row: T;
        id: string;
    }) => boolean;
    onRowSelectionChange?: (selectedRows: T[], selection?: SelectionState) => void;
    onSelectionChange?: (selection: SelectionState) => void;
    enableBulkActions?: boolean;
    bulkActions?: (selectionState: SelectionState) => ReactNode;
    enableColumnResizing?: boolean;
    columnResizeMode?: ColumnResizeMode;
    enableColumnDragging?: boolean;
    onColumnDragEnd?: (columnOrder: string[]) => void;
    enableColumnPinning?: boolean;
    onColumnPinningChange?: (pinning: ColumnPinningState) => void;
    enableExpanding?: boolean;
    getRowCanExpand?: (row: Row<T>) => boolean;
    renderSubComponent?: (row: Row<T>) => ReactNode;
    enablePagination?: boolean;
    paginationMode?: 'client' | 'server';
    enableGlobalFilter?: boolean;
    enableColumnFilter?: boolean;
    filterMode?: 'client' | 'server';
    enableSorting?: boolean;
    sortingMode?: 'client' | 'server';
    onSortingChange?: (sorting: SortingState) => void;
    enableHover?: boolean;
    enableStripes?: boolean;
    tableContainerProps?: any;
    tableProps?: any;
    fitToScreen?: boolean;
    tableSize?: DataTableSize;
    enableStickyHeaderOrFooter?: boolean;
    maxHeight?: string | number;
    enableVirtualization?: boolean;
    estimateRowHeight?: number;
    enableColumnVisibility?: boolean;
    enableTableSizeControl?: boolean;
    enableExport?: boolean;
    enableReset?: boolean;
    loading?: boolean;
    emptyMessage?: string;
    skeletonRows?: number;
    onColumnFiltersChange?: (filterState: CustomColumnFilterState) => void;
    onDataChange?: (data: T[]) => void;
    selectionColumn?: {
        width?: number;
        pinLeft?: boolean;
        customColumn?: DataTableColumn<any>;
        id?: string;
    };
    actionColumn?: {
        pinRight?: boolean;
        customColumn?: DataTableColumn<any>;
        id?: string;
    };
    expandingColumn?: {
        width?: number;
        pinLeft?: boolean;
        customColumn?: DataTableColumn<any>;
        id?: string;
    };
    slots?: Partial<DataTableSlots<T>>;
    slotProps?: PartialSlotProps<T>;
}