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"