Creating Multiple Data Table for list of Records using LWC

Question

Can anyone tell me how do I create multiple data table using single lightning data table in my html and iterating over with template for each with the list ?

I am looking at something like this:

Please note all the information of table 1 and table 2 including columns,data values is in a JSON that I would receiving via apex.

I tried with this but looks like I am missing something here are the JS and HTML files:

import { LightningElement } from 'lwc';

const everythingData = [];
const alldata = [];
const data1 = [
    { id: 1, name: 'Billy Simonns', age: 40, email: '[email protected]' }];
const data2 = [
    { id: 2, name: 'Kelsey Denesik', age: 35, email: '[email protected]' }
];

alldata.push(data1);
alldata.push(data2);

const allColumns = [];


const columns = [
    { label: 'Name', fieldName: 'name' },
    {
        label: 'Age',
        fieldName: 'age',
        type: 'number',
        sortable: true,
        cellAttributes: { alignment: 'left' },
    },
    { label: 'Email', fieldName: 'email', type: 'email' },
];

const columns1 = [
    { label: 'Name', fieldName: 'name' },
    {
        label: 'Age',
        fieldName: 'age',
        type: 'number',
        sortable: true,
        cellAttributes: { alignment: 'left' },
    },
    { label: 'Email', fieldName: 'email', type: 'email' },
];

allColumns.push(columns);
allColumns.push(columns1);

everythingData.push(allColumns);
everythingData.push(alldata);

export default class DemoApp extends LightningElement {
    alldata = alldata;
    allColumns = allColumns;
    everythingData = everythingData;
    defaultSortDirection = 'asc';
    sortDirection = 'asc';
    sortedBy;

    // Used to sort the 'Age' column
    sortBy(field, reverse, primer) {
        const key = primer
            ? function (x) {
                  return primer(x[field]);
              }
            : function (x) {
                  return x[field];
              };

        return function (a, b) {
            a = key(a);
            b = key(b);
            return reverse * ((a > b) - (b > a));
        };
    }

    onHandleSort(event) {
        const { fieldName: sortedBy, sortDirection } = event.detail;
        const cloneData = [...this.data];

        cloneData.sort(this.sortBy(sortedBy, sortDirection === 'asc' ? 1 : -1));
        this.data = cloneData;
        this.sortDirection = sortDirection;
        this.sortedBy = sortedBy;
    }
}

HTML:

<template>
<template for:each={everythingData.allColumns} for:item="acc">
  
        <template for:each={everythingData.alldata} for:item="def">
<lightning-datatable
        key-field={acc.def.id}
        columns={acc}
        data={def}
        hide-checkbox-column
        default-sort-direction={defaultSortDirection}
        sorted-direction={sortDirection}
        sorted-by={sortedBy}
        onsort={onHandleSort}>
</lightning-datatable>
</template>
    
    </template>
</template>

sfdcfox · Accepted Answer · 2022-09-28 15:14:46Z

You have to put all of the data that you want to be individualized into the data together. From there, you need to use those individual variables to render the tables.

const tables = [
  {
    id: '1',
    columns: [
      { label: "Name", fieldName: "name" },
      {
        label: "Age",
        fieldName: "age",
        type: "number",
        sortable: true,
        cellAttributes: { alignment: "left" },
      },
      { label: "Email", fieldName: "email", type: "email" },
    ],
    data: [
      { id: 1, name: "Billy Simonns", age: 40, email: "[email protected]" },
    ],
    defaultSortDirection: 'asc',
    sortedBy: '',
    sortedDirection: 'asc',
  },
  {
    id: '2',
    columns: [
      { label: "Name", fieldName: "name" },
      {
        label: "Age",
        fieldName: "age",
        type: "number",
        sortable: true,
        cellAttributes: { alignment: "left" },
      },
      { label: "Email", fieldName: "email", type: "email" },
    ],
    data: [
      {
        id: 2,
        name: "Kelsey Denesik",
        age: 35,
        email: "[email protected]",
      },
    ],
    defaultSortDirection: 'asc',
    sortedBy: 'Name',
    sortedDirection: 'asc'
  },
];

onHandleSort(event) {
    const { fieldName: sortedBy, sortDirection } = event.detail;
    const tableId = event.target.dataset.tableId;
    console.log(tableId);
    const table = tables.find((entry)=>entry.id===tableId);
    const cloneData = [...table.data];

    cloneData.sort(this.sortBy(sortedBy, sortDirection === 'asc' ? 1 : -1));
    table.data = cloneData;
    table.sortedDirection = sortDirection;
    table.sortedBy = sortedBy;
}

<template>
    <div for:each={tables} for:item="table" class="slds-m-bottom_small" key={table.id}>
        <lightning-datatable key-field="id" columns={table.columns} data={table.data} hide-checkbox-column
            default-sort-direction={table.defaultSortDirection} sorted-direction={table.sortedDirection} sorted-by={sortedBy}
            data-table-id={table.id} onsort={onHandleSort}>
        </lightning-datatable>
    </div>
</template>

Demo.

Wow that was quick !. I was scratching my head since yesterday for this. Thanks a lot @sfdcfox I never new we can use for each, for item in lightning data table. It does not show that these can be used even in the documentation. — Ajay
– Ajay, Commented Sep 28, 2022 at 15:08
@Ajay for:each and the like are HTML directives that can be used on virtually every element, aside from the top-level template tag. If what I did here makes you feel uneasy, though, you can wrap your table in a template. I just prefer to avoid such fluff. — sfdcfox
– sfdcfox, Commented Sep 28, 2022 at 15:10
In between each table can I have some spacing ? like it just piles up one table on the other but ideally I'd like two different tables with spacing. — Ajay
– Ajay, Commented Sep 28, 2022 at 15:10
@Ajay Yes, for that, you'll need some margin, and to get that to work correctly, you will need a wrapper element (in my example, a div). I'll edit that in for you. — sfdcfox
– sfdcfox, Commented Sep 28, 2022 at 15:14
Thanks a ton mate!. Seriously You are a champ. Salesforce is actually gifted to have you. You made my day!. — Ajay
– Ajay, Commented Sep 28, 2022 at 15:17

Stack Exchange Network

Creating Multiple Data Table for list of Records using LWC

1 Answer 1

You must log in to answer this question.

Hot Network Questions

Creating Multiple Data Table for list of Records using LWC

1 Answer 1

You must log in to answer this question.

Related

Hot Network Questions