Data Tables in LWC (Lightning Web Components)

Data Tables in LWC - let me walk you through how to use lightning datatable to display data in tabular format.

Data Tables in LWC (Lightning Web Components)

Data Tables in LWC is one of the popular base components that you will reach out to when ever you want to display list of records.

Data Tables are very popular in Aura Components and in Salesforce Classic too, with the only difference that they are referred to as Page Block Tables.

The reason why it is so easy to work with and easy to configure is, we don't have to deal with a ton of options.

We only need to control the JSON string that is being passed as the input to <lightning-datatable /> tag and rest everything will be taken care by the base component.

In case you are here for some advanced scenarios, this is for you Advanced Data Tables in LWC
Basic Data Table in LWC(Lightning Web Components)

This is how the tag is going to look like. If you notice it there is no fuss at all, it's pretty much simple and straight forward.

<!-- We are looking at display data in 
	tabular format with data being fed 
	to data and columns attribute.-->

<lightning-datatable
                    key-field="id"
                    data={data}
                    columns={columns}>
            </lightning-datatable>          

This is how columns will be sourced to the tag in template file from the web components js file.

const columns = [
        { label: 'Name', fieldName: 'Name' },
        { label: 'Rating', fieldName: 'Rating' },
        { label: 'Industry', fieldName: 'Industry' }
    ];

This is how we are trying to source the data to data tables in LWC.

import { LightningElement, track } from 'lwc';
    
    import getAccounts from '@salesforce/apex/exploreDatatableController.getAccounts';
    
    const columns = [
        { label: 'Name', fieldName: 'Name' },
        { label: 'Rating', fieldName: 'Rating' },
        { label: 'Industry', fieldName: 'Industry' }
    ];
    
    export default class ExplorePagination extends LightningElement {
    
    @track data ;
    
    //wiring the apex method to a function 
    @wire(getContacts)
        wiredContacts({ error, data }) {
            //Check if data exists 
            if (data) {
                this.data = data;
	              // eslint-disable-next-line no-console  
                console.log(JSON.stringify(data));
            } else if (error) {
                // eslint-disable-next-line no-console
                console.log(error);
            }else{
		            // eslint-disable-next-line no-console
		            console.log('unknown error')
            }
        }
    }

Do not forget to add values to isExposed and targets tags in the web components xml file.

In case you are interested in looking at all the other attributes that can be passed to Data Tables in LWC please check this.

Liked the post? Let me know what you think of it.

Interested in learning LWC Development with me? Subscribe to my course (use this if you are out of India).