- added render for last row with autosum;

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

@@ -0,0 +1,20 @@
+const DefaultCell = ({ getValue, row: { index }, column: { id }, table }) => {
+    const initialValue = getValue();
+    const disabled = table.options.meta?.disabled;
+
+    const onBlur = (e) => {
+        table.options.meta?.updateData(index, id, e.target.value);
+    };
+
+    return (
+        <input
+            disabled={disabled}
+            value={initialValue ?? ''}
+            onChange={(e) => table.options.meta?.updateData(index, id, e.target.value)}
+            onBlur={onBlur}
+            className="w-full px-2 py-1 border rounded"
+        />
+    );
+};
+
+export default DefaultCell;

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

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

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

@@ -0,0 +1,29 @@
+const NumericFormulaCell = ({ getValue, row: { index }, column: { id }, table }) => {
+    const initialValue = getValue();
+    const disabled = table.options.meta?.disabled;
+
+    const onBlur = (e) => {
+        const numValue = e.target.value === 0 ? null : Number(e.target.value);
+        table.options.meta?.updateData(index, id, numValue);
+    };
+
+    const onChange = (e) => {
+        if (e.target.value === 0 || !isNaN(e.target.value)) {
+            table.options.meta?.updateData(index, id, e.target.value);
+        }
+    };
+
+    return (
+        <input
+            type="number"
+            disabled={disabled}
+            value={initialValue ?? 0}
+            onChange={onChange}
+            onBlur={onBlur}
+            step="any"
+            className="w-full px-2 py-1 border rounded"
+        />
+    );
+};
+
+export default NumericFormulaCell;

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

