Lightning Data Table Component - Winter’18
Here is the another helpful component for salesforce lighting developers in Winter18 release. In this blog post let’s see about lightning data table component. This lightning component is to display the data in the tabular formate in a native salesforce lightning style.
lightning:datatable
This component used to display the data in a tabular formate which inherits the datable styling from lightning system. The column in the datatable can be displayed based on the data types for example if the email, phone or URL can displayed with the respective schema by specifying the type of the column. As a developer, we don’t have to use lightning design system div tags in your component to display the data in a table format instead a single line of code.
- Display column based on the data type
- Resizing the column width
- Selection of rows in the table
- Sorting of column
You can specify the object name and columns dynamically to make your component reusable for both custom and standard objects. All we need to do is get the API name of the object and list of fields from the user in an attribute and query the data from the apex controller.
In the apex controller, we are retrieving the data and the column type based on the values in the attribute Object and Fields respectively. To get the column type we are using schema describe method to retrieve the data type of the field and to retrieve the data we are using the dynamic SOQL query to retrieve from the object.
Sorting
The sorting logic for this datatable can be handled at the client side using the onSort action attribute.The onSort attribute calls the client-side controller when the sort direction is clicked any of the column in the datatable. We are using the javascript sort method to sort the columns in the datatable either ascending or descending at the client-side. The sortedBy and sortedDirection attributed to denote which column is sorted and the sorting direction respectively.
The sorting logic for this datatable can be handled at the client side using the onSort action attribute.The onSort attribute calls the client-side controller when the sort direction is clicked any of the column in the datatable. We are using the javascript sort method to sort the columns in the datatable either ascending or descending at the client-side. The sortedBy and sortedDirection attributed to denote which column is sorted and the sorting direction respectively.
The complete source code of this example is available in the GitHub or click the below button to deploy code into your org directly
