Merge branch 'feat/data-grid' into develop

.circleci/config.yml

@@ -173,7 +173,7 @@ jobs:
  name: Build and push Docker image
  command: |
  cd ./build-all-in-one-image
- docker build -f ./dockerfile -t illasoft/illa-builder:${IMAGE_TAG} --build-arg FE=${FE} --build-arg BE=${BE} --build-arg SBE=${SBE} --no-cache --build-arg FE_ILLA_MUI_LICENSE=${ILLA_MUI_LICENSE} .
+ docker build -f ./dockerfile -t illasoft/illa-builder:${IMAGE_TAG} --build-arg FE=${FE} --build-arg BE=${BE} --build-arg SBE=${SBE} --no-cache --build-arg ILLA_MUI_LICENSE=${ILLA_MUI_LICENSE} .
  docker login -u $DOCKER_LOGIN -p $DOCKER_PWD
  docker push illasoft/illa-builder:${IMAGE_TAG}
  if [ << parameters.TAG >> = true ]; then

apps/builder/package.json

@@ -130,7 +130,6 @@
  "uuid": "^8.3.2",
  "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.0/xlsx-0.20.0.tgz",
  "@mui/x-data-grid-premium": "^6.16.3",
- "@mui/x-data-grid": "^6.16.3",
  "@mui/material": "^5.14.13",
  "@mui/icons-material": "^5.14.13",
  "@dnd-kit/sortable": "^7.0.2",

apps/builder/src/config/guide/components.json

@@ -59,166 +59,81 @@
  }
  },
  {
- "version": 0,
- "displayName": "dataGrid1",
- "parentNode": "bodySection1-bodySectionContainer1",
+ "w": 18,
+ "h": 50,
+ "minW": 1,
+ "minH": 3,
+ "x": 7,
+ "y": 9,
+ "z": 0,
  "showName": "dataGrid",
- "childrenNode": null,
  "type": "DATA_GRID_WIDGET",
+ "displayName": "dataGrid1",
  "containerType": "EDITOR_SCALE_SQUARE",
- "h": 38,
- "w": 14,
- "minH": 3,
- "minW": 1,
- "x": 9,
- "y": 25,
- "z": 0,
+ "parentNode": "bodySection1-bodySectionContainer1",
+ "childrenNode": [],
  "props": {
+ "dataSourceMode": "dynamic",
+ "excludeHiddenColumns": true,
+ "dataSourceJS": "{{[\n {\n \"month\": \"April\",\n \"users\": 3700,\n \"incomes\": 4000\n },\n {\n \"month\": \"May\",\n \"users\": 5400,\n \"incomes\": 8700\n },\n {\n \"month\": \"June\",\n \"users\": 6000,\n \"incomes\": 12000\n },\n {\n \"month\": \"July\",\n \"users\": 8000,\n \"incomes\": 14000\n }\n]}}",
+ "dataSource": [],
+ "overFlow": "scroll",
+ "sortOrder": "default",
  "$dynamicAttrPaths": ["dataSourceJS"],
  "columns": [
  {
- "aggregable": true,
- "columnType": "auto",
+ "field": "month",
+ "headerName": "month",
+ "width": 170,
+ "isCalc": true,
  "description": "",
- "disableReorder": false,
- "field": "charge",
+ "sortable": true,
+ "pinnable": true,
  "filterable": true,
- "groupable": true,
- "headerAlign": "left",
- "headerName": "charge",
  "hideable": true,
- "isCalc": true,
- "pinnable": true,
- "resizable": true,
- "sortable": true,
- "width": 170
- },
- {
  "aggregable": true,
- "columnType": "auto",
- "description": "",
- "disableReorder": false,
- "field": "email",
- "filterable": true,
  "groupable": true,
- "headerAlign": "left",
- "headerName": "email",
- "hideable": true,
- "isCalc": true,
- "pinnable": true,
  "resizable": true,
- "sortable": true,
- "width": 170
- },
- {
- "aggregable": true,
  "columnType": "auto",
- "description": "",
  "disableReorder": false,
- "field": "expired_time",
- "filterable": true,
- "groupable": true,
- "headerAlign": "left",
- "headerName": "expired_time",
- "hideable": true,
- "isCalc": true,
- "pinnable": true,
- "resizable": true,
- "sortable": true,
- "width": 170
+ "headerAlign": "left"
  },
  {
- "aggregable": true,
- "columnType": "auto",
+ "field": "users",
+ "headerName": "users",
+ "width": 170,
+ "isCalc": true,
  "description": "",
- "disableReorder": false,
- "field": "feature_flag",
+ "sortable": true,
+ "pinnable": true,
  "filterable": true,
- "groupable": true,
- "headerAlign": "left",
- "headerName": "feature_flag",
  "hideable": true,
- "isCalc": true,
- "pinnable": true,
- "resizable": true,
- "sortable": true,
- "width": 170
- },
- {
  "aggregable": true,
- "columnType": "auto",
- "description": "",
- "disableReorder": false,
- "field": "id",
- "filterable": true,
  "groupable": true,
- "headerAlign": "left",
- "headerName": "id",
- "hideable": true,
- "isCalc": true,
- "pinnable": true,
  "resizable": true,
- "sortable": true,
- "width": 170
- },
- {
- "aggregable": true,
  "columnType": "auto",
- "description": "",
  "disableReorder": false,
- "field": "img",
- "filterable": true,
- "groupable": true,
- "headerAlign": "left",
- "headerName": "img",
- "hideable": true,
- "isCalc": true,
- "pinnable": true,
- "resizable": true,
- "sortable": true,
- "width": 170
+ "headerAlign": "left"
  },
  {
- "aggregable": true,
- "columnType": "auto",
+ "field": "incomes",
+ "headerName": "incomes",
+ "width": 170,
+ "isCalc": true,
  "description": "",
- "disableReorder": false,
- "field": "name",
+ "sortable": true,
+ "pinnable": true,
  "filterable": true,
- "groupable": true,
- "headerAlign": "left",
- "headerName": "name",
  "hideable": true,
- "isCalc": true,
- "pinnable": true,
- "resizable": true,
- "sortable": true,
- "width": 170
- },
- {
  "aggregable": true,
- "columnType": "auto",
- "description": "",
- "disableReorder": false,
- "field": "start_time",
- "filterable": true,
  "groupable": true,
- "headerAlign": "left",
- "headerName": "start_time",
- "hideable": true,
- "isCalc": true,
- "pinnable": true,
  "resizable": true,
- "sortable": true,
- "width": 170
+ "columnType": "auto",
+ "disableReorder": false,
+ "headerAlign": "left"
  }
- ],
- "dataSource": [],
- "dataSourceJS": "{{postgresql1.data}}",
- "dataSourceMode": "dynamic",
- "excludeHiddenColumns": true,
- "overFlow": "scroll",
- "sortOrder": "default"
- }
+ ]
+ },
+ "version": 0
  }
 ]

