/** * Copyright IBM Corp. 2016, 2026 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. */ import PropTypes from 'prop-types'; import { type MouseEvent, type ReactElement, type ReactNode } from 'react'; import { type SortRowFn } from './state/sorting'; import type { DataTableSortState } from './state/sortStates'; import { type TableToolbarSearchOnChangeEvent } from './TableToolbarSearch'; import type { TranslateWithId } from '../../types/common'; declare const translationIds: { readonly 'carbon.table.row.expand': "carbon.table.row.expand"; readonly 'carbon.table.row.collapse': "carbon.table.row.collapse"; readonly 'carbon.table.all.expand': "carbon.table.all.expand"; readonly 'carbon.table.all.collapse': "carbon.table.all.collapse"; readonly 'carbon.table.all.select': "carbon.table.all.select"; readonly 'carbon.table.all.unselect': "carbon.table.all.unselect"; readonly 'carbon.table.row.select': "carbon.table.row.select"; readonly 'carbon.table.row.unselect': "carbon.table.row.unselect"; }; /** * Message IDs that will be passed to translateWithId(). */ type TranslationKey = keyof typeof translationIds; export type DataTableSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'; export interface DataTableCell { id: string; value: T; isEditable: boolean; isEditing: boolean; isValid: boolean; errors: null | Error[]; info: { header: string; }; hasAILabelHeader?: boolean; } type DataTableCells = { [K in keyof T]: DataTableCell; }; export interface DataTableRow { id: string; cells: DataTableCells; disabled?: boolean; isExpanded?: boolean; isSelected?: boolean; } export interface DataTableHeader { key: string; header: ReactNode; slug?: ReactElement; decorator?: ReactElement; isSortable?: boolean; } export interface DataTableRenderProps { /** * The headers for the table. */ headers: DataTableHeader[]; /** * The rows for the table. */ rows: (DataTableRow & RowType)[]; /** * The rows that are currently selected. */ selectedRows: (DataTableRow & RowType)[]; getHeaderProps: (options: { header: DataTableHeader; isSortable?: boolean; onClick?: (event: MouseEvent, sortState: { sortHeaderKey: string; sortDirection: DataTableSortState; }) => void; [key: string]: unknown; }) => { isSortable: boolean | undefined; isSortHeader: boolean; key: string; onClick: (event: MouseEvent) => void; sortDirection: DataTableSortState; [key: string]: unknown; }; getExpandHeaderProps: (options?: { onClick?: (event: MouseEvent, expandState: { isExpanded?: boolean; }) => void; onExpand?: (event: MouseEvent) => void; [key: string]: unknown; }) => { ['aria-label']: string; isExpanded: boolean; onExpand: (event: MouseEvent) => void; [key: string]: unknown; id: string; }; getRowProps: (options: { onClick?: (event: MouseEvent) => void; row: DataTableRow; [key: string]: unknown; }) => { ['aria-label']: string; disabled: boolean | undefined; isExpanded?: boolean; isSelected?: boolean; key: string; onExpand: (event: MouseEvent) => void; [key: string]: unknown; expandHeader: string; }; getExpandedRowProps: (options: { row: DataTableRow; [key: string]: unknown; }) => { ['id']: string; [key: string]: unknown; }; getSelectionProps: (options?: { onClick?: (event: MouseEvent) => void; row?: DataTableRow; [key: string]: unknown; }) => { 'aria-label': string; checked?: boolean | undefined; disabled?: boolean | undefined; id: string; indeterminate?: boolean; name: string; onSelect: (event: MouseEvent) => void; radio?: boolean | undefined; [key: string]: unknown; }; getToolbarProps: (options?: { [key: string]: unknown; }) => { size: 'sm' | undefined; [key: string]: unknown; }; getBatchActionProps: (options?: { [key: string]: unknown; }) => { onCancel: () => void; onSelectAll?: () => void; shouldShowBatchActions: boolean; totalCount: number; totalSelected: number; [key: string]: unknown; }; getTableProps: () => { experimentalAutoAlign?: boolean; isSortable?: boolean; overflowMenuOnHover: boolean; size: DataTableSize; stickyHeader?: boolean; useStaticWidth?: boolean; useZebraStyles?: boolean; }; getTableContainerProps: () => { stickyHeader?: boolean; useStaticWidth?: boolean; }; getCellProps: (options: { cell: DataTableCell; }) => { [key: string]: unknown; hasAILabelHeader?: boolean; key: string; }; /** * Handles input value changes. * * Note: the `''` event sentinel is supported for compatibility with * `TableToolbarSearch` and should be removed in the next major release. */ onInputChange: (event: TableToolbarSearchOnChangeEvent, defaultValue?: string) => void; /** * Sorts the table by a specific header. */ sortBy: (headerKey: string) => void; /** * Selects all rows. */ selectAll: () => void; /** * Selects or deselects a specific row. */ selectRow: (rowId: string) => void; /** * Expands or collapses a specific row. */ expandRow: (rowId: string) => void; /** * Expands or collapses all rows. */ expandAll: () => void; /** * Whether the table is using radio buttons for selection instead of * checkboxes. */ radio: boolean | undefined; } export interface DataTableProps extends TranslateWithId { children?: (renderProps: DataTableRenderProps) => ReactElement; experimentalAutoAlign?: boolean; filterRows?: (options: { cellsById: Record>; getCellId: (rowId: string, header: string) => string; headers: DataTableHeader[]; inputValue: string; rowIds: string[]; }) => string[]; headers: DataTableHeader[]; isSortable?: boolean; locale?: string; overflowMenuOnHover?: boolean; radio?: boolean; /** * @deprecated Use `children` instead. This prop will be removed in * the next major version. * * https://www.patterns.dev/react/render-props-pattern/#children-as-a-function */ render?: (renderProps: DataTableRenderProps) => ReactElement; rows: Omit, 'cells'>[]; size?: DataTableSize; sortRow?: SortRowFn; stickyHeader?: boolean; useStaticWidth?: boolean; useZebraStyles?: boolean; } /** * DataTable components are used to represent a collection of resources, * displaying a subset of their fields in columns, or headers. We prioritize * direct updates to the state of what we're rendering, so internally we * normalize the given data and then denormalize it at render time. Each part of * the DataTable is accessible through look-up by ID, and updating the state of * a single entity cascades updates to the consumer. */ export declare const DataTable: { (props: DataTableProps): ReactElement> | null; Table: { ({ className, children, useZebraStyles, size, isSortable, useStaticWidth, stickyHeader, overflowMenuOnHover, experimentalAutoAlign, ...other }: import("react").PropsWithChildren): import("react/jsx-runtime").JSX.Element; propTypes: { children: PropTypes.Requireable; className: PropTypes.Requireable; experimentalAutoAlign: PropTypes.Requireable; isSortable: PropTypes.Requireable; overflowMenuOnHover: PropTypes.Requireable; size: PropTypes.Requireable; stickyHeader: PropTypes.Requireable; useStaticWidth: PropTypes.Requireable; useZebraStyles: PropTypes.Requireable; tabIndex: PropTypes.Requireable; }; }; TableActionList: (props: import("react").HTMLAttributes<"div">) => React.ReactElement; TableBatchAction: { ({ renderIcon, iconDescription, ...props }: import("./TableBatchAction").TableBatchActionProps): import("react/jsx-runtime").JSX.Element; propTypes: { hasIconOnly: PropTypes.Requireable; iconDescription: (props: any) => Error | undefined; renderIcon: PropTypes.Requireable; }; }; TableBatchActions: { ({ className, children, shouldShowBatchActions, totalSelected, totalCount, onCancel, onSelectAll, translateWithId: t, ...rest }: import("./TableBatchActions").TableBatchActionsProps): import("react/jsx-runtime").JSX.Element; propTypes: { children: PropTypes.Requireable; className: PropTypes.Requireable; onCancel: PropTypes.Validator<(...args: any[]) => any>; onSelectAll: PropTypes.Requireable<(...args: any[]) => any>; shouldShowBatchActions: PropTypes.Requireable; totalCount: PropTypes.Requireable; totalSelected: PropTypes.Validator; translateWithId: PropTypes.Requireable<(...args: any[]) => any>; }; }; TableBody: { ({ children, className, ...rest }: import("./TableBody").TableBodyProps): import("react/jsx-runtime").JSX.Element; propTypes: { 'aria-live': PropTypes.Requireable; children: PropTypes.Requireable; className: PropTypes.Requireable; }; }; TableCell: import("react").ForwardRefExoticComponent>; TableContainer: { ({ aiEnabled, className, children, decorator, title, description, stickyHeader, useStaticWidth, ...rest }: import("./TableContainer").TableContainerProps): import("react/jsx-runtime").JSX.Element; propTypes: { aiEnabled: PropTypes.Requireable; children: PropTypes.Requireable; className: PropTypes.Requireable; decorator: PropTypes.Requireable; description: PropTypes.Requireable; stickyHeader: PropTypes.Requireable; title: PropTypes.Requireable; useStaticWidth: PropTypes.Requireable; }; }; TableDecoratorRow: { ({ className, decorator, }: import("./TableDecoratorRow").TableDecoratorRowProps): import("react/jsx-runtime").JSX.Element; displayName: string; propTypes: { className: PropTypes.Requireable; decorator: PropTypes.Requireable; }; }; TableExpandHeader: { ({ ["aria-controls"]: ariaControls, ["aria-label"]: ariaLabel, ariaLabel: deprecatedAriaLabel, className: headerClassName, enableExpando, enableToggle, id, isExpanded, onExpand, expandIconDescription, children, ...rest }: import("./TableExpandHeader").TableExpandHeaderProps): import("react/jsx-runtime").JSX.Element; propTypes: { "aria-controls": PropTypes.Requireable; "aria-label": PropTypes.Requireable; ariaLabel: PropTypes.Requireable; children: PropTypes.Requireable; className: PropTypes.Requireable; enableExpando: (props: Record, propName: string, componentName: string, ...rest: any[]) => any; enableToggle: PropTypes.Requireable; expandIconDescription: PropTypes.Requireable; id: PropTypes.Requireable; isExpanded: PropTypes.Validator; onExpand: PropTypes.Requireable; }; }; TableExpandRow: import("react").ForwardRefExoticComponent>; TableExpandedRow: { ({ className: customClassName, children, colSpan, ...rest }: import("./TableExpandedRow").TableExpandedRowProps): import("react/jsx-runtime").JSX.Element; propTypes: { children: PropTypes.Requireable; className: PropTypes.Requireable; colSpan: PropTypes.Validator; }; }; TableHead: (props: import("react").HTMLAttributes<"thead">) => React.ReactElement; TableHeader: import("react").ForwardRefExoticComponent>; TableRow: import("react").ForwardRefExoticComponent>; TableSelectAll: { ({ ariaLabel: deprecatedAriaLabel, ["aria-label"]: ariaLabel, checked, id, indeterminate, name, onSelect, disabled, className, }: import("./TableSelectAll").TableSelectAllProps): import("react/jsx-runtime").JSX.Element; propTypes: { "aria-label": PropTypes.Requireable; ariaLabel: (props: Record, propName: string, componentName: string, ...rest: any[]) => any; checked: PropTypes.Requireable; className: PropTypes.Requireable; disabled: PropTypes.Requireable; id: PropTypes.Validator; indeterminate: PropTypes.Requireable; name: PropTypes.Validator; onSelect: PropTypes.Validator<(...args: any[]) => any>; }; }; TableSelectRow: { ({ ariaLabel: deprecatedAriaLabel, ["aria-label"]: ariaLabel, checked, id, name, onSelect, onChange, disabled, radio, className, }: import("./TableSelectRow").TableSelectRowProps): import("react/jsx-runtime").JSX.Element; propTypes: { "aria-label": PropTypes.Requireable; ariaLabel: (props: Record, propName: string, componentName: string, ...rest: any[]) => any; checked: PropTypes.Requireable; className: PropTypes.Requireable; disabled: PropTypes.Requireable; id: PropTypes.Validator; name: PropTypes.Validator; onChange: PropTypes.Requireable<(...args: any[]) => any>; onSelect: PropTypes.Validator<(...args: any[]) => any>; radio: PropTypes.Requireable; }; }; TableSlugRow: { ({ className, slug }: import("./TableSlugRow").TableSlugRowProps): import("react/jsx-runtime").JSX.Element; displayName: string; propTypes: { className: PropTypes.Requireable; slug: PropTypes.Requireable; }; }; TableToolbar: { ({ ["aria-label"]: ariaLabel, ariaLabel: deprecatedAriaLabel, children, size, ...rest }: import("./TableToolbar").TableToolbarProps): import("react/jsx-runtime").JSX.Element; propTypes: { "aria-label": PropTypes.Requireable; ariaLabel: (props: Record, propName: string, componentName: string, ...rest: any[]) => any; children: PropTypes.Requireable; size: PropTypes.Requireable; }; }; TableToolbarAction: import("react").ForwardRefExoticComponent>; TableToolbarContent: (props: import("react").HTMLAttributes<"div">) => React.ReactElement; TableToolbarSearch: { ({ className, searchContainerClass, onChange: onChangeProp, onClear, translateWithId: t, placeholder, labelText, expanded: expandedProp, defaultExpanded, defaultValue, disabled, onExpand, persistent, id, onBlur, onFocus, size, tabIndex, ...rest }: import("./TableToolbarSearch").TableToolbarSearchProps): import("react/jsx-runtime").JSX.Element; propTypes: { children: PropTypes.Requireable; className: PropTypes.Requireable; defaultExpanded: PropTypes.Requireable; defaultValue: PropTypes.Requireable; disabled: PropTypes.Requireable; expanded: PropTypes.Requireable; id: PropTypes.Requireable; labelText: PropTypes.Requireable; onBlur: PropTypes.Requireable<(...args: any[]) => any>; onChange: PropTypes.Requireable<(...args: any[]) => any>; onClear: PropTypes.Requireable<(...args: any[]) => any>; onExpand: PropTypes.Requireable<(...args: any[]) => any>; onFocus: PropTypes.Requireable<(...args: any[]) => any>; persistent: PropTypes.Requireable; placeholder: PropTypes.Requireable; searchContainerClass: PropTypes.Requireable; size: PropTypes.Requireable; tabIndex: PropTypes.Requireable>; translateWithId: PropTypes.Requireable<(...args: any[]) => any>; }; }; TableToolbarMenu: { ({ className, renderIcon, iconDescription, children, menuOptionsClass, ...rest }: import("./TableToolbarMenu").TableToolbarMenuProps): import("react/jsx-runtime").JSX.Element; propTypes: { children: PropTypes.Validator>; className: PropTypes.Requireable; iconDescription: PropTypes.Requireable; menuOptionsClass: PropTypes.Requireable; renderIcon: PropTypes.Requireable; }; }; propTypes: { /** * Pass in the children that will be rendered within the Table */ children: PropTypes.Requireable<(...args: any[]) => any>; /** * Experimental property. Allows table to align cell contents to the top if there is text wrapping in the content. Might have performance issues, intended for smaller tables */ experimentalAutoAlign: PropTypes.Requireable; /** * Optional hook to manually control filtering of the rows from the * TableToolbarSearch component */ filterRows: PropTypes.Requireable<(...args: any[]) => any>; /** * The `headers` prop represents the order in which the headers should * appear in the table. We expect an array of objects to be passed in, where * `key` is the name of the key in a row object, and `header` is the name of * the header. */ headers: PropTypes.Validator<(PropTypes.InferProps<{ key: PropTypes.Validator; header: PropTypes.Validator>; isSortable: PropTypes.Requireable; }> | null | undefined)[]>; /** * Specify whether the table should be able to be sorted by its headers */ isSortable: PropTypes.Requireable; /** * Provide a string for the current locale */ locale: PropTypes.Requireable; /** * Specify whether the overflow menu (if it exists) should be shown always, or only on hover */ overflowMenuOnHover: PropTypes.Requireable; /** * Specify whether the control should be a radio button or inline checkbox */ radio: PropTypes.Requireable; /** * @deprecated Use `children` instead. This prop will be removed in * the next major version. * * https://www.patterns.dev/react/render-props-pattern/#children-as-a-function */ render: (props: Record, propName: string, componentName: string, ...rest: any[]) => any; /** * The `rows` prop is where you provide us with a list of all the rows that * you want to render in the table. The only hard requirement is that this * is an array of objects, and that each object has a unique `id` field * available on it. */ rows: PropTypes.Validator<(PropTypes.InferProps<{ id: PropTypes.Validator; disabled: PropTypes.Requireable; isSelected: PropTypes.Requireable; isExpanded: PropTypes.Requireable; }> | null | undefined)[]>; /** * Change the row height of table. Currently supports `xs`, `sm`, `md`, `lg`, and `xl`. */ size: PropTypes.Requireable; /** * Optional hook to manually control sorting of the rows. */ sortRow: PropTypes.Requireable<(...args: any[]) => any>; /** * Specify whether the header should be sticky. * Still experimental: may not work with every combination of table props */ stickyHeader: PropTypes.Requireable; /** * Translates component strings using your i18n tool. */ translateWithId: PropTypes.Requireable<(...args: any[]) => any>; /** * If `true`, sets the table width to `auto` instead of `100%`. */ useStaticWidth: PropTypes.Requireable; /** * `true` to add useZebraStyles striping. */ useZebraStyles: PropTypes.Requireable; }; }; export {};