Customize Data Type Layout and Styles

You can customize the look of lightning-datatable cells that use custom data types.

A custom cell can use a standard or bare layout.

Standard layout:

• Spreads content evenly across the cell, with the first item flush to the left border and the last item flush to the right border
• Aligns text to the left and vertically to the center
• Adds a small padding to the left and right of the content
• Supports accessibility and keyboard navigation for editable types

The bare layout, which is the default layout for custom cells:

• Aligns text to the left and vertically to the center
• Removes padding from the left and right of the content
• Doesn’t support accessibility and keyboard navigation for editable types

The standard data types supported in lightning-datatable all use the standard layout.

To use the standard layout, specify standardCellLayout: true when you define your custom types.

See Create a Custom Data Type.

When you create a custom data type and use the default bare layout, you can apply your own styles, align content in a column, configure text wrapping and clipping.

To apply styling to all rows in a column, pass the CSS classes to cellAttributes in the column configuration.

To apply styling to particular rows, use the fieldName attribute to wire up the CSS classes to your data definition. This example uses the fieldName property industryClass to apply blue text to rows that are in the Energy industry.

You can align content in a column that uses the standard layout on a custom data type. In your cellAttributes definition, pass in the alignment property.

Supported alignment values are left, center, and right.

By default, standard number types align to the right. Standard number types include the currency, number, and percent data types.

When you create a custom data type, implement the text wrapping and clipping with the SLDS utility classes slds-hyphenate and slds-truncate. These classes enable the custom data cell to display correctly when users change the wrap text selection in the datatable column header. Text wrapping expands the rows vertically to reveal more content. Text clipping truncates the content to a single line within the column.

Let’s say you have a custom data type template that displays account names. The column displays with the text clipped by default, which truncates content with a trailing ellipsis.

You can also create a getter that returns the SLDS utility classes based on the wrapText value.

To display wrapped text, select Wrap text from the dropdown menu on the column header.

Alternatively, to display wrapped text on a column when the data table loads, pass in wrapText: true to the column definition.

You can control how many lines are displayed when column content is wrapped. Set wrap-text-max-lines in your extended datatable component to display a number of lines before hiding the rest. The data table applies line clamping to allow for multi-line text truncation.

See Also

• Lightning Design System: Hyphenation
• Lightning Design System: Truncation