fix(dataset): Page blanks on large data load (#11979)

* Implement pagination in <TableView> for Samples preview

* Increase page size

* Fix lint

* Render cells based on width

* Fix lint errors

* Additional tests and changes

* Search bar fix

* Additional fixes

* Suggested changes

superset-frontend/spec/javascripts/explore/utils_spec.jsx

@@ -23,6 +23,7 @@ import {
   buildV1ChartDataPayload,
   getExploreUrl,
   getExploreLongUrl,
+  getDataTablePageSize,
   shouldUseLegacyApi,
 } from 'src/explore/exploreUtils';
 import {
@@ -200,6 +201,20 @@ describe('exploreUtils', () => {
     });
   });
 
+  describe('getDataTablePageSize', () => {
+    it('divides samples data into pages dynamically', () => {
+      let pageSize;
+      pageSize = getDataTablePageSize(500);
+      expect(pageSize).toEqual(20);
+      pageSize = getDataTablePageSize(0);
+      expect(pageSize).toEqual(50);
+      pageSize = getDataTablePageSize(1);
+      expect(pageSize).toEqual(10000);
+      pageSize = getDataTablePageSize(1000000);
+      expect(pageSize).toEqual(5);
+    });
+  });
+
   describe('buildV1ChartDataPayload', () => {
     it('generate valid request payload despite no registered buildQuery', () => {
       const v1RequestPayload = buildV1ChartDataPayload({

superset-frontend/src/explore/components/DataTableControl.tsx

@@ -90,7 +90,7 @@ export const useFilteredTableData = (
     const formattedData = applyFormattingToTabularData(data);
     return formattedData.filter((row: Record<string, any>) =>
       Object.values(row).some(value =>
-        value.toString().toLowerCase().includes(filterText.toLowerCase()),
+        value?.toString().toLowerCase().includes(filterText.toLowerCase()),
       ),
     );
   }, [data, filterText]);

superset-frontend/src/explore/components/DataTablesPane.tsx

@@ -24,6 +24,7 @@ import Loading from 'src/components/Loading';
 import TableView, { EmptyWrapperType } from 'src/components/TableView';
 import { getChartDataRequest } from 'src/chart/chartAction';
 import { getClientErrorObject } from 'src/utils/getClientErrorObject';
+import { getDataTablePageSize } from 'src/explore/exploreUtils';
 import {
   CopyToClipboardButton,
   FilterInput,
@@ -181,6 +182,9 @@ export const DataTablesPane = ({
   };
 
   const renderDataTable = (type: string) => {
+    // restrict cell count to 10000 or min 5 rows to avoid crashing browser
+    const columnsLength = columns[type].length;
+    const pageSize = getDataTablePageSize(columnsLength);
     if (isLoading[type]) {
       return <Loading />;
     }
@@ -195,7 +199,8 @@ export const DataTablesPane = ({
         <TableView
           columns={columns[type]}
           data={filteredData[type]}
-          withPagination={false}
+          withPagination
+          pageSize={pageSize}
           noDataText={t('No data')}
           emptyWrapperType={EmptyWrapperType.Small}
           className="table-condensed"

superset-frontend/src/explore/exploreUtils.js

@@ -250,6 +250,14 @@ export function postForm(url, payload, target = '_blank') {
   document.body.removeChild(hiddenForm);
 }
 
+export function getDataTablePageSize(columnsLength) {
+  let pageSize;
+  if (columnsLength) {
+    pageSize = Math.ceil(Math.max(5, 10000 / columnsLength));
+  }
+  return pageSize || 50;
+}
+
 export const exportChart = ({
   formData,
   resultFormat = 'json',