diff --git a/apps/vr-tests-react-components/src/stories/Table.stories.tsx b/apps/vr-tests-react-components/src/stories/Table.stories.tsx
index 1cdbaef5daf7cd..7cc6d55f519e73 100644
--- a/apps/vr-tests-react-components/src/stories/Table.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Table.stories.tsx
@@ -21,6 +21,7 @@ import {
TableCellLayout,
TableSelectionCell,
TableCellActions,
+ TableProps,
} from '@fluentui/react-table';
import { Button } from '@fluentui/react-button';
import { storiesOf } from '@storybook/react';
@@ -72,474 +73,487 @@ const columns = [
{ columnKey: 'lastUpdate', label: 'Last update' },
];
-storiesOf('Table - cell actions', module)
- .addDecorator(story => (
- {story()}
- ))
- .addStory(
- 'default',
- () => (
-
-
-
- {columns.map(column => (
- {column.label}
- ))}
-
-
-
- {items.map(item => (
-
-
-
- {item.file.label}
-
- } appearance="subtle" />
- } appearance="subtle" />
-
-
-
-
-
- }
- >
- {item.author.label}
-
-
- {item.lastUpdated.label}
-
- {item.lastUpdate.label}
-
-
- ))}
-
-
- ),
- { includeDarkMode: true, includeHighContrast: true, includeRtl: true },
- )
- .addStory(
- 'always visible',
- () => (
-
-
-
- {columns.map(column => (
- {column.label}
- ))}
-
-
-
- {items.map(item => (
-
-
-
- {item.file.label}
-
- } appearance="subtle" />
- } appearance="subtle" />
-
-
-
-
-
- }
- >
- {item.author.label}
-
-
- {item.lastUpdated.label}
-
- {item.lastUpdate.label}
-
-
- ))}
-
-
- ),
- { includeDarkMode: true, includeHighContrast: true, includeRtl: true },
- )
- .addStory('in header cell', () => (
-
-
-
- {columns.map(column => (
- {column.label}
- ))}
+interface SharedVrTestArgs {
+ noNativeElements: TableProps['noNativeElements'];
+}
+
+const CellActionsDefault: React.FC = ({ noNativeElements }) => (
+
+
+
+ {columns.map(column => (
+ {column.label}
+ ))}
+
+
+
+ {items.map(item => (
+
+
+
+ {item.file.label}
+
+ } appearance="subtle" />
+ } appearance="subtle" />
+
+
+
+
+ }
+ >
+ {item.author.label}
+
+
+ {item.lastUpdated.label}
+
+ {item.lastUpdate.label}
+
-
-
- {items.map(item => (
-
-
-
- {item.file.label}
-
- } appearance="subtle" />
- } appearance="subtle" />
-
-
-
-
-
- }
- >
- {item.author.label}
-
-
- {item.lastUpdated.label}
-
- {item.lastUpdate.label}
-
-
+ ))}
+
+
+);
+
+const CellActionsAlwaysVisible: React.FC = ({ noNativeElements }) => (
+
+
+
+ {columns.map(column => (
+ {column.label}
))}
-
-
- ));
+
+
+
+ {items.map(item => (
+
+
+
+ {item.file.label}
+
+ } appearance="subtle" />
+ } appearance="subtle" />
+
+
+
+
+ }
+ >
+ {item.author.label}
+
+
+ {item.lastUpdated.label}
+
+ {item.lastUpdate.label}
+
+
+ ))}
+
+
+);
-storiesOf('Table', module)
- .addStory(
- 'default',
- () => (
-
-
-
- {columns.map(column => (
- {column.label}
- ))}
-
-
-
- {items.map(item => (
-
-
- {item.file.label}
-
-
-
- }
- >
- {item.author.label}
-
-
-
- {item.lastUpdated.label}
-
-
- {item.lastUpdate.label}
-
-
- ))}
-
-
- ),
- { includeDarkMode: true, includeHighContrast: true, includeRtl: true },
- )
- .addStory('size - small', () => (
-
-
-
- {columns.map(column => (
- {column.label}
- ))}
+const CellActionsInHeaderCell: React.FC = ({ noNativeElements }) => (
+
+
+
+ {columns.map(column => (
+ {column.label}
+ ))}
+
+
+
+ {items.map(item => (
+
+
+
+ {item.file.label}
+
+ } appearance="subtle" />
+ } appearance="subtle" />
+
+
+
+
+ }
+ >
+ {item.author.label}
+
+
+ {item.lastUpdated.label}
+
+ {item.lastUpdate.label}
+
-
-
- {items.map(item => (
-
-
- {item.file.label}
-
-
-
- }
- >
- {item.author.label}
-
-
- {item.lastUpdated.label}
-
- {item.lastUpdate.label}
-
-
+ ))}
+
+
+);
+
+const SizeMedium: React.FC = ({ noNativeElements }) => (
+
+
+
+ {columns.map(column => (
+ {column.label}
))}
-
-
- ))
- .addStory('size - smaller', () => (
-
-
-
- {columns.map(column => (
- {column.label}
- ))}
+
+
+
+ {items.map(item => (
+
+
+ {item.file.label}
+
+
+ }
+ >
+ {item.author.label}
+
+
+
+ {item.lastUpdated.label}
+
+
+ {item.lastUpdate.label}
+
-
-
- {items.map(item => (
-
-
- {item.file.label}
-
-
-
- }
- >
- {item.author.label}
-
-
- {item.lastUpdated.label}
-
- {item.lastUpdate.label}
-
-
+ ))}
+
+
+);
+
+const SizeSmall: React.FC = ({ noNativeElements }) => (
+
+
+
+ {columns.map(column => (
+ {column.label}
))}
-
-
- ))
- .addStory('primary cell', () => (
-
-
-
- {columns.map(column => (
- {column.label}
- ))}
+
+
+
+ {items.map(item => (
+
+
+ {item.file.label}
+
+
+
+ }
+ >
+ {item.author.label}
+
+
+ {item.lastUpdated.label}
+
+ {item.lastUpdate.label}
+
-
-
- {items.map(item => (
-
-
-
- {item.file.label}
-
-
+ ))}
+
+
+);
+
+const SizeSmaller: React.FC = ({ noNativeElements }) => (
+
+
+
+ {columns.map(column => (
+ {column.label}
+ ))}
+
+
+
+ {items.map(item => (
+
+
+ {item.file.label}
+
+
+
+ }
+ >
+ {item.author.label}
+
+
+ {item.lastUpdated.label}
+
+ {item.lastUpdate.label}
+
+
+ ))}
+
+
+);
+
+const PrimaryCell: React.FC = ({ noNativeElements }) => (
+
+
+
+ {columns.map(column => (
+ {column.label}
+ ))}
+
+
+
+ {items.map(item => (
+
+
+
+ {item.file.label}
+
+
+ }
+ >
+ {item.author.label}
+
+ {item.lastUpdated.label}
+
+ {item.lastUpdate.label}
+
+
+ ))}
+
+
+);
+
+const Multiselect: React.FC = ({ noNativeElements }) => (
+
+
+
+
+ {columns.map(column => (
+ {column.label}
+ ))}
+
+
+
+ {items.map(item => (
+
+
+
+ {item.file.label}
+
+
+ }
+ >
+ {item.author.label}
+
+
+ {item.lastUpdated.label}
+
+ {item.lastUpdate.label}
+
+
+ ))}
+
+
+);
+
+const MultiselectChecked: React.FC = ({ noNativeElements }) => (
+
+
+
+
+ {columns.map(column => (
+ {column.label}
+ ))}
+
+
+
+ {items.map(item => (
+
+
+
+ {item.file.label}
+
+
+ }
+ >
+ {item.author.label}
+
+
+ {item.lastUpdated.label}
+
+ {item.lastUpdate.label}
+
+
+ ))}
+
+
+);
+
+const MultiselectMixed: React.FC = ({ noNativeElements }) => (
+
+
+
+
+ {columns.map(column => (
+ {column.label}
+ ))}
+
+
+
+ {items.map((item, i) => (
+
+
+
+ {item.file.label}
+
+
+ }
+ >
+ {item.author.label}
+
+
+ {item.lastUpdated.label}
+
+ {item.lastUpdate.label}
+
+
+ ))}
+
+
+);
+
+const Singleselect: React.FC = ({ noNativeElements }) => (
+
+
+
+
+ {columns.map(column => (
+ {column.label}
+ ))}
+
+
+
+ {items.map(item => (
+
+
+
+ {item.file.label}
+
+
}
>
{item.author.label}
- {item.lastUpdated.label}
-
- {item.lastUpdate.label}
-
-
+
+ {item.lastUpdated.label}
+
+ {item.lastUpdate.label}
+
+
+ ))}
+
+
+);
+
+const SingleselectChecked: React.FC = ({ noNativeElements }) => (
+
+
+
+
+ {columns.map(column => (
+ {column.label}
))}
-
-
- ))
- .addStory(
- 'multiselect',
- () => (
-
-
-
-
- {columns.map(column => (
- {column.label}
- ))}
-
-
-
- {items.map(item => (
-
-
-
- {item.file.label}
-
-
-
- }
- >
- {item.author.label}
-
-
- {item.lastUpdated.label}
-
- {item.lastUpdate.label}
-
-
- ))}
-
-
- ),
- { includeDarkMode: true, includeHighContrast: true, includeRtl: true },
- )
- .addStory(
- 'multiselect (checked)',
- () => (
-
-
-
-
- {columns.map(column => (
- {column.label}
- ))}
-
-
-
- {items.map(item => (
-
-
-
- {item.file.label}
-
-
-
- }
- >
- {item.author.label}
-
-
- {item.lastUpdated.label}
-
- {item.lastUpdate.label}
-
-
- ))}
-
-
- ),
- { includeDarkMode: true, includeHighContrast: true, includeRtl: true },
- )
- .addStory(
- 'multiselect (mixed)',
- () => (
-
-
-
-
- {columns.map(column => (
- {column.label}
- ))}
-
-
-
- {items.map((item, i) => (
-
-
-
- {item.file.label}
-
-
-
- }
- >
- {item.author.label}
-
-
- {item.lastUpdated.label}
-
- {item.lastUpdate.label}
-
-
- ))}
-
-
- ),
- { includeDarkMode: true, includeHighContrast: true, includeRtl: true },
- )
- .addStory(
- 'single select',
- () => (
-
-
-
-
- {columns.map(column => (
- {column.label}
- ))}
-
-
-
- {items.map(item => (
-
-
-
- {item.file.label}
-
-
-
- }
- >
- {item.author.label}
-
-
- {item.lastUpdated.label}
-
- {item.lastUpdate.label}
-
-
- ))}
-
-
- ),
- { includeDarkMode: true, includeHighContrast: true, includeRtl: true },
- )
- .addStory(
- 'single select (checked)',
- () => (
-
-
-
-
- {columns.map(column => (
- {column.label}
- ))}
-
-
-
- {items.map((item, i) => (
-
-
-
- {item.file.label}
-
+
+
+
+ {items.map((item, i) => (
+
+
+
+ {item.file.label}
+
+
+
+ }
+ >
+ {item.author.label}
+
+
+ {item.lastUpdated.label}
+
+ {item.lastUpdate.label}
+
+
+ ))}
+
+
+);
+
+([true, false] as const).forEach(noNativeElements => {
+ const layoutName = noNativeElements ? 'flex' : 'table';
+ storiesOf(`Table layout ${layoutName} - cell actions`, module)
+ .addDecorator(story => (
+ {story()}
+ ))
+ .addStory('default', () => , {
+ includeDarkMode: true,
+ includeHighContrast: true,
+ includeRtl: true,
+ })
+ .addStory('always visible', () => , {
+ includeDarkMode: true,
+ includeHighContrast: true,
+ includeRtl: true,
+ })
+ .addStory('in header cell', () => );
-
-
- }
- >
- {item.author.label}
-
-
- {item.lastUpdated.label}
-
- {item.lastUpdate.label}
-
-
- ))}
-
-
- ),
- { includeDarkMode: true, includeHighContrast: true, includeRtl: true },
- );
+ storiesOf(`Table layout ${layoutName}`, module)
+ .addStory('size - medium', () => , {
+ includeDarkMode: true,
+ includeHighContrast: true,
+ includeRtl: true,
+ })
+ .addStory('size - small', () => )
+ .addStory('size - smaller', () => )
+ .addStory('primary cell', () => )
+ .addStory('multiselect', () => , {
+ includeDarkMode: true,
+ includeHighContrast: true,
+ includeRtl: true,
+ })
+ .addStory('multiselect (checked)', () => , {
+ includeDarkMode: true,
+ includeHighContrast: true,
+ includeRtl: true,
+ })
+ .addStory('multiselect (mixed)', () => , {
+ includeDarkMode: true,
+ includeHighContrast: true,
+ includeRtl: true,
+ })
+ .addStory('single select', () => , {
+ includeDarkMode: true,
+ includeHighContrast: true,
+ includeRtl: true,
+ })
+ .addStory('single select (checked)', () => , {
+ includeDarkMode: true,
+ includeHighContrast: true,
+ includeRtl: true,
+ });
+});
diff --git a/change/@fluentui-react-table-69a4bbc7-8575-45e4-b339-04032ef3037f.json b/change/@fluentui-react-table-69a4bbc7-8575-45e4-b339-04032ef3037f.json
new file mode 100644
index 00000000000000..f36ffa199056de
--- /dev/null
+++ b/change/@fluentui-react-table-69a4bbc7-8575-45e4-b339-04032ef3037f.json
@@ -0,0 +1,7 @@
+{
+ "type": "prerelease",
+ "comment": "feat: `noNativeElements` renders a flex layout",
+ "packageName": "@fluentui/react-table",
+ "email": "lingfangao@hotmail.com",
+ "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-table/etc/react-table.api.md b/packages/react-components/react-table/etc/react-table.api.md
index 32023ee3e96a1b..89a204a137c3cb 100644
--- a/packages/react-components/react-table/etc/react-table.api.md
+++ b/packages/react-components/react-table/etc/react-table.api.md
@@ -87,7 +87,7 @@ export type TableBodySlots = {
};
// @public
-export type TableBodyState = ComponentState;
+export type TableBodyState = ComponentState & Pick;
// @public
export const TableCell: ForwardRefComponent;
@@ -149,7 +149,7 @@ export type TableCellSlots = {
};
// @public
-export type TableCellState = ComponentState;
+export type TableCellState = ComponentState & Pick;
// @public (undocumented)
export const tableClassName = "fui-Table";
@@ -197,9 +197,7 @@ export type TableHeaderCellSlots = {
};
// @public
-export type TableHeaderCellState = ComponentState & {
- sortable: boolean;
-};
+export type TableHeaderCellState = ComponentState & Pick;
// @public (undocumented)
export const tableHeaderClassName = "fui-TableHeader";
@@ -216,7 +214,7 @@ export type TableHeaderSlots = {
};
// @public
-export type TableHeaderState = ComponentState;
+export type TableHeaderState = ComponentState & Pick;
// @public
export type TableProps = ComponentProps & Partial;
@@ -239,9 +237,7 @@ export type TableRowSlots = {
};
// @public
-export type TableRowState = ComponentState & {
- size: TableState['size'];
-};
+export type TableRowState = ComponentState & Pick;
// @public
export const TableSelectionCell: ForwardRefComponent;
@@ -262,7 +258,7 @@ export type TableSelectionCellSlots = {
} & Pick;
// @public
-export type TableSelectionCellState = ComponentState & Pick, 'type' | 'checked'>;
+export type TableSelectionCellState = ComponentState & Pick, 'type' | 'checked'> & Pick;
// @public (undocumented)
export interface TableSelectionState {
diff --git a/packages/react-components/react-table/src/components/Table/Table.types.ts b/packages/react-components/react-table/src/components/Table/Table.types.ts
index eb5cd0b2231e8c..1e9ce2606a8394 100644
--- a/packages/react-components/react-table/src/components/Table/Table.types.ts
+++ b/packages/react-components/react-table/src/components/Table/Table.types.ts
@@ -5,10 +5,21 @@ export type TableSlots = {
};
export 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;
};
diff --git a/packages/react-components/react-table/src/components/Table/useTableStyles.ts b/packages/react-components/react-table/src/components/Table/useTableStyles.ts
index c4606db905114b..4a2779d6913f90 100644
--- a/packages/react-components/react-table/src/components/Table/useTableStyles.ts
+++ b/packages/react-components/react-table/src/components/Table/useTableStyles.ts
@@ -8,15 +8,27 @@ export const tableClassNames: SlotClassNames = {
root: 'fui-Table',
};
+const useTableLayoutStyles = makeStyles({
+ root: {
+ display: 'table',
+ verticalAlign: 'middle',
+ width: '100%',
+ tableLayout: 'fixed',
+ },
+});
+
+const useFlexLayoutStyles = makeStyles({
+ root: {
+ display: 'block',
+ },
+});
+
/**
* Styles for the root slot
*/
const useStyles = makeStyles({
root: {
- verticalAlign: 'middle',
borderCollapse: 'collapse',
- width: '100%',
- display: 'table',
backgroundColor: tokens.colorNeutralBackground1,
},
});
@@ -26,7 +38,16 @@ const useStyles = makeStyles({
*/
export const useTableStyles_unstable = (state: TableState): TableState => {
const styles = useStyles();
- state.root.className = mergeClasses(tableClassName, styles.root, state.root.className);
+ const layoutStyles = {
+ table: useTableLayoutStyles(),
+ flex: useFlexLayoutStyles(),
+ };
+ state.root.className = mergeClasses(
+ tableClassName,
+ styles.root,
+ state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,
+ state.root.className,
+ );
return state;
};
diff --git a/packages/react-components/react-table/src/components/TableBody/TableBody.types.ts b/packages/react-components/react-table/src/components/TableBody/TableBody.types.ts
index e2b732cc8225af..4befd3991eff8e 100644
--- a/packages/react-components/react-table/src/components/TableBody/TableBody.types.ts
+++ b/packages/react-components/react-table/src/components/TableBody/TableBody.types.ts
@@ -1,4 +1,5 @@
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import { TableContextValue } from '../Table/Table.types';
export type TableBodySlots = {
root: Slot<'tbody', 'div'>;
@@ -12,4 +13,4 @@ export type TableBodyProps = ComponentProps;
/**
* State used in rendering TableBody
*/
-export type TableBodyState = ComponentState;
+export type TableBodyState = ComponentState & Pick;
diff --git a/packages/react-components/react-table/src/components/TableBody/useTableBody.ts b/packages/react-components/react-table/src/components/TableBody/useTableBody.ts
index 8729e7f52bb57e..c2dc8580163a53 100644
--- a/packages/react-components/react-table/src/components/TableBody/useTableBody.ts
+++ b/packages/react-components/react-table/src/components/TableBody/useTableBody.ts
@@ -25,5 +25,6 @@ export const useTableBody_unstable = (props: TableBodyProps, ref: React.Ref = {
root: 'fui-TableBody',
@@ -17,8 +23,15 @@ export const tableBodyClassNames: SlotClassNames = {
* Apply styling to the TableBody slots based on the state
*/
export const useTableBodyStyles_unstable = (state: TableBodyState): TableBodyState => {
- const styles = useStyles();
- state.root.className = mergeClasses(tableBodyClassName, styles.root, state.root.className);
+ const layoutStyles = {
+ table: useTableLayoutStyles(),
+ flex: useFlexLayoutStyles(),
+ };
+ state.root.className = mergeClasses(
+ tableBodyClassName,
+ state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,
+ state.root.className,
+ );
return state;
};
diff --git a/packages/react-components/react-table/src/components/TableCell/TableCell.types.ts b/packages/react-components/react-table/src/components/TableCell/TableCell.types.ts
index d3227e64d45e95..f44f72a86ea44e 100644
--- a/packages/react-components/react-table/src/components/TableCell/TableCell.types.ts
+++ b/packages/react-components/react-table/src/components/TableCell/TableCell.types.ts
@@ -1,4 +1,5 @@
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import { TableContextValue } from '../Table/Table.types';
export type TableCellSlots = {
root: Slot<'td', 'div'>;
@@ -12,4 +13,4 @@ export type TableCellProps = ComponentProps & {};
/**
* State used in rendering TableCell
*/
-export type TableCellState = ComponentState;
+export type TableCellState = ComponentState & Pick;
diff --git a/packages/react-components/react-table/src/components/TableCell/useTableCell.ts b/packages/react-components/react-table/src/components/TableCell/useTableCell.ts
index 7bfd1a4284c5b1..c57b96bfb0512f 100644
--- a/packages/react-components/react-table/src/components/TableCell/useTableCell.ts
+++ b/packages/react-components/react-table/src/components/TableCell/useTableCell.ts
@@ -26,5 +26,6 @@ export const useTableCell_unstable = (props: TableCellProps, ref: React.Ref = {
root: tableCellClassName,
};
+const useTableLayoutStyles = makeStyles({
+ root: {
+ display: 'table-cell',
+ verticalAlign: 'middle',
+ },
+});
+
+const useFlexLayoutStyles = makeStyles({
+ root: {
+ display: 'flex',
+ minWidth: '0px',
+ alignItems: 'center',
+ ...shorthands.flex(1, 1, '0px'),
+ },
+});
+
/**
* Styles for the root slot
*/
const useStyles = makeStyles({
root: {
position: 'relative',
- verticalAlign: 'middle',
- display: 'table-cell',
...shorthands.padding('0px', tokens.spacingHorizontalS),
},
});
@@ -25,6 +39,15 @@ const useStyles = makeStyles({
*/
export const useTableCellStyles_unstable = (state: TableCellState): TableCellState => {
const styles = useStyles();
- state.root.className = mergeClasses(tableCellClassNames.root, styles.root, state.root.className);
+ const layoutStyles = {
+ table: useTableLayoutStyles(),
+ flex: useFlexLayoutStyles(),
+ };
+ state.root.className = mergeClasses(
+ tableCellClassNames.root,
+ styles.root,
+ state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,
+ state.root.className,
+ );
return state;
};
diff --git a/packages/react-components/react-table/src/components/TableHeader/TableHeader.types.ts b/packages/react-components/react-table/src/components/TableHeader/TableHeader.types.ts
index aa5a066fff418d..fec5d88011fea3 100644
--- a/packages/react-components/react-table/src/components/TableHeader/TableHeader.types.ts
+++ b/packages/react-components/react-table/src/components/TableHeader/TableHeader.types.ts
@@ -1,4 +1,5 @@
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import { TableContextValue } from '../Table/Table.types';
export type TableHeaderSlots = {
root: Slot<'thead', 'div'>;
@@ -12,4 +13,4 @@ export type TableHeaderProps = ComponentProps & {};
/**
* State used in rendering TableHeader
*/
-export type TableHeaderState = ComponentState;
+export type TableHeaderState = ComponentState & Pick;
diff --git a/packages/react-components/react-table/src/components/TableHeader/useTableHeader.ts b/packages/react-components/react-table/src/components/TableHeader/useTableHeader.ts
index 7afbe5f67ac93c..18807ea7ef9172 100644
--- a/packages/react-components/react-table/src/components/TableHeader/useTableHeader.ts
+++ b/packages/react-components/react-table/src/components/TableHeader/useTableHeader.ts
@@ -28,5 +28,6 @@ export const useTableHeader_unstable = (props: TableHeaderProps, ref: React.Ref<
...(sortable && keyboardNavAttr),
...props,
}),
+ noNativeElements,
};
};
diff --git a/packages/react-components/react-table/src/components/TableHeader/useTableHeaderStyles.ts b/packages/react-components/react-table/src/components/TableHeader/useTableHeaderStyles.ts
index 8e58908c1d2319..155f6e6a6ee4ce 100644
--- a/packages/react-components/react-table/src/components/TableHeader/useTableHeaderStyles.ts
+++ b/packages/react-components/react-table/src/components/TableHeader/useTableHeaderStyles.ts
@@ -7,7 +7,21 @@ export const tableHeaderClassNames: SlotClassNames = {
root: 'fui-TableHeader',
};
-const useStyles = makeStyles({
+const useFlexLayoutStyles = makeStyles({
+ root: {
+ display: 'block',
+ },
+
+ roottable: {
+ display: 'table-row-group',
+ },
+
+ rootFlex: {
+ display: 'block',
+ },
+});
+
+const useTableLayoutStyles = makeStyles({
root: {
display: 'table-row-group',
},
@@ -17,8 +31,15 @@ const useStyles = makeStyles({
* Apply styling to the TableHeader slots based on the state
*/
export const useTableHeaderStyles_unstable = (state: TableHeaderState): TableHeaderState => {
- const styles = useStyles();
- state.root.className = mergeClasses(tableHeaderClassName, styles.root, state.root.className);
+ const layoutStyles = {
+ table: useTableLayoutStyles(),
+ flex: useFlexLayoutStyles(),
+ };
+ state.root.className = mergeClasses(
+ tableHeaderClassName,
+ state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,
+ state.root.className,
+ );
return state;
};
diff --git a/packages/react-components/react-table/src/components/TableHeaderCell/TableHeaderCell.types.ts b/packages/react-components/react-table/src/components/TableHeaderCell/TableHeaderCell.types.ts
index 710aea8da6cd93..b809530a81228b 100644
--- a/packages/react-components/react-table/src/components/TableHeaderCell/TableHeaderCell.types.ts
+++ b/packages/react-components/react-table/src/components/TableHeaderCell/TableHeaderCell.types.ts
@@ -1,6 +1,6 @@
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
import { ARIAButtonSlotProps } from '@fluentui/react-aria';
-import { SortDirection } from '../Table/Table.types';
+import { SortDirection, TableContextValue } from '../Table/Table.types';
export type TableHeaderCellSlots = {
root: Slot<'th', 'div'>;
@@ -23,4 +23,5 @@ export type TableHeaderCellProps = ComponentProps>
/**
* State used in rendering TableHeaderCell
*/
-export type TableHeaderCellState = ComponentState & { sortable: boolean };
+export type TableHeaderCellState = ComponentState &
+ Pick;
diff --git a/packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCell.tsx b/packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCell.tsx
index 8f041ac4a0fbf7..f1135f1b501f75 100644
--- a/packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCell.tsx
+++ b/packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCell.tsx
@@ -55,5 +55,6 @@ export const useTableHeaderCell_unstable = (
},
}),
sortable,
+ noNativeElements,
};
};
diff --git a/packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.ts b/packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.ts
index fd11a8a146a996..bf5bdd9760726c 100644
--- a/packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.ts
+++ b/packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.ts
@@ -10,13 +10,26 @@ export const tableHeaderCellClassNames: SlotClassNames = {
sortIcon: 'fui-TableHeaderCell__sortIcon',
};
+const useTableLayoutStyles = makeStyles({
+ root: {
+ display: 'table-cell',
+ verticalAlign: 'middle',
+ },
+});
+
+const useFlexLayoutStyles = makeStyles({
+ root: {
+ display: 'flex',
+ ...shorthands.flex(1, 1, '0px'),
+ minWidth: '0px',
+ },
+});
+
/**
* Styles for the root slot
*/
const useStyles = makeStyles({
root: {
- display: 'table-cell',
- verticalAlign: 'middle',
...shorthands.padding('0px', tokens.spacingHorizontalS),
},
@@ -60,7 +73,16 @@ const useStyles = makeStyles({
*/
export const useTableHeaderCellStyles_unstable = (state: TableHeaderCellState): TableHeaderCellState => {
const styles = useStyles();
- state.root.className = mergeClasses(tableHeaderCellClassNames.root, styles.root, state.root.className);
+ const layoutStyles = {
+ table: useTableLayoutStyles(),
+ flex: useFlexLayoutStyles(),
+ };
+ state.root.className = mergeClasses(
+ tableHeaderCellClassNames.root,
+ styles.root,
+ state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,
+ state.root.className,
+ );
state.button.className = mergeClasses(
tableHeaderCellClassNames.button,
styles.resetButton,
diff --git a/packages/react-components/react-table/src/components/TableRow/TableRow.types.ts b/packages/react-components/react-table/src/components/TableRow/TableRow.types.ts
index 3b85b2edca47e9..5995cbfb5c4ee4 100644
--- a/packages/react-components/react-table/src/components/TableRow/TableRow.types.ts
+++ b/packages/react-components/react-table/src/components/TableRow/TableRow.types.ts
@@ -1,5 +1,5 @@
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { TableState } from '../Table/Table.types';
+import { TableContextValue } from '../Table/Table.types';
export type TableRowSlots = {
root: Slot<'tr', 'div'>;
@@ -13,4 +13,4 @@ export type TableRowProps = ComponentProps & {};
/**
* State used in rendering TableRow
*/
-export type TableRowState = ComponentState & { size: TableState['size'] };
+export type TableRowState = ComponentState & Pick;
diff --git a/packages/react-components/react-table/src/components/TableRow/useTableRow.ts b/packages/react-components/react-table/src/components/TableRow/useTableRow.ts
index 53f5f890aead6f..3e3a991c4d8b45 100644
--- a/packages/react-components/react-table/src/components/TableRow/useTableRow.ts
+++ b/packages/react-components/react-table/src/components/TableRow/useTableRow.ts
@@ -26,5 +26,6 @@ export const useTableRow_unstable = (props: TableRowProps, ref: React.Ref = {
root: tableRowClassName,
};
+const useTableLayoutStyles = makeStyles({
+ root: {
+ display: 'table-row',
+ },
+
+ medium: {
+ height: '44px',
+ },
+
+ small: {
+ height: '34px',
+ },
+
+ smaller: {
+ height: '24px',
+ },
+});
+
+const useFlexLayoutStyles = makeStyles({
+ root: {
+ display: 'flex',
+ alignItems: 'center',
+ },
+
+ medium: {
+ minHeight: '44px',
+ },
+
+ small: {
+ minHeight: '34px',
+ },
+
+ smaller: {
+ minHeight: '24px',
+ },
+});
+
/**
* Styles for the root slot
*/
const useStyles = makeStyles({
root: {
- display: 'table-row',
color: tokens.colorNeutralForeground1,
':hover': {
backgroundColor: tokens.colorNeutralBackground1Hover,
@@ -24,20 +60,18 @@ const useStyles = makeStyles({
opacity: 1,
},
},
+ boxSizing: 'border-box',
},
medium: {
- height: '44px',
...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),
},
small: {
- height: '34px',
...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),
},
smaller: {
- height: '24px',
fontSize: tokens.fontSizeBase200,
},
});
@@ -47,7 +81,18 @@ const useStyles = makeStyles({
*/
export const useTableRowStyles_unstable = (state: TableRowState): TableRowState => {
const styles = useStyles();
- state.root.className = mergeClasses(tableRowClassNames.root, styles.root, styles[state.size], state.root.className);
+ const layoutStyles = {
+ table: useTableLayoutStyles(),
+ flex: useFlexLayoutStyles(),
+ };
+ state.root.className = mergeClasses(
+ tableRowClassNames.root,
+ styles.root,
+ styles[state.size],
+ state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,
+ state.noNativeElements ? layoutStyles.flex[state.size] : layoutStyles.table[state.size],
+ state.root.className,
+ );
return state;
};
diff --git a/packages/react-components/react-table/src/components/TableSelectionCell/TableSelectionCell.types.ts b/packages/react-components/react-table/src/components/TableSelectionCell/TableSelectionCell.types.ts
index c8ff497d29eb38..be58b45fb9ff4f 100644
--- a/packages/react-components/react-table/src/components/TableSelectionCell/TableSelectionCell.types.ts
+++ b/packages/react-components/react-table/src/components/TableSelectionCell/TableSelectionCell.types.ts
@@ -1,6 +1,7 @@
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
import type { Checkbox, CheckboxProps } from '@fluentui/react-checkbox';
import { TableCellSlots } from '../TableCell/TableCell.types';
+import { TableContextValue } from '../Table/Table.types';
export type TableSelectionCellSlots = {
/**
@@ -28,4 +29,5 @@ export type TableSelectionCellProps = ComponentProps &
- Pick, 'type' | 'checked'>;
+ Pick, 'type' | 'checked'> &
+ Pick;
diff --git a/packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCell.tsx b/packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCell.tsx
index c66f08b6e440e5..5b47bf67dc5d4a 100644
--- a/packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCell.tsx
+++ b/packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCell.tsx
@@ -4,6 +4,7 @@ import { Checkbox } from '@fluentui/react-checkbox';
import { CheckmarkFilled } from '@fluentui/react-icons';
import type { TableSelectionCellProps, TableSelectionCellState } from './TableSelectionCell.types';
import { useTableCell_unstable } from '../TableCell/useTableCell';
+import { useTableContext } from '../../contexts/tableContext';
/**
* Create the state required to render TableSelectionCell.
@@ -19,6 +20,7 @@ export const useTableSelectionCell_unstable = (
ref: React.Ref,
): TableSelectionCellState => {
const tableCellState = useTableCell_unstable(props, ref);
+ const { noNativeElements } = useTableContext();
const type = props.type ?? 'checkbox';
return {
@@ -38,5 +40,6 @@ export const useTableSelectionCell_unstable = (
}),
type,
checked: props.checked ?? false,
+ noNativeElements,
};
};
diff --git a/packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCellStyles.ts b/packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCellStyles.ts
index f0522e8214b1bc..e91e629dc88f68 100644
--- a/packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCellStyles.ts
+++ b/packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCellStyles.ts
@@ -8,16 +8,31 @@ export const tableSelectionCellClassNames: SlotClassNames {
const styles = useStyles();
- state.root.className = mergeClasses(tableSelectionCellClassNames.root, styles.root, state.root.className);
+ const layoutStyles = {
+ table: useTableLayoutStyles(),
+ flex: useFlexLayoutStyles(),
+ };
+ state.root.className = mergeClasses(
+ tableSelectionCellClassNames.root,
+ styles.root,
+ state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,
+ state.root.className,
+ );
if (state.checkboxIndicator) {
state.checkboxIndicator.className = mergeClasses(
tableSelectionCellClassNames.checkboxIndicator,