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?