import { aggregationFns, type CellData, type ColumnFiltersState, type ColumnVisibilityState, createExpandedRowModel, createFilteredRowModel, createGroupedRowModel, createPaginatedRowModel, createSortedRowModel, type ExpandedState, filterFns, type GroupingState, type PaginationState, type ReactTable, type RowData, type SortingState, type StockFeatures, sortFns, type ColumnDef as TableColumnDef, type TableFeatures, type Row as TableRowInstance } from '@tanstack/react-table'; import { type VariantProps } from 'class-variance-authority'; import * as React from 'react'; import { type PaginationShape, type PaginationSize, type PaginationType } from '../../../molecules/navigation/Pagination/index.js'; type DataTableFeatures = Omit & { filteredRowModel: ReturnType; groupedRowModel: ReturnType; sortedRowModel: ReturnType; expandedRowModel: ReturnType; paginatedRowModel: ReturnType; filterFns: typeof filterFns; sortFns: typeof sortFns; aggregationFns: typeof aggregationFns; }; type ColumnDef = TableColumnDef; type Row = TableRowInstance; type TanStackTable = ReactTable; type VisibilityState = ColumnVisibilityState; type RowSelectionState = Record; export type ResponsiveColumnMeta = { /** Keep the column visible at all sizes, desktop only, or mobile only */ priority?: 'always' | 'desktop' | 'mobile'; /** Hide the column below the named container breakpoint */ hideBelow?: 'sm' | 'md' | 'lg'; }; declare module '@tanstack/react-table' { interface ColumnMeta { /** Custom class name for header cell */ headerClassName?: string; /** Custom class name for body cells */ cellClassName?: string; /** Tooltip text shown via info icon next to header */ headerTooltip?: string; /** Responsive visibility for table columns when DataTable responsiveColumns is enabled */ responsive?: ResponsiveColumnMeta; } } declare const dataTableVariants: (props?: ({ dividers?: "alternating" | "line" | null | undefined; density?: "compact" | "default" | null | undefined; } & import("class-variance-authority/types").ClassProp) | undefined) => string; declare const dataTableContainerVariants: (props?: ({ rounded?: "all" | "bottom" | "none" | "top" | null | undefined; bordered?: boolean | null | undefined; } & import("class-variance-authority/types").ClassProp) | undefined) => string; declare const dataTableRowVariants: (props?: ({ dividers?: "alternating" | "line" | null | undefined; density?: "compact" | "default" | null | undefined; isEven?: boolean | null | undefined; isSelected?: boolean | null | undefined; } & import("class-variance-authority/types").ClassProp) | undefined) => string; declare const dataTableCellVariants: (props?: ({ density?: "compact" | "default" | null | undefined; } & import("class-variance-authority/types").ClassProp) | undefined) => string; declare const dataTableHeaderCellVariants: (props?: ({ density?: "compact" | "default" | null | undefined; } & import("class-variance-authority/types").ClassProp) | undefined) => string; export interface DataTableProps extends VariantProps, VariantProps { /** Column definitions for the table */ columns: ColumnDef[]; /** Data to display in the table */ data: TData[]; /** Optional content rendered above the table, commonly DataTableToolbar */ children?: React.ReactNode; /** Enable row selection */ enableRowSelection?: boolean; /** Enable multi-row selection */ enableMultiRowSelection?: boolean; /** Controlled row selection state */ rowSelection?: RowSelectionState; /** Callback when row selection changes (receives TanStack Updater) */ onRowSelectionChange?: (updater: RowSelectionState | ((old: RowSelectionState) => RowSelectionState)) => void; /** Initial row selection state (uncontrolled) */ initialRowSelection?: RowSelectionState; /** Enable sorting */ enableSorting?: boolean; /** Sorting mode: 'client' = sort data locally, 'server' = fire callback only */ sortingMode?: 'client' | 'server'; /** Controlled sorting state */ sorting?: SortingState; /** Callback when sorting changes (receives TanStack Updater) */ onSortingChange?: (updater: SortingState | ((old: SortingState) => SortingState)) => void; /** Initial sorting state (uncontrolled) */ initialSorting?: SortingState; /** Enable pagination */ enablePagination?: boolean; /** Pagination mode: 'client' = paginate data locally, 'server' = use pageCount, 'none' = no pagination UI */ paginationMode?: 'client' | 'server' | 'none'; /** Controlled pagination state */ pagination?: PaginationState; /** Callback when pagination changes (receives TanStack Updater) */ onPaginationChange?: (updater: PaginationState | ((old: PaginationState) => PaginationState)) => void; /** Total number of pages (for server mode) */ pageCount?: number; /** Total number of rows (alternative to pageCount for server mode) */ rowCount?: number; /** Page size for pagination (uncontrolled) */ pageSize?: number; /** Initial page index (uncontrolled) */ initialPageIndex?: number; /** Enable column filters */ enableColumnFilters?: boolean; /** Filtering mode: 'client' = filter data locally, 'server' = fire callback only */ filteringMode?: 'client' | 'server'; /** Controlled column filters state */ columnFilters?: ColumnFiltersState; /** Callback when column filters change (receives TanStack Updater) */ onColumnFiltersChange?: (updater: ColumnFiltersState | ((old: ColumnFiltersState) => ColumnFiltersState)) => void; /** Initial column filters state (uncontrolled) */ initialColumnFilters?: ColumnFiltersState; /** Enable column visibility */ enableColumnVisibility?: boolean; /** Controlled column visibility state */ columnVisibility?: VisibilityState; /** Callback when column visibility changes (receives TanStack Updater) */ onColumnVisibilityChange?: (updater: VisibilityState | ((old: VisibilityState) => VisibilityState)) => void; /** Initial column visibility state (uncontrolled) */ initialColumnVisibility?: VisibilityState; /** Enable grouping */ enableGrouping?: boolean; /** Grouping mode: 'client' = group data locally, 'server' = data has subRows structure */ groupingMode?: 'client' | 'server'; /** Controlled grouping state */ grouping?: GroupingState; /** Callback when grouping changes */ onGroupingChange?: (updater: GroupingState | ((old: GroupingState) => GroupingState)) => void; /** Initial grouping state (uncontrolled) */ initialGrouping?: GroupingState; /** How grouped columns appear: 'remove' hides them, 'reorder' moves to start, false = no change */ groupedColumnMode?: 'remove' | 'reorder' | false; /** Controlled expansion state */ expanded?: ExpandedState; /** Callback when expansion changes */ onExpandedChange?: (updater: ExpandedState | ((old: ExpandedState) => ExpandedState)) => void; /** Initial expansion: true = all expanded, {} = all collapsed, or per-row object */ initialExpanded?: ExpandedState; /** For server mode: extract subRows from data items */ getSubRows?: (originalRow: TData, index: number) => TData[] | undefined; /** Pagination variant type */ paginationType?: PaginationType; /** Pagination shape */ paginationShape?: PaginationShape; /** Pagination control size */ paginationSize?: PaginationSize; /** Whether page-number pagination variants should render page buttons */ paginationShowPageNumbers?: boolean; /** Accessible label for the pagination nav landmark (useful when multiple tables are on one page) */ paginationLabel?: string; /** Get the row id for selection. Recommended for stable row identity; falls back to row index. */ getRowId?: (row: TData, index: number, parent?: Row) => string; /** Callback when a row is clicked */ onRowClick?: (row: Row) => void; /** Custom empty state content */ emptyState?: React.ReactNode; /** Additional className */ className?: string; /** Table caption for accessibility */ caption?: string; /** Show header checkbox for select all */ showSelectAll?: boolean; /** Apply column.meta.responsive visibility classes at container breakpoints */ responsiveColumns?: boolean; /** Render function for the table instance (for external controls) */ renderControls?: (table: TanStackTable) => React.ReactNode; /** Custom class names for table elements */ classNames?: { table?: string; headerRow?: string; headerCell?: string; row?: string; cell?: string; }; /** Custom render function for table body (replaces default body rendering) */ renderBody?: (table: TanStackTable) => React.ReactNode; /** Custom render function for each row (replaces default row rendering) */ renderRow?: (row: Row) => React.ReactNode; /** Custom render function for group header rows (when using grouping) */ renderGroupHeader?: (row: Row, visibleColumnCount: number) => React.ReactNode; /** Maximum height for table body (enables vertical scrolling) */ maxHeight?: string; /** Make table header sticky when scrolling */ stickyHeader?: boolean; /** Make first column sticky when scrolling horizontally */ stickyFirstColumn?: boolean; /** Make last column sticky when scrolling horizontally */ stickyLastColumn?: boolean; /** Show loading state */ loading?: boolean; /** Custom loading state content */ loadingState?: React.ReactNode; /** Error to display */ error?: Error | null; /** Custom error state content */ errorState?: React.ReactNode; /** Internationalization labels */ i18n?: { /** Loading text (default: "Loading...") */ loading?: string; /** Empty state text (default: "No results.") */ noResults?: string; /** Selection count text (default: "N of M Row(s) Selected.") */ selectionCount?: (selectedCount: number, totalCount: number) => string; }; /** Show "N of M Row(s) Selected." count in footer */ showSelectionCount?: boolean; /** Virtualization configuration for large datasets */ virtualization?: { /** Enable row virtualization */ enabled: boolean; /** Estimated row height in pixels (default: 50) */ estimatedRowHeight?: number; /** Estimated group header row height in pixels (default: 48) */ estimatedGroupHeaderHeight?: number; /** Number of items to render outside visible area (default: 5) */ overscan?: number; }; } export declare function createSelectColumn(): ColumnDef; interface SortableHeaderProps { children: React.ReactNode; column: { getIsSorted: () => false | 'asc' | 'desc'; toggleSorting: (desc?: boolean) => void; getCanSort: () => boolean; columnDef?: { meta?: { headerTooltip?: string; }; }; }; className?: string; } export declare function SortableHeader({ children, column, className, }: SortableHeaderProps): React.JSX.Element; export interface UseDataTableOptions { columns: ColumnDef[]; data: TData[]; enableRowSelection?: boolean; enableMultiRowSelection?: boolean; rowSelection?: RowSelectionState; onRowSelectionChange?: (updater: RowSelectionState | ((old: RowSelectionState) => RowSelectionState)) => void; initialRowSelection?: RowSelectionState; showSelectAll?: boolean; enableSorting?: boolean; sortingMode?: 'client' | 'server'; sorting?: SortingState; onSortingChange?: (updater: SortingState | ((old: SortingState) => SortingState)) => void; initialSorting?: SortingState; enablePagination?: boolean; paginationMode?: 'client' | 'server' | 'none'; pagination?: PaginationState; onPaginationChange?: (updater: PaginationState | ((old: PaginationState) => PaginationState)) => void; pageCount?: number; rowCount?: number; pageSize?: number; initialPageIndex?: number; enableColumnFilters?: boolean; filteringMode?: 'client' | 'server'; columnFilters?: ColumnFiltersState; onColumnFiltersChange?: (updater: ColumnFiltersState | ((old: ColumnFiltersState) => ColumnFiltersState)) => void; initialColumnFilters?: ColumnFiltersState; enableColumnVisibility?: boolean; columnVisibility?: VisibilityState; onColumnVisibilityChange?: (updater: VisibilityState | ((old: VisibilityState) => VisibilityState)) => void; initialColumnVisibility?: VisibilityState; enableGrouping?: boolean; groupingMode?: 'client' | 'server'; grouping?: GroupingState; onGroupingChange?: (updater: GroupingState | ((old: GroupingState) => GroupingState)) => void; initialGrouping?: GroupingState; groupedColumnMode?: 'remove' | 'reorder' | false; expanded?: ExpandedState; onExpandedChange?: (updater: ExpandedState | ((old: ExpandedState) => ExpandedState)) => void; initialExpanded?: ExpandedState; /** Get the row id. Recommended for stable row identity; falls back to row index. */ getRowId?: (originalRow: TData, index: number, parent?: Row) => string; getSubRows?: (originalRow: TData, index: number) => TData[] | undefined; } export interface UseDataTableResult { table: TanStackTable; totalPages: number; currentPage: number; showPagination: boolean; } export declare function useDataTable({ columns, data, enableRowSelection, enableMultiRowSelection, rowSelection: controlledRowSelection, onRowSelectionChange, initialRowSelection, showSelectAll, enableSorting, sortingMode, sorting: controlledSorting, onSortingChange, initialSorting, enablePagination, paginationMode, pagination: controlledPagination, onPaginationChange, pageCount: controlledPageCount, rowCount, pageSize, initialPageIndex, enableColumnFilters, filteringMode, columnFilters: controlledColumnFilters, onColumnFiltersChange, initialColumnFilters, enableColumnVisibility, columnVisibility: controlledColumnVisibility, onColumnVisibilityChange, initialColumnVisibility, enableGrouping, groupingMode, grouping: controlledGrouping, onGroupingChange, initialGrouping, groupedColumnMode, expanded: controlledExpanded, onExpandedChange, initialExpanded, getRowId, getSubRows, }: UseDataTableOptions): UseDataTableResult; declare function DataTable({ columns, data, children, enableRowSelection, enableMultiRowSelection, rowSelection: controlledRowSelection, onRowSelectionChange, initialRowSelection, enableSorting, sortingMode, sorting: controlledSorting, onSortingChange, initialSorting, enablePagination, paginationMode, pagination: controlledPagination, onPaginationChange, pageCount: controlledPageCount, rowCount, pageSize, initialPageIndex, enableColumnFilters, filteringMode, columnFilters: controlledColumnFilters, onColumnFiltersChange, initialColumnFilters, enableColumnVisibility, columnVisibility: controlledColumnVisibility, onColumnVisibilityChange, initialColumnVisibility, enableGrouping, groupingMode, grouping: controlledGrouping, onGroupingChange, initialGrouping, groupedColumnMode, expanded: controlledExpanded, onExpandedChange, initialExpanded, getSubRows, paginationType, paginationShape, paginationSize, paginationShowPageNumbers, paginationLabel, getRowId, onRowClick, emptyState, className, caption, dividers, density, showSelectAll, responsiveColumns, renderControls, classNames, renderBody, renderRow, renderGroupHeader, maxHeight, stickyHeader, stickyFirstColumn, stickyLastColumn, loading: isLoading, loadingState, error, errorState, i18n, virtualization, showSelectionCount, rounded, bordered, }: DataTableProps): React.JSX.Element; declare namespace DataTable { var displayName: string; } export type { DataTableActionsCellProps, DataTableAvatarCellProps, DataTableBadgeItem, DataTableBadgesCellProps, DataTableCellAction, DataTableCellRootProps, DataTableCellTone, DataTableProgressCellProps, DataTableRatingCellProps, DataTableSparklineCellProps, DataTableSwitchCellProps, DataTableTextCellProps, DataTableTrendCellProps, DataTableTrendSentiment, } from './DataTableCell.js'; export { DataTableActionsCell, DataTableAvatarCell, DataTableBadgesCell, DataTableCell, DataTableCellRoot, DataTableProgressCell, DataTableRatingCell, DataTableSparklineCell, DataTableSwitchCell, DataTableTextCell, DataTableTrendCell, } from './DataTableCell.js'; export type { ColumnDef, ColumnFiltersState, ExpandedState, GroupingState, PaginationState, Row, RowSelectionState, SortingState, VisibilityState, }; export { DataTable, dataTableCellVariants, dataTableContainerVariants, dataTableHeaderCellVariants, dataTableRowVariants, dataTableVariants, };