@fluentui/react-table 9.0.0-alpha.2 → 9.0.0-alpha.20

package/dist/index.d.ts

@@ -1,28 +1,265 @@
 /// <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 type { ForwardRefComponent } from '@fluentui/react-utilities';
+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 interface ColumnDefinition<TItem> {
-    columnId: ColumnId;
-    compare?: (a: TItem, b: TItem) => number;
+export declare type CellRenderFunction<TItem = unknown> = (column: TableColumnDefinition<TItem>) => React_2.ReactNode;
+
+/**
+ * Helper function to create column definition with defaults
+ * @param options - column definition options
+ * @returns - column definition with defaults
+ */
+export declare function createTableColumn<TItem>(options: CreateTableColumnOptions<TItem>): {
+    columnId: TableColumnId;
+    renderCell: (item: TItem) => ReactNode;
+    renderHeaderCell: () => ReactNode;
+    compare: (a: TItem, b: TItem) => number;
+};
+
+export declare interface CreateTableColumnOptions<TItem> extends Partial<TableColumnDefinition<TItem>> {
+    columnId: TableColumnId;
 }
 
-export declare type ColumnId = string | number;
+/**
+ * DataGrid component
+ */
+export declare const DataGrid: ForwardRefComponent<DataGridProps>;
 
-declare type OnSelectionChangeCallback = (selectedItems: Set<RowId>) => void;
+/**
+ * DataGridBody component
+ */
+export declare const DataGridBody: ForwardRefComponent<DataGridBodyProps> & (<TItem>(props: DataGridBodyProps<TItem>) => JSX.Element);
 
-declare type OnSortChangeCallback = (state: {
-    sortColumn: ColumnId | undefined;
-    sortDirection: SortDirection;
-}) => void;
+export declare const dataGridBodyClassNames: SlotClassNames<DataGridBodySlots>;
+
+/**
+ * DataGridBody Props
+ */
+export declare type DataGridBodyProps<TItem = unknown> = Omit<TableBodyProps, 'children'> & {
+    /**
+     * Render function for rows
+     */
+    children: RowRenderFunction<TItem>;
+};
+
+export declare type DataGridBodySlots = TableBodySlots;
+
+/**
+ * State used in rendering DataGridBody
+ */
+export declare type DataGridBodyState = TableBodyState & {
+    rows: TableRowData<unknown>[];
+    renderRow: RowRenderFunction;
+};
+
+/**
+ * DataGridCell component
+ */
+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 = TableFeaturesState<any> & {
+    /**
+     * How focus navigation will work in the datagrid
+     * @default cell
+     */
+    focusMode: DataGridFocusMode;
+    /**
+     * Lets child components know if rows selection is enabled
+     * @see selectionMode prop enables row selection on the component
+     */
+    selectableRows: boolean;
+    /**
+     * Enables subtle selection style
+     * @default false
+     */
+    subtleSelection: boolean;
+    /**
+     * Row appearance when selected
+     * @default brand
+     */
+    selectionAppearance: TableRowProps['appearance'];
+};
+
+export declare type DataGridContextValues = TableContextValues & {
+    dataGrid: DataGridContextValue;
+};
+
+export declare type DataGridFocusMode = 'none' | 'cell' | 'row_unstable';
+
+/**
+ * DataGridHeader component
+ */
+export declare const DataGridHeader: ForwardRefComponent<DataGridHeaderProps>;
+
+/**
+ * DataGridHeaderCell component
+ */
+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' | 'getRowId'> & Pick<Partial<DataGridContextValue>, 'focusMode' | 'subtleSelection' | 'selectionAppearance'> & Pick<UseTableSortOptions, 'sortState' | 'defaultSortState'> & Pick<UseTableSelectionOptions, 'defaultSelectedItems' | 'selectedItems'> & {
+    onSortChange?: (e: React_2.MouseEvent, sortState: SortState) => void;
+    onSelectionChange?: (e: React_2.MouseEvent | React_2.KeyboardEvent, data: OnSelectionChangeData) => void;
+    /**
+     * Enables row selection and sets the selection mode
+     * @default false
+     */
+    selectionMode?: SelectionMode_2;
+};
+
+/**
+ * DataGridRow component
+ */
+export declare const DataGridRow: ForwardRefComponent<DataGridRowProps> & (<TItem>(props: DataGridRowProps<TItem>) => JSX.Element);
+
+export declare const dataGridRowClassNames: SlotClassNames<DataGridRowSlots>;
+
+/**
+ * DataGridRow Props
+ */
+export declare type DataGridRowProps<TItem = unknown> = Omit<TableRowProps, 'children'> & Omit<ComponentProps<DataGridRowSlots>, 'children'> & {
+    children: CellRenderFunction<TItem>;
+};
+
+export declare type DataGridRowSlots = TableRowSlots & {
+    /**
+     * When selection is enabled on the @see DataGrid, all rows
+     * will render the selection cell.
+     */
+    selectionCell?: Slot<typeof TableSelectionCell>;
+};
+
+/**
+ * State used in rendering DataGridRow
+ */
+export declare type DataGridRowState = TableRowState & ComponentState<DataGridRowSlots> & {
+    renderCell: CellRenderFunction;
+    columnDefs: TableColumnDefinition<any>[];
+};
+
+/**
+ * DataGridSelectionCell component
+ */
+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: TableFeaturesState<unknown>;
+} & Pick<DataGridContextValue, 'focusMode' | 'selectableRows' | 'subtleSelection' | 'selectionAppearance' | 'getRowId'>;
+
+declare interface OnSelectionChangeData {
+    selectedItems: Set<TableRowId>;
+}
+
+/**
+ * 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
@@ -47,7 +284,7 @@ export declare const renderTableCellActions_unstable: (state: TableCellActionsSt
 /**
  * Render the final JSX of TableCellLayout
  */
