Lightning Data Table in LWC

Lightning Web Components (LWC) have revolutionized the way developers build user interfaces on the Salesforce platform. Among the many powerful components available, the lightning data table in LWC stands out as a versatile and feature-rich component for displaying and interacting with tabular data. Whether you need to display simple data sets or implement advanced features like sorting inline editing, and row selection, the lightning-datatable has got you covered.

This blog explores Lightning Data Table in LWC, covering sorting, inline editing, row selection, and more. With practical examples and code snippets, you’ll learn to build dynamic and interactive data tables for your LWC projects.

What is lightning-datatable?

The lightning-datatable component is a pre-built LWC component that allows you to display data in a tabular format. It comes with a variety of built-in features, such as sorting, filtering, inline editing, and row selection, making it a powerful tool for building data-rich user interfaces.

Key Features

1. Sorting: Allows users to sort data by clicking on column headers.
2. Inline Editing: Enables users to edit data directly within the table.
3. Row Selection: Allows users to select one or more rows for further action.
4. Pagination: Supports pagination for large data sets.
5. Custom Cell Rendering: Allows you to customize how data is displayed in individual cells.

Basic Usage of lightning-datatable

Before diving into advanced features, let’s start with a basic example of how to use the lightning-datatable component.

<template>
<lightning-datatable
key-field="id"
data={data}
columns={columns}>
</lightning-datatable>
</template>

import { LightningElement } from 'lwc';const columns = [
{ label: 'Name', fieldName: 'name' },
{ label: 'Email', fieldName: 'email' },
{ label: 'Phone', fieldName: 'phone' }
];

const data = [
{ id: 1, name: 'John Doe', email: 'john.doe@example.com', phone: '555-1234' },
{ id: 2, name: 'Jane Smith', email: 'jane.smith@example.com', phone: '555-5678' },
{ id: 3, name: 'Bob Johnson', email: 'bob.johnson@example.com', phone: '555-9012' }
];

export default class BasicDataTable extends LightningElement {
data = data;
columns = columns;
}

Explanation

• key-field: A unique identifier for each row. This is required for the table to function correctly.
• data: The data to be displayed in the table. This should be an array of objects.
• columns: Defines the columns in the table. Each column has a label (the column header) and a fieldName (the key in the data object).

Implementing Sorting

Sorting is a common requirement for data tables. The lightning-datatable component supports sorting out of the box. To enable sorting, you need to set the sortable property to true for the columns you want to be sortable. 

<template>
<lightning-datatable
key-field="id"
data={data}
columns={columns}
onsort={handleSort}>
</lightning-datatable>
</template>

Javascript File

import { LightningElement } from 'lwc';

const columns = [
{ label: 'Name', fieldName: 'name', sortable: true },
{ label: 'Email', fieldName: 'email', sortable: true },
{ label: 'Phone', fieldName: 'phone', sortable: true }
];

const data = [
{ id: 1, name: 'John Doe', email: 'john.doe@example.com', phone: '555-1234' },
{ id: 2, name: 'Jane Smith', email: 'jane.smith@example.com', phone: '555-5678' },
{ id: 3, name: 'Bob Johnson', email: 'bob.johnson@example.com', phone: '555-9012' }
];

export default class SortableDataTable extends LightningElement {
data = data;
columns = columns;

handleSort(event) {
const { fieldName, sortDirection } = event.detail;
const sortedData = this.sortData(fieldName, sortDirection);
this.data = sortedData;
}

sortData(fieldName, sortDirection) {
const data = [...this.data];
const reverse = sortDirection === 'asc' ? 1 : -1;

data.sort((a, b) => {
if (a[fieldName] < b[fieldName]) return -1 * reverse;
if (a[fieldName] > b[fieldName]) return 1 * reverse;
return 0;
});

return data;
}
}

Explanation

• sortable: true: Enables sorting for the column.
• onsort: Event handler that triggers when a column header is clicked to sort the data.
• handleSort: Custom method to handle the sorting logic. It sorts the data based on the selected column and sort direction. 

Implementing Inline Editing

Inline editing allows users to edit data directly within the table. To enable inline editing, you need to set the editable property to true for the columns you want to be editable.

<template>
<lightning-datatable
key-field="id"
data={data}
columns={columns}
onsave={handleSave}>
</lightning-datatable>
</template>

Javascript file

import { LightningElement } from 'lwc';

const columns = [
{ label: 'Name', fieldName: 'name', editable: true },
{ label: 'Email', fieldName: 'email', editable: true },
{ label: 'Phone', fieldName: 'phone', editable: true }
];

const data = [
{ id: 1, name: 'John Doe', email: 'john.doe@example.com', phone: '555-1234' },
{ id: 2, name: 'Jane Smith', email: 'jane.smith@example.com', phone: '555-5678' },
{ id: 3, name: 'Bob Johnson', email: 'bob.johnson@example.com', phone: '555-9012' }
];

export default class EditableDataTable extends LightningElement {
data = data;
columns = columns;

handleSave(event) {
const updatedFields = event.detail.draftValues;
const updatedData = this.data.map(item => {
const updatedItem = updatedFields.find(field => field.id === item.id);
return updatedItem ? { ...item, ...updatedItem } : item;
});

this.data = updatedData;
}
}

Explanation

• editable: true: Enables inline editing for the column.
• onsave: Event handler that triggers when the user saves the edited data.
• handleSave: Custom method to handle the save logic. It updates the data with the edited values.

Implementing Row Selection

Row selection allows users to select one or more rows for further action. To enable row selection, you need to set the selected-rows property and handle the rowselection event.

