Highlight rows and columns

[revolist]

Highlight column/row plugin similar to google analytics

[eboye]

I'm looking into this as well. I'm using PRO version and I need to highlight expanded tree rows. There is no class or anything I can fetch to detect child rows. I'm using

.rgRow:has(.tree-toggle) ~ .rgRow:not(:has(.tree-toggle)) {
    background-color: #f3faf1;
  }

but when doing horizontal scroll, that column with tree-toggle gets lost.

It could help if rows have some "subrow" class or "child" or "hasparent" or something.

[revolist]

Hi @eboye
I'll add a class for it

[eboye]

Thanks a bunch 🤩

[revolist]

@eboye done, should be available in v1.5.21

row has expanded attr now

[revolist]

@eboye
please let me know if this works for you and keep me posted if anything else needed

[eboye]

That's fast, I'll test it right away and let you know. Thanks

[eboye]

Great for the expanded, but actually I would need the class on that subRow. In your screenshot, the one with "Thurman Fritsch" I need to style once shown and with different background color.

And btw, for some reason my email is not added to the PRO repo. I have access to the docs, but not the repo. Not sure if I should, but since you gave the link I assume I should have :)

edit:

This is what I need, but since the first column is for expand once it is not in viewport it disappears from DOM as it's virtual. So my selector no longer works. That's why I need some kind of selector to style those subRows.

[revolist]

Hi @eboye,

1. Regarding the highlight feature:
Could you please clarify what exactly is expected here? From what I understand, you're aiming to highlight the row immediately following the expanded one, correct?

One complication is that in a tree structure like parent1 → subParent1 → subParent2 → items, the nesting can go several levels deep. It’s not clear how you’d want the highlight to behave in such cases — would different levels need different background colors, or is it consistent across all?

It would help to understand how you're using the tree view — is it primarily for grouping, or is there a true parent/child relationship involved?

That said, if the goal is simply to highlight sub-rows based on their parentId, you might find this approach easier:

const columns: ColumnRegular[] = [{
   prop: 'myProp',
   cellProperties: ({ model }) => ({ subRow: !!model.parentId }) // highlights all subrows, you will this this only when row expanded
}]
// Repeat cellProperties for each column you want to apply highlighting to

Let me know if this works for your use case or if you'd prefer a more tailored solution based on the row hierarchy.

---

2. Regarding access to the private repo:
You're absolutely right — we provide access to both the source code and the private ticketing system for license holders. Usually, we collect your GitHub username during payment and grant repo access automatically.

I wasn’t able to find your email/payment record, so could you please reach out to us at info@rv-grid.com with the following details?

• The email you used for payment
• Your GitHub username

Once we have that, we’ll get you added right away.

Thanks again for reaching out and posting here!

[eboye]

1. highlight
Hmm, here's mu cellProperties callback with your suggestion:

/**
 * Returns an object with CSS style properties to hide a cell if its size is less than or equal to 0.
 *
 * @param {ColumnRegular} column - The column to render.
 * @returns {CellProps} - An object with CSS style properties.
 */
const cellPropertiesCB = (column: ColumnRegular): void | CellProps | undefined =>
  column?.size === -1
    ? { subRow: !!column.parentId, style: { display: 'none' } }
    : { subRow: !!column.parentId };

Here's the callback in action:

{
    prop: 'placedAt',
    name: 'Placed',
    size: 120,
    minSize: 120,
    sortable: false,
    readonly: true,
    cellTemplate: VGridVueTemplate(CellDateTime),
    cellProperties: ({ column }) => cellPropertiesCB(column),
    columnProperties: columnPropertiesCB,
    columnTemplate: headerTemplateWithTooltip,
  },

But in DOM I'm not seeing any changes:

I tried removing the style property (it's for hiding columns via some config) but still the same.

---

So, to elaborate the possible solution:

For now, we, in our app are "grouping" rows. The data is initially inside the row "object", but we managed to expand it and show it as subRow as only some columns have different values and those should be rendered. eg:

Toggle	ID	Name	Detail1	Detail2
✓	1	Row 1	123	456
	11	SubRow 1		987
	12	SubRow 2		987
✓	2	Row 2	123	456
✓	3	Row 3	123	456

It's possible that we'll have sub sub rows at some point. So maybe we could solve it like this:

1. All rows that can be expanded have expanded="false" initially eg.: <div class"rgRow" expanded="false"/>
2. Expanded rows have expanded="true" once expanded eg.: <div class"rgRow" expanded="true"/>
3. All rows, subrows, subsubrows etc. would have data-rgid="Id" and data-rgparentid="parentId" and if possible data-rgsubrowlevel="1".

So, let me make simplified example where first row is expanded and first subrow is expanded:

<div class="rgRow" data-rgid="100" data-rgparentid="" expanded="true" data-rgsubrowlevel="0">
    <div>Root row with Cells</div>
</div>
<div class="rgRow" data-rgid="100-1" data-rgparentid="100" expanded="true" data-rgsubrowlevel="1">
    <div>Subrow with Cells</div>
</div>
<div class="rgRow" data-rgid="100-2" data-rgparentid="100" expanded="false" data-rgsubrowlevel="1">
    <div>Subrow with Cells</div>
</div>
<div class="rgRow" data-rgid="200-2" data-rgparentid="100-1" expanded="false" data-rgsubrowlevel="2">
    <div>SubSubrow with Cells</div>
</div>
<div class="rgRow" data-rgid="200-2" data-rgparentid="100-1" expanded="false" data-rgsubrowlevel="2">
    <div>SubSubrow with Cells</div>
</div>

So, that way, one could have css something like this:

.rgRow {
    background-color: rgba(0,0,0,0.1);
    &[expanded="true"] { // can be without true/false if attribute value is not set and expanded is removed from DOM when row is not expanded
        background-color: rgba(0,0,0,0.2);
    }
    &[data-rgsubrowlevel="1"]{
        background-color: rgba(1,0,0,0.2);
    }
    &[data-rgsubrowlevel="2"]{
        background-color: rgba(1,0,0,0.4);
    }
}

Or, maybe not so straight forward and can restrict customization a bit, but more viable solution is to have row implement css variable:

<div class="rgRow" style="--rg-row-level: 1;"/>

And then, one could use that variable like this:

.rgRow: {background-color: rgba(0,0,0, calc(var(--rg-row-level, 1) / 10));

2. access
Thanks, I'll reach out with those details. The problem is that our devops made the purchase and gave me and one other dev access, so there was mismatch with emails.