@forgedevstack/grid-table 1.0.1 → 1.0.3

package/dist/index.d.ts

@@ -132,6 +132,9 @@ interface ColumnDefinition<T = unknown> {
     sortFn?: (a: unknown, b: unknown, direction: SortDirection) => number;
     filterFn?: (value: unknown, filterValue: unknown, operator: FilterOperator) => boolean;
     meta?: Record<string, unknown>;
+    showOverflowTooltip?: boolean;
+    renderSubCell?: (row: T) => ReactNode;
+    subCellExpandTrigger?: 'doubleClick' | 'arrow' | 'both';
 }
 interface FilterOption {
     value: string | number | boolean;
@@ -376,7 +379,7 @@ interface GridTableProps<T extends RowData = RowData> {
     getRowStyle?: (row: T, index: number) => React.CSSProperties;
     isRowDisabled?: (row: T) => boolean;
     isRowSelectable?: (row: T) => boolean;
-    renderRowExpansion?: (row: T) => ReactNode;
+    renderRowExpansion?: (row: T, rowId: string | number) => ReactNode;
     renderHeader?: () => ReactNode;
     renderFooter?: () => ReactNode;
     renderEmpty?: () => ReactNode;
@@ -425,6 +428,119 @@ interface GridTableRef<T extends RowData = RowData> {
     exportData: (format: 'json' | 'csv') => void;
 }
 
+interface TableContextState<T extends RowData = RowData> {
+    data: T[];
+    originalData: T[];
+    columns: ColumnDefinition<T>[];
+    columnStates: ColumnState[];
+    sorting: SortValue[];
+    filters: FilterValue[];
+    globalFilter: string;
+    page: number;
+    pageSize: number;
+    totalItems: number;
+    selectedIds: Set<string | number>;
+    expandedIds: Set<string | number>;
+    expandedCellIds: Set<string>;
+    autoSizedColumnIds: Set<string>;
+    loading: boolean;
+    error: Error | string | null;
+    theme: Theme;
+    translations: Translations;
+    currentBreakpoint: Breakpoint;
+    mobileBreakpoint: Breakpoint;
+    draggingColumnId: string | null;
+    resizingColumnId: string | null;
+    activeFilterColumnId: string | null;
+    showMobileDrawer: boolean;
+    mobileDrawerContent: 'filter' | 'sort' | 'columns' | null;
+}
+interface TableContextActions<T extends RowData = RowData> {
+    setData: (data: T[]) => void;
+    setLoading: (loading: boolean) => void;
+    setError: (error: Error | string | null) => void;
+    setSorting: (columnId: string, direction: SortDirection) => void;
+    toggleSorting: (columnId: string) => void;
+    clearSorting: () => void;
+    setFilter: (columnId: string, value: unknown, operator?: FilterOperator) => void;
+    removeFilter: (columnId: string) => void;
+    clearFilters: () => void;
+    setGlobalFilter: (value: string) => void;
+    setPage: (page: number) => void;
+    setPageSize: (pageSize: number) => void;
+    selectRow: (id: string | number) => void;
+    deselectRow: (id: string | number) => void;
+    toggleRow: (id: string | number) => void;
+    selectAll: () => void;
+    deselectAll: () => void;
+    expandRow: (id: string | number) => void;
+    collapseRow: (id: string | number) => void;
+    toggleRowExpansion: (id: string | number) => void;
+    toggleCellExpansion: (rowId: string | number, columnId: string) => void;
+    toggleColumnAutoSize: (columnId: string) => void;
+    reorderColumn: (sourceId: string, targetId: string) => void;
+    resizeColumn: (columnId: string, width: number) => void;
+    toggleColumnVisibility: (columnId: string) => void;
+    resetColumns: () => void;
+    setDraggingColumn: (columnId: string | null) => void;
+    setResizingColumn: (columnId: string | null) => void;
+    setActiveFilterColumn: (columnId: string | null) => void;
+    openMobileDrawer: (content: 'filter' | 'sort' | 'columns') => void;
+    closeMobileDrawer: () => void;
+    refresh: () => void;
+    reset: () => void;
+}
+type SubCellExpandTrigger = 'doubleClick' | 'arrow' | 'both';
+interface TableOptions {
+    showOverflowTooltip?: boolean;
+    enableCellAutoSizeOnDoubleClick?: boolean;
+    subCellExpandTrigger?: SubCellExpandTrigger;
+    expandRowOnDoubleClick?: boolean;
+    globalFilterColumns?: string[];
+}
+interface TableContextValue<T extends RowData = RowData> {
+    state: TableContextState<T>;
+    actions: TableContextActions<T>;
+    tableOptions: TableOptions;
+    computed: {
+        filteredData: T[];
+        sortedData: T[];
+        paginatedData: T[];
+        visibleColumns: ColumnDefinition<T>[];
+        totalPages: number;
+        canGoNext: boolean;
+        canGoPrevious: boolean;
+        allSelected: boolean;
+        someSelected: boolean;
+        isMobile: boolean;
+        isTablet: boolean;
+        isDesktop: boolean;
+    };
+}
+interface TableProviderProps<T extends RowData = RowData> {
+    children: ReactNode;
+    data: T[];
+    columns: ColumnDefinition<T>[];
+    loading?: boolean;
+    error?: Error | string | null;
+    theme?: Partial<Theme>;
+    translations?: Partial<Translations>;
+    mobileBreakpoint?: Breakpoint;
+    paginationConfig?: PaginationConfig;
+    filterConfig?: FilterConfig;
+    sortConfig?: SortConfig;
+    enableMultiSort?: boolean;
+    enableRowSelection?: boolean;
+    enableMultiSelect?: boolean;
+    getRowId?: (row: T) => string | number;
+    onStateChange?: (state: TableContextState<T>) => void;
+    showOverflowTooltip?: boolean;
+    enableCellAutoSizeOnDoubleClick?: boolean;
+    subCellExpandTrigger?: SubCellExpandTrigger;
+    expandRowOnDoubleClick?: boolean;
+    globalFilterColumns?: string[];
+}
+
 interface GridTableComponentProps<T extends RowData = RowData> {
     data: T[];
     columns: ColumnDefinition<T>[];
@@ -478,15 +594,23 @@ interface GridTableComponentProps<T extends RowData = RowData> {
     getRowClassName?: (row: T, index: number) => string;
     getRowStyle?: (row: T, index: number) => CSSProperties;
     isRowDisabled?: (row: T) => boolean;
-    renderRowExpansion?: (row: T) => ReactNode;
+    renderRowExpansion?: (row: T, rowId: string | number) => ReactNode;
+    themeMode?: 'light' | 'dark' | 'system';
     renderHeader?: () => ReactNode;
     renderFooter?: () => ReactNode;
     tableRef?: RefObject<GridTableRef<T>>;
     className?: string;
     style?: CSSProperties;
+    showOverflowTooltip?: boolean;
+    enableCellAutoSizeOnDoubleClick?: boolean;
+    subCellExpandTrigger?: SubCellExpandTrigger;
+    expandRowOnDoubleClick?: boolean;
+    globalFilterColumns?: string[];
+    themeOverride?: Record<string, unknown>;
+    studio?: boolean;
 }
 
-declare function GridTable<T extends RowData = RowData>({ data, columns, loading, error, theme, translations, mobileBreakpoint, paginationConfig, filterConfig, sortConfig, enableMultiSelect, getRowId, ...props }: GridTableComponentProps<T>): ReactNode;
+declare function GridTable<T extends RowData = RowData>({ data, columns, loading, error, theme, translations, mobileBreakpoint, paginationConfig, filterConfig, sortConfig, enableMultiSelect, getRowId, showOverflowTooltip, enableCellAutoSizeOnDoubleClick, subCellExpandTrigger, expandRowOnDoubleClick, themeMode, themeOverride, studio, ...props }: GridTableComponentProps<T>): ReactNode;
 
 interface GridHeaderProps<T extends RowData = RowData> {
     columns: ColumnDefinition<T>[];
@@ -499,6 +623,7 @@ interface GridHeaderProps<T extends RowData = RowData> {
     enableDragDrop?: boolean;
     enableResize?: boolean;
     enableSelection?: boolean;
+    enableExpansion?: boolean;
     allSelected?: boolean;
     someSelected?: boolean;
     onSelectAll?: () => void;
@@ -507,7 +632,7 @@ interface GridHeaderProps<T extends RowData = RowData> {
     getSortDirection?: (columnId: string) => SortDirection;
 }
 
-declare function GridHeader<T extends RowData = RowData>({ columns, columnStates, className, style, sticky, enableSort, enableFilter, enableDragDrop, enableResize, enableSelection, allSelected, someSelected, onSelectAll, onSort, onFilterOpen, getSortDirection, }: GridHeaderProps<T>): ReactNode;
+declare function GridHeader<T extends RowData = RowData>({ columns, columnStates, className, style, sticky, enableSort, enableFilter, enableDragDrop, enableResize, enableSelection, enableExpansion, allSelected, someSelected, onSelectAll, onSort, onFilterOpen, getSortDirection, }: GridHeaderProps<T>): ReactNode;
 
 interface CellClickEvent<T extends RowData = RowData> {
     row: T;
@@ -519,6 +644,7 @@ interface GridCellProps<T extends RowData = RowData> {
     column: ColumnDefinition<T>;
     row: T;
     rowIndex: number;
+    rowId: string | number;
     value: unknown;
     width?: number | string;
     align?: Alignment;
@@ -552,7 +678,7 @@ interface GridBodyProps<T extends RowData = RowData> {
     getRowClassName?: (row: T, index: number) => string;
     getRowStyle?: (row: T, index: number) => CSSProperties;
     isRowDisabled?: (row: T) => boolean;
-    renderRowExpansion?: (row: T) => ReactNode;
+    renderRowExpansion?: (row: T, rowId: string | number) => ReactNode;
 }
 
 declare function GridBody<T extends RowData = RowData>({ data, columns, columnStates, className, style, isMobile, showMobileLabels, enableSelection, enableExpansion, selectedIds, expandedIds, onRowClick, onRowDoubleClick, onCellClick, onRowSelect, onRowExpand, getRowId, getRowClassName, getRowStyle, isRowDisabled, renderRowExpansion, }: GridBodyProps<T>): ReactNode;
@@ -577,13 +703,13 @@ interface GridRowProps<T extends RowData = RowData> {
     onExpand?: (expanded: boolean) => void;
     enableSelection?: boolean;
     enableExpansion?: boolean;
-    renderExpansion?: (row: T) => ReactNode;
+    renderExpansion?: (row: T, rowId: string | number) => ReactNode;
     getRowId: (row: T) => string | number;
 }
 
 declare function GridRow<T extends RowData = RowData>({ row, rowIndex, columns, columnStates, isSelected, isExpanded, isDisabled, isMobile, showMobileLabels, className, style, onClick, onDoubleClick, onContextMenu, onCellClick, onSelect, onExpand, enableSelection, enableExpansion, renderExpansion, getRowId, }: GridRowProps<T>): ReactNode;
 
-declare function GridCell<T extends RowData = RowData>({ column, row, rowIndex, value, width, align, className, style, showLabel, labelText, sticky, stickyOffset, onClick, }: GridCellProps<T>): ReactNode;
+declare function GridCell<T extends RowData = RowData>({ column, row, rowIndex, rowId, value, width, align, className, style, showLabel, labelText, sticky, stickyOffset, onClick, }: GridCellProps<T>): ReactNode;
 
 interface PaginationProps {
     page: number;
@@ -638,103 +764,8 @@ interface MobileDrawerProps {
 
 declare function MobileDrawer({ isOpen, content, onClose, className, style, }: MobileDrawerProps): ReactNode;
 
-interface TableContextState<T extends RowData = RowData> {
-    data: T[];
-    originalData: T[];
-    columns: ColumnDefinition<T>[];
-    columnStates: ColumnState[];
-    sorting: SortValue[];
-    filters: FilterValue[];
-    globalFilter: string;
-    page: number;
-    pageSize: number;
-    totalItems: number;
-    selectedIds: Set<string | number>;
-    expandedIds: Set<string | number>;
-    loading: boolean;
-    error: Error | string | null;
-    theme: Theme;
-    translations: Translations;
-    currentBreakpoint: Breakpoint;
-    mobileBreakpoint: Breakpoint;
-    draggingColumnId: string | null;
-    resizingColumnId: string | null;
-    activeFilterColumnId: string | null;
-    showMobileDrawer: boolean;
-    mobileDrawerContent: 'filter' | 'sort' | 'columns' | null;
-}
-interface TableContextActions<T extends RowData = RowData> {
-    setData: (data: T[]) => void;
-    setLoading: (loading: boolean) => void;
-    setError: (error: Error | string | null) => void;
-    setSorting: (columnId: string, direction: SortDirection) => void;
-    toggleSorting: (columnId: string) => void;
-    clearSorting: () => void;
-    setFilter: (columnId: string, value: unknown, operator?: FilterOperator) => void;
-    removeFilter: (columnId: string) => void;
-    clearFilters: () => void;
-    setGlobalFilter: (value: string) => void;
-    setPage: (page: number) => void;
-    setPageSize: (pageSize: number) => void;
-    selectRow: (id: string | number) => void;
-    deselectRow: (id: string | number) => void;
-    toggleRow: (id: string | number) => void;
-    selectAll: () => void;
-    deselectAll: () => void;
-    expandRow: (id: string | number) => void;
-    collapseRow: (id: string | number) => void;
-    toggleRowExpansion: (id: string | number) => void;
-    reorderColumn: (sourceId: string, targetId: string) => void;
-    resizeColumn: (columnId: string, width: number) => void;
-    toggleColumnVisibility: (columnId: string) => void;
-    resetColumns: () => void;
-    setDraggingColumn: (columnId: string | null) => void;
-    setResizingColumn: (columnId: string | null) => void;
-    setActiveFilterColumn: (columnId: string | null) => void;
-    openMobileDrawer: (content: 'filter' | 'sort' | 'columns') => void;
-    closeMobileDrawer: () => void;
-    refresh: () => void;
-    reset: () => void;
-}
-interface TableContextValue<T extends RowData = RowData> {
-    state: TableContextState<T>;
-    actions: TableContextActions<T>;
-    computed: {
-        filteredData: T[];
-        sortedData: T[];
-        paginatedData: T[];
-        visibleColumns: ColumnDefinition<T>[];
-        totalPages: number;
-        canGoNext: boolean;
-        canGoPrevious: boolean;
-        allSelected: boolean;
-        someSelected: boolean;
-        isMobile: boolean;
-        isTablet: boolean;
-        isDesktop: boolean;
-    };
-}
-interface TableProviderProps<T extends RowData = RowData> {
-    children: ReactNode;
-    data: T[];
-    columns: ColumnDefinition<T>[];
-    loading?: boolean;
-    error?: Error | string | null;
-    theme?: Partial<Theme>;
-    translations?: Partial<Translations>;
-    mobileBreakpoint?: Breakpoint;
-    paginationConfig?: PaginationConfig;
-    filterConfig?: FilterConfig;
-    sortConfig?: SortConfig;
-    enableMultiSort?: boolean;
-    enableRowSelection?: boolean;
-    enableMultiSelect?: boolean;
-    getRowId?: (row: T) => string | number;
-    onStateChange?: (state: TableContextState<T>) => void;
-}
-
 declare const TableContext: react.Context<TableContextValue<RowData> | null>;
-declare function TableProvider<T extends RowData>({ children, data, columns, loading, error, theme, translations, mobileBreakpoint, paginationConfig, filterConfig: _filterConfig, sortConfig: _sortConfig, enableMultiSort, getRowId, onStateChange, }: TableProviderProps<T>): ReactNode;
+declare function TableProvider<T extends RowData>({ children, data, columns, loading, error, theme, translations, mobileBreakpoint, paginationConfig, filterConfig: _filterConfig, sortConfig: _sortConfig, enableMultiSort, getRowId, onStateChange, showOverflowTooltip, enableCellAutoSizeOnDoubleClick, subCellExpandTrigger, expandRowOnDoubleClick, globalFilterColumns, }: TableProviderProps<T>): ReactNode;
 declare function useTableContext<T extends RowData = RowData>(): TableContextValue<T>;
 
 interface UseSortReturn {