Tip of the week # 212 : Lightning Datatable hidden gems

Lightning Datatable hidden gems

Description : lightning-datatable displays tabular data where each column renders the content based on the data type.
ADVANCED OPTIONS FOR lightning-datatable IN LWC :

---

• Displaying and formatting of columns with appropriate data types

  
      
      const columns = [
        { label: 'Opportunity name', fieldName: 'OpportunityName', type: 'text' },
        {
            label: 'Probability',
            fieldName: 'Probability',
            type: 'percent',
            cellAttributes: {
                iconName: { fieldName: 'TrendIcon' },
                iconPosition: 'right',
            },
        },
        {
            label: 'Amount',
            fieldName: 'Amount',
            type: 'currency',
            typeAttributes: { currencyCode: 'EUR', step: '0.001' },
        },
        { label: 'Contact Email', fieldName: 'Contact', type: 'email' },
        { label: 'Contact Phone', fieldName: 'Phone', type: 'phone' },
  	];
      
  	
  	

• Infinite scrolling of rows

  
      
  		import { LightningElement, api } from 'lwc';
  
          export default class DatatableExample extends LightningElement {
              data = [];
              columns = columnsDefs;
              loadMoreStatus;
              @api totalNumberOfRows;
  
              loadMoreData(event) {
                  //Display a spinner to signal that data is being loaded
                  event.target.isLoading = true;
                  //Display "Loading" when more data is being loaded
                  this.loadMoreStatus = 'Loading';
                  fetchData(50).then((data) => {
                      if (data.length >= this.totalNumberOfRows) {
                          event.target.enableInfiniteLoading = false;
                          this.loadMoreStatus = 'No more data to load';
                      } else {
                          const currentData = this.data;
                          //Appends new data to the end of the table
                          const newData = currentData.concat(data);
                          this.data = newData;
                          this.loadMoreStatus = '';
                      }
                      event.target.isLoading = false;
                  });
              }
          }
      
  	
  	

• Text wrapping and clipping

  
      
  		const columns = [
            {
                label: 'Description',
                fieldName: 'description',
                type: 'text',
                wrapText: true,
            },
            //other column data
        ];
        //HTML <br>
        <lightning-datatable
            data={data}
            columns={columns}
            key-field="Id"
            wrap-text-max-lines="3">
        </lightning-datatable>
      
  	
  	

• Sorting with Column

  
      
  		import { LightningElement , wire, track} from 'lwc';
  import sortAccountItem from '@salesforce/apex/lwcSortingDataTableCtrl.sortAccountList';
  const columns = [
      {
          label: 'Name',
          fieldName: 'Name',
          sortable: "true"
      }, {
          label: 'Phone',
          fieldName: 'Phone',
          sortable: "true"
      }, {
          label: 'Industry',
          fieldName: 'Industry',
          type: 'Picklist',
          sortable: "true"
      }, {
          label: 'Type',
          fieldName: 'Type',
          type: 'Picklist',
          sortable: "true"
      }, {
          label: 'Website',
          fieldName: 'Website',
          type: 'URL',
          sortable: "true"
      },
  ];
  export default class LwcSortingDataTable extends LightningElement {
      @track data;
      @track columns = columns;
      @track sortBy;
      @track sortDirection;
      @wire(sortAccountItem)
      accounts(result) {
          if (result.data) {
              this.data = result.data;
              this.error = undefined;
  
  
          } else if (result.error) {
              this.error = result.error;
              this.data = undefined;
          }
      }
  
  
  
  
      handleSortAccountData(event) {       
          this.sortBy = event.detail.fieldName;       
          this.sortDirection = event.detail.sortDirection;       
          this.sortAccountData(event.detail.fieldName, event.detail.sortDirection);
      }
  
  
      sortAccountData(fieldname, direction) {
          
          let parseData = JSON.parse(JSON.stringify(this.data));
         
          let keyValue = (a) => {
              return a[fieldname];
          };
  
  
         let isReverse = direction === 'asc' ? 1: -1;
  
  
             parseData.sort((x, y) => {
              x = keyValue(x) ? keyValue(x) : ''; 
              y = keyValue(y) ? keyValue(y) : '';
             
              return isReverse * ((x > y) - (y > x));
          });
          
          this.data = parseData;
  
  
      }
  
        //HTML <br>
        <lightning-datatable data={data}
              columns={columns}
               key-field="id"
               sorted-by={sortBy}
               sorted-direction={sortDirection}
               onsort={handleSortAccountData}
               hide-checkbox-column="true"></lightning-datatable>
      
  	
  	

• Set Columns Width

  
      
  		const columns = [
            { label: 'Account Name', fieldName: 'name' , initialWidth : 200},
            { label: 'Account Website ', fieldName: 'website', type: 'url' ,initialWidth : 200},
            { label: 'Phone', fieldName: 'phone', type: 'phone',initialWidth : 200 },
            { label: 'Balance', fieldName: 'amount', type: 'currency',initialWidth : 200 },
        ];
      
  	
  	

• Responsive Datatable for all devices

  
      
  		<lightning-datatable
                  key-field="id"
                  data={data}
                  columns={columns}
                  draft-values={draftValues}
                  class="slds-max-medium-table_stacked">
          </lightning-datatable>
      
  	
  	

• Prevent to multiple row selection

  
      
      
      	import { LightningElement } from 'lwc';
          export default class DatatableWithInlineEdit extends LightningElement {
              data = [];
              @track draftValues = [];
              columns = [{label: 'Amount', fieldName: 'amount', type: 'currency', typeAttributes: { currencyCode: 'EUR'}, editable : 'true'},
      					{label: 'Contact Email', fieldName: 'contact', type: 'email', editable : 'true'}];
              rowOffset = 0;
  
              handleClick() {
                  const dt = this.template.querySelector('lightning-datatable');
                  dt.openInlineEdit();
              }
              handleSave(event) {
                this.saveDraftValues = event.detail.draftValues;
            }
          }
  		<template>
            <lightning-datatable
                key-field="Id"
                data={data}
                columns={columns}
                onsave={handleSave}>
            </lightning-datatable>
        </template>
        
        
      
  	
  	

• Inline Editing

  
      
  		<lightning-datatable
                  key-field="id"
                  data={data}
                  columns={columns}
                  max-row-selection="1"
                  class="slds-max-medium-table_stacked">
          </lightning-datatable>
      
  	
  	

• Note : No Native Support for:
  1. Picklist fields Not supported natively; requires custom type. 2. Lookup fields Display only via name string; no lookup UI 3. Multi-column headers Not supported (no column groups) 4.

Happy Sharing...

Everyone has their own favorites, so please feel free to share with yours contacts and comments below for any type of help!

Use below Chrome Extension for Productivity and share your feedback. Download Link : https://chromewebstore.google.com/detail/quick-shortcuts/ldodfklenhficdgllchmlcldbpeidifp?utm_source=ext_app_menu