Enhancing DataTables in LWC – Part 4 Text Wrap

This is a simple example of a datatable with cell wrapping where there is too much text in the cell to display on one line. This is not quite the same as the Part 3 example which was two separate fields. This is what we are aiming for:

This is simple done with the wrapText attribute on the column, so our html template file is a simple:

<template>
  <div style="height: 300px">
    <lightning-datatable key-field="id" data={data} columns={columns}>
    </lightning-datatable>
  </div>
</template>

and the javascript file is:

import { LightningElement } from "lwc";

const sampleData = [
  {
    id: "1",
    field1: "item A",
    field2: "Category A",
    field3:
      "Pending A that has text that needs to wrap around the to the next cell",
    field4: "Status A"
  },
  {
    id: "2",
    field1: "item B",
    field2: "category B",
    field3:
      "Rejected B that has text that needs to wrap around the to the next cell",
    field4: "Status B"
  },
  {
    id: "3",
    field1: "item C",
    field2: "Category C",
    field3:
      "Pending C that has text that needs to wrap around the to the next cell and there might be so much it wraps to 3 lines or evne 4 if we have lots of text.",
    field4: "Status C"
  }
];

const columns = [
  {
    label: "Column 1",
    fieldName: "field1"
  },
  {
    label: "Column 2",
    fieldName: "field2"
  },
  {
    label: "Column 3",
    fieldName: "field3",
    type: "text",
    wrapText: true
  },
  {
    label: "Column 4",
    fieldName: "field4"
  }
];

export default class WrapTableDemo extends LightningElement {
  columns = columns;

  data = sampleData;
}