feat(AnalyticalTable): Horizontal virtualization of table cells #640

Lukas742 · 2020-08-04T10:56:04Z

Thank you for your contribution! 👏

To get it merged faster, kindly review the checklist below:

Pull Request Checklist

Reviewed the Contributing Guidelines
- Especially the How to Contribute section
Correct commit message style

github-actions · 2020-08-04T11:01:35Z

Size Change: +872 B (0%)

Total Size: 158 kB

Filename	Size	Change
`packages/main/lib/AnalyticalTable.js`	16.8 kB	+872 B (5%)	🔍

ℹ️ View Unchanged

Filename	Size	Change
`packages/base/lib/createComponentStyles.js`	206 B	0 B
`packages/base/lib/CssSizeVariables.js`	918 B	0 B
`packages/base/lib/Device.js`	6.47 kB	0 B
`packages/base/lib/hooks.js`	1.38 kB	0 B
`packages/base/lib/Logger.js`	1.2 kB	0 B
`packages/base/lib/spacing.js`	997 B	0 B
`packages/base/lib/StyleClassHelper.js`	610 B	0 B
`packages/base/lib/ThemingParameters.js`	3.4 kB	0 B
`packages/base/lib/useConsolidatedRef.js`	271 B	0 B
`packages/base/lib/usePassThroughHtmlProps.js`	318 B	0 B
`packages/base/lib/useViewportRange.js`	460 B	0 B
`packages/base/lib/Utils.js`	647 B	0 B
`packages/charts/lib/BarChart.js`	3.81 kB	0 B
`packages/charts/lib/BarChartPlaceholder.js`	456 B	0 B
`packages/charts/lib/ColumnChart.js`	4.04 kB	0 B
`packages/charts/lib/ColumnChartPlaceholder.js`	514 B	0 B
`packages/charts/lib/components/ChartContainer.js`	880 B	0 B
`packages/charts/lib/components/ChartDataLabel.js`	605 B	0 B
`packages/charts/lib/components/ComposedChartPlaceholder.js`	878 B	0 B
`packages/charts/lib/components/XAxisTicks.js`	596 B	0 B
`packages/charts/lib/components/YAxisTicks.js`	513 B	0 B
`packages/charts/lib/ComposedChart.js`	4.77 kB	0 B
`packages/charts/lib/DonutChart.js`	2.73 kB	0 B
`packages/charts/lib/LineChart.js`	3.92 kB	0 B
`packages/charts/lib/LineChartPlaceholder.js`	529 B	0 B
`packages/charts/lib/MicroBarChart.js`	1.87 kB	0 B
`packages/charts/lib/PieChart.js`	2.67 kB	0 B
`packages/charts/lib/PieChartPlaceholder.js`	445 B	0 B
`packages/charts/lib/RadarChart.js`	2.01 kB	0 B
`packages/charts/lib/RadialChart.js`	1.08 kB	0 B
`packages/charts/lib/ScatterChart.js`	3.56 kB	0 B
`packages/charts/lib/ScatterChartPlaceholder.js`	535 B	0 B
`packages/charts/lib/useLegendItemClick.js`	391 B	0 B
`packages/charts/lib/Utils.js`	534 B	0 B
`packages/main/lib/ActionSheet.js`	1.21 kB	0 B
`packages/main/lib/AnalyticalCard.js`	748 B	0 B
`packages/main/lib/AnalyticalCardHeader.js`	2.69 kB	0 B
`packages/main/lib/AnalyticalTableScrollMode.js`	177 B	0 B
`packages/main/lib/Avatar.js`	417 B	0 B
`packages/main/lib/AvatarBackgroundColor.js`	219 B	0 B
`packages/main/lib/AvatarFitType.js`	151 B	0 B
`packages/main/lib/AvatarShape.js`	150 B	0 B
`packages/main/lib/AvatarSize.js`	155 B	0 B
`packages/main/lib/Badge.js`	300 B	0 B
`packages/main/lib/Bar.js`	1.28 kB	0 B
`packages/main/lib/BarDesign.js`	177 B	0 B
`packages/main/lib/Breadcrumbs.js`	718 B	0 B
`packages/main/lib/BreadcrumbsSeparatorStyle.js`	198 B	0 B
`packages/main/lib/BusyIndicator.js`	337 B	0 B
`packages/main/lib/BusyIndicatorSize.js`	167 B	0 B
`packages/main/lib/Button.js`	351 B	0 B
`packages/main/lib/ButtonDesign.js`	190 B	0 B
`packages/main/lib/Calendar.js`	352 B	0 B
`packages/main/lib/CalendarType.js`	212 B	0 B
`packages/main/lib/Card.js`	327 B	0 B
`packages/main/lib/Carousel.js`	424 B	0 B
`packages/main/lib/CarouselArrowsPlacement.js`	166 B	0 B
`packages/main/lib/CheckBox.js`	370 B	0 B
`packages/main/lib/ComboBox.js`	408 B	0 B
`packages/main/lib/ComboBoxItem.js`	289 B	0 B
`packages/main/lib/ContentDensity.js`	151 B	0 B
`packages/main/lib/CustomListItem.js`	344 B	0 B
`packages/main/lib/DatePicker.js`	465 B	0 B
`packages/main/lib/DateRangePicker.js`	484 B	0 B
`packages/main/lib/DateTimePicker.js`	471 B	0 B
`packages/main/lib/DeviationIndicator.js`	160 B	0 B
`packages/main/lib/Dialog.js`	363 B	0 B
`packages/main/lib/DurationPicker.js`	433 B	0 B
`packages/main/lib/FCLLayout.js`	236 B	0 B
`packages/main/lib/FileUploader.js`	383 B	0 B
`packages/main/lib/FilterBar.js`	6.76 kB	0 B
`packages/main/lib/FilterGroupItem.js`	1.23 kB	0 B
`packages/main/lib/FilterItem.js`	1.62 kB	0 B
`packages/main/lib/FilterType.js`	170 B	0 B
`packages/main/lib/FlexBox.js`	967 B	0 B
`packages/main/lib/FlexBoxAlignItems.js`	189 B	0 B
`packages/main/lib/FlexBoxDirection.js`	169 B	0 B
`packages/main/lib/FlexBoxJustifyContent.js`	194 B	0 B
`packages/main/lib/FlexBoxWrap.js`	154 B	0 B
`packages/main/lib/FlexibleColumnLayout.js`	370 B	0 B
`packages/main/lib/Form.js`	2.58 kB	0 B
`packages/main/lib/FormGroup.js`	400 B	0 B
`packages/main/lib/FormItem.js`	999 B	0 B
`packages/main/lib/GlobalStyleClasses.js`	151 B	0 B
`packages/main/lib/Grid.js`	1.58 kB	0 B
`packages/main/lib/GridPosition.js`	157 B	0 B
`packages/main/lib/GroupHeaderListItem.js`	313 B	0 B
`packages/main/lib/Icon.js`	323 B	0 B
`packages/main/lib/Input.js`	472 B	0 B
`packages/main/lib/InputType.js`	184 B	0 B
`packages/main/lib/Label.js`	322 B	0 B
`packages/main/lib/Link.js`	341 B	0 B
`packages/main/lib/LinkDesign.js`	191 B	0 B
`packages/main/lib/List.js`	432 B	0 B
`packages/main/lib/ListItemTypes.js`	160 B	0 B
`packages/main/lib/ListMode.js`	191 B	0 B
`packages/main/lib/ListSeparators.js`	186 B	0 B
`packages/main/lib/Loader.js`	1.3 kB	0 B
`packages/main/lib/LoaderType.js`	152 B	0 B
`packages/main/lib/MessageBox.js`	2.35 kB	0 B
`packages/main/lib/MessageBoxActions.js`	231 B	0 B
`packages/main/lib/MessageBoxTypes.js`	232 B	0 B
`packages/main/lib/MessageStrip.js`	351 B	0 B
`packages/main/lib/MessageStripType.js`	181 B	0 B
`packages/main/lib/MultiComboBox.js`	419 B	0 B
`packages/main/lib/MultiComboBoxItem.js`	309 B	0 B
`packages/main/lib/NotificationListGroupItem.js`	410 B	0 B
`packages/main/lib/NotificationListItem.js`	404 B	0 B
`packages/main/lib/NotificationOverflowAction.js`	310 B	0 B
`packages/main/lib/ObjectPage.js`	9.13 kB	0 B
`packages/main/lib/ObjectPageMode.js`	159 B	0 B
`packages/main/lib/ObjectPageSection.js`	1.25 kB	0 B
`packages/main/lib/ObjectPageSubSection.js`	1.08 kB	0 B
`packages/main/lib/ObjectStatus.js`	1.2 kB	0 B
`packages/main/lib/Option.js`	303 B	0 B
`packages/main/lib/Page.js`	2.03 kB	0 B
`packages/main/lib/PageBackgroundDesign.js`	183 B	0 B
`packages/main/lib/Panel.js`	379 B	0 B
`packages/main/lib/PanelAccessibleRoles.js`	201 B	0 B
`packages/main/lib/PlacementType.js`	175 B	0 B
`packages/main/lib/Popover.js`	485 B	0 B
`packages/main/lib/PopoverHorizontalAlign.js`	181 B	0 B
`packages/main/lib/PopoverPlacementType.js`	172 B	0 B
`packages/main/lib/PopoverVerticalAlign.js`	204 B	0 B
`packages/main/lib/Priority.js`	163 B	0 B
`packages/main/lib/ProductSwitch.js`	288 B	0 B
`packages/main/lib/ProductSwitchItem.js`	340 B	0 B
`packages/main/lib/ProgressIndicator.js`	359 B	0 B
`packages/main/lib/RadioButton.js`	378 B	0 B
`packages/main/lib/RatingIndicator.js`	345 B	0 B
`packages/main/lib/ResponsivePopover.js`	500 B	0 B
`packages/main/lib/SegmentedButton.js`	300 B	0 B
`packages/main/lib/Select.js`	333 B	0 B
`packages/main/lib/SemanticColor.js`	181 B	0 B
`packages/main/lib/ShellBar.js`	436 B	0 B
`packages/main/lib/ShellBarItem.js`	327 B	0 B
`packages/main/lib/SideNavigation.js`	328 B	0 B
`packages/main/lib/SideNavigationItem.js`	337 B	0 B
`packages/main/lib/SideNavigationSubItem.js`	329 B	0 B
`packages/main/lib/Size.js`	151 B	0 B
`packages/main/lib/Spinner.js`	1.2 kB	0 B
`packages/main/lib/StandardListItem.js`	407 B	0 B
`packages/main/lib/SuggestionItem.js`	397 B	0 B
`packages/main/lib/Switch.js`	330 B	0 B
`packages/main/lib/Tab.js`	362 B	0 B
`packages/main/lib/TabContainer.js`	393 B	0 B
`packages/main/lib/TabContainerTabsPlacement.js`	161 B	0 B
`packages/main/lib/TabLayout.js`	150 B	0 B
`packages/main/lib/Table.js`	346 B	0 B
`packages/main/lib/TableCell.js`	283 B	0 B
`packages/main/lib/TableColumn.js`	332 B	0 B
`packages/main/lib/TablePlaceholder.js`	771 B	0 B
`packages/main/lib/TableRow.js`	281 B	0 B
`packages/main/lib/TableScaleWidthMode.js`	169 B	0 B
`packages/main/lib/TableSelectionBehavior.js`	178 B	0 B
`packages/main/lib/TableSelectionMode.js`	182 B	0 B
`packages/main/lib/TabSeparator.js`	283 B	0 B
`packages/main/lib/Text.js`	798 B	0 B
`packages/main/lib/TextAlign.js`	183 B	0 B
`packages/main/lib/TextArea.js`	450 B	0 B
`packages/main/lib/ThemeProvider.js`	1.05 kB	0 B
`packages/main/lib/Themes.js`	188 B	0 B
`packages/main/lib/Timeline.js`	277 B	0 B
`packages/main/lib/TimelineItem.js`	337 B	0 B
`packages/main/lib/TimePicker.js`	399 B	0 B
`packages/main/lib/Title.js`	317 B	0 B
`packages/main/lib/TitleLevel.js`	163 B	0 B
`packages/main/lib/Toast.js`	330 B	0 B
`packages/main/lib/ToastPlacement.js`	208 B	0 B
`packages/main/lib/ToggleButton.js`	371 B	0 B
`packages/main/lib/Token.js`	206 B	0 B
`packages/main/lib/Tokenizer.js`	223 B	0 B
`packages/main/lib/Toolbar.js`	3 kB	0 B
`packages/main/lib/ToolbarDesign.js`	175 B	0 B
`packages/main/lib/ToolbarSeparator.js`	477 B	0 B
`packages/main/lib/ToolbarSpacer.js`	220 B	0 B
`packages/main/lib/ToolbarStyle.js`	153 B	0 B
`packages/main/lib/Tree.js`	363 B	0 B
`packages/main/lib/TreeItem.js`	334 B	0 B
`packages/main/lib/UploadCollection.js`	378 B	0 B
`packages/main/lib/UploadCollectionItem.js`	436 B	0 B
`packages/main/lib/UploadState.js`	170 B	0 B
`packages/main/lib/ValueState.js`	182 B	0 B
`packages/main/lib/VariantManagement.js`	2.05 kB	0 B
`packages/main/lib/VerticalAlign.js`	174 B	0 B
`packages/main/lib/withWebComponent.js`	1.58 kB	0 B

