import { Accessibility, TableBehaviorProps } from '@fluentui/accessibility'; import { ComponentWithAs } from '@fluentui/react-bindings'; import { UIComponentProps, ChildrenComponentProps } from '../../utils'; import { TableRow, TableRowProps } from './TableRow'; import { TableCell } from './TableCell'; import { ShorthandCollection, ShorthandValue, FluentComponentStaticProps } from '../../types'; export interface TableSlotClassNames { header: string; } export interface TableProps extends UIComponentProps, ChildrenComponentProps { /** * Accessibility behavior if overridden by the user. * */ accessibility?: Accessibility; /** The columns of the Table with a space-separated list of values. */ header?: ShorthandValue; /** The rows of the Table with a space-separated list of values. */ rows?: ShorthandCollection; /** * Render table in compact mode */ compact?: boolean; } export declare const tableClassName = "ui-table"; export declare const tableSlotClassNames: TableSlotClassNames; export declare type TableStylesProps = never; /** * A Table is used to display data in tabular layout * * @accessibility * Implements ARIA [Data Grid](https://www.w3.org/TR/wai-aria-practices/#dataGrid) design pattern for presenting tabular information. * When gridcell contains actionable element, use [gridCellWithFocusableElementBehavior](/components/table/accessibility#grid-cell-with-focusable-element-behavior-ts). [More information available in aria documentation.](https://www.w3.org/TR/wai-aria-practices/#gridNav_focus) * Use [gridCellMultipleFocusableBehavior](/components/table/accessibility#gridCellMultipleFocusableBehavior), when gridcell contains: * \- editable content * \- multiple actionable elements * \- component that utilizes arrow keys in its navigation, like menu button, dropdown, radio group, slider, etc. * [More information available in aria documentation.](https://www.w3.org/TR/wai-aria-practices/#gridNav_inside) * @accessibilityIssues * [NVDA narrate table title(aria-label) twice](https://github.com/nvaccess/nvda/issues/10548) * [Accessibility DOM > Table > gridcell > when gridcell is focused, then selected state is send to reader](https://bugs.chromium.org/p/chromium/issues/detail?id=1030378) * [JAWS narrate grid name twice, once as table and second time as grid](https://github.com/FreedomScientific/VFO-standards-support/issues/346) * [JAWS doesn't narrate grid column name, when focus is on actionable element in the cell] (https://github.com/FreedomScientific/VFO-standards-support/issues/348) * [aria-sort is not output at child elements](https://github.com/FreedomScientific/VFO-standards-support/issues/319) * [VoiceOver not announcing rows correctly for a grid with presentation elements inside](https://bugs.chromium.org/p/chromium/issues/detail?id=1054424) * VoiceOver doesn't narrate aria-rowcount value in table or grid */ export declare const Table: ComponentWithAs<'div', TableProps> & FluentComponentStaticProps & { Cell: typeof TableCell; Row: typeof TableRow; };