Merge pull request #1399 from merico-dev/680-viz-table-custom-cell-ac…

…cepts-more-params-like-variables-rowdata

680 viz table custom cell accepts more params like variables rowdata

api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/api",
-  "version": "13.4.2",
+  "version": "13.5.0",
   "description": "",
   "main": "index.js",
   "scripts": {

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/dashboard",
-  "version": "13.4.2",
+  "version": "13.5.0",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",

dashboard/src/components/plugins/viz-components/table/editors/columns/func_content-editor.tsx

@@ -6,6 +6,7 @@ import { Recycle } from 'tabler-icons-react';
 import { DEFAULT_CELL_FUNC_CONTENT } from '../../type';
 import { useTranslation } from 'react-i18next';
 import { IconDeviceFloppy, IconMathFunction } from '@tabler/icons-react';
+import { AboutFunctionUtils } from '~/components/widgets/about-function-utils';
 
 interface IFuncContentEditor {
   value: string;
@@ -58,6 +59,9 @@ export const FuncContentEditor = forwardRef(({ value, onChange }: IFuncContentEd
       >
         {modalOpened && (
           <Stack>
+            <Group position="left">
+              <AboutFunctionUtils />
+            </Group>
             <Box sx={{ position: 'relative' }}>
               <Editor
                 height="500px"

dashboard/src/components/plugins/viz-components/table/render/cell-value.tsx

@@ -5,6 +5,7 @@ import { AnyObject } from '~/types';
 import { formatNumber } from '~/utils';
 import { ColumnAlignType, ITableCellContext, ValueType } from '../type';
 import { AlignmentToFlexJustify } from '../utils';
+import { functionUtils } from '~/utils';
 
 const useCellStyles = createStyles((theme, params: { clickable?: boolean; align: ColumnAlignType }) => ({
   content: {
@@ -77,12 +78,11 @@ function PercentageCell(props: ICellValue) {
 }
 
 function CustomCell(props: ICellValue) {
-  const value = props.value;
-  const func_content = props.func_content;
+  const { value, row_data, func_content } = props;
   if (!func_content) {
     return <CellRender {...props}>{value}</CellRender>;
   }
-  const v = new Function(`return ${func_content}`)()({ value });
+  const v = new Function(`return ${func_content}`)()({ value, row_data }, functionUtils);
   return <CellRender {...props}>{v}</CellRender>;
 }
 
@@ -92,6 +92,7 @@ interface ICellValue {
   tableCellContext: ITableCellContext;
   func_content?: string;
   align: ColumnAlignType;
+  row_data: AnyObject;
 }
 
 export function CellValue(props: ICellValue) {

dashboard/src/components/plugins/viz-components/table/render/table-body.tsx

@@ -1,5 +1,4 @@
 import { Row, flexRender } from '@tanstack/react-table';
-import { useWhyDidYouUpdate } from 'ahooks';
 import { useCallback } from 'react';
 import { useVirtual } from 'react-virtual';
 import { AnyObject } from '~/types';
@@ -21,10 +20,6 @@ export function TableBody({ tableContainerRef, rows }: Props) {
   const paddingTop = virtualRows.length > 0 ? virtualRows?.[0]?.start || 0 : 0;
   const paddingBottom = virtualRows.length > 0 ? totalSize - (virtualRows?.[virtualRows.length - 1]?.end || 0) : 0;
 
-  useWhyDidYouUpdate('TableBody', {
-    tableContainerRef,
-    rows,
-  });
   return (
     <tbody>
       {paddingTop > 0 && (

dashboard/src/components/plugins/viz-components/table/render/viz-table-component.tsx

@@ -62,9 +62,17 @@ export function VizTableComponent({ queryData, width, height, conf, context, ins
     const valueCols = finalColumns.map((c) => {
       const k = parseDataKeyOrColumnKey(c.value_field);
       return columnHelper.accessor(k.columnKey, {
-        cell: (cell) => (
-          <CellValue tableCellContext={getCellContext(cell.cell)} value={cell.getValue()} type={c.value_type} {...c} />
-        ),
+        cell: (cell) => {
+          return (
+            <CellValue
+              tableCellContext={getCellContext(cell.cell)}
+              value={cell.getValue()}
+              type={c.value_type}
+              row_data={cell.row.original}
+              {...c}
+            />
+          );
+        },
         header: c.label,
         enableSorting: true,
         meta: c,

dashboard/src/components/plugins/viz-components/table/type.ts

@@ -38,12 +38,7 @@ export interface ITableConf {
   highlightOnHover: boolean;
 }
 
-export const DEFAULT_CELL_FUNC_CONTENT = [
-  'function text({ value }) {',
-  '    // your code goes here',
-  '    return value',
-  '}',
-].join('\n');
+export const DEFAULT_CELL_FUNC_CONTENT = ['function text({ value }, utils) {', '    return value', '}'].join('\n');
 
 export const DEFAULT_CONFIG: ITableConf = {
   columns: [],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/root",
-  "version": "13.4.2",
+  "version": "13.5.0",
   "private": true,
   "workspaces": [
     "api",

settings-form/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/settings-form",
-  "version": "13.4.2",
+  "version": "13.5.0",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",

website/package.json

@@ -2,7 +2,7 @@
   "name": "@devtable/website",
   "private": true,
   "license": "Apache-2.0",
-  "version": "13.4.2",
+  "version": "13.5.0",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview"