feat: Support row virtualization using react-window in table widget #16872

sbalaji1192 · 2022-09-19T10:18:54Z

Introducing the virtual row functionality to improve the performance of the table when there are a lot of rows to render.
React-window library is used to implement the virtual row functionality. This functionality will only be enabled if the cell wrapping of all the columns is disabled since the virtual expects each row of constant height.

Fixes #16567
Fixes #17178

Type of change

New feature (non-breaking change which adds functionality)

How Has This Been Tested?

Following cypress tests have been added

should check that row is getting rendered.
should check that virtual rows are getting rendered when scrolling through the table
should check that the virtual rows feature is turned off when cell wrapping is enabled

Checklist:

My code follows the style guidelines of this project
I have performed a self-review of my own code
I have commented my code, particularly in hard-to-understand areas
I have made corresponding changes to the documentation
My changes generate no new warnings
I have added tests that prove my fix is effective or that my feature works
New and existing unit tests pass locally with my changes

vercel · 2022-09-19T10:18:57Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
appsmith	✅ Ready (Inspect)	Visit Preview	Oct 4, 2022 at 10:13AM (UTC)

github-actions · 2022-09-19T10:50:48Z

Unable to find test scripts. Please add necessary tests to the PR.

github-actions · 2022-09-19T10:50:53Z

Unable to find test scripts. Please add necessary tests to the PR.

github-actions · 2022-09-19T10:51:01Z

Unable to find test scripts. Please add necessary tests to the PR.

github-actions · 2022-09-19T10:51:01Z

Unable to find test scripts. Please add necessary tests to the PR.

github-actions · 2022-09-19T10:51:03Z

Unable to find test scripts. Please add necessary tests to the PR.

github-actions · 2022-09-19T10:51:22Z

Unable to find test scripts. Please add necessary tests to the PR.

github-actions · 2022-09-19T10:51:23Z

Unable to find test scripts. Please add necessary tests to the PR.

github-actions · 2022-09-19T10:51:24Z

Unable to find test scripts. Please add necessary tests to the PR.

github-actions · 2022-09-19T10:51:29Z

Unable to find test scripts. Please add necessary tests to the PR.

laveena-en · 2022-09-21T07:02:51Z

Tested and verified for:
Row Virtualization
Regression on the table widget

ashit-rath

@sbalaji1192 Can you update the PR description?

app/client/src/widgets/TableWidgetV2/component/Row.tsx

app/client/src/widgets/TableWidgetV2/component/Table.tsx

github-actions · 2022-09-22T05:40:21Z

Unable to find test scripts. Please add necessary tests to the PR.

github-actions · 2022-09-29T16:46:04Z

This PR has not seen activitiy for a while. It will be closed in 7 days unless further activity is detected.

sbalaji1192 · 2022-10-03T11:12:34Z

/ok-to-test sha=d2b4338

github-actions · 2022-10-03T13:18:07Z

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/3173856088.
Workflow: Appsmith External Integration Test Workflow.
Commit: d2b4338.
PR: 16872.

github-actions · 2022-10-04T04:49:21Z

Unable to find test scripts. Please add necessary tests to the PR.

sbalaji1192 · 2022-10-04T05:27:56Z

/ok-to-test sha=0706d29

github-actions · 2022-10-04T05:28:20Z

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/3179638284.
Workflow: Appsmith External Integration Test Workflow.
Commit: 0706d29.
PR: 16872.

github-actions · 2022-10-04T06:20:40Z

UI Performance test run logs and artifacts: https://github.com/appsmithorg/appsmith/actions/runs/3179638284.
Commit: ``.
Results:

Click to view performance test results

	Run 1 _^(ms)	Run 2 _^(ms)	Run 3 _^(ms)	Run 4 _^(ms)	Run 5 _^(ms)	Minimum _^(ms)	Median _^(ms)	Mean _^(ms)	Range _^(%)	SD.Sample _^(%)	SD.Population _^(%)
