Inline cell editing

[mikkurogue]

In our implementation, we want to be able to add records to the array inline from the datatable, think of a structure of the table and at the bottom an "empty" row that works as a button that adds a new entry to the records. The way we do this now is that we use an unstyled button and use a transparent styling to indicate "interactivity".

However, what we can't yet do or figure out is inline cell value editing. I understand we can handle cell clicks but I'd rather make it that we can focus on the cell and have an input in them and then "save" the value to the records array once we unfocus the input

Some pseudo code to kind of illustrate what I mean

const records = [{name: 'row 1', some_val: 100}, {name: 'row2', some_val: 101}];

const create = () => {
    // push an "empty" record, or a default variant of a record
    records.push({name: '', some_val: 0})
}

// cellEdit are pseudo props - does not exist
<DataTable columns={table_columns} records={records} cellEditable />
<Button color="rgba(173, 173, 173, 1)" variant="transparent" onClick={create}>New record...</Button>

What would be recommended way of doing this?

I apologize before hand if there is already an issue or fix for this but after searching I can't seem to find a relevant issue or article in docs.

[mikkurogue]

I did find this: https://icflorescu.github.io/mantine-datatable/examples/expanding-rows/#using-collapse-function-in-row-expansion-content

However I think for our use-case this would be a bit too "verbose" as we want to edit directly in the cell.

[mikkurogue]

Current workaround is to define the render prop in the column to render an unstyled input. Not sure if I'm a big fan but for now this "works". I'll keep this open for now still for discussion in case we may want to look into supporting cell editing.

@icflorescu its your call :)