Feat/use table composition #24944

ling1726 · 2022-09-26T07:47:59Z

Current Behavior

New Behavior

Related Issue(s)

Fixes #

…osition

Native `display: table` is great for column alignment and simplifies column sizing. However, native table layout is not very virtualization friendly and does cannot handle any non-compliant element in the markup. For virtualization and other cases that involve non-compliant table elements in markup, there is a `layoutType` prop with the `native`and `flex` layouts. Flex layout is what was used before microsoft#24762 with fixes to column alignment for long content.

fabricteam · 2022-09-26T07:57:48Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`global-context` createContext	`533 B` `341 B`
`global-context` createContextSelector	`554 B` `348 B`
`priority-overflow` createOverflowManager	`2.936 kB` `1.212 kB`
`react-accordion` Accordion (including children components)	`78.914 kB` `24.06 kB`
`react-badge` Badge	`22.6 kB` `7.205 kB`
`react-badge` CounterBadge	`23.503 kB` `7.497 kB`
`react-badge` PresenceBadge	`24.05 kB` `7.067 kB`
`react-divider` Divider	`16.459 kB` `5.902 kB`
`react-image` Image	`10.78 kB` `4.264 kB`
`react-label` Label	`9.338 kB` `3.86 kB`
`react-link` Link	`11.784 kB` `4.867 kB`
`react-overflow` hooks only	`10.685 kB` `4.104 kB`
`react-portal` Portal	`10.576 kB` `3.875 kB`
`react-positioning` usePositioning	`19.7 kB` `7.404 kB`
`react-provider` FluentProvider	`15.755 kB` `5.883 kB`
`react-select` Select	`20.846 kB` `7.346 kB`
`react-spinner` Spinner	`19.977 kB` `6.438 kB`
`react-text` Text - Default	`11.782 kB` `4.605 kB`
`react-text` Text - Wrappers	`15.092 kB` `5.044 kB`
`react-textarea` Textarea	`25.013 kB` `8.133 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`29.65 kB` `6.444 kB`
`react-theme` Teams: Light theme	`17.486 kB` `5.057 kB`
`react-utilities` SSRProvider	`180 B` `159 B`

_{🤖 This report was generated against 4398603346a6c63196767078bf0a4faa617a760a}

size-auditor · 2022-09-26T08:00:39Z

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 4398603346a6c63196767078bf0a4faa617a760a (build)

fabricteam · 2022-09-26T08:03:00Z

Perf Analysis (`@fluentui/react-components`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1303	1316	5000
Button	mount	961	963	5000
FluentProvider	mount	1575	1584	5000
FluentProviderWithTheme	mount	635	630	10
FluentProviderWithTheme	virtual-rerender	586	585	10
FluentProviderWithTheme	virtual-rerender-with-unmount	624	630	10
MakeStyles	mount	1908	1927	50000
SpinButton	mount	2557	2469	5000

fabricteam · 2022-09-26T08:10:29Z

Perf Analysis (`@fluentui/react-northstar`)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AccordionMinimalPerf.default	119	110	1.08:1
BoxMinimalPerf.default	287	266	1.08:1
ButtonMinimalPerf.default	140	133	1.05:1
LayoutMinimalPerf.default	299	286	1.05:1
ChatMinimalPerf.default	623	598	1.04:1
DividerMinimalPerf.default	308	295	1.04:1
LabelMinimalPerf.default	320	307	1.04:1
TableMinimalPerf.default	338	326	1.04:1
AlertMinimalPerf.default	222	216	1.03:1
AttachmentSlotsPerf.default	922	891	1.03:1
ItemLayoutMinimalPerf.default	977	951	1.03:1
ListNestedPerf.default	470	458	1.03:1
PopupMinimalPerf.default	543	529	1.03:1
PortalMinimalPerf.default	151	147	1.03:1
ButtonSlotsPerf.default	459	452	1.02:1
DropdownMinimalPerf.default	2278	2235	1.02:1
FormMinimalPerf.default	311	306	1.02:1
HeaderMinimalPerf.default	296	290	1.02:1
HeaderSlotsPerf.default	634	619	1.02:1
RadioGroupMinimalPerf.default	361	355	1.02:1
SegmentMinimalPerf.default	287	280	1.02:1
TooltipMinimalPerf.default	1999	1965	1.02:1
TreeMinimalPerf.default	687	672	1.02:1
CardMinimalPerf.default	438	435	1.01:1
ChatWithPopoverPerf.default	311	309	1.01:1
DatepickerMinimalPerf.default	4980	4954	1.01:1
DialogMinimalPerf.default	646	641	1.01:1
EmbedMinimalPerf.default	3068	3032	1.01:1
LoaderMinimalPerf.default	561	555	1.01:1
MenuButtonMinimalPerf.default	1431	1419	1.01:1
RosterPerf.default	1787	1774	1.01:1
ReactionMinimalPerf.default	304	301	1.01:1
ImageMinimalPerf.default	316	317	1:1
ListCommonPerf.default	511	512	1:1
ListWith60ListItems.default	509	508	1:1
ProviderMergeThemesPerf.default	1073	1068	1:1
ProviderMinimalPerf.default	346	345	1:1
SkeletonMinimalPerf.default	285	285	1:1
TableManyItemsPerf.default	1557	1560	1:1
TextMinimalPerf.default	270	270	1:1
ToolbarMinimalPerf.default	770	769	1:1
AnimationMinimalPerf.default	438	443	0.99:1
AvatarMinimalPerf.default	153	155	0.99:1
CarouselMinimalPerf.default	376	381	0.99:1
CheckboxMinimalPerf.default	1714	1723	0.99:1
DropdownManyItemsPerf.default	550	553	0.99:1
FlexMinimalPerf.default	238	240	0.99:1
InputMinimalPerf.default	943	948	0.99:1
ListMinimalPerf.default	424	429	0.99:1
RefMinimalPerf.default	180	181	0.99:1
SplitButtonMinimalPerf.default	3651	3679	0.99:1
StatusMinimalPerf.default	546	549	0.99:1
TreeWith60ListItems.default	132	134	0.99:1
VideoMinimalPerf.default	601	608	0.99:1
AttachmentMinimalPerf.default	122	124	0.98:1
ButtonOverridesMissPerf.default	1087	1107	0.98:1
GridMinimalPerf.default	274	279	0.98:1
CustomToolbarPrototype.default	2258	2301	0.98:1
ChatDuplicateMessagesPerf.default	226	232	0.97:1
MenuMinimalPerf.default	702	725	0.97:1
SliderMinimalPerf.default	1326	1363	0.97:1
IconMinimalPerf.default	522	536	0.97:1
TextAreaMinimalPerf.default	376	387	0.97:1

fabricteam · 2022-09-26T08:24:28Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	1185	1212	5000
Breadcrumb	mount	2822	2792	1000
Checkbox	mount	2647	2649	5000
CheckboxBase	mount	2360	2346	5000
ChoiceGroup	mount	4289	4248	5000
ComboBox	mount	1156	1170	1000
CommandBar	mount	9283	9221	1000
ContextualMenu	mount	10085	9996	1000
DefaultButton	mount	1364	1355	5000
DetailsRow	mount	3363	3359	5000
DetailsRowFast	mount	3367	3314	5000
DetailsRowNoStyles	mount	3219	3196	5000
Dialog	mount	2922	2953	1000
DocumentCardTitle	mount	584	583	1000
Dropdown	mount	3167	3182	5000
FocusTrapZone	mount	1960	1980	5000
FocusZone	mount	1919	1904	5000
GroupedList	mount	48382	53818	2
GroupedList	virtual-rerender	22921	22832	2
GroupedList	virtual-rerender-with-unmount	82736	82720	2
GroupedListV2	mount	555	557	2
GroupedListV2	virtual-rerender	519	528	2
GroupedListV2	virtual-rerender-with-unmount	553	555	2
IconButton	mount	1807	1786	5000
Label	mount	743	755	5000
Layer	mount	4124	4128	5000
Link	mount	864	856	5000
MenuButton	mount	1632	1630	5000
MessageBar	mount	2385	2348	5000
Nav	mount	3076	3019	1000
OverflowSet	mount	1411	1376	5000
Panel	mount	2486	2476	1000
Persona	mount	1255	1264	1000
Pivot	mount	1527	1517	1000
PrimaryButton	mount	1505	1482	5000
Rating	mount	7030	6996	5000
SearchBox	mount	1510	1513	5000
Shimmer	mount	2904	2891	5000
Slider	mount	2113	2092	5000
SpinButton	mount	4266	4389	5000
Spinner	mount	834	815	5000
SplitButton	mount	2839	2834	5000
Stack	mount	892	906	5000
StackWithIntrinsicChildren	mount	2247	2221	5000
StackWithTextChildren	mount	4934	4929	5000
SwatchColorPicker	mount	9433	9446	5000
TagPicker	mount	2324	2335	5000
TeachingBubble	mount	74916	73870	5000
Text	mount	817	824	5000
TextField	mount	1515	1555	5000
ThemeProvider	mount	1445	1450	5000
ThemeProvider	virtual-rerender	1141	1133	5000
ThemeProvider	virtual-rerender-with-unmount	2005	2003	5000
Toggle	mount	1112	1120	5000
buttonNative	mount	530	527	5000

ling1726 added 20 commits September 8, 2022 11:17

initial attempt at reusing hooks

95f672b

chaning state and new row enhancer

d6559de

sorting should happen in userland

6425145

usePagination

c2d10bc

merge master

d73b625

Merge remote-tracking branch 'origin/master' into feat/use-table-comp…

3054388

…osition

Merge branch 'master' into feat/use-table-composition

1807fe6

Merge remote-tracking branch 'origin/master' into feat/use-table-comp…

011da6b

…osition

implement column sizing

487c23e

improved composition

9964d18

update sort type so it returns enhanced rows

0e22b3d

fix ColumnResize update styles

7715ddb

virtualization stories

d599b29

update test and md

9bc33df

vr tests should test both layout types

52ead23

changefiles

8e7d45f

Merge branch 'feat/table-flex-layout' into feat/use-table-composition

d972a1e

add more virtualization libraries

4d1f41d

add sort and selection

f19cf60

msft-fluent-ui-bot assigned tomi-msft Sep 26, 2022

github-actions bot added this to the September Project Cycle Q1 2022 milestone Sep 26, 2022

This was referenced Sep 26, 2022

BREAKING: refactor useTable to be composable #24947

Merged

Table/DataGrid: Composable logic #24226

Closed

ling1726 closed this Sep 26, 2022

ling1726 mentioned this pull request Sep 27, 2022

Implement column management features #24965

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Feat/use table composition #24944

Feat/use table composition #24944

Uh oh!

ling1726 commented Sep 26, 2022

Uh oh!

fabricteam commented Sep 26, 2022

Uh oh!

size-auditor bot commented Sep 26, 2022

Uh oh!

fabricteam commented Sep 26, 2022

Uh oh!

fabricteam commented Sep 26, 2022

Uh oh!

fabricteam commented Sep 26, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Feat/use table composition #24944

Feat/use table composition #24944

Uh oh!

Conversation

ling1726 commented Sep 26, 2022

Current Behavior

New Behavior

Related Issue(s)

Uh oh!

fabricteam commented Sep 26, 2022

📊 Bundle size report

Uh oh!

size-auditor bot commented Sep 26, 2022

Asset size changes

Uh oh!

fabricteam commented Sep 26, 2022

Perf Analysis (@fluentui/react-components)

Uh oh!

fabricteam commented Sep 26, 2022

Perf Analysis (@fluentui/react-northstar)

Uh oh!

fabricteam commented Sep 26, 2022

Perf Analysis (@fluentui/react)

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Perf Analysis (`@fluentui/react-components`)

Perf Analysis (`@fluentui/react-northstar`)

Perf Analysis (`@fluentui/react`)