fix paginated row edition and add/remove functionalities

Author: ionlizarazu

src/components/Widgets/EditableTable.jsx

@@ -110,6 +110,7 @@ const EditableCell = ({
   setSelectedRow,
   schema,
   reactSelect,
+  state: { pageIndex, pageSize },
 }) => {
   const fieldSchema = { ...schema?.properties?.[id], id: id };
   const [value, setValue] = React.useState(initialValue);
@@ -122,7 +123,6 @@ const EditableCell = ({
       setValue(e.value);
     } else {
       setValue(e.map((value) => value.value));
-      console.log('e', e);
     }
   };
 
@@ -185,9 +185,6 @@ function EditableTable(props) {
     schema,
     reactSelect,
   } = props;
-  if (data.length === 0) {
-    addRowAfter({ key: 'Enter' }, 0);
-  }
   const {
     getTableProps,
     getTableBodyProps,
@@ -211,7 +208,13 @@ function EditableTable(props) {
     },
     usePagination,
   );
-
+  if (data.length === 0) {
+    addRowAfter({ key: 'Enter' }, 0, pageIndex, pageSize);
+  }
+  React.useEffect(() => {
+    gotoPage(pageIndex);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data]);
   // Render the UI for your table
   return (
     <>
@@ -233,7 +236,9 @@ function EditableTable(props) {
             prepareRow(row);
             return (
               <Table.Row
-                className={selectedRow === i ? 'selected-row' : ''}
+                className={
+                  selectedRow === pageIndex * pageSize + i ? 'selected-row' : ''
+                }
                 {...row.getRowProps()}
               >
                 {row.cells.map((cell) => {
@@ -246,17 +251,21 @@ function EditableTable(props) {
                 <Table.Cell>
                   <div className={'row-actions'}>
                     <span
-                      onClick={(e) => addRowAfter(e, i)}
-                      onKeyDown={(e) => addRowAfter(e, i)}
+                      onClick={(e) => {
+                        addRowAfter(e, i, pageIndex, pageSize);
+                      }}
+                      onKeyDown={(e) => {
+                        addRowAfter(e, i, pageIndex, pageSize);
+                      }}
                       tabIndex={0}
                       role="button"
                       className="row-action"
                     >
                       <Icon name={plusSVG} size="23px" />
                     </span>
                     <span
-                      onClick={(e) => removeRow(e, i)}
-                      onKeyDown={(e) => removeRow(e, i)}
+                      onClick={(e) => removeRow(e, i, pageIndex, pageSize)}
+                      onKeyDown={(e) => removeRow(e, i, pageIndex, pageSize)}
                       tabIndex={0}
                       role="button"
                       className="row-action"

src/components/Widgets/ReactTableWidget.jsx

@@ -72,27 +72,29 @@ const ReactDataTableWidget = (props) => {
     onChange(id, newvalue);
   };
 
-  const removeRow = (event, rowIndex) => {
+  const removeRow = (event, rowIndex, pageIndex, pageSize) => {
     setHasModifiedData(true);
     if (event.type === 'click' || event.key === 'Enter') {
-      setSelectedRow(rowIndex);
-      const newvalue = value.filter((v, i) => i !== rowIndex);
+      setSelectedRow(pageIndex * pageSize + rowIndex);
+      const newvalue = value.filter(
+        (v, i) => i !== pageIndex * pageSize + rowIndex,
+      );
       onChange(id, newvalue);
     }
   };
 
-  const addRowAfter = (event, rowIndex) => {
+  const addRowAfter = (event, rowIndex, pageIndex, pageSize) => {
     setHasModifiedData(true);
     if (event.type === 'click' || event.key === 'Enter') {
       let newRowValue = {};
       schema.fieldsets[0].fields.forEach((field) => {
         newRowValue[field] = '';
       });
-      setSelectedRow(rowIndex + 1);
+      setSelectedRow(pageIndex * pageSize + rowIndex + 1);
       const newvalue = [
-        ...value.slice(0, rowIndex + 1),
+        ...value.slice(0, pageIndex * pageSize + rowIndex + 1),
         { '@id': uuid(), ...newRowValue },
-        ...value.slice(rowIndex + 1),
+        ...value.slice(pageIndex * pageSize + rowIndex + 1),
       ];
       onChange(id, newvalue);
     }