SELECT_WIDGET_MENU_OPEN
scripting	951.14	1063.1	1037.18	1022.01	983.33	951.14	1022.01	1011.35	11.07	4.39	3.92
painting	10.83	10.52	7.26	17.51	7.48	7.26	10.52	10.72	95.62	38.62	34.51
rendering	647.29	747.57	735.37	702.03	711.7	647.29	711.7	708.79	14.15	5.49	4.91
SELECT_WIDGET_SELECT_OPTION
scripting	162.19	188.25	161.65	169.68	162.87	161.65	162.87	168.93	15.75	6.68	5.97
painting	3.31	5.93	5.97	4.36	7	3.31	5.93	5.31	69.49	27.50	24.67
rendering	319.05	340.77	314.1	346.97	304.04	304.04	319.05	324.99	13.21	5.60	5.01
SELECT_CATEGORY
scripting	364.3	376.87	349.78	371.28	342.15	342.15	364.3	360.88	9.62	4.04	3.61
painting	6.23	7.49	6.99	5.01	5.92	5.01	6.23	6.33	39.18	15.17	13.59
rendering	106.07	110.66	106.77	106.28	108.48	106.07	106.77	107.65	4.26	1.79	1.61
BIND_TABLE_DATA
scripting	1121.95	1159.85	1144.87	1008.98	1100.43	1008.98	1121.95	1107.22	13.63	5.36	4.80
painting	20.45	12.7	22.89	21.37	16.35	12.7	20.45	18.75	54.35	22.19	19.84
rendering	842.69	860.65	866.31	885.26	790.24	790.24	860.65	849.03	11.19	4.26	3.81
CLICK_ON_TABLE_ROW
scripting	939.42	1009.05	915.54	988.67	789.94	789.94	939.42	928.52	23.60	9.26	8.29
painting	13.77	16.24	13.67	9.76	12.55	9.76	13.67	13.2	49.09	17.80	15.91
rendering	305.94	331.1	313.33	315.33	294.05	294.05	313.33	311.95	11.88	4.35	3.89
UPDATE_POST_TITLE
scripting	1502.96	1499.56	1440.78	1511.19	1455.25	1440.78	1499.56	1481.95	4.75	2.14	1.91
painting	14.29	17.26	19.25	14.92	16.03	14.29	16.03	16.35	30.34	12.11	10.83
rendering	622.53	664.78	618.98	641.18	608.89	608.89	622.53	631.27	8.85	3.50	3.13
OPEN_MODAL
scripting	491.73	489.43	947.95	438.89	430.78	430.78	489.43	559.76	92.39	39.09	34.96
painting	25.13	10.17	13.08	15.27	13.31	10.17	13.31	15.39	97.21	37.30	33.33
rendering	1241.29	1228.25	1211.41	1162.63	1189.65	1162.63	1211.41	1206.65	6.52	2.59	2.32
CLOSE_MODAL
scripting	223.67	217.9	219.01	202.94	178.64	178.64	217.9	208.43	21.60	8.82	7.89
painting	5.09	5.63	7.76	7.92	6.71	5.09	6.71	6.62	42.75	19.03	16.92
rendering	933.12	940.96	912.14	882.33	895.2	882.33	912.14	912.75	6.42	2.71	2.42

sbalaji1192 · 2022-10-04T10:08:39Z

/ok-to-test sha=d8630a0

github-actions · 2022-10-04T10:10:58Z

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/3181258800.
Workflow: Appsmith External Integration Test Workflow.
Commit: d8630a0.
PR: 16872.

github-actions · 2022-10-04T11:05:59Z

UI Performance test run logs and artifacts: https://github.com/appsmithorg/appsmith/actions/runs/3181258800.
Commit: ``.
Results:

Click to view performance test results

	Run 1 _^(ms)	Run 2 _^(ms)	Run 3 _^(ms)	Run 4 _^(ms)	Run 5 _^(ms)	Minimum _^(ms)	Median _^(ms)	Mean _^(ms)	Range _^(%)	SD.Sample _^(%)	SD.Population _^(%)
