- added Table field;

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

@@ -0,0 +1,150 @@
+import React, { useEffect, useState } from 'react';
+import { classNames } from 'primereact/utils';
+import { __ } from '@wordpress/i18n';
+import {
+    useReactTable,
+    getCoreRowModel,
+    flexRender,
+} from '@tanstack/react-table';
+import { pathOr, isEmpty } from 'ramda';
+import { wrap } from 'object-path-immutable';
+
+const Table = ({
+                   fieldName,
+                   label,
+                   register,
+                   errors,
+                   config = {},
+                   defaultValue = [],
+                   tableColumns = []
+               }) => {
+    const [stateFieldData, setStateFieldData] = useState([]);
+    const [rowsData, setRowsData] = useState([]);
+    const [isDisabledNewRow, setIsDisabledNewRow] = useState(false);
+    const [columns, setColumns] = useState([]);
+    const table = useReactTable({
+        data: rowsData,
+        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
+                        value={initialValue}
+                        onChange={(e) => table.options.meta?.updateData(index, id, e.target.value)}
+                        onBlur={onBlur}
+                    />
+                );
+            },
+        },
+        getCoreRowModel: getCoreRowModel(),
+        meta: {
+            updateData: (rowIndex, columnId, value) => {
+                const newRowsData = wrap(rowsData).set([rowIndex, columnId], value).value();
+                setRowsData(newRowsData);
+            },
+        },
+        debugTable: true,
+    });
+
+    const addNewRow = () => {
+        const obj = stateFieldData
+            .reduce((acc, cur) => {
+                acc[cur.name] = ''
+                return acc;
+            }, {});
+        setRowsData([...rowsData, obj]);
+    }
+
+    useEffect(() => {
+        let shouldDisableNewRows = false;
+
+        const columns = stateFieldData.map((o) => {
+            const item = {
+                accessorKey: o.name,
+                header: () => o.label,
+                footer: (props) => props.column.id
+            }
+
+            if (o.predefined) {
+                shouldDisableNewRows = true;
+                item.cell = (info) => {
+                    return info.getValue();
+                }
+            }
+
+            return item;
+        });
+
+        setIsDisabledNewRow(shouldDisableNewRows);
+        setColumns(columns);
+    }, [stateFieldData]);
+
+    useEffect(() => {
+        const stateFieldData = pathOr([], ['stateFieldData'], tableColumns);
+        const rowsData = pathOr([], ['rowsData'], tableColumns);
+        setStateFieldData(stateFieldData);
+        setRowsData(rowsData);
+    }, [tableColumns]);
+
+    useEffect(() => {
+        register(fieldName, config)
+    }, []);
+
+    return (
+        <>
+            <label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] })}>
+                {label}{config.required || config.isRequired ? '*' : null}
+            </label>
+            <table>
+                <thead>
+                {table.getHeaderGroups().map((headerGroup) => (
+                    <tr key={headerGroup.id}>
+                        {headerGroup.headers.map((header) => {
+                            return (
+                                <th key={header.id} colSpan={header.colSpan}>
+                                    {header.isPlaceholder ? null : (
+                                        <>
+                                            {flexRender(
+                                                header.column.columnDef.header,
+                                                header.getContext()
+                                            )}
+                                        </>
+                                    )}
+                                </th>
+                            );
+                        })}
+                    </tr>
+                ))}
+                </thead>
+                <tbody>
+                {table.getRowModel().rows.map((row) => {
+                    return (
+                        <tr key={row.id}>
+                            {row.getVisibleCells().map((cell) => {
+                                return (
+                                    <td key={cell.id}>
+                                        {flexRender(
+                                            cell.column.columnDef.cell,
+                                            cell.getContext()
+                                        )}
+                                    </td>
+                                );
+                            })}
+                        </tr>
+                    );
+                })}
+                </tbody>
+            </table>
+            {!isDisabledNewRow && !isEmpty(columns)
+                ? <div className="addNewTableRow" onClick={addNewRow}>{__('Aggiungi una righa', 'gepafin')}</div>
+                : null}
+        </>)
+}
+
+export default Table;

src/components/FormField/index.js

@@ -15,6 +15,7 @@ import Radio from './components/Radio';
 import Wysiwyg from './components/Wysiwyg';
 import Checkboxes from './components/Checkboxes';
 import Fileupload from './components/Fileupload';
+import Table from './components/Table';
 
 const FormField = (props) => {
     const fields = {
@@ -29,7 +30,8 @@ const FormField = (props) => {
         select: Select,
         radio: Radio,
         wysiwyg: Wysiwyg,
-        checkboxes: Checkboxes
+        checkboxes: Checkboxes,
+        table: Table
     }
     const Comp = !isNil(fields[props.type]) ? fields[props.type] : null;