_{compressed-size-action}

coveralls · 2020-08-04T11:11:13Z

Coverage increased (+0.2%) to 63.976% when pulling 01c13b6 on feat/analytical-table-horizontal-virtualization into 07c5b6a on master.

…ation

…ation # Conflicts: # packages/main/src/components/AnalyticalTable/index.tsx

…ation

MarcusNotheis

I tried with this snippet in default story to generate lots of columns:

    args={{
      columns: new Array(500).fill(null).map((_, index) => ({ Header: `Header${index}`, accessor: ['name', 'age', 'friend.name', 'friend.age'][index % 4], id: index, width: 200 })),
    }}

I'm not sure whether this is caused by storybook or by the column virtualizer, but the UI was freezing all the time. In addition to that, can we change the right scrollbar position so that it is always visible?

packages/main/src/components/AnalyticalTable/index.tsx

…ation # Conflicts: # yarn.lock

…ation

…le-horizontal-virtualization

Lukas742 added 2 commits August 4, 2020 12:41

feat(AnalyticalTable): virtualize table cells horizontally

407ff4f

add typings

8b26abd

Lukas742 requested a review from MarcusNotheis August 4, 2020 10:57

update snapshots

e564991

Lukas742 and others added 2 commits August 10, 2020 08:28

Merge branch 'master' into feat/analytical-table-horizontal-virtualiz…

