feat: Improve docs for DataGrid, export as unstable

change/@fluentui-react-components-cc26cc7b-28ab-4693-b09d-35be4a270df1.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: Export `DataGrid` as unstable",
+  "packageName": "@fluentui/react-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-table-e81f8ce0-fe1c-4559-a770-6ade46e5fac9.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "docs: Improve `DataGrid` docs",
+  "packageName": "@fluentui/react-table",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

packages/react-components/react-components/etc/react-components.unstable.api.md

@@ -52,6 +52,43 @@ import { CreateColumnOptions } from '@fluentui/react-table';
 import { DATA_OVERFLOW_ITEM } from '@fluentui/react-overflow';
 import { DATA_OVERFLOW_MENU } from '@fluentui/react-overflow';
 import { DATA_OVERFLOWING } from '@fluentui/react-overflow';
+import { DataGrid } from '@fluentui/react-table';
+import { DataGridBody } from '@fluentui/react-table';
+import { dataGridBodyClassNames } from '@fluentui/react-table';
+import { DataGridBodyProps } from '@fluentui/react-table';
+import { DataGridBodySlots } from '@fluentui/react-table';
+import { DataGridBodyState } from '@fluentui/react-table';
+import { DataGridCell } from '@fluentui/react-table';
+import { dataGridCellClassNames } from '@fluentui/react-table';
+import { DataGridCellProps } from '@fluentui/react-table';
+import { DataGridCellSlots } from '@fluentui/react-table';
+import { DataGridCellState } from '@fluentui/react-table';
+import { dataGridClassNames } from '@fluentui/react-table';
+import { DataGridContextValue } from '@fluentui/react-table';
+import { DataGridContextValues } from '@fluentui/react-table';
+import { DataGridHeader } from '@fluentui/react-table';
+import { DataGridHeaderCell } from '@fluentui/react-table';
+import { dataGridHeaderCellClassNames } from '@fluentui/react-table';
+import { DataGridHeaderCellProps } from '@fluentui/react-table';
+import { DataGridHeaderCellSlots } from '@fluentui/react-table';
+import { DataGridHeaderCellState } from '@fluentui/react-table';
+import { dataGridHeaderClassNames } from '@fluentui/react-table';
+import { DataGridHeaderProps } from '@fluentui/react-table';
+import { DataGridHeaderSlots } from '@fluentui/react-table';
+import { DataGridHeaderState } from '@fluentui/react-table';
+import { DataGridProps } from '@fluentui/react-table';
+import { DataGridRow } from '@fluentui/react-table';
+import { dataGridRowClassNames } from '@fluentui/react-table';
+import { DataGridRowProps } from '@fluentui/react-table';
+import { DataGridRowSlots } from '@fluentui/react-table';
+import { DataGridRowState } from '@fluentui/react-table';
+import { DataGridSelectionCell } from '@fluentui/react-table';
+import { dataGridSelectionCellClassNames } from '@fluentui/react-table';
+import { DataGridSelectionCellProps } from '@fluentui/react-table';
+import { DataGridSelectionCellSlots } from '@fluentui/react-table';
+import { DataGridSelectionCellState } from '@fluentui/react-table';
+import { DataGridSlots } from '@fluentui/react-table';
+import { DataGridState } from '@fluentui/react-table';
 import { Dropdown } from '@fluentui/react-combobox';
 import { dropdownClassNames } from '@fluentui/react-combobox';
 import { DropdownContextValues } from '@fluentui/react-combobox';
@@ -115,6 +152,13 @@ import { renderCardFooter_unstable } from '@fluentui/react-card';
 import { renderCardHeader_unstable } from '@fluentui/react-card';
 import { renderCardPreview_unstable } from '@fluentui/react-card';
 import { renderCombobox_unstable } from '@fluentui/react-combobox';
