import type * as React from 'react'; import type { ColumnType as OcColumnType, Locale as OcTableLocale, RenderedCell as OcRenderedCell, FixedType, OcTableProps } from './Internal/OcTable.types'; import { GetRowKey, ExpandableConfig } from './Internal/OcTable.types'; import type { TooltipProps } from '../Tooltip'; import type { CheckboxProps } from '../CheckBox'; import type { PaginationProps } from '../Pagination'; import type { Breakpoint } from '../../shared/utilities'; import type { INTERNAL_SELECTION_ITEM } from './Hooks/useSelection'; import { FilterState } from './Hooks/useFilter/utils'; import { SortState } from './Hooks/useSorter'; import { SpinnerProps } from '../Spinner'; import type { Size } from '../ConfigProvider/SizeContext'; export declare enum TableSize { Flex = "flex", Large = "large", Medium = "medium", Small = "small" } export { GetRowKey, ExpandableConfig }; export declare type Key = React.Key; export declare type RowSelectionType = 'checkbox' | 'radio'; export declare type SelectionItemSelectFn = (currentRowKeys: Key[]) => void; export declare type ExpandType = null | 'row' | 'nest'; export declare type SortOrder = 'descend' | 'ascend' | null; declare const TableActions: ["paginate", "sort", "filter"]; export declare type TableAction = typeof TableActions[number]; export declare type CompareFn = (a: T, b: T, sortOrder?: SortOrder) => number; export declare type TableLocale = { lang: OcTableLocale; }; export interface ColumnFilterItem { text: React.ReactNode; value: string | number | boolean; children?: ColumnFilterItem[]; } export interface ColumnTitleProps { filters?: Record; sortColumns?: { column: ColumnType; order: SortOrder; }[]; } export declare type ColumnTitle = React.ReactNode | ((props: ColumnTitleProps) => React.ReactNode); export declare type FilterValue = (Key | boolean)[]; export declare type FilterKey = Key[] | null; export declare type FilterSearchType = boolean | ((input: string, record: {}) => boolean); export interface FilterConfirmProps { closeDropdown: boolean; } export interface FilterDropdownProps { clearFilters?: () => void; confirm: (param?: FilterConfirmProps) => void; filters?: ColumnFilterItem[]; selectedKeys: React.Key[]; setSelectedKeys: (selectedKeys: React.Key[]) => void; visible: boolean; } export interface ColumnType extends Omit, 'title'> { /** * The default filtered values. */ defaultFilteredValue?: FilterValue | null; /** * The default order of sorted values. */ defaultSortOrder?: SortOrder; /** * Customized filter overlay. */ filterDropdown?: React.ReactNode | ((props: FilterDropdownProps) => React.ReactNode); /** * Whether `filterDropdown` is visible. */ filterDropdownVisible?: boolean; /** * Whether the `dataSource` is filtered. */ filtered?: boolean; /** * Controlled filtered value. */ filteredValue?: FilterValue | null; /** * Specify the filter UI. */ filterMode?: 'menu' | 'tree'; /** * Whether multiple filters can be selected. */ filterMultiple?: boolean; /** * After filter reset, whether to restore the default filter. */ filterResetToDefaultFilteredValue?: boolean; /** * Filter menu configuration. */ filters?: ColumnFilterItem[]; /** * Whether to be searchable for filter menu. */ filterSearch?: FilterSearchType; /** * Function that determines if the row is displayed when filtered. */ onFilter?: (value: string | number | boolean, record: RecordType) => boolean; /** * Callback executed when `filterDropdownVisible` is changed. */ onFilterDropdownVisibleChange?: (visible: boolean) => void; /** * Determines the breakpoint where the column will hide/show. * Column is always visible if not set. */ responsive?: Breakpoint[]; /** * The Table header column show sorter default icon. * overrides `showSorterDefaultIcon` in Table. * @default true */ showSorterDefaultIcon?: boolean; /** * The Table header column show next sorter direction tooltip. * Set as the property of Tooltip if its type is object. * overrides `showSorterTooltip` in Table. * @default true */ showSorterTooltip?: boolean | TooltipProps; /** * The Table Column sort directions. * options: `ascend`, `descend`. * overrides `sortDirections` in Table. */ sortDirections?: SortOrder[]; /** * Sort function for local sort, see `Array.sort` compareFunction. * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort * If you need sort buttons only, set to true. */ sorter?: boolean | CompareFn | { compare?: CompareFn; /** Config multiple sorter order priority */ multiple?: number; }; /** * Order of sorted values. */ sortOrder?: SortOrder; /** * The Column title. */ title?: ColumnTitle; /** * Button scroller for a horizontal scroll table * @default false */ showScroller?: boolean; } export interface ColumnGroupType extends Omit, 'dataIndex'> { /** * The ColumnGroup children. */ children: ColumnsType; } export declare type ColumnsType = (ColumnGroupType | ColumnType)[]; export interface SelectionItem { /** * Unique key of the selection item. */ key: string; /** * Callback executed when the selection item is clicked. */ onSelect?: SelectionItemSelectFn; /** * Display text of the selection item. */ text: React.ReactNode; } export declare type SelectionSelectFn = (record: T, selected: boolean, selectedRows: T[], nativeEvent: Event) => void; export interface TableRowSelection { /** * Check the Table row precisely; * parent row and children rows are not associated. * @default true */ checkStrictly?: boolean; /** * The selection Column width. */ columnWidth?: string | number; /** * The selection Column title. */ columnTitle?: string | React.ReactNode; /** * The default selected row keys. */ defaultSelectedRowKeys?: Key[]; /** * Fixed selection column. * @default 'left' */ fixed?: FixedType; /** * Get CheckBox or Radio Button props. */ getCheckboxProps?: (record: T) => Partial>; /** * Hide the selectAll CheckBox and custom selection. * @default false */ hideSelectAll?: boolean; /** * Callback executed when selected rows change. */ onChange?: (selectedRowKeys: Key[], selectedRows: T[]) => void; /** * Callback executed when select/deselect one row. */ onSelect?: SelectionSelectFn; /** * Keep the selection keys in list * even if the key no longer exists in `dataSource`. **/ preserveSelectedRowKeys?: boolean; /** * Renderer of the Table cell. Same as render in Column. */ renderCell?: (value: boolean, record: T, index: number, originNode: React.ReactNode) => React.ReactNode | OcRenderedCell; /** * Controlled selected row keys. * @default [] */ selectedRowKeys?: Key[]; /** * Custom selection configuration. * Only displays default selections when set to true. */ selections?: INTERNAL_SELECTION_ITEM[] | boolean; /** * The row selection type. * options: checkbox | radio */ type?: RowSelectionType; } export declare type TransformColumns = (columns: ColumnsType) => ColumnsType; export interface TableCurrentDataSource { action: TableAction; currentDataSource: RecordType[]; } export interface SorterResult { column?: ColumnType; columnKey?: Key; field?: Key | readonly Key[]; order?: SortOrder; } export declare type GetPopupContainer = (triggerNode: HTMLElement) => HTMLElement; declare type TablePaginationPosition = 'topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight'; export interface TablePaginationConfig extends Omit { /** * Specify the position of Table Pagination. * [topLeft | topCenter | topRight |bottomLeft | bottomCenter | bottomRight] * @default [bottomRight] */ position?: TablePaginationPosition[]; /** * Specify the Table Pagination total. */ total?: number; } export declare const EMPTY_LIST: any[]; export interface ChangeEventInfo { /** * The chnage event params of filters. */ filters: Record; /** * The filter state. */ filterStates: FilterState[]; /** * The change event params of pagination. */ pagination: { currentPage?: number; pageSize?: number; pageSizes?: number[]; total: number; }; /** * The reset pagination function. */ resetPagination: Function; /** * The change event params of sorter. */ sorter: SorterResult | SorterResult[]; /** * The sorter state. */ sorterStates: SortState[]; } export interface TableProps extends Omit, 'columns' | 'data' | 'emptyText' | 'locale' | 'scroll' | 'transformColumns'> { /** * The Table Row background colors alternate. * @default true */ alternateRowColor?: boolean; /** * Show all Table borders. * @default false */ bordered?: boolean; /** * The Table cancel sort text. * @default 'Click to cancel sorting' */ cancelSortText?: string; /** * Show only the Table body cell borders. */ cellBordered?: boolean; /** * The Table collapse text. * @default 'Collapse row' */ collapseText?: string; /** * Show only the Table column borders. * @default false */ columnBordered?: boolean; /** * The Table columns. */ columns?: ColumnsType; /** * The Table Data record array to be displayed. */ dataSource?: OcTableProps['data']; /** * The Table empty text renderer. */ emptyText?: React.ReactNode | (() => React.ReactNode); /** * The Table empty text details. * Use this to display more information when the Tabel is empty. * @default 'Short Message Here' */ emptyTextDetails?: string; /** * The Table expand text. * @default 'Expand row' */ expandText?: string; /** * The Table filter checkall text. * @default 'Select all items' */ filterCheckallText?: string; /** * The Table filter confirm text. * @default 'OK' */ filterConfirmText?: string; /** * The Table filter empty text. * @default 'No filters' */ filterEmptyText?: string; /** * The Table filter reset text. * @default 'Reset' */ filterResetText?: string; /** * The Table filter search placeholder text. * @default 'Search in filters' */ filterSearchPlaceholderText?: string; /** * The render container of Table dropdowns. */ getPopupContainer?: GetPopupContainer; /** * Show only the Table inner header cell borders. */ headerBordered?: boolean; /** * Show only the Table inner header cell bottom borders. * headerBordered must be `false` * @default false */ headerBottomBordered?: boolean; /** * Show only the Table header and body cell inner borders. */ innerBordered?: boolean; /** * The Table loading state. */ loading?: boolean | SpinnerProps; /** * The Table locale. * @default 'enUS' */ locale?: TableLocale; /** * Callback executed when Table pagination, filters, or sort is changed. */ onChange?: (pagination: TablePaginationConfig, filters: Record, sorter: SorterResult | SorterResult[], extra: TableCurrentDataSource) => void; /** * Show only the Table outer border. */ outerBordered?: boolean; /** * Configure Table pagination. * May be hidden if `false`. */ pagination?: false | TablePaginationConfig; /** * Show only the Table cell bottom borders. */ rowBordered?: boolean; /** * Enables row background hover color. * @default true */ rowHoverBackgroundEnabled?: boolean; /** * Configure Table Row selection. */ rowSelection?: TableRowSelection; /** * Set if the Table is scrollable. * `scrollToFirstRowOnChange` determines whether to scroll to * the top of the table when paging, sorting, filtering changes. * `x` sets horizontal scrolling, can also be used to specify the width of * the scroll area, could be number, percent value, true and 'max-content'. * `y` sets vertical scrolling, can also be used to specify the height of * the scroll area, could be string or number. */ scroll?: OcTableProps['scroll'] & { scrollToFirstRowOnChange?: boolean; }; /** * The Table select all rows text. * @default 'Select all rows' */ selectAllRowsText?: string; /** * The Table select all text. * @default 'Select all data' */ selectionAllText?: string; /** * The Table invert select text. * @default 'Invert current page' */ selectInvertText?: string; /** * The Table select none text. * @default 'Clear all data' */ selectNoneText?: string; /** * The Table select row text. * @default 'Select row' */ selectRowText?: string; /** * The Table header column show sorter default icon. * @default true */ showSorterDefaultIcon?: boolean; /** * The Table header column show next sorter direction tooltip. * Set as the property of Tooltip if its type is object. * @default true */ showSorterTooltip?: boolean | TooltipProps; /** * The Table size. * @default TableSize.Medium */ size?: TableSize | Size; /** * The Table column sort directions. * options: `ascend`, `descend`. */ sortDirections?: SortOrder[]; /** * The Table trigger sort ascending text. * @default 'Click to sort ascending' */ triggerAscText?: string; /** * The Table trigger sort descending text. * @default 'Click to sort descending' */ triggerDescText?: string; /** * The Table sorted ascending label (e.g. for tooltip/aria). * Uses locale value when not provided. */ sortedAscendingText?: string; /** * The Table sorted descending label (e.g. for tooltip/aria). * Uses locale value when not provided. */ sortedDescendingText?: string; /** * The Table not sorted label (e.g. for tooltip/aria). * Uses locale value when not provided. */ notSortedText?: string; /** * Callback fired on row hover enter * @param index - Index of the row element * @param rowKey - Unique row identifier * @param event - Mouse over event */ onRowHoverEnter?: (index: number, rowKey: React.Key, event: React.MouseEvent) => void; /** * Callback fired on row hover leave * @param index - Index of the row element * @param rowKey - Unique row identifier * @param event - Mouse over event */ onRowHoverLeave?: (index: number, rowKey: React.Key, event: React.MouseEvent) => void; }