2

I'm creating LWC datatables on the fly, dynamically through a REST API. If I have one table, everything I'm trying to do makes perfect sense. However, since I'm creating everything dynamically, the problems stack up. One problem I have is how to display row selections per datatable and have it be reactive. The reactive value is the the badges in the top right corners per table (see image).

Here is a link to the playground

Here is the relevant portion of the code:

app.js

column = [
    { fieldName: 'foo', label: 'Foo' },
    { fieldName: 'bar', label: 'Bar' },
    { fieldName: 'baz', label: 'Baz' },
];

data = [
    { 
        category: 'Apples', 
        data: [
            { foo: "1", bar: "2", baz: "3" },
            { foo: "4", bar: "5", baz: "6" },
            { foo: "7", bar: "8", baz: "9" },
        ]
    },
    { 
        category: 'Oranges', 
        data: [
            { foo: "1", bar: "2", baz: "3" },
            { foo: "4", bar: "5", baz: "6" },
            { foo: "7", bar: "8", baz: "9" }
        ]
    }
]

getSelections() {
    let bar = {};

    this.data.forEach(({ category }) => {
    let selectedRows = this.template
        .querySelector(`[data-id=${category}]`)
        .getSelectedRows();
    bar[category] = selectedRows;
    });

    this.foo = bar;
    console.log('bar', bar);
}

app.html

<template>
  <template for:each={data} for:item="table">
    <div class="slds-m-bottom_large" key={table.category}>
      <div class="table-header">
        <h2>{table.category}</h2>
        <span class="slds-badge slds-badge_inverse">
          SELECTED ITEMS PER TABLE</span>
      </div>
      <lightning-datatable
        data-id={table.category}
        key-field="foo"
        data={table.data}
        columns={column}
        onrowselection={getSelections}
      >
      </lightning-datatable>
    </div>
  </template>
</template>

result

This is what I'm aiming for... but generic functionality for all tables. desired

  • Can you please elaborate this " I have is how to make a row selection per datatable and have it be reactive" – rahul gawale Oct 16 '19 at 8:44
  • 1
    If I click on a checkbox in the Apples table, the badge in that table (to the right, the inverse one) needs to display 1. If I click on another checkbox, the badge needs to display 2. If I check a checkbox in the Oranges table, then that badge needs to display 1. So basically, the badge values needs to be reactive based on user interaction. I've added another image to show the desired effect. – Dinco Oct 16 '19 at 8:48
1

You can define a span with data- attribute with category as value and set it the same way you are getting selected rows. Here is Playground link.

<span class="slds-badge slds-badge_inverse" >
        SELECTED ITEMS PER TABLE - 
        <span data-count={table.category}>0</span>
      </span>

JS:

getSelections() {
    // ---- getting bar -------
    console.log('bar', bar);

    this.data.map(({ category }) => {
        this.template
            .querySelector(`[data-count=${category}]`)
            .innerText = bar[category].length;
    });
}

Output:

enter image description here

| improve this answer | |
  • I tried many different solutions but the thought of using $element.innerText never really occurred to me! Really nice! Despite the fact that the solution "feels" a little hacky, I still find it to be the best way to go. Will mark it as the correct answer. Thanks! – Dinco Oct 16 '19 at 10:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.