+import { renderDataGrid_unstable } from '@fluentui/react-table';
+import { renderDataGridBody_unstable } from '@fluentui/react-table';
+import { renderDataGridCell_unstable } from '@fluentui/react-table';
+import { renderDataGridHeader_unstable } from '@fluentui/react-table';
+import { renderDataGridHeaderCell_unstable } from '@fluentui/react-table';
+import { renderDataGridRow_unstable } from '@fluentui/react-table';
+import { renderDataGridSelectionCell_unstable } from '@fluentui/react-table';
 import { renderDropdown_unstable } from '@fluentui/react-combobox';
 import { renderField_unstable } from '@fluentui/react-field';
 import { renderInfoButton_unstable } from '@fluentui/react-infobutton';
@@ -171,6 +215,9 @@ import { tableCellClassName } from '@fluentui/react-table';
 import { tableCellClassNames } from '@fluentui/react-table';
 import { TableCellLayout } from '@fluentui/react-table';
 import { tableCellLayoutClassNames } from '@fluentui/react-table';
+import { TableCellLayoutProps } from '@fluentui/react-table';
+import { TableCellLayoutSlots } from '@fluentui/react-table';
+import { TableCellLayoutState } from '@fluentui/react-table';
 import { TableCellProps } from '@fluentui/react-table';
 import { TableCellSlots } from '@fluentui/react-table';
 import { TableCellState } from '@fluentui/react-table';
@@ -239,6 +286,20 @@ import { useCardPreviewStyles_unstable } from '@fluentui/react-card';
 import { useCardStyles_unstable } from '@fluentui/react-card';
 import { useCombobox_unstable } from '@fluentui/react-combobox';
 import { useComboboxStyles_unstable } from '@fluentui/react-combobox';
+import { useDataGrid_unstable } from '@fluentui/react-table';
+import { useDataGridBody_unstable } from '@fluentui/react-table';
+import { useDataGridBodyStyles_unstable } from '@fluentui/react-table';
+import { useDataGridCell_unstable } from '@fluentui/react-table';
+import { useDataGridCellStyles_unstable } from '@fluentui/react-table';
+import { useDataGridHeader_unstable } from '@fluentui/react-table';
+import { useDataGridHeaderCell_unstable } from '@fluentui/react-table';
+import { useDataGridHeaderCellStyles_unstable } from '@fluentui/react-table';
+import { useDataGridHeaderStyles_unstable } from '@fluentui/react-table';
+import { useDataGridRow_unstable } from '@fluentui/react-table';
+import { useDataGridRowStyles_unstable } from '@fluentui/react-table';
+import { useDataGridSelectionCell_unstable } from '@fluentui/react-table';
+import { useDataGridSelectionCellStyles_unstable } from '@fluentui/react-table';
+import { useDataGridStyles_unstable } from '@fluentui/react-table';
 import { useDropdown_unstable } from '@fluentui/react-combobox';
 import { useDropdownStyles_unstable } from '@fluentui/react-combobox';
 import { useField_unstable } from '@fluentui/react-field';
@@ -383,6 +444,80 @@ export { DATA_OVERFLOW_MENU }
 
 export { DATA_OVERFLOWING }
 
+export { DataGrid }
+
+export { DataGridBody }
+
+export { dataGridBodyClassNames }
+
+export { DataGridBodyProps }
+
+export { DataGridBodySlots }
+
+export { DataGridBodyState }
+
+export { DataGridCell }
+
+export { dataGridCellClassNames }
+
+export { DataGridCellProps }
+
+export { DataGridCellSlots }
+
+export { DataGridCellState }
+
+export { dataGridClassNames }
+
+export { DataGridContextValue }
+
+export { DataGridContextValues }
+
+export { DataGridHeader }
+
+export { DataGridHeaderCell }
+
+export { dataGridHeaderCellClassNames }
+
+export { DataGridHeaderCellProps }
+
+export { DataGridHeaderCellSlots }
+
+export { DataGridHeaderCellState }
+
+export { dataGridHeaderClassNames }
+
+export { DataGridHeaderProps }
+
+export { DataGridHeaderSlots }
+
+export { DataGridHeaderState }
+
+export { DataGridProps }
+
+export { DataGridRow }
+
+export { dataGridRowClassNames }
+
+export { DataGridRowProps }
+
+export { DataGridRowSlots }
+
+export { DataGridRowState }
+
+export { DataGridSelectionCell }
+
+export { dataGridSelectionCellClassNames }
+
+export { DataGridSelectionCellProps }
+
+export { DataGridSelectionCellSlots }
+
+export { DataGridSelectionCellState }
+
+export { DataGridSlots }
+
+export { DataGridState }
+
 export { Dropdown }
 
 export { dropdownClassNames }
