Hide Header row in LWC Tree_Grid Base component

Question

I wanted to implement Lightning TreeGrid LWC component with no header row.

Tried Updating the CSS in inspect element

I was able to hide the header by modifying the Thead css as shown in the image from inspect element but not sure which class to use to achieve the same in the LWC CSS file.

Could you guys please help?

Please provide enough code so others can better understand or reproduce the problem. — Community
– Community Bot, Commented Jul 9, 2022 at 1:43

David Rubin · Accepted Answer · 2022-07-10 12:50:01Z

0

The lightning-tree-grid specification doesn't provide the possibility of removing the table header out of the box. Although the component blueprint in Lightning design system demonstrates a headless option.

Because of the use of Shadow DOM in LWC you can't change the properties of child components directly.

You basically have 2 options:

use a global style resource and modify CSS as you desire, like described in this answer
create your own tree grid component and extend it with whichever functionality you need. For some components, salesforce provides their source code, but tree-grid doesn't appear among them

Happy coding.

answered Jul 10, 2022 at 12:50

David Rubin

2061 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Hide Header row in LWC Tree_Grid Base component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related