@fluentui/react-table 9.0.0-alpha.1 → 9.0.0-alpha.11

package/dist/index.d.ts

@@ -1,17 +1,256 @@
 /// <reference types="react" />
 
 import { ARIAButtonSlotProps } from '@fluentui/react-aria';
+import type { AvatarSizes } from '@fluentui/react-avatar';
+import type { Checkbox } from '@fluentui/react-checkbox';
+import type { CheckboxProps } from '@fluentui/react-checkbox';
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
-import { ContextSelector } from '@fluentui/react-context-selector';
-import { FC } from 'react';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
-import { Provider } from 'react';
-import { ProviderProps } from 'react';
+import type { Radio } from '@fluentui/react-radio';
 import * as React_2 from 'react';
+import { ReactNode } from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
+export declare type CellRenderFunction = (column: ColumnDefinition<any>) => React_2.ReactNode;
+
+export declare interface ColumnDefinition<TItem> {
+    columnId: ColumnId;
+    compare: (a: TItem, b: TItem) => number;
+    renderHeaderCell: () => React_2.ReactNode;
+    renderCell: (item: TItem) => React_2.ReactNode;
+}
+
+export declare type ColumnId = string | number;
+
+/**
+ * Helper function to create column definition with defaults
+ * @param options - column definition options
+ * @returns - column definition with defaults
+ */
+export declare function createColumn<TItem>(options: CreateColumnOptions<TItem>): {
+    columnId: ColumnId;
+    renderCell: (item: TItem) => ReactNode;
+    renderHeaderCell: () => ReactNode;
+    compare: (a: TItem, b: TItem) => number;
+};
+
+export declare interface CreateColumnOptions<TItem> extends Partial<ColumnDefinition<TItem>> {
+    columnId: ColumnId;
+}
+
+/**
+ * DataGrid component - TODO: add more docs
+ */
+export declare const DataGrid: ForwardRefComponent<DataGridProps>;
+
+/**
+ * DataGridBody component - TODO: add more docs
+ */
+export declare const DataGridBody: ForwardRefComponent<DataGridBodyProps>;
+
+export declare const dataGridBodyClassNames: SlotClassNames<DataGridBodySlots>;
+
+/**
+ * DataGridBody Props
+ */
+export declare type DataGridBodyProps = Omit<TableBodyProps, 'children'> & {
+    /**
+     * Render function for rows
+     */
+    children: RowRenderFunction;
+};
+
+export declare type DataGridBodySlots = TableBodySlots;
+
+/**
+ * State used in rendering DataGridBody
+ */
+export declare type DataGridBodyState = TableBodyState;
+
+/**
+ * DataGridCell component - TODO: add more docs
+ */
+export declare const DataGridCell: ForwardRefComponent<DataGridCellProps>;
+
+export declare const dataGridCellClassNames: SlotClassNames<DataGridCellSlots>;
+
+/**
+ * DataGridCell Props
+ */
+export declare type DataGridCellProps = TableCellProps;
+
+export declare type DataGridCellSlots = TableCellSlots;
+
+/**
+ * State used in rendering DataGridCell
+ */
+export declare type DataGridCellState = TableCellState;
+
+export declare const dataGridClassNames: SlotClassNames<DataGridSlots>;
+
+export declare type DataGridContextValue = HeadlessTableState<any> & {
+    /**
+     * How focus navigation will work in the datagrid
+     * @default none
+     */
+    focusMode: FocusMode;
+};
+
+export declare type DataGridContextValues = TableContextValues & {
+    dataGrid: DataGridContextValue;
+};
+
+/**
+ * DataGridHeader component - TODO: add more docs
+ */
+export declare const DataGridHeader: ForwardRefComponent<DataGridHeaderProps>;
+
+/**
+ * DataGridHeaderCell component - TODO: add more docs
+ */
+export declare const DataGridHeaderCell: ForwardRefComponent<DataGridHeaderCellProps>;
+
+export declare const dataGridHeaderCellClassNames: SlotClassNames<DataGridHeaderCellSlots>;
+
+/**
+ * DataGridHeaderCell Props
+ */
+export declare type DataGridHeaderCellProps = TableHeaderCellProps;
+
+export declare type DataGridHeaderCellSlots = TableHeaderCellSlots;
+
+/**
+ * State used in rendering DataGridHeaderCell
+ */
+export declare type DataGridHeaderCellState = TableHeaderCellState;
+
+export declare const dataGridHeaderClassNames: SlotClassNames<DataGridHeaderSlots>;
+
+/**
+ * DataGridHeader Props
+ */
+export declare type DataGridHeaderProps = TableHeaderProps;
+
+export declare type DataGridHeaderSlots = TableHeaderSlots;
+
+/**
+ * State used in rendering DataGridHeader
+ */
+export declare type DataGridHeaderState = TableHeaderState;
+
+/**
+ * DataGrid Props
+ */
+export declare type DataGridProps = TableProps & Pick<DataGridContextValue, 'items' | 'columns'> & Pick<Partial<DataGridContextValue>, 'focusMode'>;
+
+/**
+ * DataGridRow component - TODO: add more docs
+ */
+export declare const DataGridRow: ForwardRefComponent<DataGridRowProps>;
+
+export declare const dataGridRowClassNames: SlotClassNames<DataGridRowSlots>;
+
+/**
+ * DataGridRow Props
+ */
+export declare type DataGridRowProps = Omit<TableRowProps, 'children'> & {
+    children: CellRenderFunction;
+};
+
+export declare type DataGridRowSlots = TableRowSlots;
+
+/**
+ * State used in rendering DataGridRow
+ */
+export declare type DataGridRowState = TableRowState;
+
+/**
+ * DataGridSelectionCell component - TODO: add more docs
+ */
+export declare const DataGridSelectionCell: ForwardRefComponent<DataGridSelectionCellProps>;
+
+export declare const dataGridSelectionCellClassNames: SlotClassNames<DataGridSelectionCellSlots>;
+
+/**
+ * DataGridSelectionCell Props
+ */
+export declare type DataGridSelectionCellProps = TableSelectionCellProps;
+
+export declare type DataGridSelectionCellSlots = TableSelectionCellSlots;
+
+/**
+ * State used in rendering DataGridSelectionCell
+ */
+export declare type DataGridSelectionCellState = TableSelectionCellState;
+
+export declare type DataGridSlots = TableSlots;
+
+/**
+ * State used in rendering DataGrid
+ */
+export declare type DataGridState = TableState & {
+    tableState: HeadlessTableState<unknown>;
+} & Pick<DataGridContextValue, 'focusMode'>;
+
+export declare type FocusMode = 'none' | 'cell';
+
+export declare interface HeadlessTableState<TItem> extends Pick<UseTableOptions<TItem>, 'items' | 'getRowId'> {
+    /**
+     * The row data for rendering
+     * @param rowEnhancer - Enhances the row with extra user data
+     */
+    getRows: <TRowState extends RowState<TItem> = RowState<TItem>>(rowEnhancer?: RowEnhancer<TItem, TRowState>) => TRowState[];
+    /**
+     * State and actions to manage row selection
+     */
+    selection: TableSelectionState;
+    /**
+     * State and actions to manage row sorting
+     */
+    sort: TableSortState<TItem>;
+    /**
+     * Table columns
+     */
+    columns: ColumnDefinition<TItem>[];
+}
+
+/**
+ * Render the final JSX of DataGrid
+ */
+export declare const renderDataGrid_unstable: (state: DataGridState, contextValues: DataGridContextValues) => JSX.Element;
+
+/**
+ * Render the final JSX of DataGridBody
+ */
+export declare const renderDataGridBody_unstable: (state: DataGridBodyState) => JSX.Element;
+
+/**
+ * Render the final JSX of DataGridCell
+ */
+export declare const renderDataGridCell_unstable: (state: DataGridCellState) => JSX.Element;
+
+/**
+ * Render the final JSX of DataGridHeader
+ */
+export declare const renderDataGridHeader_unstable: (state: DataGridHeaderState) => JSX.Element;
+
+/**
+ * Render the final JSX of DataGridHeaderCell
+ */
+export declare const renderDataGridHeaderCell_unstable: (state: DataGridHeaderCellState) => JSX.Element;
+
+/**
+ * Render the final JSX of DataGridRow
+ */
+export declare const renderDataGridRow_unstable: (state: DataGridRowState) => JSX.Element;
+
+/**
+ * Render the final JSX of DataGridSelectionCell
+ */
+export declare const renderDataGridSelectionCell_unstable: (state: DataGridSelectionCellState) => JSX.Element;
+
 /**
  * Render the final JSX of Table
  */
