@fluentui/react-table 9.0.0-alpha.9 → 9.0.0-rc.2

package/dist/index.d.ts

@@ -9,42 +9,62 @@ 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 type ColumnId = string | number;
+export declare interface CreateTableColumnOptions<TItem> extends Partial<TableColumnDefinition<TItem>> {
+    columnId: TableColumnId;
+}
 
 /**
- * DataGrid component - TODO: add more docs
+ * DataGrid component
  */
 export declare const DataGrid: ForwardRefComponent<DataGridProps>;
 
 /**
- * DataGridBody component - TODO: add more docs
+ * DataGridBody component
  */
-export declare const DataGridBody: ForwardRefComponent<DataGridBodyProps>;
+export declare const DataGridBody: ForwardRefComponent<DataGridBodyProps> & (<TItem>(props: DataGridBodyProps<TItem>) => JSX.Element);
 
 export declare const dataGridBodyClassNames: SlotClassNames<DataGridBodySlots>;
 
 /**
  * DataGridBody Props
  */
-export declare type DataGridBodyProps = TableBodyProps;
+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;
+export declare type DataGridBodyState = TableBodyState & {
+    rows: TableRowData<unknown>[];
+    renderRow: RowRenderFunction;
+};
 
 /**
- * DataGridCell component - TODO: add more docs
+ * DataGridCell component
  */
 export declare const DataGridCell: ForwardRefComponent<DataGridCellProps>;
 
@@ -64,15 +84,42 @@ export declare type DataGridCellState = TableCellState;
 
 export declare const dataGridClassNames: SlotClassNames<DataGridSlots>;
 
-export declare type DataGridContextValues = TableContextValues;
+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 - TODO: add more docs
+ * DataGridHeader component
  */
 export declare const DataGridHeader: ForwardRefComponent<DataGridHeaderProps>;
 
 /**
- * DataGridHeaderCell component - TODO: add more docs
+ * DataGridHeaderCell component
  */
 export declare const DataGridHeaderCell: ForwardRefComponent<DataGridHeaderCellProps>;
 
@@ -107,29 +154,48 @@ export declare type DataGridHeaderState = TableHeaderState;
 /**
  * DataGrid Props
  */
-export declare type DataGridProps = TableProps;
+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 - TODO: add more docs
+ * DataGridRow component
  */
-export declare const DataGridRow: ForwardRefComponent<DataGridRowProps>;
+export declare const DataGridRow: ForwardRefComponent<DataGridRowProps> & (<TItem>(props: DataGridRowProps<TItem>) => JSX.Element);
 
 export declare const dataGridRowClassNames: SlotClassNames<DataGridRowSlots>;
 
 /**
  * DataGridRow Props
  */
-export declare type DataGridRowProps = TableRowProps;
+export declare type DataGridRowProps<TItem = unknown> = Omit<TableRowProps, 'children'> & Omit<ComponentProps<DataGridRowSlots>, 'children'> & {
+    children: CellRenderFunction<TItem>;
+};
 
-export declare type DataGridRowSlots = TableRowSlots;
+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;
+export declare type DataGridRowState = TableRowState & ComponentState<DataGridRowSlots> & {
+    renderCell: CellRenderFunction;
+    columnDefs: TableColumnDefinition<any>[];
+};
 
 /**
- * DataGridSelectionCell component - TODO: add more docs
+ * DataGridSelectionCell component
  */
 export declare const DataGridSelectionCell: ForwardRefComponent<DataGridSelectionCellProps>;
 
@@ -152,26 +218,12 @@ export declare type DataGridSlots = TableSlots;
 /**
  * State used in rendering DataGrid
  */
-export declare type DataGridState = TableState;
+export declare type DataGridState = TableState & {
+    tableState: TableFeaturesState<unknown>;
+} & Pick<DataGridContextValue, 'focusMode' | 'selectableRows' | 'subtleSelection' | 'selectionAppearance' | 'getRowId'>;
 
-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>[];
+declare interface OnSelectionChangeData {
+    selectedItems: Set<TableRowId>;
 }
 
 /**
@@ -254,37 +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>) => TRowState;
+declare type RowEnhancer<TItem, TRowState extends TableRowData<TItem> = TableRowData<TItem>> = (row: TableRowData<TItem>) => TRowState;
 
-export declare type RowId = string | number;
-
-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>;
 
@@ -307,12 +348,12 @@ export declare type 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>;
 
@@ -343,7 +384,7 @@ 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>;
 
@@ -359,6 +400,10 @@ declare type TableCellLayoutContextValues = {
  * TableCellLayout Props
  */
 export declare type TableCellLayoutProps = ComponentProps<Partial<TableCellLayoutSlots>> & {
+    /**
+     * Renders design variants of the table cell
+     * @default undefined
+     */
     appearance?: 'primary';
 };
 
