@ackplus/react-tanstack-data-table
Version:
A powerful React data table component built with MUI and TanStack Table
102 lines • 3.9 kB
TypeScript
/**
* Type definitions for DataTable components
*/
import { Row, SortingState, ColumnResizeMode, ColumnPinningState, PaginationState, ColumnDef } from '@tanstack/react-table';
import { ReactNode } from 'react';
import type { ColumnFilterState, TableFilters, TableState } from './index';
import { DataTableSlots, PartialSlotProps } from './slots.types';
import { DataTableSize } from '../utils/table-helpers';
import { SelectionState, SelectMode } from '../features';
import { DataTableLoggingOptions } from '../utils/logger';
export interface DataTableProps<T> {
columns: ColumnDef<T, any>[];
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;
onSelectionChange?: (selection: SelectionState) => void;
onRowClick?: (event: React.MouseEvent<HTMLTableRowElement>, row: Row<T>) => void;
selectOnRowClick?: boolean;
enableBulkActions?: boolean;
bulkActions?: (selectionState: SelectionState) => ReactNode;
enableColumnResizing?: boolean;
columnResizeMode?: ColumnResizeMode;
onColumnSizingChange?: (sizing: Record<string, number>) => void;
enableColumnDragging?: boolean;
onColumnDragEnd?: (columnOrder: string[]) => void;
enableColumnPinning?: boolean;
onColumnPinningChange?: (pinning: ColumnPinningState) => void;
enableColumnVisibility?: boolean;
onColumnVisibilityChange?: (visibility: Record<string, boolean>) => 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;
enableTableSizeControl?: boolean;
enableExport?: boolean;
enableReset?: boolean;
loading?: boolean;
emptyMessage?: string | ReactNode;
skeletonRows?: number;
onColumnFiltersChange?: (filterState: ColumnFilterState) => void;
onPaginationChange?: (pagination: PaginationState) => void;
onGlobalFilterChange?: (globalFilter: string) => void;
onColumnFilterChange?: (columnFilter: ColumnFilterState) => void;
slots?: Partial<DataTableSlots<T>>;
slotProps?: PartialSlotProps<T>;
logging?: boolean | DataTableLoggingOptions;
}
//# sourceMappingURL=data-table.types.d.ts.map