SELECT_CATEGORY
scripting	345.42	386.38	367.61	416.89	467.15	345.42	386.38	396.69	30.69	11.93	10.67
painting	3.07	3.46	7.01	7.31	4.38	3.07	4.38	5.05	83.96	39.41	35.25
rendering	106.81	107.88	106.27	114.96	122.73	106.27	107.88	111.73	14.73	6.34	5.67
BIND_TABLE_DATA
scripting	1040.55	1081.55	1155.43	1818.76	1331.36	1040.55	1155.43	1285.53	60.54	24.75	22.14
painting	18.89	18.19	25.46	29.44	39.34	18.19	25.46	26.26	80.54	33.05	29.55
rendering	802.82	817.76	890.56	679.11	1007.01	679.11	817.76	839.45	39.06	14.37	12.85
CLICK_ON_TABLE_ROW
scripting	843.33	904.05	956.01	1294.33	1147.45	843.33	956.01	1029.03	43.83	18.17	16.25
painting	12.52	8.76	9.55	15.75	12.51	8.76	12.51	11.82	59.14	23.52	21.07
rendering	290.64	322.06	332.66	372.01	369.17	290.64	332.66	337.31	24.12	10.11	9.04
UPDATE_POST_TITLE
scripting	922.67	868.57	947.74	1263.82	1300.75	868.57	947.74	1060.71	40.74	19.30	17.26
painting	8.29	9.35	9.62	14.13	13.03	8.29	9.62	10.88	53.68	23.35	20.86
rendering	567.76	584.51	607.98	706.66	765.36	567.76	607.98	646.45	30.57	13.23	11.84
OPEN_MODAL
scripting	502.91	480.77	492.09	598.59	540.24	480.77	502.91	522.92	22.53	9.15	8.18
painting	15.59	10.66	14.07	22.59	24.58	10.66	15.59	17.5	79.54	33.60	30.06
rendering	1190.08	1209.06	1274.01	1373.52	1297.3	1190.08	1274.01	1268.79	14.46	5.79	5.18
CLOSE_MODAL
scripting	200.26	233.23	230.31	289.3	310.34	200.26	233.23	252.69	43.56	18.02	16.11
painting	4.75	11.37	5.55	7.06	22.46	4.75	7.06	10.24	172.95	71.19	63.67
rendering	866.57	889.26	964.8	1016.71	1100.71	866.57	964.8	967.61	24.20	9.87	8.83
SELECT_WIDGET_MENU_OPEN
scripting	312.56	281.41	311.44	391.6	341.47	281.41	312.56	327.7	33.63	12.68	11.34
painting	8.45	8.25	12.24	8.88	18.87	8.25	8.88	11.34	93.65	39.77	35.63
rendering	698.47	639.47	688.88	773.26	698.94	639.47	698.47	699.8	19.12	6.84	6.12
SELECT_WIDGET_SELECT_OPTION
scripting	165.47	194.26	151.6	180.6	205.48	151.6	180.6	179.48	30.02	12.05	10.78
painting	3.79	4.95	3.1	2.91	5.99	2.91	3.79	4.15	74.22	31.33	28.19
rendering	304.17	321.22	311.48	323.98	319.45	304.17	319.45	316.06	6.27	2.57	2.30

laveena-en · 2022-10-05T04:08:04Z

Tested and verified:

-Performance testing with large number of records (1000 records, 40 cols)
-Regression on table widget.
-Functionality in view and edit mode.

sbalaji1192 · 2022-10-06T04:46:01Z

/ok-to-test sha=d8630a0

github-actions · 2022-10-06T04:46:22Z

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/3194598201.
Workflow: Appsmith External Integration Test Workflow.
Commit: d8630a0.
PR: 16872.

github-actions · 2022-10-06T05:26:28Z

UI Performance test run logs and artifacts: https://github.com/appsmithorg/appsmith/actions/runs/3194598201.
Commit: ``.
Results:

Click to view performance test results

	Run 1 _^(ms)	Run 2 _^(ms)	Run 3 _^(ms)	Run 4 _^(ms)	Run 5 _^(ms)	Minimum _^(ms)	Median _^(ms)	Mean _^(ms)	Range _^(%)	SD.Sample _^(%)	SD.Population _^(%)
