From 0f93850f294a9682a4e792218215c6109a14b862 Mon Sep 17 00:00:00 2001
From: Conglei <shiconglei@gmail.com>
Date: Wed, 11 Sep 2019 16:56:51 -0700
Subject: [PATCH] fix(datatable): adding the consideration of padding (#198)

---
 .../src/Table.tsx                              |  7 +++++--
 .../stories/plugin-chart-table/bigData.js      | 18 ++++++++++--------
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/packages/superset-ui-plugin-chart-table/src/Table.tsx b/packages/superset-ui-plugin-chart-table/src/Table.tsx
index 534f531b8..ed46a9cc1 100644
--- a/packages/superset-ui-plugin-chart-table/src/Table.tsx
+++ b/packages/superset-ui-plugin-chart-table/src/Table.tsx
@@ -37,6 +37,8 @@ const SEARCH_BAR_HEIGHT = 40;
 
 const CHAR_WIDTH = 10;
 
+const CELL_PADDING = 32;
+
 const MAX_COLUMN_WIDTH = 500;
 
 export type TableProps = Props & Readonly<typeof defaultProps>;
@@ -186,12 +188,13 @@ class TableVis extends React.PureComponent<InternalTableProps, TableState> {
     let calculatedWidth = 0;
     keys.forEach(key => {
       const maxLength = Math.max(...data.map(d => String(d.data[key]).length), key.length);
+      const stringWidth = maxLength * CHAR_WIDTH + CELL_PADDING;
       columnMetadata[key] = {
         maxWidth: MAX_COLUMN_WIDTH,
-        width: maxLength * CHAR_WIDTH,
+        width: stringWidth,
         ...columnMetadata[key],
       };
-      calculatedWidth += Math.min(maxLength * CHAR_WIDTH, MAX_COLUMN_WIDTH);
+      calculatedWidth += Math.min(stringWidth, MAX_COLUMN_WIDTH);
     });
 
     const tableHeight = includeSearch ? height - SEARCH_BAR_HEIGHT : height;
diff --git a/packages/superset-ui-plugins-demo/storybook/stories/plugin-chart-table/bigData.js b/packages/superset-ui-plugins-demo/storybook/stories/plugin-chart-table/bigData.js
index 2fa09c79d..b3f6845b1 100644
--- a/packages/superset-ui-plugins-demo/storybook/stories/plugin-chart-table/bigData.js
+++ b/packages/superset-ui-plugins-demo/storybook/stories/plugin-chart-table/bigData.js
@@ -1,20 +1,22 @@
 /* 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}`);
+export const keys = ['ds'].concat(
+  Array(COLUMN_COUNT)
+    .fill(0)
+    .map((_, i) => `clm ${i}`),
+);
 
 const item = {};
-keys.forEach(key => {
-  item[key] = Math.random() < 0.5 ? LONG_STRING : SHORT_STRING;
+keys.forEach((key, i) => {
+  item[key] = Array(i + 1)
+    .fill(0)
+    .join('');
 });
+item.ds = '2019-09-09';
 
 export default Array(ROW_COUNT)
   .fill(0)