Cell inline edits

[zbraniecki]

Describe the solution you'd like

This is similar to #79 but tailored down to making a single cell editable.

Screen.Recording.2023-04-11.at.5.50.34.PM.mov

The way I achieved it is by specifying a custom render function on a column:

      render: (item) => {
        let matching = false;
        if (editableCell !== null) {
          if (editableCell.id === item.id && editableCell.accessor === 'name') {
            matching = true;
          }
        }
        if (!matching) {
          return item.name;
        }
        return (
          <TextInput 
            placeholder={"name"}
            variant="unstyled"
            sx={{
              "& input": {
                lineHeight: 'normal',
                height: 'auto',
                minHeight: 'auto',
              }
            }}
            value={editableCellValue}
            onChange={(e) => setEditableCellValue(e.currentTarget.value)}
            ref={focusTrapRef}
            onKeyDown={onEditableCellKey}
          ></TextInput>
        );
      },
    },

This is quite unintuitive and I had to combine it with onClick to set editable cell rowId/columnId.

It would be great to be able to make a column as editable (preferably for some rows, not always for all) and handle editable/readonly states.

[icflorescu]

I like how it looks. Would you be willing to come up with a PR? :-)
Same for #248

Thanks a lot!

[icflorescu]

Closing due to inactivity.