@@ -509,6 +644,20 @@ export { renderCardPreview_unstable }
 
 export { renderCombobox_unstable }
 
+export { renderDataGrid_unstable }
+
+export { renderDataGridBody_unstable }
+
+export { renderDataGridCell_unstable }
+
+export { renderDataGridHeader_unstable }
+
+export { renderDataGridHeaderCell_unstable }
+
+export { renderDataGridRow_unstable }
+
+export { renderDataGridSelectionCell_unstable }
+
 export { renderDropdown_unstable }
 
 export { renderField_unstable }
@@ -621,6 +770,12 @@ export { TableCellLayout }
 
 export { tableCellLayoutClassNames }
 
+export { TableCellLayoutProps }
+
+export { TableCellLayoutSlots }
+
+export { TableCellLayoutState }
+
 export { TableCellProps }
 
 export { TableCellSlots }
@@ -758,6 +913,34 @@ export { useCombobox_unstable }
 
 export { useComboboxStyles_unstable }
 
+export { useDataGrid_unstable }
+
+export { useDataGridBody_unstable }
+
+export { useDataGridBodyStyles_unstable }
+
+export { useDataGridCell_unstable }
+
+export { useDataGridCellStyles_unstable }
+
+export { useDataGridHeader_unstable }
+
+export { useDataGridHeaderCell_unstable }
+
+export { useDataGridHeaderCellStyles_unstable }
+
+export { useDataGridHeaderStyles_unstable }
+
+export { useDataGridRow_unstable }
+
+export { useDataGridRowStyles_unstable }
+
+export { useDataGridSelectionCell_unstable }
+
+export { useDataGridSelectionCellStyles_unstable }
+
+export { useDataGridStyles_unstable }
+
 export { useDropdown_unstable }
 
 export { useDropdownStyles_unstable }

packages/react-components/react-components/src/unstable/index.ts

