After reading this article, you’ll be able to:
- Understand the need for a custom column in lightning-datatable
- Learn the structure of a basic custom column
- Understand how to use with lightning-datatable
- Sample LWC component
Datatable Supported Standard Data Types
Here is a comprehensive list of data types supported by
lightning-datatable. It is important to know the supported type and their implementation restriction beforehand to better design the end solution.
|Data Type||Rendered using Base Component|
|boolean||lightning-primitive-icon is displayed if true|
Need for Custom Column in lightning-datatable
The data table formats the data cells of a column based on the type you specify for the column. Each data type is associated with a base Lightning component. For example, specifying the text type renders the associated data using a
lightning-formatted-text component or date type displays a date and time based on the locale using
lightning-formatted-date-time LWC base component.
Basically, every data type is displayed using available base components in the LWC component library. But this is not always the case like displaying an actionable button, upload file button, rich text content, toggle button, radio buttons, custom image or icon, etc. are not directly supported by
lightning-datatable. In such scenarios
lightning-datatable provide additional capabilities to extend functionality by allowing us to use custom LWC components as the custom data type for the datatable columns.
As part of building custom columns salesforce allows us to:
- Specify custom type attributes – Used to customize the column cells even further
- Implement text wrapping and clipping in custom cells
- Implement different layouts in custom cells
- Aligning content in custom cells
- Support accessibility for custom cells
- and even calling custom events from custom cells
Custom Column Scenarios
Here are some example scenarios where we can leverage support for custom functionality by
- Display Custom Images inside
- Display Custom Toggle or Checkbox inside
- Display File Upload Box inside
- Display Picklist inside
Basic Structure of Custom Column
Here’s how you can create custom data types.
Step 1: Create a custom LWC component that extends the LightningDatatable class. This component will be used as a datatable in your parent component.
Step 2: Create a custom data type by defining the custom LWC component which includes the desired UI and event mechanism. This will be rendered inside individual cells in datatable.
Step 3: Create a HTML template file inside a custom datatable component (Created in step 1) which acts as a connection between datatable and custom data type component.
Step 4: Ready to use/consume datatable with a custom column in your parent LWC component. Example below.
Either copy as needed code from the gist or download component bundle from the button below.
Sample HTML Templates
Custom Icon/Image in datatable
Use below as sample HTML templates in
customDatatable component to display custom icons or images stored in static resource or external image URLs.
Custom Rich Text Contents in datatable
Use below as sample HTML templates in
customDatatable component to display rich text contents that contain HTML tags. In the standard text data type HTML characters are stripped down to improve security. But there are some scenarios where we need to render HTML tags like <a>, <b>, <br> or <img> along with text, In such cases we can build custom components to satisfy the requirement.
- Working playground project here.
- Gist resource to download bundle here.
- Learn more about the skeleton structure in this post.
- Checkout SLDS Datatable design guidelines.
- Sample Templates
- Check this article for colored columns in datatable.
- Learn how to create & use stencils in LWC.