Editable rows with togglable "Edit"

[1Ghasthunter1]

Hi all,

I have somewhat generic order items table, e.g. quantity, part number, etc. However, I want to not have every item editable as per the TanStack example (e.g. like a spreadsheet), but a toggleable edit state where fields will turn into pre-filled input fields. I already have a custom editable input component which takes an editable prop that would of course toggle text v. input box.

The "Edit" button is in a display column on the far right of the table, and, while it looks great, I'm unsure of two things:

1. How to store custom row state that the edit display col could change
2. How to allow that custom state to be accessed by each column def, which, includes the editable input.

Appreciate the help, thanks.

[1Ghasthunter1]

Solved this issue myself:

So, what I first tried was using the selected state of the table, so simply checking if the row is selected and toggling it worked well enough. However, the problem arises during deletion in the following case:

Let's say you have a table with 6 rows (index [0, 5]), and you want to edit, let's say rows at index 2 and 3. By clicking whatever "edit" button you have, you're going to tell the table via API that you want rows at index 2 and 3 editable.

Now, you'll also have to add a code to re-toggle the selected state upon deletion of any of the rows, as if you get rid of row 3, you should probably tell the table to unselect this row as it no longer exists.

The real bug comes when deleting row 2 in this scenario with the above steps: When we delete row at idx 2, we'll tell the table to deselect 2 and then of course update local state (or via api) to get the table new data without the row we just deleted. At this point, however, the table now has a [3] array for determing which rows are selected, and, because all of our rows passed idx 2 just shifted down one, a row we had nothing to do with (at idx 4) is now in it's "editable" state.

Solution
I found the best way was to use external state combined with the unique identifier of all the rows in my table to do this. In my particular case, each table row was a MongoDB object, containing a unique ID. My method for determining if something was selected or toggling selection of something was simple:

//Selected rows are literally stored as array of the row's unique ID from mongoose
  const [selectedRows, setSelectedRows] = useState<string[]>([]);

//Toggle selected for a given id; simply takes the id, and, if it doesn't include the id, adds it, or if it does include it, removes it.
  const toggleEdit = (id: string) => {
    if (selectedRows.includes(id)) {
      setSelectedRows(selectedRows.filter((rowId) => rowId !== id));
    }
    setSelectedRows(selectedRows.concat(id));
  };

 //Is selected is easy- wrote the function to reduce boilerplate. Just returns bool result of if a given id exists in selectedRows
  const isSelected = (id: string) => selectedRows.includes(id);