docs: update table example to test larger dataset

packages/superset-ui-plugins-demo/storybook/stories/plugin-chart-table/Stories.jsx

@@ -3,7 +3,10 @@ import React from 'react';
 import { SuperChart } from '@superset-ui/chart';
 import dataLegacy from './dataLegacy';
 import data from './data';
-import bigData from './bigData';
+import generateData from './generateData';
+
+const dataset30Rows = { data: generateData(30) };
+const dataset1000Rows = { data: generateData(1000) };
 
 export default [
   {
@@ -117,10 +120,37 @@ export default [
           tableTimestampFormat: '%Y-%m-%d %H:%M:%S',
           timeseriesLimitMetric: null,
         }}
-        queryData={{ data: bigData }}
+        queryData={dataset30Rows}
+      />
+    ),
+    storyName: '30 rows 20 columns',
+    storyPath: 'plugin-chart-table|TableChartPlugin',
+  },
+  {
+    renderStory: () => (
+      <SuperChart
+        chartType="table2"
+        key="bigTable"
+        datasource={{
+          columnFormats: {},
+          verboseMap: {},
+        }}
+        formData={{
+          alignPn: true,
+          colorPn: true,
+          includeSearch: true,
+          metrics: [],
+          orderDesc: true,
+          pageLength: 0,
+          percentMetrics: [],
+          tableFilter: false,
+          tableTimestampFormat: '%Y-%m-%d %H:%M:%S',
+          timeseriesLimitMetric: null,
+        }}
+        queryData={dataset1000Rows}
       />
     ),
-    storyName: 'BigTable',
+    storyName: '1000 rows 20 columns',
     storyPath: 'plugin-chart-table|TableChartPlugin',
   },
 ];

packages/superset-ui-plugins-demo/storybook/stories/plugin-chart-table/generateData.js

@@ -0,0 +1,36 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable no-magic-numbers */
+/* eslint-disable sort-keys */
+
+const getHTML = () => {
+  const randomText = Array(Math.floor(Math.random() * 20))
+    .fill('very')
+    .join(' ');
+
+  return `<a href="www.google.com" target="_blank">Link Test with a ${randomText} long title</a>`;
+};
+
+export default function generateData(rowCount = 30, columnCount = 20) {
+  const columns = Array(columnCount)
+    .fill(0)
+    .map((_, i) => `clm ${i}`);
+
+  return Array(rowCount)
+    .fill(0)
+    .map((_, index) => ({
+      index: index + 1,
+      html: getHTML(),
+      ...columns.reduce(
+        (prev, key, i) => {
+          const obj = prev;
+          // eslint-disable-next-line no-restricted-properties
+          obj[key] = Math.round(Math.random() * Math.pow(10, i));
+
+          return obj;
+        },
+        {
+          ds: '2019-09-09',
+        },
+      ),
+    }));
+}