SELECT_CATEGORY
scripting	329	369.74	357.74	346.77	328.53	328.53	346.77	346.36	11.90	5.20	4.65
painting	6.83	9.2	5.34	4.48	3.86	3.86	5.34	5.94	89.90	36.03	32.15
rendering	106.48	111	104.33	106.49	112.51	104.33	106.49	108.16	7.56	3.18	2.84
BIND_TABLE_DATA
scripting	1028.3	1069.25	1119.82	1119.48	1069.25	1028.3	1069.25	1081.22	8.46	3.59	3.21
painting	15.51	27.78	28.98	9.48	17.91	9.48	17.91	19.93	97.84	41.70	37.28
rendering	796.75	805.39	839.79	802.5	779.18	779.18	802.5	804.72	7.53	2.75	2.45
CLICK_ON_TABLE_ROW
scripting	839.93	875.36	889.03	887.31	885.47	839.93	885.47	875.42	5.61	2.35	2.10
painting	9.12	8.81	8.17	14.78	12.01	8.17	9.12	10.58	62.48	26.18	23.44
rendering	291.85	304.82	304.21	295.43	304.45	291.85	304.21	300.15	4.32	2.03	1.81
UPDATE_POST_TITLE
scripting	915.6	853.95	865.19	864.91	819.62	819.62	864.91	863.85	11.11	3.98	3.56
painting	13.74	7.61	13.65	11.95	10.6	7.61	11.95	11.51	53.26	22.07	19.72
rendering	583.76	579.66	589.76	622.93	574.03	574.03	583.76	590.03	8.29	3.27	2.92
OPEN_MODAL
scripting	473.71	487.18	468.49	460.38	439.9	439.9	468.49	465.93	10.15	3.76	3.36
painting	11.4	14.74	11.96	8.56	17.43	8.56	11.96	12.82	69.19	26.44	23.63
rendering	1193.87	1168.62	1178.64	1176.42	1146.21	1146.21	1176.42	1172.75	4.06	1.49	1.33
CLOSE_MODAL
scripting	210.54	207.68	243.83	188.93	251.19	188.93	210.54	220.43	28.24	11.89	10.63
painting	4.48	6.36	4.55	9.34	5.18	4.48	5.18	5.98	81.27	33.78	30.27
rendering	914.18	880.76	891.24	893.62	970.46	880.76	893.62	910.05	9.86	3.94	3.53
SELECT_WIDGET_MENU_OPEN
scripting	293.91	287.52	299.04	284.26	309.99	284.26	293.91	294.94	8.72	3.45	3.08
painting	6.05	5.58	7.92	7.33	10.03	5.58	7.33	7.38	60.30	23.85	21.27
rendering	629.72	653.3	669.46	644.78	652.16	629.72	652.16	649.88	6.11	2.22	1.99
SELECT_WIDGET_SELECT_OPTION
scripting	158.24	155.12	170.41	150.41	147.65	147.65	155.12	156.37	14.56	5.67	5.06
painting	1.99	2.54	12.09	4.99	2.33	1.99	2.54	4.79	210.86	88.73	79.33
rendering	303.88	305.62	328.98	303.19	302.45	302.45	303.88	308.82	8.59	3.67	3.28

sbalaji1192 force-pushed the feat/table-row-virtualiztion branch from ec645b8 to 706e01e Compare September 19, 2022 10:23

vercel bot deployed to Preview – appsmith September 19, 2022 10:24 View deployment

github-actions bot added App Viewers Pod This label assigns issues to the app viewers pod Low An issue that is neither critical nor breaks a user flow Table Widget V2 Issues related to Table Widget V2 Task A simple Todo Enhancement New feature or request labels Sep 19, 2022

vercel bot deployed to Preview – appsmith September 19, 2022 11:33 View deployment

sbalaji1192 requested a review from ashit-rath September 21, 2022 09:17

ashit-rath reviewed Sep 22, 2022

View reviewed changes

github-actions bot added the Stale label Sep 29, 2022

sbalaji1192 added 6 commits September 30, 2022 09:55

feat: Support row virtualization using react-window in table widget

c188c0a

replace literals with const

387cea1

remove unused variables

77d7062

i

920a9ba

i

29fa8b9

i

59c12c0

fast dom

d2b4338

