Inline cell editing

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.

Start by reviewing the DataTable API and the existing discussion on this issue, including the pseudo-TSX example. Identify whether inline cell editing and adding an empty row are supported entry points or require a new design; done should be defined as an agreed implementation path and documented behavior for editing and saving records.