-export declare const renderTableCellLayout_unstable: (state: TableCellLayoutState) => JSX.Element;
+export declare const renderTableCellLayout_unstable: (state: TableCellLayoutState, contextValues: TableCellLayoutContextValues) => JSX.Element;
 
 /**
  * Render the final JSX of TableHeader
@@ -69,40 +306,26 @@ export declare const renderTableRow_unstable: (state: TableRowState) => JSX.Elem
  */
 export declare const renderTableSelectionCell_unstable: (state: TableSelectionCellState) => JSX.Element;
 
-declare type RowEnhancer<TItem, TRowState extends RowState<TItem> = RowState<TItem>> = (row: RowState<TItem>, state: {
-    selection: TableSelectionState;
-    sort: TableSortState;
-}) => TRowState;
-
-export declare type RowId = string | number;
+declare type RowEnhancer<TItem, TRowState extends TableRowData<TItem> = TableRowData<TItem>> = (row: TableRowData<TItem>) => TRowState;
 
-export declare interface RowState<TItem> {
-    /**
-     * User provided data
-     */
-    item: TItem;
-    /**
-     * The row id, defaults to index position in the collection
-     */
-    rowId: RowId;
-}
+export declare type RowRenderFunction<TItem = unknown> = (row: TableRowData<TItem>, ...rest: unknown[]) => React_2.ReactNode;
 
 declare type SelectionMode_2 = 'single' | 'multiselect';
 
 export declare type SortDirection = 'ascending' | 'descending';
 
 declare interface SortState {
-    sortColumn: ColumnId | undefined;
+    sortColumn: TableColumnId | undefined;
     sortDirection: SortDirection;
 }
 
 /**
- * Table component - TODO: add more docs
+ * Table component
  */
 export declare const Table: ForwardRefComponent<TableProps>;
 
 /**
- * TableBody component - TODO: add more docs
+ * TableBody component
  */
 export declare const TableBody: ForwardRefComponent<TableBodyProps>;
 
@@ -122,15 +345,15 @@ 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
+ * TableCell component
  */
 export declare const TableCell: ForwardRefComponent<TableCellProps>;
 
 /**
- * TableCellActions component - TODO: add more docs
+ * TableCellActions component
  */
 export declare const TableCellActions: ForwardRefComponent<TableCellActionsProps>;
 
@@ -139,7 +362,13 @@ export declare const tableCellActionsClassNames: SlotClassNames<TableCellActions
 /**
  * TableCellActions Props
  */
