0

I'm working on a datatable LWC that needs to have a header row that's 2x taller than normal. I've seen this done with an Aura datatable before, but I never took the time to figure out how. Is this something that can be done with a Lightning Web Component datatable? The HTML I'm currently working with is below.

<template>
  <lightning-card>
    <h3 slot="title">Table Title</h3>
    <div slot="footer">This is a footer.</div>
    <lightning-datatable
      key-field="id"
      data={data}
      columns={columns}
    ></lightning-datatable>
  </lightning-card>
</template>
Improve this question

1 Answer 1

Reset to default
1

So Lightning Web Components work a bit differently from Aura. LWC enforces the Shadow DOM standard, which means each component (both standard or custom) have their own encapsulated DOM, meaning they can't modify each other via CSS or JS (other than defined @api methods or events). So you won't be able to modify the header size of the standard component.

If you can, you may want to try working just in Aura for this, keep in mind you can use LWC in Aura, but not the other way around.

Alternatively, if you must use LWC, you can build your own component using the SLDS blueprint as a base

Salesforce Resource on Shadow DOM

Improve this answer
1
  • 1
    I'd thought about building it out manually. Not ideal, but it may be what I end up doing. I've never done Aura, only LWC (and only a couple, at that). This is something I'm working on to build my admin-veloper muscles, so building it manually a time or two would probably be good anyway.
    – jarod
    Commented Mar 26, 2020 at 21:12

You must log in to answer this question.

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