Skip to main content

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.


Following are the features currently supported by this component
  • Display column based on the data type
  • Resizing the column width
  • Selection of rows in the table
  • Sorting of column
Dynamic Data and 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 complete source code of this example is available in the GitHub  or click the below button to deploy code into your org directly

Deploy to Salesforce


Popular posts from this blog

Avoid Duplicate Records Using Flow

In this blog post lets see how to avoid duplicate records in Salesforce using the powerful feature – Flow , As the word says, flow easily flows to fulfill the requirements with ease. ☺  Many think of appexchange solutions and source code to avoid the duplicate record in salesforce, But the method I'm going to explain here is completely different and very simple. It helps you to reduce your code and can easily rebuild for other objects with different field logic with simple clicks. Lets jump into the solution, we will use flow to check duplicate record logic and use apex trigger to initiate the Flow whenever a record is created or updated. Visual Work Flow : [Click] First we will create the Flow to check the duplicate records based on the name and store the result in the variable. In this example, we will use the Account object for the dupe check. Step 1  : Create a new visual flow with the Name ‘ DuplicateAccountCheck ' Step 2  : Click and drag the RecordLookup into t

Export records from List view – ListView API

As part of the Winter’15 release salesforce introduced the List View API features which helps us to get details and records of list views for an object. I was started exploring more about the List view API and trying to build an use case using that. So I searched about List View in the IdeaExchange site then found that many users are looking for a solution to export records to excel directly from the list view. I built a solution for that Idea, which helps user to download all the records directly from the List view for both standard and custom object. You don’t have to make any change in the code to use this functionality for different objects. All you need is to create a custom button for that object as mentioned below. Lets take an example for Account object 1. Go to Setup –> Accounts –> Buttons, Links and Actions 2. Click ‘New Button or Link' 3. Enter  Label, Name and select display type as ‘List Button’ 4. Content source as “Onclick Javascript” and paste the

Lightning Picklist Path Component

Create your custom path for picklist field in any standard and custom objects. The new lightning picklistpath component in Winter18 helps us to display the picklist field progress similar to the lightning path. The path is rendered as a horizontal bar with one chevron for each picklist item, this component doesn't have key fields or guidance information and doesn't display the mark complete button similar to the lightning path.  <lightning:picklistPath aura:id="picklistPath" recordId="{!v.recordId}" picklistFieldApiName="status" / > The picklist path will display the progress based on the recordId and picklistApiName attribute value. Specify the API name of the picklist field in the picklistAPIName attribute which you want to display in the page layout and specify the Salesforce record ID in the recordID attribute so it renders the current value for the field in the page.   In this example, the status field in the case object disp