fix(tablevis): Set proper width for each column (#189)

* fix(tablevis): set the width for each column n * fix(fix comments): fix comments from pr * fix(revert to charwidth): revert to charwidth
apache · Nov 26, 2021 · d922d1e · d922d1e
1 parent 58308d1
commit d922d1e
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 3 deletions.
diff --git a/...rset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-table/src/Table.tsx b/...rset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-table/src/Table.tsx
@@ -9,6 +9,7 @@ import { getRenderer, ColumnType, heightType, Cell } from './renderer';
 type Props = {
   data: ParentRow[];
   height: number;
+  width: number;
   alignPositiveNegative?: boolean;
   colorPositiveNegative?: boolean;
   columns: ColumnType[];
@@ -34,6 +35,10 @@ const defaultProps = {
 
 const SEARCH_BAR_HEIGHT = 40;
 
+const CHAR_WIDTH = 10;
+
+const MAX_COLUMN_WIDTH = 500;
+
 export type TableProps = Props & Readonly<typeof defaultProps>;
 
 type InternalTableProps = TableProps & WithStylesProps;
@@ -148,6 +153,7 @@ class TableVis extends React.PureComponent<InternalTableProps, TableState> {
       alignPositiveNegative,
       colorPositiveNegative,
       height,
+      width,
       tableFilter,
       styles,
       includeSearch,
@@ -176,6 +182,18 @@ class TableVis extends React.PureComponent<InternalTableProps, TableState> {
       }
     });
 
+    const keys = dataToRender && dataToRender.length > 0 ? Object.keys(dataToRender[0].data) : [];
+    let calculatedWidth = 0;
+    keys.forEach(key => {
+      const maxLength = Math.max(...data.map(d => String(d.data[key]).length), key.length);
+      columnMetadata[key] = {
+        maxWidth: MAX_COLUMN_WIDTH,
+        width: maxLength * CHAR_WIDTH,
+        ...columnMetadata[key],
+      };
+      calculatedWidth += Math.min(maxLength * CHAR_WIDTH, MAX_COLUMN_WIDTH);
+    });
+
     const tableHeight = includeSearch ? height - SEARCH_BAR_HEIGHT : height;
 
     return (
@@ -199,12 +217,13 @@ class TableVis extends React.PureComponent<InternalTableProps, TableState> {
         )}
         <DataTable
           data={dataToRender}
-          keys={dataToRender && dataToRender.length > 0 ? Object.keys(dataToRender[0].data) : []}
+          keys={keys}
           columnMetadata={columnMetadata}
           zebra
           rowHeight={heightType}
           renderers={renderers}
           height={tableHeight}
+          width={Math.max(calculatedWidth, width)}
         />
       </div>
     );

diff --git a/.../superset-ui-plugins/packages/superset-ui-plugin-chart-table/src/legacy/transformProps.ts b/.../superset-ui-plugins/packages/superset-ui-plugin-chart-table/src/legacy/transformProps.ts
@@ -26,7 +26,7 @@ import processData from '../processData';
 const NOOP = () => {};
 
 export default function transformProps(chartProps: ChartProps) {
-  const { height, datasource, initialValues, formData, hooks, queryData } = chartProps;
+  const { height, datasource, initialValues, formData, hooks, queryData, width } = chartProps;
 
   const { onAddFilter = NOOP } = hooks;
 
@@ -67,6 +67,7 @@ export default function transformProps(chartProps: ChartProps) {
 
   return {
     height,
+    width,
     data: processedData,
     alignPositiveNegative: alignPn,
     colorPositiveNegative: colorPn,

diff --git a/...plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-table/src/transformProps.ts b/...plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-table/src/transformProps.ts
@@ -86,7 +86,7 @@ function transformData(data: PlainObject[], formData: PlainObject) {
 const NOOP = () => {};
 
 export default function transformProps(chartProps: ChartProps) {
-  const { height, datasource, initialValues, formData, hooks, queryData } = chartProps;
+  const { height, width, datasource, initialValues, formData, hooks, queryData } = chartProps;
 
   const { onAddFilter = NOOP } = hooks;
 
@@ -137,5 +137,6 @@ export default function transformProps(chartProps: ChartProps) {
     orderDesc,
     pageLength: pageLength && parseInt(pageLength, 10),
     tableFilter,
+    width,
   };
 }
diff --git a/...lugins/packages/superset-ui-plugins-demo/storybook/stories/plugin-chart-table/Stories.jsx b/...lugins/packages/superset-ui-plugins-demo/storybook/stories/plugin-chart-table/Stories.jsx
@@ -3,6 +3,7 @@ import React from 'react';
 import { SuperChart } from '@superset-ui/chart';
 import dataLegacy from './dataLegacy';
 import data from './data';
+import bigData from './bigData';
 
 export default [
   {
@@ -95,4 +96,31 @@ export default [
     storyName: 'TableFilter',
     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: true,
+          tableTimestampFormat: '%Y-%m-%d %H:%M:%S',
+          timeseriesLimitMetric: null,
+        }}
+        queryData={{ data: bigData }}
+      />
+    ),
+    storyName: 'BigTable',
+    storyPath: 'plugin-chart-table|TableChartPlugin',
+  },
 ];
diff --git a/...plugins/packages/superset-ui-plugins-demo/storybook/stories/plugin-chart-table/bigData.js b/...plugins/packages/superset-ui-plugins-demo/storybook/stories/plugin-chart-table/bigData.js
@@ -0,0 +1,21 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable no-magic-numbers */
+/* eslint-disable sort-keys */
+const LONG_STRING = `The quick brown fox jumps over the lazy dog`;
+const SHORT_STRING = 'Superset';
+
+const ROW_COUNT = 30;
+const COLUMN_COUNT = 20;
+
+export const keys = Array(COLUMN_COUNT)
+  .fill(0)
+  .map((_, i) => `Column Name ${i}`);
+
+const item = {};
+keys.forEach(key => {
+  item[key] = Math.random() < 0.5 ? LONG_STRING : SHORT_STRING;
+});
+
+export default Array(ROW_COUNT)
+  .fill(0)
+  .map(_ => ({ ...item }));