import type { HTMLAttributes, ReactNode, Ref } from 'react';
import type { PageChangeEvent } from '../../components/pagination/Pagination';
import type { Severity } from '../../constants/severity.types';
import type { ViewMode } from '../../hooks/useTableSettings';
export interface ColumnItem {
id: string;
header: string | (() => ReactNode);
accessor?: keyof T;
width?: number | string;
sortable?: boolean;
sortFunction?: (a: T, b: T) => -1 | 0 | 1;
render?: (item: T) => ReactNode;
hidden?: boolean;
align?: 'left' | 'right' | 'center';
muted?: boolean;
verticalAlign?: 'top' | 'middle' | 'bottom';
divider?: 'right' | 'left';
allowWrap?: boolean;
emptyPlaceholder?: ReactNode;
canHide?: boolean;
severity?: any;
allowOverflow?: boolean;
}
export type HeaderExtrasArgs = {
column: ColumnItem;
index: number;
};
export type TableContextMenuActionItem = {
type?: 'item';
label: ReactNode;
icon?: ReactNode;
onClick: () => void;
active?: boolean;
selected?: boolean;
disabled?: boolean;
variant?: 'default' | 'danger';
};
export type TableContextMenuHeaderItem = {
type: 'header';
label: ReactNode;
};
export type TableContextMenuItem = TableContextMenuActionItem | TableContextMenuHeaderItem;
export type StickyHeader = false | 'app-header' | number;
export type TableVariant = 'primary' | 'embedded';
export type SortDirection = 'asc' | 'desc' | null;
export type TableProps> = Omit, 'onClick' | 'onMouseEnter'> & {
data: T[];
dataKey: keyof T;
columns: ColumnItem[];
selectedRows?: Set;
selectionMode?: 'single' | 'multiple';
allRowsSelected?: boolean;
sortById?: string;
sortDirection?: SortDirection;
loading?: boolean;
emptyConfig?: any;
variant?: TableVariant;
size?: 'sm' | 'md';
viewMode?: ViewMode;
fillViewport?: boolean;
/** Extra space below the table, in addition to measured layout/pagination spacing. Defaults to 0. */
fillViewportBottomOffset?: number;
containScrolling?: boolean;
stickyHeader?: StickyHeader;
tableWidth?: number;
tableRootRef?: Ref;
measuringLayout?: boolean;
toolbar?: ReactNode;
headerExtras?: (args: HeaderExtrasArgs) => ReactNode;
take?: number;
skip?: number;
totalItemsCount?: number;
paginationPlacement?: 'top' | 'bottom';
showFirstLast?: boolean;
showGoToPage?: boolean;
showPageSize?: boolean;
pageSizeOptions?: number[];
showHeader?: boolean;
getRowSeverity?: (row: T) => Severity | undefined;
getContextMenuItems?: (args: {
row: T;
rowId: string | number;
open: () => void;
}) => TableContextMenuItem[];
showContextMenuOnHover?: boolean;
expandableRows?: boolean;
onRowClick?: (row: T) => void;
onRowMouseEnter?: (row: T) => void;
onRowSelect?: (rowId: number | string, isSelected: boolean) => void;
onSelectAllRows?: (isSelected: boolean) => void;
onSortChange?: (column: ColumnItem, direction: SortDirection) => void;
onPageChange?: (e: PageChangeEvent) => void;
};