apps/builder/src/config/guide/config.tsx

@@ -132,7 +132,7 @@ export const GUIDE_STEP = [
  titleKey: "editor.tutorial.panel.onboarding_app.display_data_title",
  descKey:
  "editor.tutorial.panel.onboarding_app.display_data_description_modify",
- selector: "table-data-source",
+ selector: "dataGrid-data-source",
  doItForMe: () => {
  store.dispatch(
  componentsActions.updateComponentPropsReducer({

apps/builder/src/page/App/components/InspectPanel/PanelSetters/DataGridSetter/ColumnSetter/index.tsx

@@ -1,6 +1,5 @@
 import { arrayMove } from "@dnd-kit/sortable"
-import { isDeepEqual } from "@mui/x-data-grid/internals"
-import { get } from "lodash"
+import { get, isEqual } from "lodash"
 import { FC, useMemo } from "react"
 import { useSelector } from "react-redux"
 import { v4 } from "uuid"
@@ -103,7 +102,7 @@ const ColumnSetter: FC<ColumnSetterProps> = (props) => {
  calculateColumns.forEach((config) => {
  mixedColumns.push(config)
  })
- if (!isDeepEqual(mixedColumns, value)) {
+ if (!isEqual(mixedColumns, value)) {
  handleUpdateMultiAttrDSL?.({
  [attrName]: mixedColumns,
  })

apps/builder/src/page/App/components/InspectPanel/PanelSetters/DataGridSetter/ColumnSetter/interface.ts

@@ -1,4 +1,10 @@
-import { GridBaseColDef } from "@mui/x-data-grid/models/colDef/gridColDef"
+import {
+ GridAlignment,
+ GridColType,
+ GridRenderCellParams,
+ GridValueGetterParams,
+} from "@mui/x-data-grid-premium"
+import { ReactNode } from "react"
 import { BaseSetter } from "@/page/App/components/InspectPanel/PanelSetters/interface"
 
 export type ColumnType =
@@ -19,9 +25,26 @@ export type ColumnType =
  | "html"
  | "currency"
 
-export interface ColumnConfig extends GridBaseColDef {
+export interface ColumnConfig {
  isCalc?: boolean
+ type?: GridColType
+ align?: GridAlignment
  columnType: ColumnType
+ field: string
+ headerName: string
+ width: number
+ description: string
+ sortable: boolean
+ pinnable: boolean
+ filterable: boolean
+ hideable: boolean
+ aggregable: boolean
+ groupable: boolean
+ resizable: boolean
+ disableReorder: boolean
+ headerAlign: GridAlignment
+ valueGetter?: (params: GridValueGetterParams) => any
+ renderCell?: (params: GridRenderCellParams) => ReactNode
 }
 
 export interface ColumnSetterProps extends BaseSetter {

apps/builder/src/page/App/components/InspectPanel/components/SingleSelectedPanel/singleSelectedPanel.tsx

@@ -1,6 +1,7 @@
 import { FC, memo, useCallback } from "react"
+import { useTranslation } from "react-i18next"
 import { useDispatch, useSelector } from "react-redux"
-import { Divider } from "@illa-design/react"
+import { Alert, Divider } from "@illa-design/react"
 import { PanelHeader } from "@/page/App/components/InspectPanel/components/Header"
 import { SelectedProvider } from "@/page/App/components/InspectPanel/context/selectedContext"
 import { panelBuilder } from "@/page/App/components/InspectPanel/utils/panelBuilder"
@@ -15,6 +16,7 @@ import {
 
 const SingleSelectedPanel: FC = () => {
  const dispatch = useDispatch()
+ const { t } = useTranslation()
  const singleSelectedComponentNode = useSelector(
  getComponentNodeBySingleSelected,
  )
@@ -83,6 +85,13 @@ const SingleSelectedPanel: FC = () => {
  <div css={singleSelectedPanelWrapperStyle}>
  <PanelHeader />
  <Divider />
+ {widgetType === "TABLE_WIDGET" && (
+ <Alert
+ type="warning"
+ title={t("editor.inspect.setter_tips.table_update_title")}
+ content={t("editor.inspect.setter_tips.table_update_content")}
+ />
+ )}
  <div css={singleSelectedPanelSetterWrapperStyle}>
  <FieldFactory
  panelConfig={builderPanelConfig}

apps/builder/src/widgetLibrary/DataGridWidget/Toolbar/index.tsx

@@ -14,7 +14,7 @@ import {
 import {
  GridCsvGetRowsToExportParams,
  GridPrintGetRowsToExportParams,
-} from "@mui/x-data-grid/models/gridExport"
+} from "@mui/x-data-grid-premium"
 import { FC } from "react"
 import { useTranslation } from "react-i18next"
 import { ExportAllSetting } from "../ExportAllSetting"

apps/builder/src/widgetLibrary/DataGridWidget/dataGrid.tsx

@@ -1,5 +1,9 @@
 import { StyledEngineProvider, ThemeProvider, createTheme } from "@mui/material"
-import { DataGridPremium, LicenseInfo } from "@mui/x-data-grid-premium"
+import {
+ DataGridPremium,
+ GridColDef,
+ LicenseInfo,
+} from "@mui/x-data-grid-premium"
 import { GridApiPremium } from "@mui/x-data-grid-premium/models/gridApiPremium"
 import { get, isArray, isNumber } from "lodash"
 import React, { FC, MutableRefObject, useEffect, useMemo, useRef } from "react"
@@ -321,7 +325,7 @@ export const DataGridWidget: FC<BaseDataGridProps> = (props) => {
  }
  checkboxSelection={rowSelection && rowSelectionMode === "multiple"}
  rows={arrayData}
- columns={renderColumns ?? []}
+ columns={(renderColumns as GridColDef[]) ?? []}
  paginationMode={enableServerSidePagination ? "server" : "client"}
  rowCount={
  totalRowCount !== undefined

apps/builder/src/widgetLibrary/DataGridWidget/interface.ts

@@ -1,5 +1,8 @@
-import { GridColumnVisibilityModel, GridFilterModel } from "@mui/x-data-grid"
-import { GridInputRowSelectionModel } from "@mui/x-data-grid/models/gridRowSelectionModel"
+import {
+ GridColumnVisibilityModel,
+ GridFilterModel,
+ GridInputRowSelectionModel,
+} from "@mui/x-data-grid-premium"
 import i18n from "i18next"
 import { ColumnConfig } from "@/page/App/components/InspectPanel/PanelSetters/DataGridSetter/ColumnSetter/interface"
 import { BaseWidgetProps } from "@/widgetLibrary/interface"