- added 'delete' for Table;

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

@@ -6,8 +6,9 @@ import {
     getCoreRowModel,
     flexRender,
 } from '@tanstack/react-table';
-import { pathOr, isEmpty } from 'ramda';
+import { pathOr, isEmpty, isNil } from 'ramda';
 import { wrap } from 'object-path-immutable';
+import { Button } from 'primereact/button';
 
 const Table = ({
                    fieldName,
@@ -20,6 +21,8 @@ const Table = ({
                }) => {
     const [stateFieldData, setStateFieldData] = useState([]);
     const [rowsData, setRowsData] = useState([]);
+    const [rowsDataLength, setRowsDataLength] = useState(0);
+    const [rowIndexToDelete, rowRowIndexToDelete] = useState(null);
     const [isDisabledNewRow, setIsDisabledNewRow] = useState(false);
     const [columns, setColumns] = useState([]);
     const table = useReactTable({
@@ -61,10 +64,14 @@ const Table = ({
         setRowsData([...rowsData, obj]);
     }
 
+    const removeRow = (index) => {
+        rowRowIndexToDelete(index)
+    }
+
     useEffect(() => {
         let shouldDisableNewRows = false;
 
-        const columns = stateFieldData.map((o) => {
+        let columns = stateFieldData.map((o) => {
             const item = {
                 accessorKey: o.name,
                 header: () => o.label,
@@ -82,12 +89,45 @@ const Table = ({
         });
 
         setIsDisabledNewRow(shouldDisableNewRows);
+
+        if (!shouldDisableNewRows && !isEmpty(columns)) {
+            columns.push({
+                accessorKey: 'actions',
+                header: () => '',
+                footer: (props) => props.column.id,
+                cell: ({row: { index }}) => <Button
+                    type="button"
+                    icon="pi pi-times"
+                    className="p-button-danger"
+                    label=""
+                    onClick={() => removeRow(index)}/>
+            })
+        }
+
         setColumns(columns);
-    }, [stateFieldData]);
+    }, [stateFieldData, rowsDataLength]);
+
+    useEffect(() => {
+        setRowsDataLength(rowsData.length);
+    }, [rowsData]);
+
+    useEffect(() => {
+        if (!isNil(rowIndexToDelete)) {
+            const newRowsData = wrap(rowsData).del([rowIndexToDelete]).value();
+            setRowsData(newRowsData);
+        }
+        rowRowIndexToDelete(null);
+    }, [rowIndexToDelete]);
 
     useEffect(() => {
         const stateFieldData = pathOr([], ['stateFieldData'], tableColumns);
-        const rowsData = pathOr([], ['rowsData'], tableColumns);
+        const obj = stateFieldData
+            .reduce((acc, cur) => {
+                acc[cur.name] = ''
+                return acc;
+            }, {});
+        let rowsData = pathOr([obj], ['rowsData'], tableColumns);
+        rowsData = isEmpty(rowsData) ? [obj] : rowsData;
         setStateFieldData(stateFieldData);
         setRowsData(rowsData);
     }, [tableColumns]);