import { AriaLabelingProps, GlobalDOMAttributes, HoverEvents, Key, LinkDOMProps, PressEvents } from '@react-types/shared'; import { ClassNameOrFunction, ContextValue, DOMProps, DOMRenderProps, RenderProps, SlotProps, StyleProps, StyleRenderProps } from './utils'; import { CollectionProps, ItemRenderProps } from './Collection'; import { ColumnSize, ColumnStaticSize } from 'react-stately/useTableState'; import { DisabledBehavior, SelectionBehavior, SelectionMode, SortDirection } from '@react-types/shared'; import { DragAndDropHooks } from './useDragAndDrop'; import { LoadMoreSentinelProps } from 'react-aria/private/utils/useLoadMoreSentinel'; import React, { ReactElement, ReactNode } from 'react'; import { TableProps as SharedTableProps, TableState } from 'react-stately/useTableState'; import { TableColumnResizeState } from 'react-stately/useTableState'; export { TableLayout } from './TableLayout'; export interface ResizableTableContainerProps extends DOMProps, DOMRenderProps<'div', undefined>, GlobalDOMAttributes { /** * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. * @default 'react-aria-ResizableTableContainer' */ className?: string; /** * Handler that is called when a user starts a column resize. */ onResizeStart?: (widths: Map) => void; /** * Handler that is called when a user performs a column resize. * Can be used with the width property on columns to put the column widths into * a controlled state. */ onResize?: (widths: Map) => void; /** * Handler that is called after a user performs a column resize. * Can be used to store the widths of columns for another future session. */ onResizeEnd?: (widths: Map) => void; } export declare const ResizableTableContainer: React.ForwardRefExoticComponent>; export declare const TableContext: React.Context>; export declare const TableStateContext: React.Context | null>; export declare const TableColumnResizeStateContext: React.Context | null>; export interface TableRenderProps { /** * Whether the table is currently focused. * @selector [data-focused] */ isFocused: boolean; /** * Whether the table is currently keyboard focused. * @selector [data-focus-visible] */ isFocusVisible: boolean; /** * Whether the table is currently the active drop target. * @selector [data-drop-target] */ isDropTarget: boolean; /** * State of the table. */ state: TableState; } export interface TableProps extends Omit, 'children'>, StyleRenderProps, SlotProps, AriaLabelingProps, GlobalDOMAttributes { /** * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. * @default 'react-aria-Table' */ className?: ClassNameOrFunction; /** The elements that make up the table. Includes the TableHeader, TableBody, Columns, and Rows. */ children?: ReactNode; /** * How multiple selection should behave in the collection. * @default "toggle" */ selectionBehavior?: SelectionBehavior; /** * Whether `disabledKeys` applies to all interactions, or only selection. * @default "all" */ disabledBehavior?: DisabledBehavior; /** Handler that is called when a user performs an action on the row. */ onRowAction?: (key: Key) => void; /** The drag and drop hooks returned by `useDragAndDrop` used to enable drag and drop behavior for the Table. */ dragAndDropHooks?: DragAndDropHooks; } /** * A table displays data in rows and columns and enables a user to navigate its contents via directional navigation keys, * and optionally supports row selection and sorting. */ export declare const Table: React.ForwardRefExoticComponent>; export interface TableOptionsContextValue { /** The type of selection that is allowed in the table. */ selectionMode: SelectionMode; /** The selection behavior for the table. If selectionMode is `"none"`, this will be `null`. */ selectionBehavior: SelectionBehavior | null; /** Whether the table allows empty selection. */ disallowEmptySelection: boolean; /** Whether the table allows rows to be dragged. */ allowsDragging: boolean; } /** * Returns options from the parent `` component. */ export declare function useTableOptions(): TableOptionsContextValue; export interface TableHeaderRenderProps { /** * Whether the table header is currently hovered with a mouse. * @selector [data-hovered] */ isHovered: boolean; } export interface TableHeaderProps extends StyleRenderProps, HoverEvents, GlobalDOMAttributes { /** * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. * @default 'react-aria-TableHeader' */ className?: ClassNameOrFunction; /** A list of table columns. */ columns?: Iterable; /** A list of `Column(s)` or a function. If the latter, a list of columns must be provided using the `columns` prop. */ children?: ReactNode | ((item: T) => ReactElement); /** Values that should invalidate the column cache when using dynamic collections. */ dependencies?: ReadonlyArray; } /** * A header within a `
`, containing the table columns. */ export declare const TableHeader: (props: TableHeaderProps & React.RefAttributes) => ReactElement> | null; export interface ColumnRenderProps { /** * Whether the column is currently hovered with a mouse. * @selector [data-hovered] */ isHovered: boolean; /** * Whether the column is currently in a pressed state. * @selector [data-pressed] */ isPressed: boolean; /** * Whether the column is currently focused. * @selector [data-focused] */ isFocused: boolean; /** * Whether the column is currently keyboard focused. * @selector [data-focus-visible] */ isFocusVisible: boolean; /** * Whether the column allows sorting. * @selector [data-allows-sorting] */ allowsSorting: boolean; /** * The current sort direction. * @selector [data-sort-direction="ascending | descending"] */ sortDirection: SortDirection | undefined; /** * Whether the column is currently being resized. * @selector [data-resizing] */ isResizing: boolean; /** * Triggers sorting for this column in the given direction. */ sort(direction: SortDirection): void; /** * Starts column resizing if the table is contained in a `` element. */ startResize(): void; } export interface ColumnProps extends RenderProps, GlobalDOMAttributes { /** * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. * @default 'react-aria-Column' */ className?: ClassNameOrFunction; /** The unique id of the column. */ id?: Key; /** Whether the column allows sorting. */ allowsSorting?: boolean; /** Whether a column is a [row header](https://www.w3.org/TR/wai-aria-1.1/#rowheader) and should be announced by assistive technology during row navigation. */ isRowHeader?: boolean; /** A string representation of the column's contents, used for accessibility announcements. */ textValue?: string; /** The width of the column. This prop only applies when the `
` is wrapped in a ``. */ width?: ColumnSize | null; /** The default width of the column. This prop only applies when the `
` is wrapped in a ``. */ defaultWidth?: ColumnSize | null; /** The minimum width of the column. This prop only applies when the `
` is wrapped in a ``. */ minWidth?: ColumnStaticSize | null; /** The maximum width of the column. This prop only applies when the `
` is wrapped in a ``. */ maxWidth?: ColumnStaticSize | null; } /** * A column within a `
`. */ export declare const Column: (props: ColumnProps & React.RefAttributes) => ReactElement> | null; export interface ColumnResizerRenderProps { /** * Whether the resizer is currently hovered with a mouse. * @selector [data-hovered] */ isHovered: boolean; /** * Whether the resizer is currently focused. * @selector [data-focused] */ isFocused: boolean; /** * Whether the resizer is currently keyboard focused. * @selector [data-focus-visible] */ isFocusVisible: boolean; /** * Whether the resizer is currently being resized. * @selector [data-resizing] */ isResizing: boolean; /** * The direction that the column is currently resizable. * @selector [data-resizable-direction="right | left | both"] */ resizableDirection: 'right' | 'left' | 'both'; } export interface ColumnResizerProps extends HoverEvents, RenderProps, GlobalDOMAttributes { /** * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. * @default 'react-aria-ColumnResizer' */ className?: ClassNameOrFunction; /** A custom accessibility label for the resizer. */ 'aria-label'?: string; } export declare const ColumnResizer: React.ForwardRefExoticComponent>; export interface TableBodyRenderProps { /** * Whether the table body has no rows and should display its empty state. * @selector [data-empty] */ isEmpty: boolean; /** * Whether the Table is currently the active drop target. * @selector [data-drop-target] */ isDropTarget: boolean; } export interface TableBodyProps extends Omit, 'disabledKeys'>, StyleRenderProps, GlobalDOMAttributes { /** * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. * @default 'react-aria-TableBody' */ className?: ClassNameOrFunction; /** Provides content to display when there are no rows in the table. */ renderEmptyState?: (props: TableBodyRenderProps) => ReactNode; } /** * The body of a `
`, containing the table rows. */ export declare const TableBody: (props: TableBodyProps & React.RefAttributes) => ReactElement> | null; export interface RowRenderProps extends ItemRenderProps { /** Whether the row's children have keyboard focus. */ isFocusVisibleWithin: boolean; /** The unique id of the row. */ id?: Key; /** * Whether the row is expanded. * @selector [data-expanded] */ isExpanded: boolean; /** * Whether the row has child rows. * @selector [data-has-child-items] */ hasChildItems: boolean; /** * What level the row has within the table. * @selector [data-level] */ level: number; } export interface RowProps extends StyleRenderProps, LinkDOMProps, HoverEvents, PressEvents, Omit, 'onClick'> { /** * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. * @default 'react-aria-Row' */ className?: ClassNameOrFunction; /** A list of columns used when dynamically rendering cells. */ columns?: Iterable; /** The cells within the row. Supports static items or a function for dynamic rendering. */ children?: ReactNode | ((item: T) => ReactElement); /** The object value that this row represents. When using dynamic collections, this is set automatically. */ value?: T; /** Values that should invalidate the cell cache when using dynamic collections. */ dependencies?: ReadonlyArray; /** A string representation of the row's contents, used for features like typeahead. */ textValue?: string; /** Whether the row is disabled. */ isDisabled?: boolean; /** * Handler that is called when a user performs an action on the row. The exact user event depends on * the collection's `selectionBehavior` prop and the interaction modality. */ onAction?: () => void; /** The unique id of the row. */ id?: Key; /** Whether this row has children, even if not loaded yet. */ hasChildItems?: boolean; } /** * A row within a `
`. */ export declare const Row: (props: RowProps & React.RefAttributes) => ReactElement> | null; export interface CellRenderProps { /** * Whether the cell is currently in a pressed state. * @selector [data-pressed] */ isPressed: boolean; /** * Whether the cell is currently focused. * @selector [data-focused] */ isFocused: boolean; /** * Whether the cell is currently keyboard focused. * @selector [data-focus-visible] */ isFocusVisible: boolean; /** * Whether the cell is currently hovered with a mouse. * @selector [data-hovered] */ isHovered: boolean; /** * Whether the parent row is currently selected. * @selector [data-selected] */ isSelected: boolean; /** * Whether the parent row is non-interactive, i.e. both selection and actions are disabled and the item may * not be focused. Dependent on `disabledKeys` and `disabledBehavior`. * @selector [data-disabled] */ isDisabled: boolean; /** * The unique id of the cell. **/ id?: Key; /** * The index of the column that this cell belongs to. Respects col spanning. */ columnIndex?: number | null; /** * Whether the column displays hierarchical data. * @selector [data-tree-column] */ isTreeColumn: boolean; /** * Whether the parent row is expanded. * @selector [data-expanded] */ isExpanded: boolean; /** * Whether the parent row has child rows. * @selector [data-has-child-items] */ hasChildItems: boolean; /** * What level the parent row has within the table. * @selector [data-level] */ level: number; } export interface CellProps extends RenderProps, GlobalDOMAttributes { /** * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. * @default 'react-aria-Cell' */ className?: ClassNameOrFunction; /** The unique id of the cell. */ id?: Key; /** A string representation of the cell's contents, used for features like typeahead. */ textValue?: string; /** Indicates how many columns the data cell spans. */ colSpan?: number; } /** * A cell within a table row. */ export declare const Cell: (props: CellProps & React.RefAttributes) => ReactElement> | null; export interface TableLoadMoreItemProps extends Omit, StyleProps, DOMRenderProps<'tr' | 'div', undefined>, GlobalDOMAttributes { /** * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. * @default 'react-aria-TableLoadMoreItem' */ className?: string; /** * The load more spinner to render when loading additional items. */ children?: ReactNode; /** * Whether or not the loading spinner should be rendered or not. */ isLoading?: boolean; } export declare const TableLoadMoreItem: (props: TableLoadMoreItemProps & React.RefAttributes) => ReactElement> | null;