fix(datatable): adding the consideration of padding (#198)

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;

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)