@@ -1,31 +1,22 @@
 import React from 'react';
 import { flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
 import { wrap } from 'object-path-immutable';
+import { isEmpty } from 'ramda';
 
-const RenderTable = ({ data, columns, setRowsFn, disabled }) => {
+// components
+import DefaultCell from './components/DefaultCell';
+import LastRowCell from './components/LastRowCell';
+
+const RenderTable = ({ data, columns, lastRow, setRowsFn, disabled }) => {
     const table = useReactTable({
         data,
         columns,
         defaultColumn: {
-            cell: ({ getValue, row: { index }, column: { id }, table }) => {
-                const initialValue = getValue();
-
-                const onBlur = (e) => {
-                    table.options.meta?.updateData(index, id, e.target.value);
-                };
-
-                return (
-                    <input
-                        disabled={disabled}
-                        value={initialValue ? initialValue : ''}
-                        onChange={(e) => table.options.meta?.updateData(index, id, e.target.value)}
-                        onBlur={onBlur}
-                    />
-                );
-            },
+            cell: DefaultCell
         },
         getCoreRowModel: getCoreRowModel(),
         meta: {
+            disabled,
             updateData: (rowIndex, columnId, value) => {
                 const newRowsData = wrap(data).set([rowIndex, columnId], value).value();
                 setRowsFn(newRowsData);
@@ -33,6 +24,11 @@ const RenderTable = ({ data, columns, setRowsFn, disabled }) => {
         }
     });
 
+    const getColumnData = (columnId) => {
+        const rows = table.getRowModel().rows;
+        return rows.map(row => row.getValue(columnId));
+    };
+
     return (
         <table>
             <thead>
@@ -72,6 +68,16 @@ const RenderTable = ({ data, columns, setRowsFn, disabled }) => {
                     </tr>
                 );
             })}
+            {!isEmpty(lastRow)
+                ? <tr>
+                    {columns.map((o) => <LastRowCell
+                        key={o.accessorKey}
+                        columnId={o.accessorKey}
+                        columnMeta={o.meta}
+                        lastRows={lastRow}
+                        getColumnDataFn={getColumnData}/>)}
+                </tr>
+                : null}
             </tbody>
         </table>
     )

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

@@ -10,6 +10,7 @@ import { Button } from 'primereact/button';
 import RenderTable from './RenderTable';
 import { klona } from 'klona';
 import { nonEmptyTables } from '../../../../helpers/validators';
+import NumericFormulaCell from './RenderTable/components/NumericFormulaCell';
 
 const Table = ({
                    fieldName,
@@ -25,6 +26,7 @@ const Table = ({
     const [columnsCfg, setColumnsCfg] = useState([]);
     const [rowsCfg, setRowsCfg] = useState([]);
     const [columns, setColumns] = useState([]);
+    const [lastRow, setLastRow] = useState([]);
     const [rows, setRows] = useState(null);
     const [shouldDisableNewRows, setShouldDisableNewRows] = useState(false);
     const [rowIndexToDelete, rowRowIndexToDelete] = useState(null);
@@ -72,19 +74,23 @@ const Table = ({
 
     useEffect(() => {
         let shouldDisableNewRows = false;
-
         let newColumns = columnsCfg.map((o) => {
             const item = {
                 accessorKey: o.name,
                 header: () => o.label,
-                footer: (props) => props.column.id
+                footer: (props) => props.column.id,
+                meta: {
+                    predefined: o.predefined,
+                    enableFormula: o.enableFormula,
+                    fieldtype: o.fieldtype
+                }
             }
 
             if (o.predefined) {
                 shouldDisableNewRows = true;
-                item.cell = (info) => {
-                    return info.getValue();
-                }
+                item.cell = (info) => info.getValue();
+            } else if (o.enableFormula || o.fieldtype === 'numeric') {
+                item.cell = NumericFormulaCell;
             }
 
             return item;
@@ -97,7 +103,7 @@ const Table = ({
                 accessorKey: 'actions',
                 header: () => '',
                 footer: (props) => props.column.id,
-                cell: ({row: { index }}) => <Button
+                cell: ({ row: { index } }) => <Button
                     disabled={disabled}
                     type="button"
                     icon="pi pi-times"
@@ -108,7 +114,7 @@ const Table = ({
         }
 
         setColumns(newColumns);
-    }, [columnsCfg]);
+    }, [columnsCfg, disabled]);
 
     useEffect(() => {
         setRows(rowsCfg);
@@ -125,7 +131,26 @@ const Table = ({
         rowsData = isEmpty(rowsData) ? [obj] : rowsData;
         setColumnsCfg(stateFieldData);
         setRowsCfg(rowsData);
-    }, [tableColumns]);
+
+        let lastRowData = stateFieldData.reduce((acc, cur) => {
+            const value = cur.enableFormula ? cur.lastRowFormula : (cur.lastRowText ? cur.lastRowText : '');
+            acc.push({ [cur.name]: value });
+            return acc;
+        }, []);
+
+        if (!shouldDisableNewRows) {
+            lastRowData.push({ actions: '' })
+        }
+
+        const lastRowValues = lastRowData
+            .map(o => {
+                const values = Object.values(o);
+                return values[0];
+            })
+            .filter(v => !isEmpty(v));
+
+        setLastRow(!isEmpty(lastRowValues) ? lastRowData : []);
+    }, [tableColumns, shouldDisableNewRows]);
 
     useEffect(() => {
         if (!equal(rows, defaultValue)) {
@@ -144,11 +169,16 @@ const Table = ({
                 {label}{config.required || config.isRequired || (config.validate && config.validate.nonEmptyTables)
                 ? <span className="appForm__field--required">*</span> : null}
             </label>
-            {rows ? <RenderTable columns={columns} data={rows} setRowsFn={updateRows} disabled={disabled}/> : null}
+            {rows ? <RenderTable
+                columns={columns}
+                data={rows}
+                lastRow={lastRow}
+                setRowsFn={updateRows}
+                disabled={disabled}/> : null}
             {!isEmpty(columns) && !shouldDisableNewRows
                 ? <div className="addNewTableRow" onClick={addNewRow}>
                     {__('Aggiungi una riga', 'gepafin')}
-            </div>
+                </div>
                 : null}
         </>)
 }