@shakibdshy/react-tablegrid
Version:
A modern, flexible, headless and advanced table component for React with grid layout
80 lines (75 loc) • 3.09 kB
TypeScript
export { u as useTableGrid } from './use-table-grid-DwCNfmcG.js';
import { TableState, ColumnResizeInfoState, Column, TableEventMap } from './types.js';
import 'react';
interface UseTableStateOptions<T> {
data: T[];
columns: Column<T>[];
initialState?: Partial<TableState<T>>;
onStateChange?: (state: TableState<T>) => void;
debounceMs?: number;
columnResizeMode?: "onChange" | "onResize";
columnResizeDirection?: "ltr" | "rtl";
}
/**
* Hook for managing table state
* Handles state updates and initialization
*/
declare function useTableState<T extends Record<string, unknown>>({ data, columns, initialState, onStateChange, debounceMs, columnResizeMode, columnResizeDirection, }: UseTableStateOptions<T>): {
state: TableState<T>;
updateState: (updates: Partial<TableState<T>> | ((current: TableState<T>) => TableState<T>)) => void;
resetState: () => void;
setData: (newData: T[]) => void;
toggleColumnVisibility: (columnId: keyof T) => void;
toggleColumnPin: (columnId: keyof T, position: "left" | "right" | false) => void;
updateColumnSizing: (columnId: string, width: number) => void;
columnResizeInfo: ColumnResizeInfoState;
handleColumnResizeStart: (columnId: string, startX: number) => void;
handleColumnResizeMove: (currentX: number) => void;
handleColumnResizeEnd: () => void;
columnResizeMode: "onChange" | "onResize";
columnResizeDirection: "ltr" | "rtl";
debouncedFilterValue: string | undefined;
};
interface UseTableEventsOptions<T extends Record<string, unknown>> {
state: TableState<T>;
updateState: (updates: Partial<TableState<T>>) => void;
events?: Partial<TableEventMap<T>>;
}
/**
* Hook for managing table events
* Provides event handlers for table interactions
*/
declare function useTableEvents<T extends Record<string, unknown>>({ state, updateState, events, }: UseTableEventsOptions<T>): {
handleSort: (column: Column<T>) => void;
handleFilterChange: (value: string, filteredData: T[]) => void;
handleColumnResize: (columnId: keyof T, width: number) => void;
handleColumnVisibilityChange: (columnId: keyof T, isVisible: boolean) => void;
handleColumnPin: (columnId: keyof T, position: "left" | "right" | false) => void;
handleRowSelect: (row: T, index: number) => void;
handleStateChange: (newState: TableState<T>) => void;
handleKeyDown: (event: KeyboardEvent) => void;
};
interface VirtualizationConfig {
rowHeight: number;
overscan: number;
scrollingDelay?: number;
enabled?: boolean;
getRowHeight?: (index: number) => number;
}
interface VirtualItem<T> {
item: T;
index: number;
style: {
position: "absolute";
top: number;
width: string;
height: number;
};
}
declare function useVirtualization<T>(items: T[], config: VirtualizationConfig): {
containerRef: React.RefObject<HTMLDivElement>;
virtualItems: VirtualItem<T>[];
totalHeight: number;
scrollTo: (index: number) => void;
};
export { useTableEvents, useTableState, useVirtualization };