Hello friends, today we will learn data Tables in LWC (lightning web component).
Information Tables in LWC is one of the mainstream base parts that you will contact at whatever point you need to show a rundown of records.
The motivation behind why it is so natural to work with and simple to design is, we don’t need to manage a huge load of alternatives.
We just need to control the JSON string that is being passed as the contribution to the tag and the rest that will be taken into consideration by the base segment.
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.
<template>
<lightning-datatable
key-field="id"
data={data}
columns={columns}>
</lightning-datatable>
</template>
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 show the data to data tables in LWC.
import { LightningElement, track, wire } from 'lwc';
import getContacts from '@salesforce/apex/exploreDatatableController.getContacts';
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;
console.log(JSON.stringify(data));
} else if (error) {
console.log(error);
}
}
}
Total views : 1049028