Edit Template Example for Custom Data Types

This example shows a custom data type with templates containing components rather than simple markup.

The lwc-recipes repo has several components that demonstrate inline editing with Apex and the lightning/uiRecordApi module. Look for components whose names start with datatableInline.

This example creates a datatable with a custom datatype for the Amount.

Here’s the datatable on initial load.

Datatable with custom type that's editable

The myDatatableWrapper component contains the extended datatable component that defines the custom type.

Here's the folder for the extended datatable with an editable custom type.

Define the custom type and import the display and edit templates in the extended datatable.

  • You import HTML templates into the extended datatable’s JavaScript file as shown above.
  • Child components used inside a custom cell (for example, c-my-fancy-number in customNumber.html) are referenced directly in the template. Don’t import them in the datatable’s JavaScript file.

The display template uses a child component to render the value.

The child component defines the data type’s display and includes logic to determine the styling that’s applied to the data.

The myFancyNumber component evaluates the data to apply classes, icons, and icon styling.

The customNumberEdit.html template uses the lightning-input component with type="number".

Here’s the datatable after a custom number type field has been edited before the table is saved. The edited field is highlighted in yellow.

Datatable with an edited custom type field

  • Inline edit flow: Unchanged. Set editable: true on the column. Edited values appear in editedValue, and the table emits onsave with draft-values.
  • Keyboard and a11y: Unchanged when standardCellLayout: true and the input in the edit template has data-inputable="true".
  • Other behaviors: Sorting, selection, pagination, and save handling work the same as with standard types.

For information about saving changed data, see Display Data in a Table with Inline Editing.