<template>
<lightning-datatable
key-field="id"
data={data}
columns={columns}
selected-rows={selectedRows}
onrowselection={handleRowSelection}>
</lightning-datatable>
</template>

Javascript File

import { LightningElement } from 'lwc';

const columns = [
{ label: 'Name', fieldName: 'name' },
{ label: 'Email', fieldName: 'email' },
{ label: 'Phone', fieldName: 'phone' }
];

const data = [
{ id: 1, name: 'John Doe', email: 'john.doe@example.com', phone: '555-1234' },
{ id: 2, name: 'Jane Smith', email: 'jane.smith@example.com', phone: '555-5678' },
{ id: 3, name: 'Bob Johnson', email: 'bob.johnson@example.com', phone: '555-9012' }
];

export default class SelectableDataTable extends LightningElement {
data = data;
columns = columns;
selectedRows = [];

handleRowSelection(event) {
this.selectedRows = event.detail.selectedRows;
}
}

Explanation

• selected-rows: Binds the selected rows to a property in the component.
• onrowselection: Event handler that triggers when rows are selected.
• handleRowSelection: Custom method to handle the row selection logic. It updates the selectedRows property with the selected rows.

Custom Cell Rendering

Custom cell rendering allows you to customize how data is displayed in individual cells. This is useful for displaying icons, buttons, or other custom content.

<template>
<lightning-datatable
key-field="id"
data={data}
columns={columns}>
</lightning-datatable>
</template>

Javascript File

import { LightningElement } from 'lwc';

const columns = [
{ label: 'Name', fieldName: 'name' },
{ label: 'Email', fieldName: 'email' },
{ label: 'Phone', fieldName: 'phone' },
{
label: 'Action',
type: 'button',
typeAttributes: {
label: 'View',
name: 'view',
variant: 'brand'
}
}
];

const data = [
{ id: 1, name: 'John Doe', email: 'john.doe@example.com', phone: '555-1234' },
{ id: 2, name: 'Jane Smith', email: 'jane.smith@example.com', phone: '555-5678' },
{ id: 3, name: 'Bob Johnson', email: 'bob.johnson@example.com', phone: '555-9012' }
];

export default class CustomCellDataTable extends LightningElement {
data = data;
columns = columns;
}

Explanation

• type: ‘button’: Specifies that the cell should render a button.
• typeAttributes: Defines the attributes of the button, such as label, name, and variant.

Implementing Row Numbering

Row numbering is a useful feature for better data reference. To implement row numbering, you can add a custom column that displays the row number.

<template>
<lightning-datatable
key-field="id"
data={data}
columns={columns}>
</lightning-datatable>
</template>

Javascript File

import { LightningElement } from 'lwc';

const columns = [
{ label: 'Row Number', type: 'number', fieldName: 'rowNumber', sortable: true },
{ label: 'Name', fieldName: 'name' },
{ label: 'Email', fieldName: 'email' },
{ label: 'Phone', fieldName: 'phone' }
];

const data = [
{ id: 1, name: 'John Doe', email: 'john.doe@example.com', phone: '555-1234' },
{ id: 2, name: 'Jane Smith', email: 'jane.smith@example.com', phone: '555-5678' },
{ id: 3, name: 'Bob Johnson', email: 'bob.johnson@example.com', phone: '555-9012' }
];

export default class RowNumberDataTable extends LightningElement {
data = data.map((item, index) => {
return { ...item, rowNumber: index + 1 };
});
columns = columns;
}

Explanation

type-number: Specifies that the cell should render a number.
fieldName: rowNumber: The key in the data object that holds the row number.
data.map: Adds a rowNumber property to each item in the data array, which is the index of the item plus one.

Are you preparing for the Salesforce AI Certifications? Check out the Salesforce certification practice set here

FAQs

1. What is a Lightning Data Table, and how is it different from a standard HTML table?

A Lightning Data Table is a pre-built Salesforce component (lightning-datatable) designed to display data in a structured, interactive, and responsive table format. Unlike standard HTML tables, it comes with built-in features like sorting, pagination, row selection, and inline editing. It also integrates seamlessly with Salesforce data and adheres to Lightning Design System (SLDS) guidelines.

2. Can I customize the columns and data types in a Lightning Data Table?

Yes, you can customize the columns and data types in a Lightning Data Table. The columns attribute allows you to define the column headers, data types (e.g., text, number, date, URL, etc.), and additional properties like sortable or editable. For example, you can specify a column as a hyperlink or display a custom icon.

3. How do I enable inline editing in a Lightning Data Table?

To enable inline editing, set the editable attribute to true in the lightning-datatable component. You also need to define which columns are editable by setting the editable property to true in the column definition. When a user edits a cell, the oncellchange event is triggered, allowing you to handle the updated data.

4. Is it possible to load large datasets in a Lightning Data Table without performance issues?

While Lightning Data Table is optimized for performance, loading extremely large datasets can impact performance. To handle large datasets, consider implementing server-side pagination, lazy loading, or using an infinite scroll pattern. You can also use the enable-infinite-loading attribute to load more data as the user scrolls, improving the user experience.

Conclusion

The Lightning Data Table in LWC is a powerful and flexible tool for displaying and interacting with tabular data in LWC. With built-in support for sorting, inline editing, row selection, and custom cell rendering, it provides everything you need to build dynamic and interactive data tables in your Salesforce applications.

In this blog, we’ve covered the basics of using the lightning-datatable component, as well as how to implement advanced features like sorting, inline editing, row selection, and custom cell rendering. With these examples and best practices, you’re well-equipped to start building your own data tables in LWC. 

Get a complete Roadmap To Learn Salesforce Admin And Development

Name *

First

Last

Email *

Comment or Message

Submit