@@ -27,6 +266,16 @@ export declare const renderTableBody_unstable: (state: TableBodyState) => JSX.El
  */
 export declare const renderTableCell_unstable: (state: TableCellState) => JSX.Element;
 
+/**
+ * Render the final JSX of TableCellActions
+ */
+export declare const renderTableCellActions_unstable: (state: TableCellActionsState) => JSX.Element;
+
+/**
+ * Render the final JSX of TableCellLayout
+ */
+export declare const renderTableCellLayout_unstable: (state: TableCellLayoutState, contextValues: TableCellLayoutContextValues) => JSX.Element;
+
 /**
  * Render the final JSX of TableHeader
  */
@@ -42,12 +291,36 @@ export declare const renderTableHeaderCell_unstable: (state: TableHeaderCellStat
  */
 export declare const renderTableRow_unstable: (state: TableRowState) => JSX.Element;
 
+/**
+ * Render the final JSX of TableSelectionCell
+ */
+export declare const renderTableSelectionCell_unstable: (state: TableSelectionCellState) => JSX.Element;
+
+declare type RowEnhancer<TItem, TRowState extends RowState<TItem> = RowState<TItem>> = (row: RowState<TItem>) => TRowState;
+
+export declare type RowId = string | number;
+
+export declare type RowRenderFunction<TItem = any> = (row: RowState<TItem>) => React_2.ReactNode;
+
+export declare interface RowState<TItem> {
+    /**
+     * User provided data
+     */
+    item: TItem;
+    /**
+     * The row id, defaults to index position in the collection
+     */
+    rowId: RowId;
+}
+
+declare type SelectionMode_2 = 'single' | 'multiselect';
+
 export declare type SortDirection = 'ascending' | 'descending';
 
-declare type SortState = {
-    sortColumn: string | undefined;
-    sortDirection: 'ascending' | 'descending';
-};
+declare interface SortState {
+    sortColumn: ColumnId | undefined;
+    sortDirection: SortDirection;
+}
 
 /**
  * Table component - TODO: add more docs
@@ -75,17 +348,91 @@ export declare type TableBodySlots = {
 /**
  * State used in rendering TableBody
  */
-export declare type TableBodyState = ComponentState<TableBodySlots>;
+export declare type TableBodyState = ComponentState<TableBodySlots> & Pick<TableContextValue, 'noNativeElements'>;
 
 /**
  * TableCell component - TODO: add more docs
  */
 export declare const TableCell: ForwardRefComponent<TableCellProps>;
 
+/**
+ * TableCellActions component - TODO: add more docs
+ */
+export declare const TableCellActions: ForwardRefComponent<TableCellActionsProps>;
+
+export declare const tableCellActionsClassNames: SlotClassNames<TableCellActionsSlots>;
+
+/**
+ * TableCellActions Props
+ */
+export declare type TableCellActionsProps = ComponentProps<TableCellActionsSlots> & {
+    /**
+     * When true, the actions are always visible regardless of row hover.
+     * Can be useful keeping the actions visible when a popout surface is opened.
+     */
+    visible?: boolean;
+};
+
+export declare type TableCellActionsSlots = {
+    root: Slot<'div'>;
+};
+
+/**
+ * State used in rendering TableCellActions
+ */
+export declare type TableCellActionsState = ComponentState<TableCellActionsSlots> & Pick<Required<TableCellActionsProps>, 'visible'>;
+
 export declare const tableCellClassName = "fui-TableCell";
 
 export declare const tableCellClassNames: SlotClassNames<TableCellSlots>;
 
+/**
+ * TableCellLayout component - TODO: add more docs
+ */
+export declare const TableCellLayout: ForwardRefComponent<TableCellLayoutProps>;
+
+export declare const tableCellLayoutClassNames: SlotClassNames<TableCellLayoutSlots>;
+
+declare type TableCellLayoutContextValues = {
+    avatar: {
+        size?: AvatarSizes;
+    };
+};
+
+/**
+ * TableCellLayout Props
+ */
+export declare type TableCellLayoutProps = ComponentProps<Partial<TableCellLayoutSlots>> & {
+    appearance?: 'primary';
+};
+
+export declare type TableCellLayoutSlots = {
+    root: Slot<'div'>;
+    /**
+     * Slot for an icon or other visual element
+     */
+    media: Slot<'span'>;
+    /**
+     * Main text for the table cell. Children of the root slot are automatically rendered here
+     */
+    main: Slot<'span'>;
+    /**
+     * Secondary text that describes or complements the main text
+     */
+    description: Slot<'span'>;
+    /**
+     * A layout wrapper for the main and description slots
+     */
+    wrapper: Slot<'div'>;
+};
+
+/**
+ * State used in rendering TableCellLayout
+ */
+export declare type TableCellLayoutState = ComponentState<TableCellLayoutSlots> & Pick<TableCellLayoutProps, 'appearance'> & {
+    avatarSize: AvatarSizes | undefined;
+};
+
 /**
  * TableCell Props
  */
@@ -93,23 +440,33 @@ export declare type TableCellProps = ComponentProps<TableCellSlots> & {};
 
 export declare type TableCellSlots = {
     root: Slot<'td', 'div'>;
-    media?: Slot<'span'>;
 };
 
 /**
  * State used in rendering TableCell
  */
-export declare type TableCellState = ComponentState<TableCellSlots>;
+export declare type TableCellState = ComponentState<TableCellSlots> & Pick<TableContextValue, 'noNativeElements'>;
 
 export declare const tableClassName = "fui-Table";
 
 export declare const tableClassNames: SlotClassNames<TableSlots>;
 
-export declare const TableContextProvider: Provider<TableContextValue | undefined> & FC<ProviderProps<TableContextValue | undefined>>;
+export declare const TableContextProvider: React_2.Provider<TableContextValue | undefined>;
 
 export declare type TableContextValue = {
+    /**
+     * Affects the sizes of all table subcomponents
+     * @default medium
+     */
     size: 'small' | 'smaller' | 'medium';
+    /**
+     * Render all table elements as divs intead of semantic table elements
+     * Using divs no longer uses `display: table` layout but `display: flex`
+     */
     noNativeElements: boolean;
+    /**
+     * Whether the table is sortable
+     */
     sortable: boolean;
 };
 
@@ -150,9 +507,7 @@ export declare type TableHeaderCellSlots = {
 /**
  * State used in rendering TableHeaderCell
  */
-export declare type TableHeaderCellState = ComponentState<TableHeaderCellSlots> & {
-    sortable: boolean;
-};
+export declare type TableHeaderCellState = ComponentState<TableHeaderCellSlots> & Pick<TableContextValue, 'noNativeElements' | 'sortable'>;
 
 export declare const tableHeaderClassName = "fui-TableHeader";
 
@@ -170,21 +525,12 @@ export declare type TableHeaderSlots = {
 /**
  * State used in rendering TableHeader
  */
-export declare type TableHeaderState = ComponentState<TableHeaderSlots>;
+export declare type TableHeaderState = ComponentState<TableHeaderSlots> & Pick<TableContextValue, 'noNativeElements'>;
 
 /**
  * Table Props
  */
-export declare type TableProps = ComponentProps<TableSlots> & {} & Partial<TableContextValue> & {
-    /**
-     * Called when the sorted column changes
-     */
-    onSortColumnChange?: (e: React_2.MouseEvent<HTMLElement> | React_2.KeyboardEvent<HTMLElement>, data: {
-        sortState: SortState;
-    }) => void;
-    sortState?: SortState;
-    defaultSortState?: SortState;
-};
+export declare type TableProps = ComponentProps<TableSlots> & Partial<TableContextValue>;
 
 /**
  * TableRow component - TODO: add more docs
@@ -198,7 +544,13 @@ export declare const tableRowClassNames: SlotClassNames<TableRowSlots>;
 /**
  * TableRow Props
  */
-export declare type TableRowProps = ComponentProps<TableRowSlots> & {};
+export declare type TableRowProps = ComponentProps<TableRowSlots> & {
+    /**
+     * A table row can have different variants
+     * @default none
+     */
+    appearance?: 'brand' | 'neutral' | 'none';
+};
 
 export declare type TableRowSlots = {
     root: Slot<'tr', 'div'>;
@@ -207,19 +559,280 @@ export declare type TableRowSlots = {
 /**
  * State used in rendering TableRow
  */
-export declare type TableRowState = ComponentState<TableRowSlots> & {
-    size: TableState['size'];
+export declare type TableRowState = ComponentState<TableRowSlots> & Pick<TableContextValue, 'noNativeElements' | 'size'> & Pick<Required<TableRowProps>, 'appearance'>;
+
+/**
+ * TableSelectionCell component - TODO: add more docs
+ */
+export declare const TableSelectionCell: ForwardRefComponent<TableSelectionCellProps>;
+
+export declare const tableSelectionCellClassNames: SlotClassNames<TableSelectionCellSlots>;
+
+/**
+ * TableSelectionCell Props
+ */
+export declare type TableSelectionCellProps = ComponentProps<Partial<Omit<TableSelectionCellSlots, 'media'>>> & {
+    /**
+     * A table can have two kinds of selection modes
+     */
+    type?: 'checkbox' | 'radio';
+    checked?: CheckboxProps['checked'];
+    /**
+     * Only visible when checked or the parent row is hovered
+     */
+    subtle?: boolean;
+    /**
+     * Completely hides the selection cell visually but takes up the same space
+     */
+    hidden?: boolean;
 };
 
+export declare type TableSelectionCellSlots = {
+    /**
+     * Selection indicator if selection type is checkbox
+     */
+    checkboxIndicator: Slot<typeof Checkbox>;
+    /**
+     * Selection indicator if selection type is radio
+     */
+    radioIndicator: Slot<typeof Radio>;
+} & Pick<TableCellSlots, 'root'>;
+
+/**
+ * State used in rendering TableSelectionCell
+ */
+export declare type TableSelectionCellState = ComponentState<TableSelectionCellSlots> & Pick<Required<TableSelectionCellProps>, 'type' | 'checked' | 'subtle' | 'hidden'> & Pick<TableContextValue, 'noNativeElements'>;
+
+export declare interface TableSelectionState {
+    /**
+     * Clears all selected rows
+     */
+    clearRows: () => void;
+    /**
+     * Selects single row
+     */
+    selectRow: (rowId: RowId) => void;
+    /**
+     * De-selects single row
+     */
+    deselectRow: (rowId: RowId) => void;
+    /**
+     * Toggle selection of all rows
+     */
+    toggleAllRows: () => void;
+    /**
+     * Toggle selection of single row
+     */
+    toggleRow: (rowId: RowId) => void;
+    /**
+     * Collection of row ids corresponding to selected rows
+     */
+    selectedRows: Set<RowId>;
+    /**
+     * Whether all rows are selected
+     */
+    allRowsSelected: boolean;
+    /**
+     * Whether some rows are selected
+     */
+    someRowsSelected: boolean;
+    /**
+     * Checks if a given rowId is selected
+     */
+    isRowSelected: (rowId: RowId) => boolean;
+}
+
 export declare type TableSlots = {
     root: Slot<'table', 'div'>;
 };
 
+export declare interface TableSortState<TItem> {
+    /**
+     * Current sort direction
+     */
+    sortDirection: SortDirection;
+    /**
+     * Column id of the currently sorted column
+     */
+    sortColumn: ColumnId | undefined;
+    /**
+     * Set the sort direction for the specified column
+     */
+    setColumnSort: (columnId: ColumnId, sortDirection: SortDirection) => void;
+    /**
+     * Toggles the sort direction for specified column
+     */
+    toggleColumnSort: (columnId: ColumnId) => void;
+    /**
+     * Returns the sort direction if a column is sorted,
+     * returns undefined if the column is not sorted
+     */
+    getSortDirection: (columnId: ColumnId) => SortDirection | undefined;
+    /**
+     * Sorts rows and returns a **shallow** copy of original items
+     */
+    sort: <TRowState extends RowState<TItem>>(rows: TRowState[]) => TRowState[];
+}
+
 /**
  * State used in rendering Table
  */
 export declare type TableState = ComponentState<TableSlots> & Pick<Required<TableProps>, 'size' | 'noNativeElements'> & TableContextValue;
 
+export declare type TableStatePlugin = <TItem>(tableState: HeadlessTableState<TItem>) => HeadlessTableState<TItem>;
+
+/**
+ * Create the state required to render DataGrid.
+ *
+ * The returned state can be modified with hooks such as useDataGridStyles_unstable,
+ * before being passed to renderDataGrid_unstable.
+ *
+ * @param props - props from this instance of DataGrid
+ * @param ref - reference to root HTMLElement of DataGrid
+ */
+export declare const useDataGrid_unstable: (props: DataGridProps, ref: React_2.Ref<HTMLElement>) => DataGridState;
+
+/**
+ * Create the state required to render DataGridBody.
+ *
+ * The returned state can be modified with hooks such as useDataGridBodyStyles_unstable,
+ * before being passed to renderDataGridBody_unstable.
+ *
+ * @param props - props from this instance of DataGridBody
+ * @param ref - reference to root HTMLElement of DataGridBody
+ */
+export declare const useDataGridBody_unstable: (props: DataGridBodyProps, ref: React_2.Ref<HTMLElement>) => DataGridBodyState;
+
+/**
+ * Apply styling to the DataGridBody slots based on the state
+ */
+export declare const useDataGridBodyStyles_unstable: (state: DataGridBodyState) => DataGridBodyState;
+
+/**
+ * Create the state required to render DataGridCell.
+ *
+ * The returned state can be modified with hooks such as useDataGridCellStyles_unstable,
+ * before being passed to renderDataGridCell_unstable.
+ *
+ * @param props - props from this instance of DataGridCell
+ * @param ref - reference to root HTMLElement of DataGridCell
+ */
+export declare const useDataGridCell_unstable: (props: DataGridCellProps, ref: React_2.Ref<HTMLElement>) => DataGridCellState;
+
+/**
+ * Apply styling to the DataGridCell slots based on the state
+ */
+export declare const useDataGridCellStyles_unstable: (state: DataGridCellState) => DataGridCellState;
+
+/**
+ * Create the state required to render DataGridHeader.
+ *
+ * The returned state can be modified with hooks such as useDataGridHeaderStyles_unstable,
+ * before being passed to renderDataGridHeader_unstable.
+ *
+ * @param props - props from this instance of DataGridHeader
+ * @param ref - reference to root HTMLElement of DataGridHeader
+ */
+export declare const useDataGridHeader_unstable: (props: DataGridHeaderProps, ref: React_2.Ref<HTMLElement>) => DataGridHeaderState;
+
+/**
+ * Create the state required to render DataGridHeaderCell.
+ *
+ * The returned state can be modified with hooks such as useDataGridHeaderCellStyles_unstable,
+ * before being passed to renderDataGridHeaderCell_unstable.
+ *
+ * @param props - props from this instance of DataGridHeaderCell
+ * @param ref - reference to root HTMLElement of DataGridHeaderCell
+ */
+export declare const useDataGridHeaderCell_unstable: (props: DataGridHeaderCellProps, ref: React_2.Ref<HTMLElement>) => DataGridHeaderCellState;
+
+/**
+ * Apply styling to the DataGridHeaderCell slots based on the state
+ */
+export declare const useDataGridHeaderCellStyles_unstable: (state: DataGridHeaderCellState) => DataGridHeaderCellState;
+
+/**
+ * Apply styling to the DataGridHeader slots based on the state
+ */
+export declare const useDataGridHeaderStyles_unstable: (state: DataGridHeaderState) => DataGridHeaderState;
+
+/**
+ * Create the state required to render DataGridRow.
+ *
+ * The returned state can be modified with hooks such as useDataGridRowStyles_unstable,
+ * before being passed to renderDataGridRow_unstable.
+ *
+ * @param props - props from this instance of DataGridRow
+ * @param ref - reference to root HTMLElement of DataGridRow
+ */
+export declare const useDataGridRow_unstable: (props: DataGridRowProps, ref: React_2.Ref<HTMLElement>) => DataGridRowState;
+
+/**
+ * Apply styling to the DataGridRow slots based on the state
+ */
+export declare const useDataGridRowStyles_unstable: (state: DataGridRowState) => DataGridRowState;
+
+/**
+ * Create the state required to render DataGridSelectionCell.
+ *
+ * The returned state can be modified with hooks such as useDataGridSelectionCellStyles_unstable,
+ * before being passed to renderDataGridSelectionCell_unstable.
+ *
+ * @param props - props from this instance of DataGridSelectionCell
+ * @param ref - reference to root HTMLElement of DataGridSelectionCell
+ */
+export declare const useDataGridSelectionCell_unstable: (props: DataGridSelectionCellProps, ref: React_2.Ref<HTMLElement>) => DataGridSelectionCellState;
+
+/**
+ * Apply styling to the DataGridSelectionCell slots based on the state
+ */
+export declare const useDataGridSelectionCellStyles_unstable: (state: DataGridSelectionCellState) => DataGridSelectionCellState;
+
+/**
+ * Apply styling to the DataGrid slots based on the state
+ */
+export declare const useDataGridStyles_unstable: (state: DataGridState) => DataGridState;
+
+export declare function useSelection<TItem>(options: UseSelectionOptions): (tableState: HeadlessTableState<TItem>) => HeadlessTableState<TItem>;
+
+declare interface UseSelectionOptions {
+    /**
+     * Can be multi or single select
+     */
+    selectionMode: SelectionMode_2;
+    /**
+     * Used in uncontrolled mode to set initial selected rows on mount
+     */
+    defaultSelectedItems?: Set<RowId>;
+    /**
+     * Used to control row selection
+     */
+    selectedItems?: Set<RowId>;
+    /**
+     * Called when selection changes
+     */
+    onSelectionChange?: (selectedItems: Set<RowId>) => void;
+}
+
+export declare function useSort<TItem>(options: UseSortOptions): (tableState: HeadlessTableState<TItem>) => HeadlessTableState<TItem>;
+
+declare interface UseSortOptions {
+    /**
+     * Used to control sorting
+     */
+    sortState?: SortState;
+    /**
+     * Used in uncontrolled mode to set initial sort column and direction on mount
+     */
+    defaultSortState?: SortState;
+    /**
+     * Called when sort changes
+     */
+    onSortChange?: (state: SortState) => void;
+}
+
+export declare function useTable<TItem>(options: UseTableOptions<TItem>, plugins?: TableStatePlugin[]): HeadlessTableState<TItem>;
+
 /**
  * Create the state required to render Table.
  *
@@ -258,12 +871,44 @@ export declare const useTableBodyStyles_unstable: (state: TableBodyState) => Tab
  */
 export declare const useTableCell_unstable: (props: TableCellProps, ref: React_2.Ref<HTMLElement>) => TableCellState;
 
+/**
+ * Create the state required to render TableCellActions.
+ *
+ * The returned state can be modified with hooks such as useTableCellActionsStyles_unstable,
+ * before being passed to renderTableCellActions_unstable.
+ *
+ * @param props - props from this instance of TableCellActions
+ * @param ref - reference to root HTMLElement of TableCellActions
+ */
+export declare const useTableCellActions_unstable: (props: TableCellActionsProps, ref: React_2.Ref<HTMLElement>) => TableCellActionsState;
+
+/**
+ * Apply styling to the TableCellActions slots based on the state
+ */
+export declare const useTableCellActionsStyles_unstable: (state: TableCellActionsState) => TableCellActionsState;
+
+/**
+ * Create the state required to render TableCellLayout.
+ *
+ * The returned state can be modified with hooks such as useTableCellLayoutStyles_unstable,
+ * before being passed to renderTableCellLayout_unstable.
+ *
+ * @param props - props from this instance of TableCellLayout
+ * @param ref - reference to root HTMLElement of TableCellLayout
+ */
+export declare const useTableCellLayout_unstable: (props: TableCellLayoutProps, ref: React_2.Ref<HTMLElement>) => TableCellLayoutState;
+
+/**
+ * Apply styling to the TableCellLayout slots based on the state
+ */
+export declare const useTableCellLayoutStyles_unstable: (state: TableCellLayoutState) => TableCellLayoutState;
+
 /**
  * Apply styling to the TableCell slots based on the state
  */
 export declare const useTableCellStyles_unstable: (state: TableCellState) => TableCellState;
 
-export declare const useTableContext: <T>(selector: ContextSelector<TableContextValue, T>) => T;
+export declare const useTableContext: () => TableContextValue;
 
 /**
  * Create the state required to render TableHeader.
@@ -297,6 +942,12 @@ export declare const useTableHeaderCellStyles_unstable: (state: TableHeaderCellS
  */
 export declare const useTableHeaderStyles_unstable: (state: TableHeaderState) => TableHeaderState;
 
+export declare interface UseTableOptions<TItem> {
+    columns: ColumnDefinition<TItem>[];
+    items: TItem[];
+    getRowId?: (item: TItem) => RowId;
+}
+
 /**
  * Create the state required to render TableRow.
  *
@@ -313,6 +964,22 @@ export declare const useTableRow_unstable: (props: TableRowProps, ref: React_2.R
  */
 export declare const useTableRowStyles_unstable: (state: TableRowState) => TableRowState;
 
+/**
+ * Create the state required to render TableSelectionCell.
+ *
+ * The returned state can be modified with hooks such as useTableSelectionCellStyles_unstable,
+ * before being passed to renderTableSelectionCell_unstable.
+ *
+ * @param props - props from this instance of TableSelectionCell
+ * @param ref - reference to root HTMLElement of TableSelectionCell
+ */
+export declare const useTableSelectionCell_unstable: (props: TableSelectionCellProps, ref: React_2.Ref<HTMLElement>) => TableSelectionCellState;
+
+/**
+ * Apply styling to the TableSelectionCell slots based on the state
+ */
+export declare const useTableSelectionCellStyles_unstable: (state: TableSelectionCellState) => TableSelectionCellState;
+
 /**
  * Apply styling to the Table slots based on the state
  */