diff --git a/app/client/package.json b/app/client/package.json
index 1b2d0aac43..b14fe3cab6 100644
--- a/app/client/package.json
+++ b/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",
diff --git a/app/client/src/utils/WidgetRegistry.tsx b/app/client/src/utils/WidgetRegistry.tsx
index 6dcce4108b..f31bae375b 100644
--- a/app/client/src/utils/WidgetRegistry.tsx
+++ b/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 ;
},
});
+ WidgetFactory.registerWidgetBuilder("TABLE_WIDGET", {
+ buildWidget(widgetData: TableWidgetProps): JSX.Element {
+ return ;
+ },
+ });
}
}
diff --git a/app/client/src/widgets/TableWidget.tsx b/app/client/src/widgets/TableWidget.tsx
index fb82b32237..d2cc0bb52f 100644
--- a/app/client/src/widgets/TableWidget.tsx
+++ b/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 {
getPageView() {
- return ;
+ const tableData = parseTableArray(
+ this.props.tableData ? ((this.props.tableData as any) as string) : "",
+ );
+
+ let columns = constructColumns(tableData);
+ return (
+
+ {({ width, height }: { width: number; height: number }) => (
+
+ )}
+
+ );
}
getWidgetType(): WidgetType {
diff --git a/app/client/tsconfig.json b/app/client/tsconfig.json
index d22b42e5d9..0b148f95e3 100644
--- a/app/client/tsconfig.json
+++ b/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/**/*"
diff --git a/app/client/typings/react-base-table/index.d.ts b/app/client/typings/react-base-table/index.d.ts
new file mode 100644
index 0000000000..4e289c97c0
--- /dev/null
+++ b/app/client/typings/react-base-table/index.d.ts
@@ -0,0 +1,2 @@
+// import * as React from "react";
+declare module 'react-base-table';
diff --git a/app/client/yarn.lock b/app/client/yarn.lock
index cf706e2a6a..aae420ba52 100644
--- a/app/client/yarn.lock
+++ b/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"