@carbon/react

/** * 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 React, { type ChangeEvent, type MouseEvent, type ReactElement, type ReactNode } from 'react'; import { type SortRowFn } from './state/sorting'; import type { DataTableSortState } from './state/sortStates'; 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<T> { id: string; value: T; isEditable: boolean; isEditing: boolean; isValid: boolean; errors: null | Error[]; info: { header: string; }; hasAILabelHeader?: boolean; } type DataTableCells<T extends any[]> = { [K in keyof T]: DataTableCell<T[K]>; }; export interface DataTableRow<ColTypes extends any[]> { id: string; cells: DataTableCells<ColTypes>; disabled?: boolean; isExpanded?: boolean; isSelected?: boolean; } export interface DataTableHeader { key: string; header: ReactNode; slug?: ReactElement; decorator?: ReactElement; isSortable?: boolean; } export interface DataTableRenderProps<RowType, ColTypes extends any[]> { /** * The headers for the table. */ headers: DataTableHeader[]; /** * The rows for the table. */ rows: (DataTableRow<ColTypes> & RowType)[]; /** * The rows that are currently selected. */ selectedRows: (DataTableRow<ColTypes> & RowType)[]; getHeaderProps: (options: { header: DataTableHeader; isSortable?: boolean; onClick?: (event: MouseEvent<HTMLButtonElement>, sortState: { sortHeaderKey: string; sortDirection: DataTableSortState; }) => void; [key: string]: unknown; }) => { isSortable: boolean | undefined; isSortHeader: boolean; key: string; onClick: (event: MouseEvent<HTMLButtonElement>) => void; sortDirection: DataTableSortState; [key: string]: unknown; }; getExpandHeaderProps: (options?: { onClick?: (event: MouseEvent<HTMLButtonElement>, expandState: { isExpanded?: boolean; }) => void; onExpand?: (event: MouseEvent<HTMLButtonElement>) => void; [key: string]: unknown; }) => { ['aria-label']: string; isExpanded: boolean; onExpand: (event: MouseEvent<HTMLButtonElement>) => void; [key: string]: unknown; id: string; }; getRowProps: (options: { onClick?: (event: MouseEvent<HTMLButtonElement>) => void; row: DataTableRow<ColTypes>; [key: string]: unknown; }) => { ['aria-label']: string; disabled: boolean | undefined; isExpanded?: boolean; isSelected?: boolean; key: string; onExpand: (event: MouseEvent<HTMLButtonElement>) => void; [key: string]: unknown; expandHeader: string; }; getExpandedRowProps: (options: { row: DataTableRow<ColTypes>; [key: string]: unknown; }) => { ['id']: string; [key: string]: unknown; }; getSelectionProps: (options?: { onClick?: (event: MouseEvent<HTMLInputElement, globalThis.MouseEvent>) => void; row?: DataTableRow<ColTypes>; [key: string]: unknown; }) => { 'aria-label': string; checked?: boolean | undefined; disabled?: boolean | undefined; id: string; indeterminate?: boolean; name: string; onSelect: (event: MouseEvent<HTMLInputElement>) => 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<ColTypes>; }) => { [key: string]: unknown; hasAILabelHeader?: boolean; key: string; }; /** * Handles input value changes. */ onInputChange: (event: ChangeEvent<HTMLInputElement>, 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<RowType, ColTypes extends any[]> extends TranslateWithId<TranslationKey> { children?: (renderProps: DataTableRenderProps<RowType, ColTypes>) => ReactElement; experimentalAutoAlign?: boolean; filterRows?: (options: { cellsById: Record<string, DataTableCell<ColTypes>>; 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<RowType, ColTypes>) => ReactElement; rows: Omit<DataTableRow<ColTypes>, '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: { <RowType, ColTypes extends any[]>(props: DataTableProps<RowType, ColTypes>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null; Table: { ({ className, children, useZebraStyles, size, isSortable, useStaticWidth, stickyHeader, overflowMenuOnHover, experimentalAutoAlign, ...other }: React.PropsWithChildren<import("./Table").TableProps>): import("react/jsx-runtime").JSX.Element; propTypes: { children: PropTypes.Requireable<PropTypes.ReactNodeLike>; className: PropTypes.Requireable<string>; experimentalAutoAlign: PropTypes.Requireable<boolean>; isSortable: PropTypes.Requireable<boolean>; overflowMenuOnHover: PropTypes.Requireable<boolean>; size: PropTypes.Requireable<string>; stickyHeader: PropTypes.Requireable<boolean>; useStaticWidth: PropTypes.Requireable<boolean>; useZebraStyles: PropTypes.Requireable<boolean>; tabIndex: PropTypes.Requireable<number>; }; }; TableActionList: (props: React.HTMLAttributes<"div">) => React.ReactElement<any>; TableBatchAction: { ({ renderIcon, iconDescription, ...props }: import("./TableBatchAction").TableBatchActionProps): import("react/jsx-runtime").JSX.Element; propTypes: { hasIconOnly: PropTypes.Requireable<boolean>; iconDescription: (props: any) => Error | undefined; renderIcon: PropTypes.Requireable<object>; }; }; TableBatchActions: { ({ className, children, shouldShowBatchActions, totalSelected, totalCount, onCancel, onSelectAll, translateWithId: t, ...rest }: import("./TableBatchActions").TableBatchActionsProps): import("react/jsx-runtime").JSX.Element; propTypes: { children: PropTypes.Requireable<PropTypes.ReactNodeLike>; className: PropTypes.Requireable<string>; onCancel: PropTypes.Validator<(...args: any[]) => any>; onSelectAll: PropTypes.Requireable<(...args: any[]) => any>; shouldShowBatchActions: PropTypes.Requireable<boolean>; totalCount: PropTypes.Requireable<number>; totalSelected: PropTypes.Validator<number>; translateWithId: PropTypes.Requireable<(...args: any[]) => any>; }; }; TableBody: { ({ children, className, ...rest }: import("./TableBody").TableBodyProps): import("react/jsx-runtime").JSX.Element; propTypes: { 'aria-live': PropTypes.Requireable<string>; children: PropTypes.Requireable<PropTypes.ReactNodeLike>; className: PropTypes.Requireable<string>; }; }; TableCell: React.ForwardRefExoticComponent<import("./TableCell").TableCellProps & React.RefAttributes<HTMLTableCellElement>>; TableContainer: { ({ aiEnabled, className, children, decorator, title, description, stickyHeader, useStaticWidth, ...rest }: import("./TableContainer").TableContainerProps): import("react/jsx-runtime").JSX.Element; propTypes: { aiEnabled: PropTypes.Requireable<boolean>; children: PropTypes.Requireable<PropTypes.ReactNodeLike>; className: PropTypes.Requireable<string>; decorator: PropTypes.Requireable<PropTypes.ReactNodeLike>; description: PropTypes.Requireable<PropTypes.ReactNodeLike>; stickyHeader: PropTypes.Requireable<boolean>; title: PropTypes.Requireable<PropTypes.ReactNodeLike>; useStaticWidth: PropTypes.Requireable<boolean>; }; }; TableDecoratorRow: { ({ className, decorator, }: import("./TableDecoratorRow").TableDecoratorRowProps): import("react/jsx-runtime").JSX.Element; displayName: string; propTypes: { className: PropTypes.Requireable<string>; decorator: PropTypes.Requireable<PropTypes.ReactNodeLike>; }; }; 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<string>; "aria-label": PropTypes.Requireable<string>; ariaLabel: PropTypes.Requireable<string>; children: PropTypes.Requireable<PropTypes.ReactNodeLike>; className: PropTypes.Requireable<string>; enableExpando: (props: Record<string, any>, propName: string, componentName: string, ...rest: any[]) => any; enableToggle: PropTypes.Requireable<boolean>; expandIconDescription: PropTypes.Requireable<string>; id: PropTypes.Requireable<string>; isExpanded: PropTypes.Validator<boolean | null | undefined>; onExpand: PropTypes.Requireable<any>; }; }; TableExpandRow: React.ForwardRefExoticComponent<import("./TableExpandRow").TableExpandRowProps & React.RefAttributes<HTMLTableCellElement>>; TableExpandedRow: { ({ className: customClassName, children, colSpan, ...rest }: import("./TableExpandedRow").TableExpandedRowProps): import("react/jsx-runtime").JSX.Element; propTypes: { children: PropTypes.Requireable<PropTypes.ReactNodeLike>; className: PropTypes.Requireable<string>; colSpan: PropTypes.Validator<number>; }; }; TableHead: (props: React.HTMLAttributes<"thead">) => React.ReactElement<any>; TableHeader: React.ForwardRefExoticComponent<import("./TableHeader").TableHeaderProps & React.RefAttributes<HTMLTableCellElement>>; TableRow: React.ForwardRefExoticComponent<import("./TableRow").TableRowProps & React.RefAttributes<HTMLTableRowElement>>; 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<string>; ariaLabel: (props: Record<string, any>, propName: string, componentName: string, ...rest: any[]) => any; checked: PropTypes.Requireable<boolean>; className: PropTypes.Requireable<string>; disabled: PropTypes.Requireable<boolean>; id: PropTypes.Validator<string>; indeterminate: PropTypes.Requireable<boolean>; name: PropTypes.Validator<string>; 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<string>; ariaLabel: (props: Record<string, any>, propName: string, componentName: string, ...rest: any[]) => any; checked: PropTypes.Requireable<boolean>; className: PropTypes.Requireable<string>; disabled: PropTypes.Requireable<boolean>; id: PropTypes.Validator<string>; name: PropTypes.Validator<string>; onChange: PropTypes.Requireable<(...args: any[]) => any>; onSelect: PropTypes.Validator<(...args: any[]) => any>; radio: PropTypes.Requireable<boolean>; }; }; TableSlugRow: { ({ className, slug }: import("./TableSlugRow").TableSlugRowProps): import("react/jsx-runtime").JSX.Element; displayName: string; propTypes: { className: PropTypes.Requireable<string>; slug: PropTypes.Requireable<PropTypes.ReactNodeLike>; }; }; TableToolbar: { ({ ["aria-label"]: ariaLabel, ariaLabel: deprecatedAriaLabel, children, size, ...rest }: import("./TableToolbar").TableToolbarProps): import("react/jsx-runtime").JSX.Element; propTypes: { "aria-label": PropTypes.Requireable<string>; ariaLabel: (props: Record<string, any>, propName: string, componentName: string, ...rest: any[]) => any; children: PropTypes.Requireable<PropTypes.ReactNodeLike>; size: PropTypes.Requireable<string>; }; }; TableToolbarAction: React.ForwardRefExoticComponent<import("./TableToolbarAction").TableToolbarActionProps & React.RefAttributes<HTMLDivElement>>; TableToolbarContent: (props: React.HTMLAttributes<"div">) => React.ReactElement<any>; 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<PropTypes.ReactNodeLike>; className: PropTypes.Requireable<string>; defaultExpanded: PropTypes.Requireable<boolean>; defaultValue: PropTypes.Requireable<string>; disabled: PropTypes.Requireable<boolean>; expanded: PropTypes.Requireable<boolean>; id: PropTypes.Requireable<string>; labelText: PropTypes.Requireable<string>; 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<boolean>; placeholder: PropTypes.Requireable<string>; searchContainerClass: PropTypes.Requireable<string>; size: PropTypes.Requireable<string>; tabIndex: PropTypes.Requireable<NonNullable<string | number | null | undefined>>; 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<NonNullable<PropTypes.ReactNodeLike>>; className: PropTypes.Requireable<string>; iconDescription: PropTypes.Requireable<string>; menuOptionsClass: PropTypes.Requireable<string>; renderIcon: PropTypes.Requireable<object>; }; }; 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<boolean>; /** * 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<string>; header: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>; isSortable: PropTypes.Requireable<boolean>; }> | null | undefined)[]>; /** * Specify whether the table should be able to be sorted by its headers */ isSortable: PropTypes.Requireable<boolean>; /** * Provide a string for the current locale */ locale: PropTypes.Requireable<string>; /** * Specify whether the overflow menu (if it exists) should be shown always, or only on hover */ overflowMenuOnHover: PropTypes.Requireable<boolean>; /** * Specify whether the control should be a radio button or inline checkbox */ radio: PropTypes.Requireable<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: (props: Record<string, any>, 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<string>; disabled: PropTypes.Requireable<boolean>; isSelected: PropTypes.Requireable<boolean>; isExpanded: PropTypes.Requireable<boolean>; }> | null | undefined)[]>; /** * Change the row height of table. Currently supports `xs`, `sm`, `md`, `lg`, and `xl`. */ size: PropTypes.Requireable<string>; /** * 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<boolean>; /** * 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<boolean>; /** * `true` to add useZebraStyles striping. */ useZebraStyles: PropTypes.Requireable<boolean>; }; }; export {};