sbalaji1192 removed the Stale label Oct 3, 2022

vercel bot deployed to Preview – appsmith October 3, 2022 11:12 View deployment

sbalaji1192 requested a review from ashit-rath October 3, 2022 11:13

ashit-rath previously approved these changes Oct 3, 2022

View reviewed changes

github-actions bot added High This issue blocks a user from building or impacts a lot of users potential-duplicate This label marks issues that are potential duplicates of already open issues Table Widget labels Oct 4, 2022

i

0706d29

sbalaji1192 dismissed ashit-rath’s stale review via 0706d29 October 4, 2022 05:25

vercel bot deployed to Preview – appsmith October 4, 2022 05:26 View deployment

remove fastdom

d8630a0

vercel bot deployed to Preview – appsmith October 4, 2022 10:08 View deployment

sbalaji1192 requested a review from ashit-rath October 6, 2022 04:42

ashit-rath approved these changes Oct 6, 2022

View reviewed changes

sbalaji1192 merged commit 8145803 into release Oct 6, 2022

sbalaji1192 deleted the feat/table-row-virtualiztion branch October 6, 2022 09:32

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Support row virtualization using react-window in table widget #16872

feat: Support row virtualization using react-window in table widget #16872

sbalaji1192 commented Sep 19, 2022 •

edited

vercel bot commented Sep 19, 2022 •

edited

github-actions bot commented Sep 19, 2022

github-actions bot commented Sep 19, 2022

github-actions bot commented Sep 19, 2022

github-actions bot commented Sep 19, 2022

github-actions bot commented Sep 19, 2022

github-actions bot commented Sep 19, 2022

github-actions bot commented Sep 19, 2022

github-actions bot commented Sep 19, 2022

github-actions bot commented Sep 19, 2022

laveena-en commented Sep 21, 2022

ashit-rath left a comment

github-actions bot commented Sep 22, 2022

github-actions bot commented Sep 29, 2022

sbalaji1192 commented Oct 3, 2022

github-actions bot commented Oct 3, 2022

github-actions bot commented Oct 4, 2022

sbalaji1192 commented Oct 4, 2022

github-actions bot commented Oct 4, 2022

github-actions bot commented Oct 4, 2022

sbalaji1192 commented Oct 4, 2022

github-actions bot commented Oct 4, 2022

github-actions bot commented Oct 4, 2022

laveena-en commented Oct 5, 2022

sbalaji1192 commented Oct 6, 2022

github-actions bot commented Oct 6, 2022

github-actions bot commented Oct 6, 2022

feat: Support row virtualization using react-window in table widget #16872

feat: Support row virtualization using react-window in table widget #16872

Conversation

sbalaji1192 commented Sep 19, 2022 • edited

Type of change

How Has This Been Tested?

Checklist:

vercel bot commented Sep 19, 2022 • edited

github-actions bot commented Sep 19, 2022

github-actions bot commented Sep 19, 2022

github-actions bot commented Sep 19, 2022

github-actions bot commented Sep 19, 2022

github-actions bot commented Sep 19, 2022

github-actions bot commented Sep 19, 2022

github-actions bot commented Sep 19, 2022

github-actions bot commented Sep 19, 2022

github-actions bot commented Sep 19, 2022

laveena-en commented Sep 21, 2022

ashit-rath left a comment

Choose a reason for hiding this comment

github-actions bot commented Sep 22, 2022

github-actions bot commented Sep 29, 2022

sbalaji1192 commented Oct 3, 2022

github-actions bot commented Oct 3, 2022

github-actions bot commented Oct 4, 2022

sbalaji1192 commented Oct 4, 2022

github-actions bot commented Oct 4, 2022

github-actions bot commented Oct 4, 2022

sbalaji1192 commented Oct 4, 2022

github-actions bot commented Oct 4, 2022

github-actions bot commented Oct 4, 2022

laveena-en commented Oct 5, 2022

sbalaji1192 commented Oct 6, 2022

github-actions bot commented Oct 6, 2022

github-actions bot commented Oct 6, 2022

sbalaji1192 commented Sep 19, 2022 •

edited

vercel bot commented Sep 19, 2022 •

edited