179d45e

…ation

Merge branch 'master' into feat/analytical-table-horizontal-virtualiz…

94f1291

…ation # Conflicts: # packages/main/src/components/AnalyticalTable/index.tsx

Lukas742 requested a review from vbersch as a code owner August 19, 2020 11:30

Lukas742 and others added 2 commits August 19, 2020 17:06

upgrade react-virtual, disable test

38e63d8

Merge branch 'master' into feat/analytical-table-horizontal-virtualiz…

9de9820

…ation

MarcusNotheis requested changes Aug 25, 2020

View reviewed changes

packages/main/src/components/AnalyticalTable/index.tsx Outdated Show resolved Hide resolved

Lukas742 marked this pull request as draft August 25, 2020 13:25

Lukas742 added 14 commits August 28, 2020 10:32

wip

a5bd494

WiP: virtualize header

3e136a3

WiP: fix resizing

997276c

fix column resize + cleanup

e95b5d4

add overscanCountHorizontal prop

3744ec9

update demo

89965c2

fix drag and drop

d6697e6

use correct instance property for useVisibleColumnsWidth hook + cleanup

2145f32

add horizontal scrollTo

af5388a

Merge branch 'master' into feat/analytical-table-horizontal-virtualiz…

bdaba56

…ation # Conflicts: # yarn.lock

