fix(table): allow dynamic values to be visible

Closes DCOS-39066
d2iq · Jul 10, 2018 · 2260bb2 · 2260bb2
1 parent 6c9b2c6
commit 2260bb2
Show file tree

Hide file tree

Showing 3 changed files with 147 additions and 1 deletion.
diff --git a/packages/table/components/Table.tsx b/packages/table/components/Table.tsx
@@ -60,6 +60,7 @@ export class Table<T> extends React.PureComponent<ITableProps, {}> {
   public render() {
     return (
       <AutoSizer
+        __dataThatTriggersARerenderWhenChanged={this.props.data} // passed to notify react-virtualized about updates
         defaultWidth={DEFAULT_WIDTH}
         defaultHeight={DEFAULT_HEIGHT}
         onResize={this.updateGridSize}

diff --git a/packages/table/tests/Table.test.tsx b/packages/table/tests/Table.test.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import { Table, Column } from "../";
 import * as emotion from "emotion";
 import { createSerializer } from "jest-emotion";
-import { render, shallow } from "enzyme";
+import { render, shallow, mount } from "enzyme";
 import toJson from "enzyme-to-json";
 
 expect.addSnapshotSerializer(createSerializer(emotion));
@@ -59,6 +59,21 @@ describe("Table", () => {
     expect(toJson(component)).toMatchSnapshot();
   });
 
+  it("renders again with new data", () => {
+    const itemRenderer = item => <span>{item}</span>;
+    const component = mount(
+      <Table data={[1, 2, 3]}>
+        <Column header="item" cellRenderer={itemRenderer} width={width} />
+      </Table>
+    );
+    expect(toJson(component)).toMatchSnapshot();
+
+    component.setProps({
+      data: [4, 5, 6]
+    });
+    expect(toJson(component)).toMatchSnapshot();
+  });
+
   describe("getData", () => {
     it("will return the right array", () => {
       const width = () => 10;

diff --git a/packages/table/tests/__snapshots__/Table.test.tsx.snap b/packages/table/tests/__snapshots__/Table.test.tsx.snap
@@ -1,5 +1,135 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Table renders again with new data 1`] = `
+<Table
+  data={
+    Array [
+      1,
+      2,
+      3,
+    ]
+  }
+>
+  <AutoSizer
+    __dataThatTriggersARerenderWhenChanged={
+      Array [
+        1,
+        2,
+        3,
+      ]
+    }
+    defaultHeight={768}
+    defaultWidth={1024}
+    disableHeight={false}
+    disableWidth={false}
+    onResize={[Function]}
+    style={Object {}}
+  >
+    <div
+      style={
+        Object {
+          "height": 0,
+          "overflow": "visible",
+          "width": 0,
+        }
+      }
+    >
+      <MultiGrid
+        cellRenderer={[Function]}
+        classNameBottomLeftGrid=""
+        classNameBottomRightGrid=""
+        classNameTopLeftGrid=""
+        classNameTopRightGrid=""
+        columnCount={1}
+        columnWidth={[Function]}
+        enableFixedColumnScroll={true}
+        enableFixedRowScroll={true}
+        fixedColumnCount={1}
+        fixedRowCount={1}
+        height={0}
+        hideBottomLeftGridScrollbar={true}
+        hideTopRightGridScrollbar={true}
+        rowCount={4}
+        rowHeight={35}
+        scrollToColumn={-1}
+        scrollToRow={-1}
+        style={Object {}}
+        styleBottomLeftGrid={Object {}}
+        styleBottomRightGrid={Object {}}
+        styleTopLeftGrid={Object {}}
+        styleTopRightGrid={Object {}}
+        width={0}
+      />
+    </div>
+  </AutoSizer>
+</Table>
+`;
+
+exports[`Table renders again with new data 2`] = `
+<Table
+  data={
+    Array [
+      4,
+      5,
+      6,
+    ]
+  }
+>
+  <AutoSizer
+    __dataThatTriggersARerenderWhenChanged={
+      Array [
+        4,
+        5,
+        6,
+      ]
+    }
+    defaultHeight={768}
+    defaultWidth={1024}
+    disableHeight={false}
+    disableWidth={false}
+    onResize={[Function]}
+    style={Object {}}
+  >
+    <div
+      style={
+        Object {
+          "height": 0,
+          "overflow": "visible",
+          "width": 0,
+        }
+      }
+    >
+      <MultiGrid
+        cellRenderer={[Function]}
+        classNameBottomLeftGrid=""
+        classNameBottomRightGrid=""
+        classNameTopLeftGrid=""
+        classNameTopRightGrid=""
+        columnCount={1}
+        columnWidth={[Function]}
+        enableFixedColumnScroll={true}
+        enableFixedRowScroll={true}
+        fixedColumnCount={1}
+        fixedRowCount={1}
+        height={0}
+        hideBottomLeftGridScrollbar={true}
+        hideTopRightGridScrollbar={true}
+        rowCount={4}
+        rowHeight={35}
+        scrollToColumn={-1}
+        scrollToRow={-1}
+        style={Object {}}
+        styleBottomLeftGrid={Object {}}
+        styleBottomRightGrid={Object {}}
+        styleTopLeftGrid={Object {}}
+        styleTopRightGrid={Object {}}
+        width={0}
+      />
+    </div>
+  </AutoSizer>
+</Table>
+`;
+
 exports[`Table renders default 1`] = `
 .emotion-0 {
   box-sizing: border-box;