feat: Adds virtualization option to antd based Table component (#22135)

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>
Co-authored-by: Lyndsi Kay Williams <55605634+lyndsiWilliams@users.noreply.github.com>

superset-frontend/src/components/Table/Table.overview.mdx

@@ -183,14 +183,93 @@ The table displays a set number of rows at a time, the user navigates the table
 The default page size and page size options for the menu are configurable via the `pageSizeOptions` and `defaultPageSize` props.
 NOTE: Pagination controls will only display when the data for the table has more records than the default page size.
 
-<Story id="design-system-components-table-examples--many-columns" />
+<Story id="design-system-components-table-examples--pagination" />
 
 ```
 <Table pageSizeOptions={[5, 10, 15, 20, 25] defaultPageSize={10} />
 ```
 
 ---
 
+### Server Pagination
+
+The table can be configured for async data fetching to get partial data sets while showing pagination controls that let the user navigate through data.
+To override the default paging, which uses `data.length` to determine the record count, populate the `recordCount` prop with the total number of records
+contained in the dataset on the server being paged through. When the user navigates through the paged data it will invoke the `onChange` callback
+function enabling data fetching to occur when the user changes the page.
+
+<Story id="design-system-components-table-examples--server-pagination" />
+
+```
+interface BasicData {
+  name: string;
+  category: string;
+  price: number;
+  description?: string;
+  key: number;
+}
+
+const generateData = (startIndex: number, pageSize: number): BasicData[] => {
+  const data: BasicData[] = [];
+  for (let i = 0; i < pageSize; i += 1) {
+    const recordIndex = startIndex + i;
+    data.push({
+      key: recordIndex,
+      name: `Dynamic Record ${recordIndex}`,
+      category: 'Disk Storage',
+      price: recordIndex * 2.59,
+      description: 'A random description',
+    });
+  }
+  return data;
+};
+
+const ServerPaginationTable = () => {
+  const [data, setData] = useState(generateData(0, 5));
+  const [loading, setLoading] = useState(false);
+  // This should really be calculated server side for the data set being paged through
+  const recordCount = 5000;
+
+  const handleChange = (pagination: TablePaginationConfig) => {
+    const pageSize = pagination?.pageSize ?? 5;
+    const current = pagination?.current ?? 0;
+    setLoading(true);
+    // simulate a fetch
+    setTimeout(() => {
+      setData(generateData(current * pageSize, pageSize));
+      setLoading(false);
+    }, 1000);
+  };
+
+  return (
+    <Table
+      columns: paginationColumns,
+      size: TableSize.SMALL,
+      pageSizeOptions: ['10', '20', '50'],
+      defaultPageSize: 10,
+      data={data}
+      recordCount={5000}
+      onChange={handleChange}
+      loading={loading}
+    />
+  );
+};
+```
+
+---
+
+### Virtualization for Performance
+
+Table virtualization can enable viewing data with many columns and/or rows.
+Virtualization can be enabled via the `virtualize` prop.
+
+NOTE: Row event handlers will be ignored when table is running with `virtualize={true}`.
+Support for row event handlers may be added in future versions of the Table.
+
+<Story id="design-system-components-table-examples--virtualized-performance" />
+
+---
+
 ## Integration Checklist
 
 The following specifications are required every time a table is used. These choices should be intentional based on the specific user needs for the table instance.