@rafal.lemieszewski/tide-ui 0.83.0 → 0.84.3

package/dist/types/components/product/data-table.d.ts

@@ -0,0 +1,802 @@
+import { ColumnDef, SortingState, VisibilityState, ExpandedState, GroupingState, ColumnOrderState, PaginationState, Row, FilterFn, ColumnResizeMode } from '@tanstack/react-table';
+import * as React from "react";
+export type FilterVariant = "text" | "select" | "multiselect" | "number" | "date" | "boolean";
+export interface NestedHeaderConfig {
+    id: string;
+    header: string | React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    columns: ColumnDef<any, any>[];
+}
+export type AggregationType = 'range' | 'average' | 'sum' | 'count' | 'uniqueCount' | 'mostCommon' | 'dateRange' | false | ((rows: any[], accessor: any) => string);
+export interface ColumnMeta {
+    label?: string;
+    filterVariant?: FilterVariant;
+    filterOptions?: Array<{
+        label: string;
+        value: string;
+        icon?: React.ComponentType<any>;
+    }>;
+    placeholder?: string;
+    icon?: React.ComponentType<any>;
+    renderInGroupedRows?: boolean;
+    aggregation?: AggregationType;
+    align?: 'left' | 'right';
+    verticalAlign?: 'top' | 'middle' | 'bottom';
+    truncate?: boolean;
+}
+declare module '@tanstack/react-table' {
+    interface ColumnMeta<TData extends unknown, TValue> {
+        label?: string;
+        filterVariant?: FilterVariant;
+        filterOptions?: Array<{
+            label: string;
+            value: string;
+            icon?: React.ComponentType<any>;
+        }>;
+        placeholder?: string;
+        icon?: React.ComponentType<any>;
+        renderInGroupedRows?: boolean;
+        aggregation?: AggregationType;
+        align?: 'left' | 'right';
+        verticalAlign?: 'top' | 'middle' | 'bottom';
+        truncate?: boolean;
+    }
+    interface ColumnDefBase<TData extends unknown, TValue = unknown> {
+        /**
+         * Custom cell renderer for section header rows.
+         * Similar to aggregatedCell for grouped rows, this allows rendering
+         * custom content for rows that act as section headers.
+         *
+         * When this returns non-null content, the row is treated as a section header:
+         * - The cell spans the full table width (colSpan = all columns)
+         * - Appropriate section header styling is applied
+         * - Other cells in the row are not rendered
+         *
+         * @example
+         * {
+         *   id: 'broker',
+         *   accessorKey: 'broker',
+         *   sectionHeaderCell: ({ row }) => {
+         *     if (row.original.isSectionHeader) {
+         *       return <div>Section: {row.original.name}</div>
+         *     }
+         *     return null
+         *   }
+         * }
+         */
+        sectionHeaderCell?: (info: any) => React.ReactNode;
+    }
+}
+declare const fuzzyFilter: FilterFn<any>;
+declare const multiSelectFilter: FilterFn<any>;
+declare const groupPreservingGlobalFilter: FilterFn<any>;
+interface DataTableSkeletonProps {
+    columns: number;
+    rows: number;
+    showRowBorder?: boolean;
+    showCellBorder?: boolean;
+    skipHeader?: boolean;
+    enableResponsiveWrapper?: boolean;
+}
+declare function DataTableSkeleton({ columns, rows, showRowBorder, showCellBorder, skipHeader, enableResponsiveWrapper }: DataTableSkeletonProps): import("react/jsx-runtime").JSX.Element;
+export interface DataTableEmptyStateProps {
+    title?: string;
+    description?: string;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    customContent?: React.ReactNode;
+}
+export interface DataTableNoResultsStateProps {
+    title?: string;
+    description?: string;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    customContent?: React.ReactNode;
+}
+export interface DataTableErrorStateProps {
+    error: Error | null;
+    onRetry?: () => void;
+    customContent?: React.ReactNode;
+}
+interface DataTableToolbarProps<_TData = any> {
+    table: any;
+    searchKey?: string;
+    searchPlaceholder?: string;
+    enableGlobalSearch?: boolean;
+    globalSearchPlaceholder?: string;
+    globalFilter?: string;
+    onGlobalFilterChange?: (value: string) => void;
+    enableGlobalFaceting?: boolean;
+    enableGrouping?: boolean;
+    showSettingsMenu?: boolean;
+    enableAutocomplete?: boolean;
+    autocompleteSuggestions?: string[];
+    autocompleteMinCharacters?: number;
+}
+declare const DataTableToolbar: <TData>(props: DataTableToolbarProps<TData>) => React.ReactElement;
+interface DataTableFilterProps {
+    column: any;
+}
+declare const DataTableFilter: React.NamedExoticComponent<DataTableFilterProps>;
+interface DataTableColumnHeaderProps<_TData = any, _TValue = any> extends React.HTMLAttributes<HTMLDivElement> {
+    column: any;
+    title: string;
+}
+declare const DataTableColumnHeader: <TData, TValue>(props: DataTableColumnHeaderProps<TData, TValue>) => React.ReactElement;
+interface DataTablePaginationProps<_TData = any> {
+    table: any;
+    enableGrouping?: boolean;
+    hideChildrenForSingleItemGroups?: Record<string, boolean>;
+    footerLabel?: React.ReactNode;
+    onNextPageHover?: () => void;
+    onPreviousPageHover?: () => void;
+    paginationVariant?: "default" | "full";
+    pageSizeOptions?: number[];
+}
+declare const DataTablePagination: <TData>(props: DataTablePaginationProps<TData>) => React.ReactElement;
+export type BorderStyle = "vertical" | "horizontal" | "both" | "none";
+/**
+ * Row state for color configuration
+ */
+export type RowState = 'expanded' | 'collapsed' | 'leaf';
+/**
+ * Color configuration for a specific depth level with state-aware overrides
+ */
+export interface DepthColorConfig {
+    /**
+     * Default color for this depth level (used when no state-specific color matches)
+     */
+    default: string;
+    /**
+     * Optional state-specific color overrides
+     */
+    expanded?: string;
+    collapsed?: string;
+    leaf?: string;
+}
+/**
+ * Granular color configuration by depth level
+ * Can be specified as:
+ * 1. Simple string (applies to all states at that depth)
+ * 2. DepthColorConfig object (state-aware colors for that depth)
+ */
+export type DepthColors = Record<number, string | DepthColorConfig>;
+/**
+ * Height configuration by depth level
+ * Supports CSS height values: "40px", "48px", "2.5rem", etc.
+ */
+export type DepthHeights = Record<number, string>;
+/**
+ * Comprehensive nested row styling configuration
+ */
+export interface NestedRowStyling {
+    /**
+     * Granular color configuration by depth level
+     *
+     * @example
+     * // Simple: same color for all states at each depth
+     * colors: {
+     *   0: 'var(--blue-50)',
+     *   1: 'var(--blue-25)',
+     *   2: 'var(--grey-25)'
+     * }
+     *
+     * @example
+     * // Advanced: state-specific colors per depth
+     * colors: {
+     *   0: {
+     *     default: 'var(--blue-50)',
+     *     expanded: 'var(--blue-100)',
+     *     collapsed: 'var(--blue-50)',
+     *     leaf: 'var(--grey-25)'
+     *   },
+     *   1: 'var(--blue-25)', // Simple string for depth 1
+     *   2: {
+     *     default: 'var(--grey-25)',
+     *     expanded: 'var(--grey-50)'
+     *   }
+     * }
+     */
+    colors?: DepthColors;
+    /**
+     * Height configuration by depth level
+     *
+     * @example
+     * heights: {
+     *   0: '48px',  // Parent rows
+     *   1: '40px',  // First level children
+     *   2: '36px'   // Second level children
+     * }
+     */
+    heights?: DepthHeights;
+    /**
+     * Default height for depths not explicitly specified
+     * Falls back to table size if not provided
+     */
+    defaultHeight?: string;
+}
+export interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+    searchKey?: string;
+    searchPlaceholder?: string;
+    title?: string;
+    /**
+     * Accessible caption/description for the table.
+     * Rendered as a visually hidden caption for screen readers.
+     * If not provided, falls back to `title` prop.
+     * @example "Product inventory listing with 50 items"
+     */
+    caption?: string;
+    className?: string;
+    stickyHeader?: boolean;
+    stickyFirstColumn?: boolean;
+    stickyLeftColumns?: number;
+    stickyRightColumns?: number;
+    enableResponsiveWrapper?: boolean;
+    showScrollIndicators?: boolean;
+    /**
+     * Minimum width for the table when responsive wrapper is enabled.
+     * This determines when horizontal scrolling triggers on smaller screens.
+     * @default "900px"
+     * @example "1200px" - For tables with many columns
+     * @example "100%" - To prevent horizontal scrolling
+     */
+    minTableWidth?: string;
+    isLoading?: boolean;
+    /**
+     * Controls how the table displays during loading.
+     * - 'replace': Full skeleton replaces table content (default)
+     * - 'preserve': Keep existing data visible while loading
+     */
+    loadingBehavior?: 'replace' | 'preserve';
+    loadingRowCount?: number;
+    borderStyle?: BorderStyle;
+    /** Global default vertical alignment for all table cells. Can be overridden per column via column meta. */
+    defaultVerticalAlign?: 'top' | 'middle' | 'bottom';
+    enableGlobalSearch?: boolean;
+    globalSearchPlaceholder?: string;
+    /**
+     * Enable autocomplete for global search.
+     * When enabled, shows suggestions as user types.
+     */
+    enableAutocomplete?: boolean;
+    /**
+     * Column keys to extract autocomplete suggestions from.
+     * If not provided, suggestions will be extracted from all columns.
+     * @example ['name', 'email', 'company']
+     */
+    globalSearchColumns?: string[];
+    /**
+     * Minimum characters required before showing autocomplete suggestions.
+     * @default 2
+     */
+    autocompleteMinCharacters?: number;
+    enableGlobalFaceting?: boolean;
+    enableColumnResizing?: boolean;
+    columnResizeMode?: ColumnResizeMode;
+    enableColumnResizePersistence?: boolean;
+    enablePaginationPersistence?: boolean;
+    storageKey?: string;
+    enableExpanding?: boolean;
+    getSubRows?: (row: TData) => TData[] | undefined;
+    /**
+     * DEPRECATED: Use nestedRowStyling.colors instead.
+     * Custom color overrides for expanding rows at different depths and states.
+     * If not provided, uses smart context-aware defaults that match grouping colors.
+     *
+     * This prop is maintained for backward compatibility but will be overridden
+     * by nestedRowStyling.colors if both are provided.
+     *
+     * @deprecated Use nestedRowStyling for granular control
+     * @example
+     * expandingRowColors={{
+     *   expandedParent: 'var(--blue-50)',
+     *   collapsedParent: 'var(--color-background-neutral-subtlest)',
+     *   children: 'var(--blue-25)'
+     * }}
+     */
+    expandingRowColors?: {
+        expandedParent?: string;
+        collapsedParent?: string;
+        children?: string;
+    };
+    /**
+     * Granular styling configuration for nested rows (expanding and grouped).
+     * Provides depth-specific colors and heights with state-aware overrides.
+     *
+     * Priority: nestedRowStyling > expandingRowColors > default colors
+     *
+     * @example
+     * nestedRowStyling={{
+     *   colors: {
+     *     0: { default: 'var(--blue-100)', expanded: 'var(--blue-150)' },
+     *     1: 'var(--blue-50)',
+     *     2: 'var(--blue-25)'
+     *   },
+     *   heights: {
+     *     0: '48px',
+     *     1: '40px'
+     *   },
+     *   defaultHeight: '36px'
+     * }}
+     */
+    nestedRowStyling?: NestedRowStyling;
+    enableGrouping?: boolean;
+    groupedColumnMode?: 'reorder' | 'remove' | false;
+    enableManualGrouping?: boolean;
+    /**
+     * When grouping is enabled, specifies which column should be used to
+     * render the parent/group rows instead of the grouped column itself.
+     *
+     * Use case: Group by one field (e.g., "fixtureId") but display another
+     * field's aggregatedCell in parent rows (e.g., "orderId").
+     *
+     * The specified column should define an aggregatedCell in its columnDef
+     * to customize how the group header is rendered. If no aggregatedCell is
+     * defined, it will fall back to showing the value from the first row.
+     *
+     * @example
+     * grouping={["fixtureId"]}
+     * groupDisplayColumn="orderId"
+     * columnVisibility={{ fixtureId: false }}
+     */
+    groupDisplayColumn?: string;
+    /**
+     * When grouping is enabled, hides child rows for groups that contain
+     * only a single item. This flattens single-item groups to show only
+     * the parent row, reducing visual redundancy.
+     *
+     * Per-column configuration using column ID as key:
+     * - Groups with 1 item: Only parent row shown (not expandable)
+     * - Groups with 2+ items: Parent + expandable children shown normally
+     *
+     * @example
+     * hideChildrenForSingleItemGroups={{ category: true, status: false }}
+     */
+    hideChildrenForSingleItemGroups?: Record<string, boolean>;
+    /**
+     * When both this and hideChildrenForSingleItemGroups are enabled for a column,
+     * removes the expander button spacer for groups without expandable children.
+     * This eliminates the left padding for single-item groups, improving visual alignment.
+     *
+     * Per-column configuration using column ID as key.
+     * Only takes effect when hideChildrenForSingleItemGroups is also enabled for that column.
+     *
+     * @example
+     * hideChildrenForSingleItemGroups={{ category: true, status: true }}
+     * hideExpanderForSingleItemGroups={{ category: true, status: true }}
+     */
+    hideExpanderForSingleItemGroups?: Record<string, boolean>;
+    enableRowPinning?: boolean;
+    keepPinnedRows?: boolean;
+    enableVirtualization?: boolean;
+    virtualContainerHeight?: number;
+    virtualRowHeight?: number;
+    virtualOverscan?: number;
+    nestedHeaders?: NestedHeaderConfig[];
+    enableNestedHeaders?: boolean;
+    enableColumnOrdering?: boolean;
+    enableRowSelection?: boolean;
+    showHeader?: boolean;
+    showPagination?: boolean;
+    /** Pagination variant. "full" shows first/last/prev/next buttons, "default" shows only prev/next. Default: "full" */
+    paginationVariant?: "default" | "full";
+    /** Page size options shown in the pagination dropdown. Default: [10, 25, 50, 100] */
+    pageSizeOptions?: number[];
+    /** Custom content to display in the table footer, useful for showing filtered item counts or other status information */
+    footerLabel?: React.ReactNode;
+    onTableReady?: (table: any) => void;
+    initialState?: {
+        grouping?: GroupingState;
+        expanded?: ExpandedState;
+        columnSizing?: Record<string, number>;
+        rowPinning?: {
+            top?: string[];
+            bottom?: string[];
+        };
+        pagination?: {
+            pageIndex: number;
+            pageSize: number;
+        };
+    };
+    sorting?: SortingState;
+    onSortingChange?: (updaterOrValue: SortingState | ((old: SortingState) => SortingState)) => void;
+    columnVisibility?: VisibilityState;
+    onColumnVisibilityChange?: (updaterOrValue: VisibilityState | ((old: VisibilityState) => VisibilityState)) => void;
+    grouping?: GroupingState;
+    onGroupingChange?: (updaterOrValue: GroupingState | ((old: GroupingState) => GroupingState)) => void;
+    columnOrder?: ColumnOrderState;
+    onColumnOrderChange?: (updaterOrValue: ColumnOrderState | ((old: ColumnOrderState) => ColumnOrderState)) => void;
+    columnSizing?: Record<string, number>;
+    onColumnSizingChange?: (updaterOrValue: Record<string, number> | ((old: Record<string, number>) => Record<string, number>)) => void;
+    pagination?: PaginationState;
+    onPaginationChange?: (updaterOrValue: PaginationState | ((old: PaginationState) => PaginationState)) => void;
+    /**
+     * Controlled expanded state. When provided, the component operates in controlled mode.
+     * Use with onExpandedChange to manage expansion state externally.
+     * Set to `true` to expand all rows, or an object mapping row IDs to booleans.
+     *
+     * @example
+     * // Expand specific rows
+     * expanded={{ 'row-1': true, 'row-2': true }}
+     *
+     * @example
+     * // Expand all rows
+     * expanded={true}
+     */
+    expanded?: ExpandedState;
+    /**
+     * Callback when expanded state changes (controlled mode).
+     * Receives the new expanded state or an updater function.
+     * Use with `expanded` prop for controlled expansion state.
+     *
+     * @example
+     * const [expanded, setExpanded] = useState<ExpandedState>({})
+     * <DataTable expanded={expanded} onExpandedChange={setExpanded} />
+     */
+    onExpandedChange?: (updaterOrValue: ExpandedState | ((old: ExpandedState) => ExpandedState)) => void;
+    renderSectionHeaderRow?: (row: any) => React.ReactNode | null;
+    /**
+     * Custom renderer for expanded row content.
+     * When provided and a row is expanded, renders this content as a full-width row
+     * below the parent row. Receives the React Table row object.
+     *
+     * @example
+     * renderSubComponent={(row) => (
+     *   <Card>
+     *     <CardContent>Details for {row.original.name}</CardContent>
+     *   </Card>
+     * )}
+     */
+    renderSubComponent?: (row: any) => React.ReactNode;
+    /**
+     * Custom function to determine if a row can be expanded.
+     * Overrides the default TanStack Table logic which checks for sub-rows.
+     * Useful when using renderSubComponent without hierarchical data.
+     *
+     * @example
+     * // Make all rows expandable
+     * getRowCanExpand={() => true}
+     *
+     * @example
+     * // Make rows expandable based on a property
+     * getRowCanExpand={(row) => row.original.hasDetails}
+     */
+    getRowCanExpand?: (row: any) => boolean;
+    autoExpandChildren?: boolean;
+    /**
+     * Callback fired when a row is clicked.
+     * Receives the row object from @tanstack/react-table and the click event.
+     * Use row.original to access the underlying data.
+     *
+     * By default, only leaf rows and single-item groups are clickable.
+     * Use isRowClickable to customize which rows can be clicked.
+     *
+     * @example
+     * onRowClick={(row, event) => {
+     *   console.log('Clicked data:', row.original);
+     *   setSelectedItem(row.original);
+     * }}
+     */
+    onRowClick?: (row: any, event: React.MouseEvent<HTMLTableRowElement>) => void;
+    /**
+     * Filter which rows should be clickable.
+     * Return false to prevent row from being clickable.
+     *
+     * By default, leaf rows and single-item groups are clickable.
+     *
+     * @example
+     * // Only allow leaf rows to be clicked
+     * isRowClickable={(row) => !row.getIsGrouped()}
+     *
+     * @example
+     * // Allow all rows including parent groups
+     * isRowClickable={(row) => true}
+     */
+    isRowClickable?: (row: any) => boolean;
+    /**
+     * CSS class name to apply to clickable rows.
+     * Default: applies cursor-pointer and hover background if onRowClick is provided
+     */
+    clickableRowClassName?: string;
+    /**
+     * When enabled with grouping, preserves entire groups during global search.
+     * If any row in a group matches, the entire group is shown and auto-expanded.
+     * Also enables highlighting of matched search terms.
+     */
+    groupPreservingSearch?: boolean;
+    /**
+     * ID of the currently active row (e.g., for detail view or navigation).
+     * When set, displays a left border indicator (3px solid brand color) on the matching row.
+     * Works independently from checkbox selection - both can be active simultaneously.
+     *
+     * @example
+     * // Basic usage with state
+     * const [activeRowId, setActiveRowId] = useState<string>()
+     * <DataTable
+     *   activeRowId={activeRowId}
+     *   onRowClick={(row) => setActiveRowId(row.id)}
+     * />
+     *
+     * @example
+     * // With routing (URL-based selection)
+     * const activeRowId = params.get('selectedId')
+     * <DataTable activeRowId={activeRowId} />
+     */
+    activeRowId?: string | number;
+    /**
+     * Custom CSS class name for styling the active row.
+     * When not provided, uses default styling: 3px left border with brand color.
+     *
+     * @example
+     * activeRowClassName="border-l-4 border-[var(--color-border-success)]"
+     */
+    activeRowClassName?: string;
+    /**
+     * Function to derive a unique row ID from row data.
+     * When provided, TanStack Table uses this instead of the default index-based ID.
+     * Useful when your data uses a different identifier field (e.g., clearanceId, userId).
+     *
+     * @example
+     * // Data with custom ID field
+     * getRowId={(row) => row.clearanceId}
+     *
+     * @example
+     * // Composite key
+     * getRowId={(row) => `${row.type}-${row.id}`}
+     */
+    getRowId?: (originalRow: TData, index: number, parent?: Row<TData>) => string;
+    /**
+     * Callback when active row changes.
+     * Useful for analytics, logging, or side effects when the highlighted row changes.
+     *
+     * @example
+     * onActiveRowChange={(rowId) => console.log('Active row:', rowId)}
+     */
+    onActiveRowChange?: (rowId: string | number | undefined) => void;
+    /**
+     * Callback when row selection changes.
+     * Called with the current selection state (map of row IDs to boolean).
+     * Enables external tracking of selection for bulk actions, analytics, etc.
+     *
+     * @example
+     * onRowSelectionChange={(selection) => {
+     *   const selectedIds = Object.keys(selection).filter(id => selection[id])
+     *   console.log('Selected rows:', selectedIds)
+     * }}
+     */
+    onRowSelectionChange?: (selection: Record<string, boolean>) => void;
+    /**
+     * Callback when user hovers over the next page button.
+     * Use for prefetching next page data (SWR pattern).
+     *
+     * @example
+     * onNextPageHover={() => prefetchNextPage()}
+     */
+    onNextPageHover?: () => void;
+    /**
+     * Callback when user hovers over the previous page button.
+     * Use for prefetching previous page data.
+     *
+     * @example
+     * onPreviousPageHover={() => prefetchPreviousPage()}
+     */
+    onPreviousPageHover?: () => void;
+    /**
+     * Callback when a row's data is updated (e.g., via inline editing).
+     * Use for optimistic updates in custom cell renderers.
+     *
+     * @param rowId - The ID of the updated row
+     * @param columnId - The ID of the updated column
+     * @param value - The new value
+     * @param previousValue - The previous value (for rollback)
+     *
+     * @example
+     * onRowUpdate={(rowId, columnId, value, previousValue) => {
+     *   updateData(rowId, columnId, value)
+     *     .catch(() => rollback(rowId, columnId, previousValue))
+     * }}
+     */
+    onRowUpdate?: (rowId: string, columnId: string, value: unknown, previousValue: unknown) => void | Promise<void>;
+    /**
+     * Callback when user approaches the end of the data.
+     * Use for infinite scroll implementations.
+     *
+     * @param currentPage - Current page index (0-based)
+     *
+     * @example
+     * onLoadMore={(page) => fetchMoreData(page + 1)}
+     */
+    onLoadMore?: (currentPage: number) => void;
+    /**
+     * Whether more data is available to load.
+     * When false, onLoadMore won't be triggered.
+     */
+    hasMoreData?: boolean;
+    /**
+     * Whether data is currently being loaded.
+     * Shows loading indicator at bottom when true.
+     */
+    isLoadingMore?: boolean;
+    /**
+     * Error object when data fetching fails.
+     * Displays error state UI with optional retry action.
+     */
+    error?: Error | null;
+    /**
+     * Callback when user clicks retry in error state.
+     * If not provided, retry button is hidden.
+     */
+    onRetry?: () => void;
+    /**
+     * Custom error component to replace default error UI.
+     */
+    errorComponent?: React.ReactNode;
+    /**
+     * Custom empty state when data array is empty AND no filters applied.
+     * Use for "no data exists yet" scenarios.
+     */
+    emptyState?: React.ReactNode;
+    /**
+     * Title for default empty state UI.
+     * @default "No data"
+     */
+    emptyStateTitle?: string;
+    /**
+     * Description for default empty state UI.
+     * @default "No items to display"
+     */
+    emptyStateDescription?: string;
+    /**
+     * Action button for empty state (e.g., "Add first item").
+     */
+    emptyStateAction?: {
+        label: string;
+        onClick: () => void;
+    };
+    /**
+     * Custom state when filters/search return no results.
+     * Distinct from emptyState - used when data exists but is filtered out.
+     */
+    noResultsState?: React.ReactNode;
+    /**
+     * Title for default no results UI.
+     * @default "No results found"
+     */
+    noResultsTitle?: string;
+    /**
+     * Description for default no results UI.
+     * @default "Try adjusting your search or filters"
+     */
+    noResultsDescription?: string;
+    /**
+     * Action for no results state (e.g., "Clear filters").
+     */
+    noResultsAction?: {
+        label: string;
+        onClick: () => void;
+    };
+    /**
+     * Indicates background refetch in progress.
+     * Shows subtle indicator instead of full skeleton.
+     * Keeps existing data visible during refetch.
+     */
+    isRefetching?: boolean;
+    /**
+     * Enable server-side sorting. When true:
+     * - Client-side sorting is disabled
+     * - onSortingChange is called when user sorts
+     * - Consumer fetches sorted data from server
+     */
+    manualSorting?: boolean;
+    /**
+     * Enable server-side filtering. When true:
+     * - Client-side filtering is disabled
+     * - Filter change callbacks are called when filters change
+     * - Consumer fetches filtered data from server
+     */
+    manualFiltering?: boolean;
+    /**
+     * Enable server-side pagination. When true:
+     * - Client-side pagination is disabled
+     * - onPaginationChange called when page changes
+     * - Requires rowCount prop for total pages
+     */
+    manualPagination?: boolean;
+    /**
+     * Total row count from server (required for server-side pagination).
+     * Without this, pagination cannot calculate total pages.
+     */
+    rowCount?: number;
+    /**
+     * Enable server-side expansion. When true:
+     * - onLoadChildren is called when a row is expanded
+     * - Consumer fetches child data from server
+     * - Use with expandingRowsLoading for loading indicators
+     */
+    manualExpanding?: boolean;
+    /**
+     * Callback when a row is expanded and children need to be loaded.
+     * Called only for rows that don't already have children loaded.
+     *
+     * @param row - The TanStack Table row being expanded
+     *
+     * @example
+     * onLoadChildren={async (row) => {
+     *   const children = await fetchGroupChildren(row.original.id)
+     *   setData(prev => mergeChildren(prev, row.id, children))
+     * }}
+     */
+    onLoadChildren?: (row: any) => void | Promise<void>;
+    /**
+     * Map of row IDs to their loading state.
+     * Shows loading indicator while children are being fetched.
+     *
+     * @example
+     * expandingRowsLoading={{ 'row-1': true, 'row-2': false }}
+     */
+    expandingRowsLoading?: Record<string, boolean>;
+    /**
+     * Loading state for expanded row content (renderSubComponent).
+     * Map of row IDs to boolean indicating if sub-component data is loading.
+     *
+     * @example
+     * subComponentLoading={{ 'row-1': true }}
+     */
+    subComponentLoading?: Record<string, boolean>;
+    /**
+     * Callback when a row is expanded and needs sub-component data loaded.
+     * Use with renderSubComponent for async detail loading.
+     *
+     * @param row - The row being expanded
+     *
+     * @example
+     * onSubComponentLoad={async (row) => {
+     *   const details = await fetchRowDetails(row.original.id)
+     *   setDetails(prev => ({ ...prev, [row.id]: details }))
+     * }}
+     */
+    onSubComponentLoad?: (row: any) => void | Promise<void>;
+    /**
+     * Map of row IDs to error states for child loading failures.
+     * When set, shows error message with retry option instead of children.
+     *
+     * @example
+     * expandingRowsError={{ 'row-1': new Error('Failed to load') }}
+     */
+    expandingRowsError?: Record<string, Error | null>;
+    /**
+     * Map of row IDs to error states for sub-component loading failures.
+     * When set, shows error message instead of sub-component content.
+     *
+     * @example
+     * subComponentError={{ 'row-1': new Error('Failed to load details') }}
+     */
+    subComponentError?: Record<string, Error | null>;
+    /**
+     * Callback when expansion fails (either children or sub-component loading).
+     * Use this to set error state and handle retries.
+     *
+     * @param row - The row that failed to expand
+     * @param error - The error that occurred
+     * @param type - Whether it was 'children' or 'subComponent' that failed
+     *
+     * @example
+     * onExpandError={(row, error, type) => {
+     *   if (type === 'children') {
+     *     setExpandingRowsError(prev => ({ ...prev, [row.id]: error }))
+     *   }
+     * }}
+     */
+    onExpandError?: (row: any, error: Error, type: 'children' | 'subComponent') => void;
+}
+export declare function DataTable<TData, TValue>({ columns, data, searchKey, searchPlaceholder, title, caption, className, stickyHeader, stickyFirstColumn, stickyLeftColumns, stickyRightColumns, enableResponsiveWrapper, showScrollIndicators, minTableWidth, isLoading, loadingBehavior, loadingRowCount, borderStyle, defaultVerticalAlign, enableGlobalSearch, globalSearchPlaceholder, enableAutocomplete, globalSearchColumns, autocompleteMinCharacters, enableGlobalFaceting, enableColumnResizing, columnResizeMode, enableColumnResizePersistence, enablePaginationPersistence, storageKey, enableExpanding, getSubRows, expandingRowColors, nestedRowStyling, enableGrouping, groupedColumnMode, enableManualGrouping, groupDisplayColumn, hideChildrenForSingleItemGroups, hideExpanderForSingleItemGroups, enableRowPinning, keepPinnedRows, enableVirtualization, nestedHeaders, enableNestedHeaders, enableColumnOrdering, enableRowSelection, showHeader, showPagination, paginationVariant, pageSizeOptions, footerLabel, onTableReady, initialState, sorting: controlledSorting, onSortingChange: onControlledSortingChange, columnVisibility: controlledColumnVisibility, onColumnVisibilityChange: onControlledColumnVisibilityChange, grouping: controlledGrouping, onGroupingChange: onControlledGroupingChange, columnOrder: controlledColumnOrder, onColumnOrderChange: onControlledColumnOrderChange, columnSizing: controlledColumnSizing, onColumnSizingChange: onControlledColumnSizingChange, pagination: controlledPagination, onPaginationChange: onControlledPaginationChange, expanded: controlledExpanded, onExpandedChange: onControlledExpandedChange, renderSectionHeaderRow, renderSubComponent, getRowCanExpand, autoExpandChildren, onRowClick, isRowClickable, clickableRowClassName, groupPreservingSearch, activeRowId, activeRowClassName, getRowId, onActiveRowChange, onRowSelectionChange, onNextPageHover, onPreviousPageHover, onRowUpdate, onLoadMore, hasMoreData, isLoadingMore, error, onRetry, errorComponent, emptyState, emptyStateTitle, emptyStateDescription, emptyStateAction, noResultsState, noResultsTitle, noResultsDescription, noResultsAction, isRefetching, manualSorting, manualFiltering, manualPagination, rowCount, manualExpanding, onLoadChildren, expandingRowsLoading, subComponentLoading, onSubComponentLoad, expandingRowsError, subComponentError, onExpandError, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export { DataTableColumnHeader, DataTableFilter, DataTableToolbar, DataTablePagination, DataTableSkeleton, fuzzyFilter, multiSelectFilter, groupPreservingGlobalFilter };
+export { useReactTable } from '@tanstack/react-table';
+export type { SortingState, ColumnFiltersState, VisibilityState, ExpandedState, GroupingState, ColumnOrderState, FilterFn, ColumnResizeMode, } from '@tanstack/react-table';