- saving progress;

src/assets/scss/components/appForm.scss

@@ -88,7 +88,6 @@
       color: var(--global-textColor);
       font-size: 15px;
       text-align: left;
-      text-align: start;
     }
 
     th {
@@ -97,6 +96,7 @@
     }
 
     td {
+      min-width: 120px;
       input {
         width: 100%;
         padding: 3px 5px;

src/components/FormField/components/CriteriaTable/RenderTable/components/LastRowCell/index.js

@@ -1,18 +1,11 @@
-import { head, isEmpty, isNil, sum } from 'ramda';
+import { head, isNil, pathOr } from 'ramda';
 
-const LastRowCell = ({columnId, lastRows, columnMeta = {}, getColumnDataFn}) => {
+const LastRowCell = ({columnId, lastRowCfg, columnMeta = {}, tableValue = []}) => {
-    const cellData = head(lastRows.filter(o => !isNil(o[columnId])));
+    const cellData = head(lastRowCfg.filter(o => !isNil(o[columnId])));
     let cellValue = cellData[columnId];
 
     if (columnMeta.enableFormula) {
-        const getAllRowsValues = getColumnDataFn(columnId)
+        cellValue = pathOr(0, ['total'], tableValue);
-            .map(v => isEmpty(v) || isNil(v) ? 0 : v);
-
-        if (cellValue === 'sum') {
-            cellValue = sum(getAllRowsValues);
-        } else {
-            cellValue = 0;
-        }
     }
 
     return <td>{cellValue}</td>;

src/components/FormField/components/CriteriaTable/RenderTable/index.js

@@ -1,16 +1,17 @@
 import React from 'react';
 import { flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
 import { wrap } from 'object-path-immutable';
-import { isEmpty } from 'ramda';
+import { head, isEmpty, isNil, pathOr, sum } from 'ramda';
 
 // components
 import DefaultCell from './components/DefaultCell';
 import LastRowCell from './components/LastRowCell';
 
-const RenderTable = ({ data, columns, lastRow, setRowsFn, disabled }) => {
+const RenderTable = ({ tableValue = {}, columnsCfg, lastRowCfg, setTableValueFn, disabled }) => {
+    const rows = pathOr([], ['rows'], tableValue)
     const table = useReactTable({
-        data,
+        data: rows,
-        columns,
+        columns: columnsCfg,
         defaultColumn: {
             cell: DefaultCell
         },
@@ -18,17 +19,30 @@ const RenderTable = ({ data, columns, lastRow, setRowsFn, disabled }) => {
         meta: {
             disabled,
             updateData: (rowIndex, columnId, value) => {
-                const newRowsData = wrap(data).set([rowIndex, columnId], value).value();
+                const columnCfgData = head(columnsCfg.filter(o => o.accessorKey === columnId));
-                setRowsFn(newRowsData);
+                const cellData = head(lastRowCfg.filter(o => !isNil(o[columnId])));
+                const cellValue = cellData[columnId];
+                let newRowsData = wrap(tableValue).set(['rows', rowIndex, columnId], value).value();
+                let total = pathOr(0, ['total'], tableValue);
+
+                if (columnCfgData.meta.enableFormula) {
+                    const getAllRowsValues = newRowsData.rows
+                        .map(row => row[columnId])
+                        .map(v => isEmpty(v) || isNil(v) ? 0 : v);
+
+                    if (cellValue === 'sum') {
+                        total = sum(getAllRowsValues);
+                    } else {
+                        total = 0;
+                    }
+                }
+
+                newRowsData = wrap(newRowsData).set(['total'], total).value();
+                setTableValueFn(newRowsData);
             },
         }
     });
 
-    const getColumnData = (columnId) => {
-        const rows = table.getRowModel().rows;
-        return rows.map(row => row.getValue(columnId));
-    };
-
     return (
         <table>
             <thead>
@@ -68,14 +82,14 @@ const RenderTable = ({ data, columns, lastRow, setRowsFn, disabled }) => {
                     </tr>
                 );
             })}
-            {!isEmpty(lastRow)
+            {!isEmpty(lastRowCfg)
                 ? <tr>
-                    {columns.map((o) => <LastRowCell
+                    {columnsCfg.map((o) => <LastRowCell
                         key={o.accessorKey}
                         columnId={o.accessorKey}
                         columnMeta={o.meta}
-                        lastRows={lastRow}
+                        lastRowCfg={lastRowCfg}
-                        getColumnDataFn={getColumnData}/>)}
+                        tableValue={tableValue}/>)}
                 </tr>
                 : null}
             </tbody>

src/components/FormField/components/CriteriaTable/index.js

@@ -27,12 +27,12 @@ const Table = ({
     const [rowsCfg, setRowsCfg] = useState([]);
     const [columns, setColumns] = useState([]);
     const [lastRow, setLastRow] = useState([]);
-    const [rows, setRows] = useState(null);
+    const [tableValue, setTableValue] = useState(null);
 
-    const updateRows = useCallback((data) => {
+    const updateValue = useCallback((data) => {
-        setRows(data);
+        setTableValue(data);
         setDataFn(fieldName, data, { shouldValidate: true });
-    }, [rows, defaultValue]);
+    }, [tableValue, defaultValue]);
 
     const properConfig = (config) => {
         let newConfig = klona(config);
@@ -71,7 +71,7 @@ const Table = ({
     }, [columnsCfg, disabled]);
 
     useEffect(() => {
-        setRows(rowsCfg);
+        setTableValue(rowsCfg);
     }, [rowsCfg]);
 
     useEffect(() => {
@@ -84,7 +84,7 @@ const Table = ({
         let rowsData = pathOr([obj], ['rowsData'], tableColumns);
         rowsData = isEmpty(rowsData) ? [obj] : rowsData;
         setColumnsCfg(stateFieldData);
-        setRowsCfg(rowsData);
+        setRowsCfg({rows: rowsData, total: 0});
 
         let lastRowData = stateFieldData.reduce((acc, cur) => {
             const value = cur.enableFormula ? cur.lastRowFormula : (cur.lastRowText ? cur.lastRowText : '');
@@ -103,29 +103,29 @@ const Table = ({
     }, [tableColumns]);
 
     useEffect(() => {
-        if (!equal(rows, defaultValue)) {
+        if (!equal(tableValue, defaultValue)) {
-            setRows(defaultValue);
+            setTableValue(defaultValue);
         }
     }, [defaultValue]);
 
     useEffect(() => {
-        setRows(defaultValue);
+        setTableValue(defaultValue);
         register(fieldName, properConfig(config));
     }, []);
 
-    console.log('rows', rows, lastRow, tableColumns)
     return (
         <>
             <label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] })}>
                 {label}{config.required || config.isRequired || (config.validate && config.validate.nonEmptyTables)
                 ? <span className="appForm__field--required">*</span> : null}
             </label>
-            {rows ? <RenderTable
+            {tableValue
-                columns={columns}
+                ? <RenderTable
-                data={rows}
+                    columnsCfg={columns}
-                lastRow={lastRow}
+                    tableValue={tableValue}
-                setRowsFn={updateRows}
+                    lastRowCfg={lastRow}
-                disabled={disabled}/> : null}
+                    setTableValueFn={updateValue}
+                    disabled={disabled}/> : null}
         </>)
 }
 

src/components/FormField/components/Table/RenderTable/components/LastRowCell/index.js

@@ -1,7 +1,7 @@
 import { head, isEmpty, isNil, sum } from 'ramda';
 
-const LastRowCell = ({columnId, lastRows, columnMeta = {}, getColumnDataFn}) => {
+const LastRowCell = ({columnId, lastRowCfg, columnMeta = {}, getColumnDataFn}) => {
-    const cellData = head(lastRows.filter(o => !isNil(o[columnId])));
+    const cellData = head(lastRowCfg.filter(o => !isNil(o[columnId])));
     let cellValue = cellData[columnId];
 
     if (columnMeta.enableFormula) {

src/components/FormField/components/Table/RenderTable/index.js

@@ -7,10 +7,10 @@ import { isEmpty } from 'ramda';
 import DefaultCell from './components/DefaultCell';
 import LastRowCell from './components/LastRowCell';
 
-const RenderTable = ({ data, columns, lastRow, setRowsFn, disabled }) => {
+const RenderTable = ({ rowsData, columnsCfg, lastRowCfg, setRowsFn, disabled }) => {
     const table = useReactTable({
-        data,
+        data: rowsData,
-        columns,
+        columns: columnsCfg,
         defaultColumn: {
             cell: DefaultCell
         },
@@ -18,7 +18,7 @@ const RenderTable = ({ data, columns, lastRow, setRowsFn, disabled }) => {
         meta: {
             disabled,
             updateData: (rowIndex, columnId, value) => {
-                const newRowsData = wrap(data).set([rowIndex, columnId], value).value();
+                const newRowsData = wrap(rowsData).set([rowIndex, columnId], value).value();
                 setRowsFn(newRowsData);
             },
         }
@@ -68,13 +68,13 @@ const RenderTable = ({ data, columns, lastRow, setRowsFn, disabled }) => {
                     </tr>
                 );
             })}
-            {!isEmpty(lastRow)
+            {!isEmpty(lastRowCfg)
                 ? <tr>
-                    {columns.map((o) => <LastRowCell
+                    {columnsCfg.map((o) => <LastRowCell
                         key={o.accessorKey}
                         columnId={o.accessorKey}
                         columnMeta={o.meta}
-                        lastRows={lastRow}
+                        lastRowCfg={lastRowCfg}
                         getColumnDataFn={getColumnData}/>)}
                 </tr>
                 : null}

src/components/FormField/components/Table/index.js

@@ -170,9 +170,9 @@ const Table = ({
                 ? <span className="appForm__field--required">*</span> : null}
             </label>
             {rows ? <RenderTable
-                columns={columns}
+                columnsCfg={columns}
-                data={rows}
+                rowsData={rows}
-                lastRow={lastRow}
+                lastRowCfg={lastRow}
                 setRowsFn={updateRows}
                 disabled={disabled}/> : null}
             {!isEmpty(columns) && !shouldDisableNewRows