Merge pull request #18 from Mawla/feature/indexes

Adding the ability to add rows and columns at indexes

Author: rdunk

src/TableComponent.tsx

@@ -70,6 +70,20 @@ const TableComponent: FunctionComponent<RootProps> = (props) => {
     return updateValue(newValue);
   };
 
+  const addRowAt = (index: number = 0) => {
+    const newValue = { ...value };
+    // Calculate the column count from the first row
+    const columnCount = value.rows[0].cells.length;
+
+    newValue.rows.splice(index, 0, {
+      _type: config.rowType,
+      _key: uuid(),
+      cells: Array(columnCount).fill(''),
+    })
+
+    return updateValue(newValue);
+  };
+
   const removeRow = (index: number) => {
     const newValue = deepClone(value);
     newValue.rows.splice(index, 1);
@@ -98,6 +112,16 @@ const TableComponent: FunctionComponent<RootProps> = (props) => {
     return updateValue(newValue);
   };
 
+  const addColumnAt = (index: number) => {
+    const newValue = deepClone(value);
+
+    newValue.rows.forEach((_, i) => {
+      newValue.rows[i].cells.splice(index, 0, '')
+    });
+
+    return updateValue(newValue);
+  };
+
   const removeColumn = (index) => {
     const newValue = deepClone(value);
     newValue.rows.forEach((row) => {
@@ -152,7 +176,9 @@ const TableComponent: FunctionComponent<RootProps> = (props) => {
         {value?.rows?.length && (
           <TableMenu
             addColumns={addColumns}
+            addColumnAt={addColumnAt}
             addRows={addRows}
+            addRowAt={addRowAt}
             remove={confirmRemoveTable}
             placement="left"
           />

src/components/TableMenu.tsx

@@ -15,7 +15,9 @@ import { AddIcon, WarningOutlineIcon, ControlsIcon } from '@sanity/icons';
 
 const TableMenu: FunctionComponent<{
   addColumns: (count: number) => any;
+  addColumnAt: (index: number) => any;
   addRows: (count: number) => any;
+  addRowAt: (index: number) => any;
   remove: () => any;
   placement: 'top' | 'bottom' | 'left' | 'right' | 'auto';
 }> = (props) => {
@@ -34,16 +36,25 @@ const TableMenu: FunctionComponent<{
     setDialog({ type: 'rows', callback: (count) => props.addRows(count) });
   };
 
+  const addRowAt = () => {
+    setDialog({ type: 'rows', callback: (index) => props.addRowAt(index) });
+  };
+
   const addColumns = () => {
     setDialog({
       type: 'columns',
       callback: (count) => props.addColumns(count),
     });
   };
 
+  const addColumnsAt = () => {
+    setDialog({ type: 'columns', callback: (index) => props.addColumnAt(index) });
+  };
+
   const onConfirm = () => {
     const parsedCount = parseInt(count, 10);
-    if (parsedCount && parsedCount < 100) {
+
+    if (parsedCount < 100) {
       setDialog(null);
       dialog.callback(parsedCount);
       setCount(undefined);
@@ -94,12 +105,24 @@ const TableMenu: FunctionComponent<{
               text="Add Row(s)"
               onClick={addRows}
             />
+            <MenuItem
+              icon={AddIcon}
+              fontSize={1}
+              text="Add Row At Index"
+              onClick={addRowAt}
+            />
             <MenuItem
               icon={AddIcon}
               fontSize={1}
               text="Add Column(s)"
               onClick={addColumns}
             />
+            <MenuItem
+              icon={AddIcon}
+              fontSize={1}
+              text="Add Column At Index"
+              onClick={addColumnsAt}
+            />
             <MenuDivider />
             <MenuItem
               icon={WarningOutlineIcon}