DataTable Compatibility with Mobile

Use Case

Currently, we cannot use lightning DataTable for mobile as it is not supported. When we try to see, the data shows up in lightning DataTable in mobile UI, it shows the records as per the Desktop view in a table and the user has to scroll right, left to view the data, which makes it a cumbersome experience.
For example, below is the lightning DataTable used to show case records –

<lightning-datatable class=”slds-max-medium-table_stacked” hide-checkbox-column=”true” data={csList} columns={columns} key-field=”Id”></lightning-datatable>

In this blog, we are going to walk you through two solutions which can be used to display the records in a mobile app.

  1. Lightning DataTable (desktop) automatically takes up the list of records returned from Javascript code, displays it in a table, and also takes up all the fields as defined in Javascript code. While in the solution with lightning layout and lightning layout items, we have to loop through the returned list manually and define each field separately inside HTML code
  2. In Lightning DataTable we have a standard option to add a radio button and call our handleselect javascript function for the record selected, while if we use lighting layout items we have to include HTML standard radio button for each lightning layout item (each case record in this scenario) manually and call handleselect from it
  3. As explained in point 2 above, there will be a difference in both radio buttons in order to how we capture the particular selected record from HTML inside Javascript:
    1. For normal lightning DataTable (supported in desktop) we use event.detail.selectedRow (here selectedRow is the variable which gives the selected record)
    2. For using lightning layout items (mobile view) we use:
      event.target.dataset.targetId (here targetId is the variable which gives the selected record Id)
  4. To distinguish between mobile view and desktop view in the code we have used FormFactor (to inform the code when to use lightning DataTable to display record list and when to use lightning layout items to display records):

import FORM_FACTOR from ‘@salesforce/client/formFactor’;
let formFactor = FORM_FACTOR;
let formFactor = FORM_FACTOR;
if(formFactor == ‘Small’){
this.isMobile = true
}if(formFactor == ‘Large’){
this.isDesktop = true;
}
if(this.ictId){
this.fetchAccountDetails();
}

Solution

  1. In this solution, we can make DataTable compatible with mobile by using SLDS Class which makes the table show up in stacked rows format. Below is the code which makes mobile compatible:

<lightning-datatable class=”slds-max-medium-table_stacked” hide-checkbox-column=”true” data={csList} columns={columns} key-field=”Id”></lightning-datatable>

DataTable compatible-code improvement-DataTableUI
DataTable - Mobile View

Considerations:
The flexibility of customizing the code further is limited

  1. This solution will bring more Using Lightning Layout, Lightning Layout Item
Using Lightning Layout, Lightning Layout Item

Considerations:

  1. If the table is having a functionality to edit the records or to make a selection of the records, then passing the record ID using standard code will not work and we need to use data attributes to pass the selected/edited record IDs to the backend
  2. The formatting should be handled using SLDS classes and CSS

Summary

As making table compatible for mobile application view if the table was defined using a lightning-datatable tag then developers need to use Lightning Layout, Lightning Layout item tags to customize it for mobile application.

Thought Leadership