@ackplus/react-tanstack-data-table
Version:
A powerful React data table component built with MUI and TanStack Table
139 lines • 5.28 kB
TypeScript
import { ColumnPinningState, SortingState, ColumnOrderState, TableState, Row, Table } from '@tanstack/react-table';
import { ColumnFilterState } from './table.types';
import { SelectionState } from '../features';
export interface DataTableApi<T = any> {
columnVisibility: {
showColumn: (columnId: string) => void;
hideColumn: (columnId: string) => void;
toggleColumn: (columnId: string) => void;
showAllColumns: () => void;
hideAllColumns: () => void;
resetColumnVisibility: () => void;
};
table: {
getTable: () => Table<T>;
};
columnOrdering: {
setColumnOrder: (columnOrder: ColumnOrderState) => void;
moveColumn: (columnId: string, toIndex: number) => void;
resetColumnOrder: () => void;
};
columnPinning: {
pinColumnLeft: (columnId: string) => void;
pinColumnRight: (columnId: string) => void;
unpinColumn: (columnId: string) => void;
setPinning: (pinning: ColumnPinningState) => void;
resetColumnPinning: () => void;
};
columnResizing: {
resizeColumn: (columnId: string, width: number) => void;
autoSizeColumn: (columnId: string) => void;
autoSizeAllColumns: () => void;
resetColumnSizing: () => void;
};
filtering: {
setGlobalFilter: (filter: string) => void;
clearGlobalFilter: () => void;
setColumnFilters: (filters: ColumnFilterState) => void;
addColumnFilter: (columnId: string, operator: string, value: any) => void;
removeColumnFilter: (filterId: string) => void;
clearAllFilters: () => void;
resetFilters: () => void;
};
sorting: {
setSorting: (sorting: SortingState) => void;
sortColumn: (columnId: string, direction: 'asc' | 'desc' | false) => void;
clearSorting: () => void;
resetSorting: () => void;
};
pagination: {
goToPage: (pageIndex: number) => void;
nextPage: () => void;
previousPage: () => void;
setPageSize: (pageSize: number) => void;
goToFirstPage: () => void;
goToLastPage: () => void;
resetPagination?: () => void;
};
selection: {
selectRow: (rowId: string) => void;
deselectRow: (rowId: string) => void;
toggleRowSelection: (rowId: string) => void;
selectAll: () => void;
deselectAll: () => void;
toggleSelectAll: () => void;
getSelectionState: () => SelectionState;
getSelectedCount: () => number;
getSelectedRows: () => Row<T>[];
isRowSelected: (rowId: string) => boolean;
};
data: {
refresh: (resetPagination?: boolean) => void;
reload: () => void;
getAllData: () => T[];
getRowData: (rowId: string) => T | undefined;
getRowByIndex: (index: number) => T | undefined;
updateRow: (rowId: string, updates: Partial<T>) => void;
updateRowByIndex: (index: number, updates: Partial<T>) => void;
insertRow: (newRow: T, index?: number) => void;
deleteRow: (rowId: string) => void;
deleteRowByIndex: (index: number) => void;
deleteSelectedRows: () => void;
replaceAllData: (newData: T[]) => void;
updateMultipleRows: (updates: Array<{
rowId: string;
data: Partial<T>;
}>) => void;
insertMultipleRows: (newRows: T[], startIndex?: number) => void;
deleteMultipleRows: (rowIds: string[]) => void;
updateField: (rowId: string, fieldName: keyof T, value: any) => void;
updateFieldByIndex: (index: number, fieldName: keyof T, value: any) => void;
findRows: (predicate: (row: T) => boolean) => T[];
findRowIndex: (predicate: (row: T) => boolean) => number;
getDataCount: () => number;
getFilteredDataCount: () => number;
};
layout: {
resetLayout: () => void;
resetAll: () => void;
saveLayout: () => any;
restoreLayout: (layout: any) => void;
};
state: {
getTableState: () => any;
getCurrentFilters: () => ColumnFilterState;
getCurrentSorting: () => SortingState;
getCurrentPagination: () => {
pageIndex: number;
pageSize: number;
};
getCurrentSelection: () => SelectionState;
};
export: {
exportCSV: (options?: {
filename?: string;
onlyVisibleColumns?: boolean;
onlySelectedRows?: boolean;
includeHeaders?: boolean;
}) => Promise<void>;
exportExcel: (options?: {
filename?: string;
onlyVisibleColumns?: boolean;
onlySelectedRows?: boolean;
includeHeaders?: boolean;
}) => Promise<void>;
exportServerData: (options: {
format: 'csv' | 'excel';
filename?: string;
fetchData: (filters?: Partial<TableState>) => Promise<{
data: T[];
total: number;
}>;
pageSize?: number;
includeHeaders?: boolean;
}) => Promise<void>;
isExporting: () => boolean;
cancelExport: () => void;
};
}
//# sourceMappingURL=data-table-api.d.ts.map