FREE SALESFORCE LWC COMPONENT

Data Table

Use lightning-datatable for standard behavior, then wrap or extend it only when the UX requires custom rendering.

Component structure

COMPONENTwcsDataTable

PLATFORMSalesforce Lightning Web Components

STARTERTemplate + JavaScript + CSS + Meta XML

HTML template

<template>
  <lightning-datatable
    key-field="id"
    data={rows}
    columns={columns}
    hide-checkbox-column>
  </lightning-datatable>
</template>

JavaScript

import { LightningElement } from 'lwc';

export default class WcsDataTable extends LightningElement {
  columns = [
    { label: 'Name', fieldName: 'name' },
    { label: 'Status', fieldName: 'status' }
  ];

  rows = [];
}

CSS

:host{display:block}

Meta XML

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>64.0</apiVersion>
  <isExposed>true</isExposed>
  <targets>
    <target>lightning__AppPage</target>
    <target>lightning__RecordPage</target>
    <target>lightning__HomePage</target>
  </targets>
</LightningComponentBundle>