feat: Adds virtualization option to antd based Table component

[eric-briscoe]

SUMMARY

This PR adds a virtualization prop to the recently added ant based Table component. Virtualization allows the tables to be used in cases where there are hundreds or thousands of columns, or large dataset with many thousands of rows with no pagination enabled.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

1. Checkout PR and open console at superset/superset-frontend
2. run npm ci
3. run npm run storybook and view docs and test virtualized table at: http://localhost:6006/?path=/story/design-system-components-table-overview--page under the "Virtualization for Performance" section, or interact directly with virtualized table instance at: http://localhost:6006/?path=/story/design-system-components-table-examples--virtualized-performance
4. Ensure the other table example stories work correctly
5. run npm run dev-server and go to http://localhost:9000/dataset/add/?testing to ensure the table instance used in the create dataset workflow still behaves as expected following instructions on this prior PR: feat: Integrate ant d table component into DatasetPanel #21948

ADDITIONAL INFORMATION

• Has associated issue:
• Required feature flags:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

[lyndsiWilliams]

Found a couple of theming nits, otherwise it looks great!

[EugeneTorap]

Hello @eric-briscoe. Thanks for this PR!
I have some questions about VirtualTable:

• There's react-virtual (5.3 kB) which 3 times less than rc-resize-observer (15.6 kB) and provides hook for this func component. Should we use react-virtual for this VirtualTable?
• Why do we use antd based Table instead of react-table. react-table already supports virtualization - virtualized-infinite-scrolling and virtualized-rows
• Can we also use the VirtualTable in FilterableTable for result data in SQL Lab

[eric-briscoe]

Hello @eric-briscoe. Thanks for this PR! I have some questions about VirtualTable:

• There's react-virtual (5.3 kB) which 3 times less than rc-resize-observer (15.6 kB) and provides hook for this func component. Should we use react-virtual for this VirtualTable?
• Why do we use antd based Table instead of react-table. react-table already supports virtualization - virtualized-infinite-scrolling and virtualized-rows
• Can we also use the VirtualTable in FilterableTable for result data in SQL Lab

@EugeneTorap Great questions!

@michael-s-molina noted in a diff comment on this PR we already have 'react-resize-detector' as a dependency used in components such as MetadataBar so I refactored to use that library in place of rc-resize-observer and this PR introduces no new dependencies now

Bigger picture, the introduction of src/components/Table based on antd is continuing of work started with #20159 (SIP-82) about more consistent theming, use of Ant Design components and establishing a formal design system using antd as a base for new components.

VitrualTable is never intended to be used directly. It is a sub component to enable the src/components/Table to operate in a virtualized mode if needed and implementation is based from this antd example, then modified for our needs: https://ant.design/components/table/#components-table-demo-virtual-list

If you check out PR and run storybook, you will see the documentation for using the new Table component, and in this PR docs on using the virtualize prop have been added.

As far as using a different library such as react-table I was asked to use antd for consistency in a single Table implementation so that features like column definitions, sort functions, cell renderers, data formats, etc can be consistent, and the UI controls are consistent wether we are using the Table with or without virtualization.

Regarding use in SqlLab, the goal is to replace eventually replace all tables across superset-frontend with the new src/components/Table (but never VirtualTable directly). Table uses VirtualTable as a sub component when the Table prop virtualize is set to true. This allows of are lot of the common logic between virtual and non-virtual rendering to be handled at the Table component level and not duplicated in VirtualTable.

I was asked to introduce the Table capability incrementally so that it can be used for the new dataset creation and editing workflows, fix issues in the drill to detail modal, and the target other high use areas of the app to start swapping out. Some Table features will be need to be exposed / added as we do this and features refined as it gets used more. I was also asked to make Table an abstraction to antd so that it can leverage antd components but streamline usage for Superset use cases and not require developer to understand / use antd directly. That is bigger picture goal for design system which will likely be a follow on SIP to SIP-82, but still doing some research / prototyping to get this ready for community discussion.

I would really appreciate more eyes on the storybook examples and documentation so we can improve it to make usage as clear and efficient as possible for all Superset contributors. If you have any time to take a look and have feedback please send my way!

[EugeneTorap]

@eric-briscoe Thank you for your answer! I like what you do!

[michael-s-molina]

Can we eliminate the scroll space of the table when there's no scroll?

[michael-s-molina]

When using virtualize the render function is not being called which prevents me from formatting the content.

[eric-briscoe]

When using virtualize the render function is not being called which prevents me from formatting the content.

@michael-s-molina support for the render function on column definitions when in virtualized mode has bee added in latest commit

[michael-s-molina]

@eric-briscoe Can you add the behavior to scroll to the top when paginating?

[michael-s-molina]

@eric-briscoe We have the concept of column formatting as you can see in the screenshot below:

I'm wondering about the best approach to implement this. It looks pretty similar to the filters concept provided by Ant Design's table. If we follow the same pattern, we can have formattings, defaultFormatting, onFormatting properties on ColumnsType to create the popup selector. We would also need to provide a TimeCell renderer that can be used when rendering dates/timestamps/numbers. WDYT?

[michael-s-molina]

Thanks for the PR and for addressing the comments @eric-briscoe. I'll tackle the formatting problem in another PR as we discussed.

[EugeneTorap]

@eric-briscoe @michael-s-molina
I found a bug when I use virtualize and usePagination={false} at the same time, I still see pagination!