Enhancing DataTables in LWC – Part 3 Multi-line Cells

This example shows how we can get a datatable to show a cell with two lines of text. This can help when there are less rows to show but more columns, so you can combine two fields in one cell:

Lets set up a simple demo LWC to show the table – called multiLineTableDemo:

import { LightningElement } from "lwc";

const sampleData = [
    id: "1",
    itemName: "item A",
    category: "Category A",
    status: "Pending A",
    status1: "Status A"
    id: "2",
    itemName: "item B",
    category: "category B",
    status: "Rejected B",
    status1: "Status B"
    id: "3",
    itemName: "item C",
    category: "Category C",
    status: "Pending C",
    status1: "Status C"

const columns = [
    label: "Item",
    fieldName: "itemName"
    label: "Category",
    fieldName: "category"
    label: "Status",
    type: "customMulti",
    typeAttributes: {
      line1: { fieldName: "status" },
      line2: { fieldName: "status1" }

export default class MultiLineTableDemo extends LightningElement {
  data = sampleData;
  columns = columns;

The above code sets up some columns and test data and then we have a LWC component that would be CustomMultiLineDataTable. The status column has a type of customMulti has the typeAttributes setting a line1 and line2 based on the status and stauts1 fields.

Lets work down a level of detail into the CustomMultiLineDataTable:

import LightningDatatable from "lightning/datatable";
import customMultiLineRow from "./customMultiLineRow.html";

export default class CustomMultiLineDataTable extends LightningDatatable {
  static customTypes = {
    customMulti: {
      template: customMultiLineRow,
      standardCellLayout: true,
      typeAttributes: ["line1", "line2"]

There is not much to this, we have a blank template and then in the javascript file we are extending the LightningDatatable and defining our customType calls customMulti with a template, standardCellLayout and then typeAttributes.

The second line of the file imports the customMultiLineRow html file which is :


This file is in the same directory as the LWC:

This template refers to the individual cell in another LWC called CustomMultiRow, whihc is the final rendering of the cell (which is super simple):

import { LightningElement, api } from "lwc";

export default class CustomMultiRow extends LightningElement {
  @api line1;
  @api line2;

So we are simply setting up two div elements with line1 and line2.

The final files and arrangement is:

Leave a Reply

Your email address will not be published. Required fields are marked *