@carbon/react

/** * Copyright IBM Corp. 2016, 2025 * * 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 { DataTableSortState } from './state/sortStates'; import { TranslateWithId } from '../../types/common'; declare const translationKeys: { readonly expandRow: "carbon.table.row.expand"; readonly collapseRow: "carbon.table.row.collapse"; readonly expandAll: "carbon.table.all.expand"; readonly collapseAll: "carbon.table.all.collapse"; readonly selectAll: "carbon.table.all.select"; readonly unselectAll: "carbon.table.all.unselect"; readonly selectRow: "carbon.table.row.select"; readonly unselectRow: "carbon.table.row.unselect"; }; /** * Message ids that will be passed to translateWithId(). */ type TranslationKey = (typeof translationKeys)[keyof typeof translationKeys]; 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; hasDecoratorHeader?: 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; } export interface DataTableRenderProps<RowType, ColTypes extends any[]> { headers: DataTableHeader[]; rows: (DataTableRow<ColTypes> & RowType)[]; 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; }; 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; }; 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 | undefined; 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; hasDecoratorHeader?: boolean; }; onInputChange: (event: ChangeEvent<HTMLInputElement>, defaultValue?: string) => void; sortBy: (headerKey: string) => void; selectAll: () => void; selectRow: (rowId: string) => void; expandRow: (rowId: string) => void; expandAll: () => void; 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; render?: (renderProps: DataTableRenderProps<RowType, ColTypes>) => ReactElement; rows: Omit<DataTableRow<ColTypes>, 'cells'>[]; size?: DataTableSize; sortRow?: (cellA: any, cellB: any, options: { sortDirection: DataTableSortState; sortStates: Record<DataTableSortState, DataTableSortState>; locale: string; key: string; compare: (a: number | string, b: number | string, locale?: string) => number; }) => number; stickyHeader?: boolean; useStaticWidth?: boolean; useZebraStyles?: boolean; } /** * Data Tables 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 end up normalizing the * given data and then denormalizing it when rendering. * * As a result, each part of the DataTable is accessible through look-up by id, * and updating the state of the single entity will cascade updates to the * consumer. */ export declare const DataTable: { <RowType, ColTypes extends any[]>(props: DataTableProps<RowType, ColTypes>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null; translationKeys: ("carbon.table.row.expand" | "carbon.table.row.collapse" | "carbon.table.all.expand" | "carbon.table.all.collapse" | "carbon.table.all.select" | "carbon.table.all.unselect" | "carbon.table.row.select" | "carbon.table.row.unselect")[]; Table: { ({ className, children, useZebraStyles, size, isSortable, useStaticWidth, stickyHeader, overflowMenuOnHover, experimentalAutoAlign, tabIndex, ...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: import("./TableBatchActions").TableBatchActionsComponent; 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, 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>; 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: React.Validator; 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<HTMLTableCellElement>>; 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: React.FC<import("./TableToolbar").TableToolbarProps>; 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: React.FC<import("./TableToolbarMenu").TableToolbarMenuProps>; propTypes: { /** * 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>>; }> | 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>; /** * 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>; /** * Optional method that takes in a message id and returns an * internationalized string. See `DataTable.translationKeys` for all * available message ids. */ translateWithId: PropTypes.Requireable<(...args: any[]) => any>; /** * `false` If true, will use a width of 'auto' instead of 100% */ useStaticWidth: PropTypes.Requireable<boolean>; /** * `true` to add useZebraStyles striping. */ useZebraStyles: PropTypes.Requireable<boolean>; }; }; export {};