- fix table border

CHANGELOG.md

@@ -161,4 +161,13 @@
 
     Issue: https://github.com/plotly/dash-table/issues/96
 
-    Limitation: The dropdown in fixed columns behaves differently from the dropdown in the non-fixed portion of the table. Because of layers of overflow & positioning, the dropdown does not show outside of the table is instead part of it. Opening the dropdown in bottom rows will require scrolling vs. displaying on top of the table.
+    Limitation: The dropdown in fixed columns behaves differently from the dropdown in the non-fixed portion of the table. Because of layers of overflow & positioning, the dropdown does not show outside of the table is instead part of it. Opening the dropdown in bottom rows will require scrolling vs. displaying on top of the table.
+
+## RC20 - Fix incorrect border around table cells when not filled
+
+    Issue: https://github.com/plotly/dash-table/issues/101
+
+    Table styling has been changed for frozen rows and columns. Default styling change from:
+
+    - frozen rows: { width: 500px } to { width: fit-content, max-width: 500px }
+    - frozen columns: { height: 500px } to { height: fit-content, max-height: 500px }

dash_table/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-table",
-  "version": "3.0.0rc19",
+  "version": "3.0.0rc20",
   "description": "Dash table",
   "main": "build/index.js",
   "scripts": {

demo/App.js

@@ -42,7 +42,7 @@ class App extends Component {
                     }
                 ],
                 table_style: [
-                    { selector: '.dash-spreadsheet.freeze-left', rule: 'width: 1000px' }
+                    { selector: '.dash-spreadsheet.freeze-left', rule: 'width: 1000px; max-width: 1000px;' }
                 ]
             }
         };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-table",
-  "version": "3.0.0rc19",
+  "version": "3.0.0rc20",
   "description": "Dash table",
   "main": "build/index.js",
   "scripts": {

src/dash-table/components/Table/Table.less

@@ -12,6 +12,35 @@
         0px @bottom 0px 0px @color;
 }
 
+.top-left-cells() {
+    .left-cells();
+    .top-cells();
+
+    tr:first-of-type {
+        td:first-of-type,
+        th:first-of-type {
+            .inset-shadow(var(--border), 1px, 1px, -1px, -1px);
+        }
+    }
+}
+
+.top-cells() {
+    tr:first-of-type {
+        td, th {
+            .inset-shadow(var(--border), 0px, 1px, -1px, -1px);
+        }
+    }
+}
+
+.left-cells() {
+    tr {
+        td:first-of-type,
+        th:first-of-type {
+            .inset-shadow(var(--border), 1px, 0px, -1px, -1px);
+        }
+    }
+}
+
 .not-selectable() {
     -webkit-touch-callout: none;
     -webkit-user-select: none;
@@ -24,11 +53,13 @@
 
 .dash-spreadsheet {
     &.freeze-left {
-        width: 500px;
+        width: fit-content;
+        max-width: 500px;
     }
 
     &.freeze-top {
-        height: 500px;
+        height: fit-content;
+        max-height: 500px;
     }
 }
 
@@ -40,8 +71,6 @@
 
 .dash-spreadsheet-inner {
     box-sizing: border-box;
-    border-left: lightgrey 1px solid;
-    border-top: lightgrey 1px solid;
     display: flex;
     flex-direction: column;
 
@@ -105,6 +134,46 @@
         z-index: 400;
     }
 
+    &:not(.freeze-top):not(.freeze-left) {
+        .cell-1-1 {
+            .top-left-cells();
+        }
+    }
+
+    &:not(.freeze-top).freeze-left {
+        .cell-1-0 {
+            .top-left-cells();
+        }
+
+        .cell-1-1 {
+            .top-cells();
+        }
+    }
+
+    &.freeze-top:not(.freeze-left) {
+        .cell-0-1 {
+            .top-left-cells();
+        }
+
+        .cell-1-1 {
+            .left-cells();
+        }
+    }
+
+    &.freeze-top.freeze-left {
+        .cell-0-0 {
+            .top-left-cells();
+        }
+
+        .cell-0-1 {
+            .top-cells();
+        }
+
+        .cell-1-0 {
+            .left-cells();
+        }
+    }
+
     .cell-0-1 {
         z-index: 300;
         flex: 0 0 auto;
@@ -121,10 +190,6 @@
             &:focus {
                 outline: none;
             }
-
-            &.focused + td {
-                .inset-shadow(var(--border), 0px, 0px, -1px, -1px);
-            }
         }
     }
 

tests/visual/percy-storybook/Border.percy.tsx

@@ -0,0 +1,91 @@
+import * as R from 'ramda';
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import random from 'core/math/random';
+import DashTable from 'dash-table/Table';
+
+const setProps = () => { };
+
+const columns = ['a', 'b', 'c']
+    .map(id => ({ id: id, name: id.toUpperCase(), width: '100px' }));
+
+const dataframe = (() => {
+    const r = random(1);
+
+    return R.range(0, 5).map(() => (
+        ['a', 'b', 'c'].reduce((obj: any, key) => {
+            obj[key] = Math.floor(r() * 1000);
+            return obj;
+        }, {})
+    ));
+})();
+
+const columns2 = ['a', 'b', 'c', 'd', 'e', 'f']
+    .map(id => ({ id: id, name: id.toUpperCase(), width: '100px' }));
+
+const dataframe2 = (() => {
+    const r = random(1);
+
+    return R.range(0, 50).map(() => (
+        ['a', 'b', 'c', 'd', 'e', 'f'].reduce((obj: any, key) => {
+            obj[key] = Math.floor(r() * 1000);
+            return obj;
+        }, {})
+    ));
+})();
+
+let props = {
+    setProps,
+    id: 'table',
+    dataframe,
+    columns,
+    table_style: [{
+        selector: '.dash-spreadsheet', rule: 'width: 500px; height: 500px;'
+    }]
+};
+
+let props2 = {
+    setProps,
+    id: 'table',
+    dataframe: dataframe2,
+    columns: columns2,
+    table_style: [{
+        selector: '.dash-spreadsheet', rule: 'width: 500px; height: 500px;'
+    }]
+};
+
+storiesOf('DashTable/Border (available space not filled)', module)
+    .add('with no frozen rows and no frozen columns', () => (<DashTable
+        {...props}
+    />))
+    .add('with frozen rows and no frozen columns', () => (<DashTable
+        {...props}
+        n_fixed_rows={1}
+    />))
+    .add('with no frozen rows and frozen columns', () => (<DashTable
+        {...props}
+        n_fixed_columns={1}
+    />))
+    .add('with frozen rows and frozen columns', () => (<DashTable
+        {...props}
+        n_fixed_columns={1}
+        n_fixed_rows={1}
+    />));
+
+storiesOf('DashTable/Border (available space filled)', module)
+    .add('with no frozen rows and no frozen columns', () => (<DashTable
+        {...props2}
+    />))
+    .add('with frozen rows and no frozen columns', () => (<DashTable
+        {...props2}
+        n_fixed_rows={1}
+    />))
+    .add('with no frozen rows and frozen columns', () => (<DashTable
+        {...props2}
+        n_fixed_columns={1}
+    />))
+    .add('with frozen rows and frozen columns', () => (<DashTable
+        {...props2}
+        n_fixed_columns={1}
+        n_fixed_rows={1}
+    />));