-export declare type TableCellActionsProps = ComponentProps<TableCellActionsSlots> & {};
+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'>;
@@ -148,23 +377,33 @@ export declare type TableCellActionsSlots = {
 /**
  * State used in rendering TableCellActions
  */
-export declare type TableCellActionsState = ComponentState<TableCellActionsSlots>;
+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
+ * TableCellLayout component
  */
 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>> & {
+    /**
+     * Renders design variants of the table cell
+     * @default undefined
+     */
     appearance?: 'primary';
 };
 
@@ -185,13 +424,15 @@ export declare type TableCellLayoutSlots = {
     /**
      * A layout wrapper for the main and description slots
      */
-    wrapper: Slot<'div'>;
+    content: Slot<'div'>;
 };
 
 /**
  * State used in rendering TableCellLayout
  */
-export declare type TableCellLayoutState = ComponentState<TableCellLayoutSlots> & Pick<TableCellLayoutProps, 'appearance'>;
+export declare type TableCellLayoutState = ComponentState<TableCellLayoutSlots> & Pick<TableCellLayoutProps, 'appearance'> & {
+    avatarSize: AvatarSizes | undefined;
+} & Pick<TableContextValue, 'size'>;
 
 /**
  * TableCell Props
@@ -205,17 +446,39 @@ export declare type TableCellSlots = {
 /**
  * State used in rendering TableCell
  */
-export declare type TableCellState = ComponentState<TableCellSlots>;
+export declare type TableCellState = ComponentState<TableCellSlots> & Pick<TableContextValue, 'noNativeElements' | 'size'>;
 
 export declare const tableClassName = "fui-Table";
 
 export declare const tableClassNames: SlotClassNames<TableSlots>;
 
+export declare interface TableColumnDefinition<TItem> {
+    columnId: TableColumnId;
+    compare: (a: TItem, b: TItem) => number;
+    renderHeaderCell: () => React_2.ReactNode;
+    renderCell: (item: TItem) => React_2.ReactNode;
+}
+
+export declare type TableColumnId = string | number;
+
 export declare const TableContextProvider: React_2.Provider<TableContextValue | undefined>;
 
 export declare type TableContextValue = {
-    size: 'small' | 'smaller' | 'medium';
+    /**
+     * Affects the sizes of all table subcomponents
+     * @default medium
+     */
+    size: 'extra-small' | 'small' | 'medium';
+    /**
+     * Render all table elements as divs instead of semantic table elements
+     * Using divs no longer uses `display: table` layout but `display: flex`
+     * @default false
+     */
     noNativeElements: boolean;
+    /**
+     * Whether the table is sortable
+     * @default false
+     */
     sortable: boolean;
 };
 
@@ -223,13 +486,35 @@ export declare type TableContextValues = {
     table: TableContextValue;
 };
 
+export declare type TableFeaturePlugin = <TItem>(tableState: TableFeaturesState<TItem>) => TableFeaturesState<TItem>;
+
+export declare interface TableFeaturesState<TItem> extends Pick<UseTableFeaturesOptions<TItem>, 'items' | 'getRowId'> {
+    /**
+     * The row data for rendering
+     * @param rowEnhancer - Enhances the row with extra user data
+     */
+    getRows: <TRowState extends TableRowData<TItem> = TableRowData<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: TableColumnDefinition<TItem>[];
+}
+
 /**
- * TableHeader component - TODO: add more docs
+ * TableHeader component
  */
 export declare const TableHeader: ForwardRefComponent<TableHeaderProps>;
 
 /**
- * TableHeaderCell component - TODO: add more docs
+ * TableHeaderCell component
  */
 export declare const TableHeaderCell: ForwardRefComponent<TableHeaderCellProps>;
 
@@ -241,6 +526,9 @@ export declare const tableHeaderCellClassNames: SlotClassNames<TableHeaderCellSl
  * TableHeaderCell Props
  */
 export declare type TableHeaderCellProps = ComponentProps<Partial<TableHeaderCellSlots>> & {
+    /**
+     * @default undefined
+     */
     sortDirection?: SortDirection;
 };
 
@@ -256,9 +544,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";
 
@@ -276,7 +562,7 @@ 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
@@ -284,7 +570,7 @@ export declare type TableHeaderState = ComponentState<TableHeaderSlots>;
 export declare type TableProps = ComponentProps<TableSlots> & Partial<TableContextValue>;
 
 /**
- * TableRow component - TODO: add more docs
+ * TableRow component
  */
 export declare const TableRow: ForwardRefComponent<TableRowProps>;
 
@@ -292,10 +578,32 @@ export declare const tableRowClassName = "fui-TableRow";
 
 export declare const tableRowClassNames: SlotClassNames<TableRowSlots>;
 
+export declare interface TableRowData<TItem> {
+    /**
+     * User provided data
+     */
+    item: TItem;
+    /**
+     * The row id, defaults to index position in the collection
+     */
+    rowId: TableRowId;
+}
+
+export declare type TableRowId = string | number;
+
+export declare const TableRowIdContextProvider: React_2.Provider<TableRowId | undefined>;
+
 /**
  * TableRow Props
  */
-export declare type TableRowProps = ComponentProps<TableRowSlots> & {};
+export declare type TableRowProps = ComponentProps<TableRowSlots> & {
+    /**
+     * A table row can have different variants. These appearances are
+     * intended to be used with selection.
+     * @default none
+     */
+    appearance?: 'brand' | 'neutral' | 'none';
+};
 
 export declare type TableRowSlots = {
     root: Slot<'tr', 'div'>;
@@ -304,12 +612,12 @@ 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'> & {
+    isHeaderRow: boolean;
 };
 
 /**
- * TableSelectionCell component - TODO: add more docs
+ * TableSelectionCell component
  */
 export declare const TableSelectionCell: ForwardRefComponent<TableSelectionCellProps>;
 
@@ -318,12 +626,26 @@ export declare const tableSelectionCellClassNames: SlotClassNames<TableSelection
 /**
  * TableSelectionCell Props
  */
-export declare type TableSelectionCellProps = ComponentProps<Partial<Omit<TableSelectionCellSlots, 'media'>>> & {
+export declare type TableSelectionCellProps = ComponentProps<Partial<TableSelectionCellSlots>> & {
     /**
-     * A table can have two kinds of selection modes
+     * A table can have two kinds of selection modes.
+     * @default checkbox
      */
     type?: 'checkbox' | 'radio';
+    /**
+     * @default false
+     */
     checked?: CheckboxProps['checked'];
+    /**
+     * Only visible when checked or the parent row is hovered/focused
+     * @default false
+     */
+    subtle?: boolean;
+    /**
+     * Completely hides the selection cell visually but takes up the same space
+     * @default false
+     */
+    hidden?: boolean;
 };
 
 export declare type TableSelectionCellSlots = {
@@ -334,39 +656,39 @@ export declare type TableSelectionCellSlots = {
     /**
      * Selection indicator if selection type is radio
      */
-    radioIndicator: Slot<'span'>;
+    radioIndicator: Slot<typeof Radio>;
 } & Pick<TableCellSlots, 'root'>;
 
 /**
  * State used in rendering TableSelectionCell
  */
-export declare type TableSelectionCellState = ComponentState<TableSelectionCellSlots> & Pick<Required<TableSelectionCellProps>, 'type' | 'checked'>;
+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;
+    clearRows: (e: React_2.SyntheticEvent) => void;
     /**
      * Selects single row
      */
-    selectRow: (rowId: RowId) => void;
+    selectRow: (e: React_2.SyntheticEvent, rowId: TableRowId) => void;
     /**
      * De-selects single row
      */
-    deselectRow: (rowId: RowId) => void;
+    deselectRow: (e: React_2.SyntheticEvent, rowId: TableRowId) => void;
     /**
      * Toggle selection of all rows
      */
-    toggleAllRows: () => void;
+    toggleAllRows: (e: React_2.SyntheticEvent) => void;
     /**
      * Toggle selection of single row
      */
-    toggleRow: (rowId: RowId) => void;
+    toggleRow: (e: React_2.SyntheticEvent, rowId: TableRowId) => void;
     /**
      * Collection of row ids corresponding to selected rows
      */
-    selectedRows: RowId[];
+    selectedRows: Set<TableRowId>;
     /**
      * Whether all rows are selected
      */
@@ -378,14 +700,15 @@ export declare interface TableSelectionState {
     /**
      * Checks if a given rowId is selected
      */
-    isRowSelected: (rowId: RowId) => boolean;
+    isRowSelected: (rowId: TableRowId) => boolean;
+    selectionMode: SelectionMode_2;
 }
 
 export declare type TableSlots = {
     root: Slot<'table', 'div'>;
 };
 
-export declare interface TableSortState {
+export declare interface TableSortState<TItem> {
     /**
      * Current sort direction
      */
@@ -393,20 +716,24 @@ export declare interface TableSortState {
     /**
      * Column id of the currently sorted column
      */
-    sortColumn: ColumnId | undefined;
+    sortColumn: TableColumnId | undefined;
     /**
      * Set the sort direction for the specified column
      */
-    setColumnSort: (columnId: ColumnId, sortDirection: SortDirection) => void;
+    setColumnSort: (event: React_2.SyntheticEvent, columnId: TableColumnId, sortDirection: SortDirection) => void;
     /**
      * Toggles the sort direction for specified column
      */
-    toggleColumnSort: (columnId: ColumnId) => void;
+    toggleColumnSort: (event: React_2.SyntheticEvent, columnId: TableColumnId) => void;
     /**
      * Returns the sort direction if a column is sorted,
      * returns undefined if the column is not sorted
      */
-    getSortDirection: (columnId: ColumnId) => SortDirection | undefined;
+    getSortDirection: (columnId: TableColumnId) => SortDirection | undefined;
+    /**
+     * Sorts rows and returns a **shallow** copy of original items
+     */
+    sort: <TRowState extends TableRowData<TItem>>(rows: TRowState[]) => TRowState[];
 }
 
 /**
@@ -414,22 +741,117 @@ export declare interface TableSortState {
  */
 export declare type TableState = ComponentState<TableSlots> & Pick<Required<TableProps>, 'size' | 'noNativeElements'> & TableContextValue;
 
-declare interface TableState_2<TItem, TRowState extends RowState<TItem> = RowState<TItem>> {
-    /**
-     * The row data for rendering
-     */
-    rows: TRowState[];
-    /**
-     * State and actions to manage row selection
-     */
-    selection: TableSelectionState;
-    /**
-     * State and actions to manage row sorting
-     */
-    sort: TableSortState;
-}
+/**
+ * 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;
 
-export declare function useTable<TItem, TRowState extends RowState<TItem> = RowState<TItem>>(options: UseTableOptions<TItem, TRowState>): TableState_2<TItem, TRowState>;
+/**
+ * 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;
 
 /**
  * Create the state required to render Table.
@@ -508,6 +930,14 @@ export declare const useTableCellStyles_unstable: (state: TableCellState) => Tab
 
 export declare const useTableContext: () => TableContextValue;
 
+export declare function useTableFeatures<TItem>(options: UseTableFeaturesOptions<TItem>, plugins?: TableFeaturePlugin[]): TableFeaturesState<TItem>;
+
+export declare interface UseTableFeaturesOptions<TItem> {
+    columns: TableColumnDefinition<TItem>[];
+    items: TItem[];
+    getRowId?: (item: TItem) => TableRowId;
+}
+
 /**
  * Create the state required to render TableHeader.
  *
@@ -540,38 +970,6 @@ export declare const useTableHeaderCellStyles_unstable: (state: TableHeaderCellS
  */
 export declare const useTableHeaderStyles_unstable: (state: TableHeaderState) => TableHeaderState;
 
-export declare interface UseTableOptions<TItem, TRowState extends RowState<TItem> = RowState<TItem>> {
-    columns: ColumnDefinition<TItem>[];
-    items: TItem[];
-    selectionMode?: SelectionMode_2;
-    /**
-     * Used in uncontrolled mode to set initial selected rows on mount
-     */
-    defaultSelectedRows?: Set<RowId>;
-    /**
-     * Used to control row selection
-     */
-    selectedRows?: Set<RowId>;
-    /**
-     * Called when selection changes
-     */
-    onSelectionChange?: OnSelectionChangeCallback;
-    /**
-     * 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?: OnSortChangeCallback;
-    getRowId?: (item: TItem) => RowId;
-    rowEnhancer?: RowEnhancer<TItem, TRowState>;
-}
-
 /**
  * Create the state required to render TableRow.
  *
@@ -583,11 +981,15 @@ export declare interface UseTableOptions<TItem, TRowState extends RowState<TItem
  */
 export declare const useTableRow_unstable: (props: TableRowProps, ref: React_2.Ref<HTMLElement>) => TableRowState;
 
+export declare const useTableRowIdContext: () => TableRowId;
+
 /**
  * Apply styling to the TableRow slots based on the state
  */
 export declare const useTableRowStyles_unstable: (state: TableRowState) => TableRowState;
 
+export declare function useTableSelection<TItem>(options: UseTableSelectionOptions): (tableState: TableFeaturesState<TItem>) => TableFeaturesState<TItem>;
+
 /**
  * Create the state required to render TableSelectionCell.
  *
@@ -604,6 +1006,42 @@ export declare const useTableSelectionCell_unstable: (props: TableSelectionCellP
  */
 export declare const useTableSelectionCellStyles_unstable: (state: TableSelectionCellState) => TableSelectionCellState;
 
+declare interface UseTableSelectionOptions {
+    /**
+     * Can be multi or single select
+     */
+    selectionMode: SelectionMode_2;
+    /**
+     * Used in uncontrolled mode to set initial selected rows on mount
+     */
+    defaultSelectedItems?: Set<TableRowId>;
+    /**
+     * Used to control row selection
+     */
+    selectedItems?: Set<TableRowId>;
+    /**
+     * Called when selection changes
+     */
+    onSelectionChange?(e: React_2.SyntheticEvent, data: OnSelectionChangeData): void;
+}
+
+export declare function useTableSort<TItem>(options: UseTableSortOptions): (tableState: TableFeaturesState<TItem>) => TableFeaturesState<TItem>;
+
+declare interface UseTableSortOptions {
+    /**
+     * 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?(e: React_2.SyntheticEvent, state: SortState): void;
+}
+
 /**
  * Apply styling to the Table slots based on the state
  */