@@ -208,6 +208,41 @@ export {
   useTableCellLayoutStyles_unstable,
   renderTableCellLayout_unstable,
   tableCellLayoutClassNames,
+  DataGridCell,
+  dataGridCellClassNames,
+  useDataGridCellStyles_unstable,
+  useDataGridCell_unstable,
+  renderDataGridCell_unstable,
+  DataGridRow,
+  dataGridRowClassNames,
+  useDataGridRowStyles_unstable,
+  useDataGridRow_unstable,
+  renderDataGridRow_unstable,
+  DataGridBody,
+  dataGridBodyClassNames,
+  useDataGridBodyStyles_unstable,
+  useDataGridBody_unstable,
+  renderDataGridBody_unstable,
+  DataGrid,
+  dataGridClassNames,
+  useDataGridStyles_unstable,
+  useDataGrid_unstable,
+  renderDataGrid_unstable,
+  DataGridHeader,
+  dataGridHeaderClassNames,
+  useDataGridHeaderStyles_unstable,
+  useDataGridHeader_unstable,
+  renderDataGridHeader_unstable,
+  DataGridHeaderCell,
+  dataGridHeaderCellClassNames,
+  useDataGridHeaderCellStyles_unstable,
+  useDataGridHeaderCell_unstable,
+  renderDataGridHeaderCell_unstable,
+  DataGridSelectionCell,
+  useDataGridSelectionCellStyles_unstable,
+  useDataGridSelectionCell_unstable,
+  renderDataGridSelectionCell_unstable,
+  dataGridSelectionCellClassNames,
   useTable,
   useSelection,
   useSort,
@@ -242,6 +277,9 @@ export type {
   TableCellActionsProps,
   TableCellActionsState,
   TableCellActionsSlots,
+  TableCellLayoutProps,
+  TableCellLayoutState,
+  TableCellLayoutSlots,
   UseTableOptions,
   TableState as HeadlessTableState,
   TableSelectionState,
@@ -252,6 +290,29 @@ export type {
   ColumnDefinition,
   ColumnId,
   CreateColumnOptions,
+  DataGridHeaderCellProps,
+  DataGridHeaderCellSlots,
+  DataGridHeaderCellState,
+  DataGridHeaderProps,
+  DataGridHeaderSlots,
+  DataGridHeaderState,
+  DataGridProps,
+  DataGridSlots,
+  DataGridState,
+  DataGridContextValue,
+  DataGridContextValues,
+  DataGridBodyProps,
+  DataGridBodyState,
+  DataGridBodySlots,
+  DataGridRowProps,
+  DataGridRowState,
+  DataGridRowSlots,
+  DataGridCellProps,
+  DataGridCellState,
+  DataGridCellSlots,
+  DataGridSelectionCellProps,
+  DataGridSelectionCellState,
+  DataGridSelectionCellSlots,
 } from '@fluentui/react-table';
 
 export { CheckboxField_unstable as CheckboxField, checkboxFieldClassNames } from '@fluentui/react-checkbox';

packages/react-components/react-table/src/components/DataGridRow/DataGridRow.types.ts

@@ -5,6 +5,10 @@ import type { TableRowProps, TableRowSlots, TableRowState } from '../TableRow/Ta
 import type { TableSelectionCell } from '../TableSelectionCell/TableSelectionCell';
 
 export type DataGridRowSlots = TableRowSlots & {
+  /**
+   * When selection is enabled on the @see DataGrid, all rows
+   * will render the selection cell.
+   */
   selectionCell?: Slot<typeof TableSelectionCell>;
 };
 

packages/react-components/react-table/stories/DataGrid/DataGridDescription.md

@@ -0,0 +1,23 @@
+<!-- Don't allow prettier to collapse code block into single line -->
+<!-- prettier-ignore -->
+> **⚠️ Preview components are considered unstable:**
+>
+> ```jsx
+>
+> import { Table } from '@fluentui/react-components/unstable';
+>
+> ```
+>
+> - Features and APIs may change before final release
+> - Please contact us if you intend to use this in your product
+
+> 💡 This component is a higher level extension of the `Table` primitive components and the `useTableFeatures` hook.
+> `DataGrid` is a feature-rich component that uses `useTableFeatures` internally,
+> so there should always be full feature parity with what can be
+> achieved with primitives. This component is **opinionated** and this is intentional. If the desired scenario can
+> be achieved easily and does not vary too much from documented examples, it can be very convenient. If the desired
+> scenario varies a lot from the documented examples please use the `Table` components with `useTableFeatures` (or
+> another state management solution of choice).
+
+> ⚠️ Feature requests will be accepted, but the team will prioritize overall API scalability and extensibility over
+> uncommon features and scenarios.

packages/react-components/react-table/stories/DataGrid/KeyboardNavigation.stories.tsx

@@ -167,3 +167,14 @@ export const KeyboardNavigation = () => {
     </DataGrid>
   );
 };
+
+KeyboardNavigation.parameters = {
+  docs: {
+    description: {
+      story: [
+        'Keyboard navigation can be achieved with the `focusMode` prop. This prop needs to be explicitly set since',
+        'there is no keyboard navigation enabled by default.',
+      ].join('\n'),
+    },
+  },
+};