Customize Data Type Layout and Styles

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

This documentation uses the term lightning-datatable component and datatable interchangeably.

Note

Use a Layout for a Custom Data Type

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.

1static customTypes = { customName: { template: customNameTemplate, standardCellLayout: true,
2typeAttributes: ['accountName'], }, // Other types here }

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 support accessibility and keyboard navigation for a custom data type, use a slot for the custom data type. See Accessibility for Custom Data Types.

Apply Styles on a Column

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

1const COLS = [
2  {
3    label: "Employees",
4    type: "number",
5    fieldName: "NumberOfEmployees",
6    cellAttributes: {
7      class: "slds-theme_shade slds-theme_alert-texture",
8    },
9  },
10];

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.

1/* myDatatable.js */
2import { LightningElement, wire, track } from 'lwc';
3import getAccountList from '@salesforce/apex/AccountController.getAccountList';
4
5const COLS = [{
6    label: 'Industry', fieldName: 'Industry',
7    cellAttributes: {
8        class: { fieldName: 'industryClass' },
9    }
10}, // Other columns here
11];
12
13export default class MyDatatable extends LightningElement {
14    columns = COLS;
15    @track accounts = [];
16
17    @wire(getAccountList)
18    wiredAccounts({error, data}) {
19        if (error) {
20            // Handle error
21        } else if (data) {
22            // Process record data
23            this.accounts = data.map((record) => {
24                let industryClass = record.Industry === 'Energy' ? 'slds-text-color_success' : '';
25                return {...record, industryClass: industryClass}
26            });
27
28        }
29    }

Custom classes are currently not supported. To apply custom styling, use the SLDS utility classes. For example, apply text color using the SLDS text utility classes.

Align Content in a Custom Cell

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.

1const COLS = [
2  {
3    label: "Account Name",
4    type: "customName",
5    fieldName: "Name",
6    cellAttributes: {
7      alignment: "right",
8    },
9  },
10];

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.

Text Wrapping and Clipping

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.

1<template>
2  <template lwc:if={wrapText}>
3    <div class="slds-hyphenate">{typeAttributes.accountName}</div>
4  </template>
5  <template lwc:else>
6    <div class="slds-truncate">{typeAttributes.accountName}</div>
7  </template>
8</template>

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 datatable loads, pass in wrapText: true to the column definition.

1const COLS = [
2  {
3    label: "Account Name",
4    type: "customText",
5    wrapText: true,
6    typeAttributes: {
7      accountName: { fieldName: "Name" },
8    },
9  },
10];

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 datatable applies line clamping to allow for multi-line text truncation.

1<template>
2  <c-my-custom-type-datatable
3    key-field="id"
4    data={accounts}
5    columns={columns}
6    wrap-text-max-lines="2"
7  >
8  </c-my-custom-type-datatable>
9</template>

wrap-text-max-lines isn’t supported for Internet Explorer 11. The entire text in a column appears if wrapText is true.

Note

See Also