update yarn lock

5bf6b01

update scrollTo test

d2a99f6

update story

9600918

cleanup

c700ffd

Lukas742 marked this pull request as ready for review September 3, 2020 13:55

Lukas742 added 2 commits September 8, 2020 15:26

Merge branch 'master' into feat/analytical-table-horizontal-virtualiz…

4df219c

…ation

Merge branch 'master' into feat/analytical-table-horizontal-virtualiz…

4c4df2d

…ation

MarcusNotheis added 2 commits September 29, 2020 13:23

Merge remote-tracking branch 'origin/master' into feat/analytical-tab…

a270efd

…le-horizontal-virtualization

update typing

01c13b6

MarcusNotheis approved these changes Sep 29, 2020

View reviewed changes

MarcusNotheis merged commit 05b1e6e into master Sep 29, 2020

MarcusNotheis deleted the feat/analytical-table-horizontal-virtualization branch September 29, 2020 12:27

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(AnalyticalTable): Horizontal virtualization of table cells #640

feat(AnalyticalTable): Horizontal virtualization of table cells #640

Lukas742 commented Aug 4, 2020 •

edited

Loading

github-actions bot commented Aug 4, 2020 •

edited

Loading

coveralls commented Aug 4, 2020 •

edited

Loading

MarcusNotheis left a comment

feat(AnalyticalTable): Horizontal virtualization of table cells #640

feat(AnalyticalTable): Horizontal virtualization of table cells #640

Conversation

Lukas742 commented Aug 4, 2020 • edited Loading

Pull Request Checklist

github-actions bot commented Aug 4, 2020 • edited Loading

coveralls commented Aug 4, 2020 • edited Loading

MarcusNotheis left a comment

Choose a reason for hiding this comment

Lukas742 commented Aug 4, 2020 •

edited

Loading

github-actions bot commented Aug 4, 2020 •

edited

Loading

coveralls commented Aug 4, 2020 •

edited

Loading