@@ -379,7 +424,7 @@ export declare type TableCellLayoutSlots = {
     /**
      * A layout wrapper for the main and description slots
      */
-    wrapper: Slot<'div'>;
+    content: Slot<'div'>;
 };
 
 /**
@@ -387,7 +432,7 @@ export declare type TableCellLayoutSlots = {
  */
 export declare type TableCellLayoutState = ComponentState<TableCellLayoutSlots> & Pick<TableCellLayoutProps, 'appearance'> & {
     avatarSize: AvatarSizes | undefined;
-};
+} & Pick<TableContextValue, 'size'>;
 
 /**
  * TableCell Props
@@ -401,12 +446,21 @@ export declare type TableCellSlots = {
 /**
  * State used in rendering TableCell
  */
-export declare type TableCellState = ComponentState<TableCellSlots> & Pick<TableContextValue, 'noNativeElements'>;
+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 = {
@@ -414,14 +468,16 @@ export declare type TableContextValue = {
      * Affects the sizes of all table subcomponents
      * @default medium
      */
-    size: 'small' | 'smaller' | 'medium';
+    size: 'extra-small' | 'small' | 'medium';
     /**
-     * Render all table elements as divs intead of semantic table elements
+     * 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;
 };
@@ -430,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>;
 
@@ -448,6 +526,9 @@ export declare const tableHeaderCellClassNames: SlotClassNames<TableHeaderCellSl
  * TableHeaderCell Props
  */
 export declare type TableHeaderCellProps = ComponentProps<Partial<TableHeaderCellSlots>> & {
+    /**
+     * @default undefined
+     */
     sortDirection?: SortDirection;
 };
 
@@ -489,7 +570,7 @@ export declare type TableHeaderState = ComponentState<TableHeaderSlots> & Pick<T
 export declare type TableProps = ComponentProps<TableSlots> & Partial<TableContextValue>;
 
 /**
- * TableRow component - TODO: add more docs
+ * TableRow component
  */
 export declare const TableRow: ForwardRefComponent<TableRowProps>;
 
@@ -497,12 +578,28 @@ 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> & {
     /**
-     * A table row can have different variants
+     * A table row can have different variants. These appearances are
+     * intended to be used with selection.
      * @default none
      */
     appearance?: 'brand' | 'neutral' | 'none';
@@ -515,10 +612,12 @@ export declare type TableRowSlots = {
 /**
  * State used in rendering TableRow
  */
-export declare type TableRowState = ComponentState<TableRowSlots> & Pick<TableContextValue, 'noNativeElements' | 'size'> & Pick<Required<TableRowProps>, 'appearance'>;
+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>;
 
@@ -527,18 +626,24 @@ 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
+     * 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;
 };
@@ -563,27 +668,27 @@ 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: Set<RowId>;
+    selectedRows: Set<TableRowId>;
     /**
      * Whether all rows are selected
      */
@@ -595,7 +700,8 @@ 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 = {
@@ -610,24 +716,24 @@ export declare interface TableSortState<TItem> {
     /**
      * 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: (rows: RowState<TItem>[]) => RowState<TItem>[];
+    sort: <TRowState extends TableRowData<TItem>>(rows: TRowState[]) => TRowState[];
 }
 
 /**
@@ -635,8 +741,6 @@ export declare interface TableSortState<TItem> {
  */
 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.
  *
@@ -749,46 +853,6 @@ export declare const useDataGridSelectionCellStyles_unstable: (state: DataGridSe
  */
 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.
  *
@@ -866,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.
  *
@@ -898,12 +970,6 @@ 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.
  *
@@ -915,11 +981,15 @@ export declare interface UseTableOptions<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.
  *
@@ -936,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
  */

package/lib/components/DataGrid/DataGrid.js

@@ -4,9 +4,8 @@ import { renderDataGrid_unstable } from './renderDataGrid';
 import { useDataGridStyles_unstable } from './useDataGridStyles';
 import { useDataGridContextValues_unstable } from './useDataGridContextValues';
 /**
- * DataGrid component - TODO: add more docs
+ * DataGrid component
  */
-
 export const DataGrid = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useDataGrid_unstable(props, ref);
   useDataGridStyles_unstable(state);