Skip to content

fix(react-table): add support for native table elements #34817

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

marcosmoura
Copy link
Contributor

For the given code example:
image

Previous Behavior

DataGrid components accepted as="table" (also sub elements of table), but were not rendering them, leading to incorrect markup

image

New Behavior

DataGrid now renders correct table elements.

image

@marcosmoura marcosmoura requested a review from a team as a code owner July 10, 2025 16:03
Copy link

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: entire library
1.273 MB
320.688 kB
1.273 MB
320.758 kB
168 B
70 B
react-table
DataGrid
161.134 kB
45.539 kB
161.301 kB
45.596 kB
167 B
57 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Button, FluentProvider & webLightTheme
68.79 kB
19.902 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
235.134 kB
68.064 kB
react-components
react-components: FluentProvider & webLightTheme
43.624 kB
14.255 kB
react-portal-compat
PortalCompatProvider
8.386 kB
2.624 kB
react-table
Table (Primitives only)
41.895 kB
13.537 kB
react-table
Table as DataGrid
131.392 kB
36.305 kB
react-table
Table (Selection only)
69.763 kB
19.668 kB
react-table
Table (Sort only)
68.406 kB
19.286 kB
react-timepicker-compat
TimePicker
108.969 kB
36.011 kB
🤖 This report was generated against b7c72b4400cfd19086d1463828bfa9a4c0f2cf8f

@@ -2,7 +2,7 @@ import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utili
import { TableContextValue } from '../Table/Table.types';

export type TableCellSlots = {
root: Slot<'td', 'div'>;
root: Slot<'td', 'th' | 'div'>;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
root: Slot<'td', 'th' | 'div'>;
root: Slot<'td', 'div'>;

This shouldn't be necessary - there is TableHeaderCell for that

Copy link
Contributor Author

@marcosmoura marcosmoura Jul 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The reason for this change is that the DataGridSelectionCell rendered in the header uses the TableCell (and not TableHeaderCell). Is there another way to implement that?

Copy link

Pull request demo site: URL

@marcosmoura marcosmoura requested a review from ling1726 July 10, 2025 18:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants