Our blazing fast Grid component built with pure JavaScript


Post by 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
thumbnail_image001.jpeg (112.09 KiB) Viewed 243 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
thumbnail_image002.jpeg (78.42 KiB) Viewed 243 times

Post by alex.l »

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

overflow: visible;
contain: size layout style;

All the best,
Alex


Post by 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


Post by 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
Screenshot 2023-06-08 at 20.05.08.png (113.13 KiB) Viewed 189 times
Best regards,
Johan Isaksson

Post Reply