[Table] Fix Table sizing when shown in flex parent (#1479)

* Style fixes when table is within a display: flex container * Remove unnecessary rules * Clearer comment * Try to fix lint * Fix tests * Little CSS polishes
palantir · Aug 22, 2017 · 6f8a31a · 6f8a31a
1 parent 1d2371d
commit 6f8a31a
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 11 deletions.
diff --git a/packages/table/src/common/classes.ts b/packages/table/src/common/classes.ts
@@ -49,6 +49,7 @@ export const TABLE_QUADRANT_BODY_CONTAINER = "bp-table-quadrant-body-container";
 export const TABLE_QUADRANT_LEFT = "bp-table-quadrant-left";
 export const TABLE_QUADRANT_MAIN = "bp-table-quadrant-main";
 export const TABLE_QUADRANT_SCROLL_CONTAINER = "bp-table-quadrant-scroll-container";
+export const TABLE_QUADRANT_STACK = "bp-table-quadrant-stack";
 export const TABLE_QUADRANT_TOP = "bp-table-quadrant-top";
 export const TABLE_QUADRANT_TOP_LEFT = "bp-table-quadrant-top-left";
 export const TABLE_REGION = "bp-table-region";

diff --git a/packages/table/src/quadrants/_quadrants.scss b/packages/table/src/quadrants/_quadrants.scss
@@ -12,6 +12,11 @@ $table-quadrant-z-index-top-left: $table-quadrant-z-index-left + 1;
 // overflow within their parents; it should be large enough to hide a scrollbar of typical width.
 $table-quadrant-scroll-container-overflow: 20px;
 
+.bp-table-quadrant-stack {
+  display: flex;
+  height: 100%;
+}
+
 .bp-table-quadrant {
   position: absolute;
   top: 0;
@@ -26,7 +31,7 @@ $table-quadrant-scroll-container-overflow: 20px;
 
 .bp-table-quadrant-scroll-container {
   @include force-hardware-acceleration();
-  position: absolute;
+  position: relative;
   top: 0;
   right: 0;
   bottom: 0;
@@ -51,9 +56,22 @@ $table-quadrant-scroll-container-overflow: 20px;
 }
 
 .bp-table-quadrant-main {
-  right: 0;
-  bottom: 0;
+  // use `relative` to ensure the table can size itself according to the MAIN quadrant's contents alone.
+  // other quadrants should remain `absolute` to ensure they're taken out of the document flow.
+  position: relative;
+  top: auto;
+  left: auto;
   z-index: $table-quadrant-z-index-main;
+  // the MAIN quadrant should fill the whole table so that ghost cells will be visible if enabled
+  width: 100%;
+  height: 100%;
+
+  .bp-table-quadrant-scroll-container {
+    // the MAIN quadrant's scroll bars should be visible and should be flush with the right and
+    // bottom edges of the table.
+    width: 100%;
+    height: 100%;
+  }
 
   .bp-table-cell-client {
     background: $white;
@@ -75,7 +93,11 @@ $table-quadrant-scroll-container-overflow: 20px;
   z-index: $table-quadrant-z-index-left;
 
   .bp-table-quadrant-scroll-container {
+    position: absolute;
+    top: 0;
     right: -$table-quadrant-scroll-container-overflow;
+    bottom: 0;
+    height: auto;
     overflow-x: hidden;
   }
 }

diff --git a/packages/table/src/quadrants/tableQuadrantStack.tsx b/packages/table/src/quadrants/tableQuadrantStack.tsx
@@ -212,7 +212,7 @@ export class TableQuadrantStack extends AbstractComponent<ITableQuadrantStackPro
         const { grid, isRowHeaderShown, renderBody } = this.props;
 
         return (
-            <div>
+            <div className={Classes.TABLE_QUADRANT_STACK}>
                 <TableQuadrant
                     bodyRef={this.props.bodyRef}
                     grid={grid}

diff --git a/packages/table/test/tableTests.tsx b/packages/table/test/tableTests.tsx
@@ -256,6 +256,10 @@ describe("<Table>", () => {
     });
 
     describe("Quadrants", () => {
+        // constrain the container to a smaller size to force scrolling
+        const CONTAINER_HEIGHT = 500;
+        const CONTAINER_WIDTH = 500;
+
         const NUM_ROWS = 5;
         const NUM_COLUMNS = 5;
         const NUM_FROZEN_ROWS = 1;
@@ -562,13 +566,15 @@ describe("<Table>", () => {
             document.body.appendChild(containerElement);
 
             const tableComponent = ReactDOM.render(
-                <Table
-                    numRows={LARGE_NUM_ROWS}
-                    numFrozenColumns={NUM_FROZEN_COLUMNS}
-                    numFrozenRows={NUM_FROZEN_ROWS}
-                >
-                    {renderColumns({}, LARGE_NUM_COLUMNS)}
-                </Table>,
+                <div style={{ height: CONTAINER_HEIGHT, width: CONTAINER_WIDTH }}>
+                    <Table
+                        numRows={LARGE_NUM_ROWS}
+                        numFrozenColumns={NUM_FROZEN_COLUMNS}
+                        numFrozenRows={NUM_FROZEN_ROWS}
+                    >
+                        {renderColumns({}, LARGE_NUM_COLUMNS)}
+                    </Table>
+                </div>,
                 containerElement,
             ) as Table;