Is it possible to achieve this in the data table in LWC? If yes please share some reference. If I select any rows under any category like the colour scheme and if I click save it should save. Please see the attached screenshot

How to handle the duplicate in the attached screenshot you could see category is duplicated and my data table is also duplicated. how to show only category values in the data table instead of showing all ?

  • Without knowing what your data looks like, we don't have enough information to assist you with this latest edit. Please include the relevant Apex code.
    – sfdcfox
    Apr 19, 2021 at 5:55

1 Answer 1


As a single data table, no. There's no allowance for headers. But it could be written as a list of cards:

 <template for:each={sections} for:item="section">
   <lightning-card key={section.id} icon-name="custom:custom11">
     <h1 slot="title">{section.title}</h1>
     <lightning-datatable columns={columns} data={section.data} key-field="id">

Other similar designs might be what you're looking for as well; without code, I don't know exactly what you're looking for, but it should be easy from here.

To actually save the values, query the values from the tables:

let selected = [...this.template.querySelectorAll('lightning-datatable')].map(table => table.getSelectedRows()).flat().map(row => row.value);

This may not be precisely correct, but should get you started.

  • 2
    Can't believe I haven't seen Array.prototype.flat() before... could have saved me a few lines here and there. Apr 18, 2021 at 9:06
  • @sfdcfox i have tried your approach but I'm getting duplicated category with values.Please help me out.Thanks in Advance
    – grey 123
    Apr 19, 2021 at 5:46
  • @sfdcfox sir i have updated the Apex code also basically I'm trying to display the Option Category name in header with the relevant Category information inside data table.Thanks for your Quick response.Please help me further
    – grey 123
    Apr 19, 2021 at 6:05
  • @sfdcfox how to get the drafted values without having the onSave event or save button in LWC?
    – grey 123
    Apr 20, 2021 at 9:56
  • @grey123 Just read draftValues from the table components. I can see why you're having a problem, I guess; you have just a normal list of elements, but you're trying to make a list of lists. You need to either transform it in Apex, or transform it on the client.
    – sfdcfox
    Apr 20, 2021 at 10:41

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .