[LWC] Tree Grid - Need Tree first column title so span into next column

[davidb]

Hello,

We are using the latest Grid in a Salesforce LWC component.

We require the Tree column title (far left column) to span over the next column so we can reduce the left column width when the subheading title is longer.

thumbnail_image001.jpeg (112.09 KiB) Viewed 564 times

I’ve tried an approach similar to an answer that I’ve found on your forum :

 
{
    text: 'Code',
    field: 'securityCode',
    cls: 'text h6',
    cellCls: 'grid__security-code',
    type: 'tree',
    locked: true,
    tooltipRenderer: false,
    autoWidth: false,
    width: 100,
    htmlEncode: false,
    renderer: ({
                   value,
                   record
               }) => record.securityName ? `<a class="grid__security-code__cell" href="${self.generateCompanySearchURL(value)}">${value}</a>` :
        '<span class="b-cell-content">' + value + '</span>'
}, {
    text: 'Security',
    field: 'securityName',…….

Basically, adding a Span class ‘b-cell-content’

Then in the CSS ,

.b-cell-content {
  z-index: 20 !important;
  position: absolute  !important;
}

I can’t seem to get anything to happen playing around with different styles via the Chrome Dev Tools -Tried with a high z-index on the whole left column and position not static.

Ideally, we are after the following

thumbnail_image002.jpeg (78.42 KiB) Viewed 564 times

[alex.l]

Hi, try to apply to b-tree-cell class this styling

overflow: visible;
contain: size layout style;

[davidb]

Hi Alex,

That doesn't seem to work. I think it's because the first column is locked. When I take ' locked: true' out, it works fine..

Thanks,
David

[johan.isaksson]

Hi,

I would not recommend doing so, but you could override the CSS for each DOM level from the cell (.b-grid-cell) all the way up to the subgrid (.b-grid-subgrid), making sure they are all overflow: visible and contain: none. It will have slight negative effect on performance and you will not be able to scroll that subgrid horizontally.

Result:

Screenshot 2023-06-08 at 20.05.08.png (113.13 KiB) Viewed 510 times