Merge pull request #174 from dcos-labs/danielmschmidt/DCOS-39066

DCOS-39066: Allow table to deal with dynamic data
d2iq · Jul 11, 2018 · cec0c46 · cec0c46
2 parents eac3d76 + d3371db
commit cec0c46
Show file tree

Hide file tree

Showing 4 changed files with 195 additions and 4 deletions.
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}
@@ -70,8 +71,6 @@ export class Table<T> extends React.PureComponent<ITableProps, {}> {
   }
 
   private getGrid({ width, height }) {
-    const mergedData = this.getData(this.props.data);
-
     const columnCount = React.Children.count(this.props.children);
     const columnSizes = this.getColumnSizes(
       React.Children.toArray(this.props.children) as Array<
@@ -96,7 +95,7 @@ export class Table<T> extends React.PureComponent<ITableProps, {}> {
         enableFixedRowScroll={true}
         height={height}
         rowHeight={ROW_HEIGHT}
-        rowCount={mergedData.length}
+        rowCount={this.props.data.length + 1}
         width={width}
         hideTopRightGridScrollbar={true}
         hideBottomLeftGridScrollbar={true}

diff --git a/packages/table/stories/Table.stories.tsx b/packages/table/stories/Table.stories.tsx
@@ -63,10 +63,46 @@ const veryLongRenderer = () => (
     </span>
   </TextCell>
 );
+
 const empty = () => <Cell>empty</Cell>;
 const width = ({ width: totalWidth }: { width?: number }) =>
   totalWidth ? totalWidth * 0.3 : 100;
 
+const itemCellRenderer = item => (
+  <Cell>
+    <span>{item}</span>
+  </Cell>
+);
+
+const randomNumbers = n => new Array(n).fill(0).map(() => Math.random() * 100);
+
+class ChangingTable extends React.Component<{}, { items: number[] }> {
+  constructor(props) {
+    super(props);
+    this.state = {
+      items: randomNumbers(20)
+    };
+
+    setInterval(() => {
+      this.setState({
+        items: randomNumbers(20)
+      });
+    }, 100);
+  }
+
+  render() {
+    return (
+      <Table data={this.state.items}>
+        <Column
+          header={<HeaderCell>name</HeaderCell>}
+          cellRenderer={itemCellRenderer}
+          width={width}
+        />
+      </Table>
+    );
+  }
+}
+
 storiesOf("Table", module)
   .addDecorator(withReadme([readme]))
   .addWithInfo("default", () => (
@@ -111,4 +147,15 @@ storiesOf("Table", module)
         />
       </Table>
     </div>
+  ))
+  .addWithInfo("changing values", () => (
+    <div
+      style={{
+        height: "175px",
+        width: "100%",
+        fontSize: "14px"
+      }}
+    >
+      <ChangingTable />
+    </div>
   ));
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;