Usage Of lightning:datatable


In this blog, I am going to explain how to use salesforce lightning:datatable component and its features. A lightning:datatable component displays tabular data where each column can be displayed based on the data type .lightning:datatable is not supported on mobile devices. Inline editing is currently not supported. Supported features include

  • Displaying and formatting of columns with appropriate data types
  • Infinite scrolling of rows
  • Header-level actions
  • Row-level actions
  • Resizing of columns
  • Selecting of rows
  • Sorting of columns by ascending and descending order
  • Text wrapping and clipping

Tables can be populated during initialization using the data, columns, and keyField attributes.The table data is loaded using the init handler. Selecting the checkbox enables you to select the entire row of data and triggers the onrowselection event handler. The below code shows how to use the lightning: datatable to initialize the data and columns which are passed by using attributes.

Here’s the client-side controller that creates the column’s object to their corresponding column data.

The below code used to set the data for the data table.

 Using an Apex Controller

Let’s say you want to display data in the Book object. Create an Apex controller that queries the fields you want to display.This apex controller is having different methods that are used in other data table features like total rows and infinite loading and row, header actions.


Infinite Scrolling to Load More Rows

Infinite scrolling enables you to load a subset of data and then display more when users scroll to the end of the table. To enable infinite scrolling, set enableInfiniteLoading to true and provide an event handler using onloadmore. By default, data loading is triggered when you scroll down to 20px from the bottom of the table, but the offset can be changed using the loadMoreOffset attribute. Here is the list of attributes need to set for lightning:datatable for enabling the infinity loading.

Here is the below controller logic


Header-Level Actions

Header-level actions refer to tasks you can perform on a column of data, such as displaying only rows that meet a criterion provided by the column. You can perform actions on a column and handle them using the onheaderaction event handler.Here is the markup which needs to set while initializing the data table on init.


Below is the controller action that used to handler the header action based on used is selected what type of data user wanted to see like completed or pre-order or in completed books based on the status.


Static Row-Level Actions

Row-level actions refer to tasks you can perform on a row of data, such as updating or deleting the row. Static actions apply to all rows on the table. You can perform actions on each row and handle them using the onrowaction event handler.

You must provide a list of actions to the data of the column, which can be done during initialization. This client-side controller initializes the actions column and handles the actions on each row, displaying the row details and deleting the row when the action is clicked.


Sorting Data By Column

To enable sorting of row data by a column label, set sortable to true for the column on which you want to enable sorting. Set sortedBy to match the fieldName property on the column. Clicking a column header sorts rows by ascending order unless the defaultSortDirection is changed, and clicking it subsequently reverses the order. Handle the onsort event handler to update the table with the new column index and sort direction.


Below controller and helper code show sorting logics from the component controller.

Handling Selected  Rows 

The selectedRows attribute enables programmatic selection of rows, which is useful when you want to preselect rows.If maxRowSelection is set to a value less than the number of selected rows, only the specified number of rows will be selected.

Complete code is here


Controller code