import { PropsOfElement, ButtonProps } from "@fluentui/react-northstar"; import { IAvatarProps } from "../../lib/Avatar"; import { IColumn } from "./tableBreakpoints"; import { TActions, actionKey, TTextObject, TLocale, EButtonVariants, TPhrasingContent } from "../.."; export declare type columnKey = string; export declare type rowKey = string; export declare type TSelected = Set; /** * Content for a table cell can be a button. When clicked, buttons emit an Interaction event. * @public */ export interface ICellButtonContent extends Pick { type: "button"; actionId: string; content: TTextObject; variant?: EButtonVariants; icon?: string; } /** * Content for a table cell can be a name with an avatar. The avatar preceeds the name in the inline * direction and the name labels the avatar. * @public */ export declare type TCellAvatarContent = ICellIconAvatarContent | ICellImageAvatarContent; /** * Table cells using avatars can specify an icon as the avatar’s visual content. * @public */ export interface ICellIconAvatarContent extends Pick { type: "avatar"; content: TTextObject; } /** * Table cells using avatars can specify an image as the avatar’s visual content. * @public */ export interface ICellImageAvatarContent extends Pick { type: "avatar"; content: TTextObject; } /** * The content for a table cell * @public */ export declare type TCellContent = TPhrasingContent | ICellButtonContent | TCellAvatarContent; /** * A collection of data to display for a row, keyed by the column ID except for `actions`, which * contains the collection of actions to make available in the row’s overflow menu. * @public */ export interface IRow { [columnKey: string]: TCellContent | TActions | undefined; actions?: TActions; } /** * An interaction payload emitted by Table. * @public */ export declare type TTableInteraction = { event: "click"; target: "table"; subject: rowKey | rowKey[]; action?: actionKey; }; /** * The Table component is used by the List template as its primary content. * @public */ export interface ITableProps extends PropsOfElement<"div"> { /** * The title summary, or label of the table, announced for screen readers but hidden for other users. */ label: string; /** * A collection of columns to display, keyed by column ID. */ columns: { [columnKey: string]: IColumn; }; /** * A collection of rows to display, keyed by row ID. */ rows: { [rowKey: string]: IRow; }; /** * If true, limits content to a single line and truncate with the language’s default ellipsis, * or if false, content in each cell wraps exhaustively. */ truncate?: boolean; /** * Whether the user can select rows. In the context of a List component, this supplies any actions * all rows have in common in the Toolbar instance above the Table. If this is false, the Table * will call `onInteraction` any time the user clicks on a row. */ selectable?: boolean; /** * @internal */ onSelectedChange?: (selected: TSelected) => TSelected; /** * @internal */ findQuery?: string; /** * @internal */ filterBy?: (row: IRow) => boolean; /** * An interaction handler for the Table. Interactions are triggered when the user clicks on an * action in a row, a button in a table cell, or anywhere in a row if `selectable` is `false`. If * the Table is not rendered on its own, this may be proxied from its parent component, e.g. the * parent List. */ onInteraction?: (interaction: TTableInteraction) => void; } export declare const getAllCellTextContent: (cell: TCellContent) => string; export declare const getCellTextContent: (locale: TLocale, cell: TCellContent) => string; /** * @public */ export declare const Table: (props: ITableProps) => JSX.Element; //# sourceMappingURL=Table.d.ts.map