Adding table widget.

app/client/package.json

@@ -43,6 +43,7 @@
     "prettier": "^1.18.2",
     "re-reselect": "^3.4.0",
     "react": "^16.7.0",
+    "react-base-table": "^1.9.1",
     "react-dnd": "^9.3.4",
     "react-dnd-html5-backend": "^9.3.4",
     "react-dnd-touch-backend": "^9.4.0",

app/client/src/utils/WidgetRegistry.tsx

@@ -13,6 +13,7 @@ import WidgetFactory from "./WidgetFactory";
 import React from "react";
 import ButtonWidget, { ButtonWidgetProps } from "../widgets/ButtonWidget";
 import DropdownWidget, { DropdownWidgetProps } from "../widgets/DropdownWidget";
+import TableWidget, { TableWidgetProps } from '../widgets/TableWidget';
 
 class WidgetBuilderRegistry {
   static registerWidgetBuilders() {
@@ -69,6 +70,11 @@ class WidgetBuilderRegistry {
         return <DropdownWidget {...widgetData} />;
       },
     });
+    WidgetFactory.registerWidgetBuilder("TABLE_WIDGET", {
+      buildWidget(widgetData: TableWidgetProps): JSX.Element {
+        return <TableWidget {...widgetData} />;
+      },
+    });
   }
 }
 

app/client/src/widgets/TableWidget.tsx

@@ -2,10 +2,60 @@ import React from "react";
 import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
 import { WidgetType } from "../constants/WidgetConstants";
 import { ActionPayload } from "../constants/ActionConstants";
+import BaseTable, { AutoResizer } from "react-base-table";
+import "react-base-table/styles.css";
+import { forIn } from "lodash";
+
+interface Column {
+  key: string;
+  dataKey: string;
+  title: string;
+  width: number;
+}
+
+function constructColumns(data: object[]): Column[] {
+  let cols: Column[] = [];
+  forIn(data[0], (value, key) => {
+    cols.push({
+      key: key,
+      dataKey: key,
+      width: 200,
+      title: key,
+    });
+  });
+  return cols;
+}
+
+function parseTableArray(parsable: string): object[] {
+  let data: object[] = [];
+  try {
+    data = JSON.parse(parsable);
+  } catch (ex) {
+    console.log(ex);
+  }
+  return data;
+}
 
 class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
   getPageView() {
-    return <div />;
+    const tableData = parseTableArray(
+      this.props.tableData ? ((this.props.tableData as any) as string) : "",
+    );
+
+    let columns = constructColumns(tableData);
+    return (
+      <AutoResizer>
+        {({ width, height }: { width: number; height: number }) => (
+          <BaseTable
+            width={width}
+            height={height}
+            columns={columns}
+            data={tableData}
+            maxHeight={height}
+          />
+        )}
+      </AutoResizer>
+    );
   }
 
   getWidgetType(): WidgetType {

app/client/tsconfig.json

@@ -23,7 +23,8 @@
     "noEmit": true,
     "jsx": "react",
     "downlevelIteration": true,
-    "importHelpers": true
+    "importHelpers": true,
+    "typeRoots" : ["./typings", "./node_modules/@types"]
   },
   "include": [
     "./src/**/*"

app/client/typings/react-base-table/index.d.ts

@@ -0,0 +1,2 @@
+// import * as React from "react";
+declare module 'react-base-table';

app/client/yarn.lock

@@ -9748,6 +9748,18 @@ react-app-polyfill@^1.0.4:
     regenerator-runtime "0.13.3"
     whatwg-fetch "3.0.0"
 
+react-base-table@^1.9.1:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/react-base-table/-/react-base-table-1.9.1.tgz#1f55a382c12322a8a35f29c7450d468113f40ec6"
+  integrity sha512-IgzkghL6Gi/K7BZp9xUYrQ6DieL1L8JY1MytRQou8a/x+f+vv/h9s8Zrat+HFfv7xVjGInB8V6UJNMzgSXB0jg==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    classnames "^2.2.5"
+    memoize-one "^5.0.0"
+    prop-types "^15.7.0"
+    react-virtualized-auto-sizer "^1.0.2"
+    react-window "^1.8.2"
+
 react-day-picker@^7.3.2:
   version "7.4.0"
   resolved "https://registry.yarnpkg.com/react-day-picker/-/react-day-picker-7.4.0.tgz#1b3dfe76a81864518d241214ba658da25903b7df"
@@ -10016,6 +10028,19 @@ react-transition-group@^2.2.1, react-transition-group@^2.9.0:
     prop-types "^15.6.2"
     react-lifecycles-compat "^3.0.4"
 
+react-virtualized-auto-sizer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.2.tgz#a61dd4f756458bbf63bd895a92379f9b70f803bd"
+  integrity sha512-MYXhTY1BZpdJFjUovvYHVBmkq79szK/k7V3MO+36gJkWGkrXKtyr4vCPtpphaTLRAdDNoYEYFZWE8LjN+PIHNg==
+
+react-window@^1.8.2:
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.5.tgz#a56b39307e79979721021f5d06a67742ecca52d1"
+  integrity sha512-HeTwlNa37AFa8MDZFZOKcNEkuF2YflA0hpGPiTT9vR7OawEt+GZbfM6wqkBahD3D3pUjIabQYzsnY/BSJbgq6Q==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    memoize-one ">=3.1.1 <6"
+
 react@^16.7.0:
   version "16.11.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.11.0.tgz#d294545fe62299ccee83363599bf904e4a07fdbb"