Make a Custom Data Type Editable

To make your custom data type editable in lightning-datatable, create an additional template to implement the UI for inline editing of the data type.

These high-level steps add inline edit capability.

Create an edit template.
Add the edit template to the custom type definition.
Make the custom type editable in the column definition.

Let’s implement inline editing for the customNumber type in the example from Define Your Custom Type by Extending LightningDatatable.

In the same folder where you defined the custom type templates, create a template customNumberEdit.html to use for editing the customNumber.html custom type.

The edit template for a custom type uses an input component that matches the output component in the custom type template. The lightning-input component is recommended. In the example, the output component lightning-formatted-number is used in the customNumber template, so we use lightning-input type="number" in its edit template. The lightning-input type="number" component enables users to change the number in the custom type cell.

For information about components you can use in the edit template, see Inline Edit Considerations for Custom Types later in this page.

Use these attributes to pass values between the input component and the extended datatable component.

Attribute	Type	Description
`editedValue`	string	The current value of the custom cell being edited.
`columnLabel`	string	The `label` value retrieved from the column definition.
`required`	boolean	The requiredness value retrieved from the column definition. The default value is false. If the column definition sets `required` to true, the field shows a validation error if a user interacts with the field and doesn’t enter a value.
`typeAttributes`	object	The object containing the type attribute values for the cell. Access the values using the`typeAttributes.attributeName` syntax.

The example sets the min attribute to ensure that users enter a non-negative number when inline editing the custom number. In the next section, you add min to the custom type definition.

The data-inputable="true" attribute is required for accessibility support in the standard cell layout.

Import the edit template in myCustomTypeDatatable.js, and add the property editTemplate: customNumberEditTemplate in the customNumber definition in the customTypes object. The editTemplate property specifies the template for inline editing of the custom type.

Change the standardCellLayout value to true to support accessibility and keyboard navigation. See Accessibility of Editable Custom Types later in this page for more information.

Add the min attribute to typeAttributes in the type definition.

In your datatable’s column definition, add the editable: true property to the custom type.

Here we show the myDatatable.js example from Implement Your Data Table with the Custom Types in Create a Custom Data Type with the editable: true property applied to the Employees column, which uses type customNumber.

If you add attributes to the input component in the edit template, add them to the column definition as well. Here we added the min attribute to typeAttributes for the Employees column.

Edited fields of custom types are displayed with a yellow highlight just as with the standard data types. The changed value for the cell is temporarily stored in the editedValue property.

Persist the changed value from the datatable as you do for standard types, using the onsave action and draft-values attribute. See Display Data in a Table with Inline Editing and the section Working with Inline Editing in the lightning-datatable reference documentation.

To support accessibility features such as keyboard navigation for your editable custom data type:

Add the attribute data-inputable="true" to the input component in the edit template.
Set standardCellLayout: true for the custom type definition in customTypes.

These attributes enable the datatable’s action mode and navigation mode to work on your custom data type. Get into action mode by pressing the Enter key or Space Bar on the cell displaying your editable custom data type. In navigation mode, when you press the Tab key in the datatable you can navigate to cells displaying your editable custom data type because they're actionable.

The aria-label attribute is applied to the input component using the value of the label attribute.

The lightning-input component handles basic client-side input validation for you. For example, if you specify a step, min, or max attribute for a number input, the component validates the input against those attribute values and returns an error if it’s not valid. You can also perform more complex client-side validation for your custom type.

To further validate user input for the custom type on the client, use a child component in the custom edit template.

Set data-inputable="true" on the input component and include the validity() getter in its JS to expose the validity API for the input component.

Expose the showHelpMessageifInvalid() method from the input component in the edit template so the custom data type can display a custom message when changed data is invalid.

For more information, see the reference documentation for lightning-input.

Only Lightning base components with a single input field are supported as the input component in custom edit templates. Components such as lightning-input type="datetime" that have multiple inputs whose API evaluates to a single input are also supported.
The lightning-input-field component is designed for use in lightning-record-edit-form only and isn’t supported for use in a datatable. Use lightning-input instead.
Server-side validation rules aren't supported for custom data types yet.