Edit inline in table

[hiimnhan]

I am using cloudscape component version ^3.0.138, I am trying to add inline edit to table.
I am using what you guys provided in the doc

cell: ( item, { isEditing, currentValue, setValue } ) => {...} 

but it returns error reading isEditing of undefined.
I also try to use like the code in the demo which is

editConfig: { ariaLabel: 'Edit SSL certificate', errorIconAriaLabel: 'Certificate Validation Error', editIconAriaLabel: 'editable', editingCell: (item, { setValue, currentValue }) => {...} 

but not successfully.
Please help

[fa7ad]

Hi,
Our documentation was out of date, we've updated it now. You should be able to see the correct documentation at https://cloudscape.design/components/table/?tabId=api now.

To implement inline editing in a table you can use our demo and its corresponding source code as a starting point.

The relevant part of the code would look something like this:

const columnDefinitions = [ { id: "variable", header: "Variable name", minWidth: 176, cell: (item) => { return item.name; }, editConfig: { ariaLabel: "Name", editIconAriaLabel: "editable", errorIconAriaLabel: "Name Error", editingCell: (item, { currentValue, setValue }) => { return ( <Input autoFocus={true} value={currentValue ?? item.name} onChange={(event) => setValue(event.detail.value)} /> ); }, }, }, // other column definitions ];

I also noticed that you are not using the latest version of @cloudscape-design/components, for reference the current latest version is 3.0.170. Can you try updating to the latest version and see if your problem still persists?