React-virtualized MultiGrid row - hover css

Question

Is it possible to use CSS to change row background color on hover in MultiGrid component? As I can see there's no div on a row level. All cells are at the same level. There's rowClassName property for Table component, but not for MultiGrid

score 0 · Answer 1 · answered Mar 27 '19 at 14:40

Take a look at https://github.com/techniq/mui-virtualized-table/

It uses MultiGrid internally.

Depending on your use case, you could either use it directly, or copy the way it deals with the hovering, i.e. it uses a function to compute whether a cell should have a hover effect and then it applies a specific style to it. You never need to apply :hover selectors manually, just edit that style.

score 0 · Answer 2 · answered Apr 05 '19 at 06:38

You can add a class name to the cells and then use pure css. For example:

<MultiGrid  
     {...this.state}
     ref={this.grid}
     cellRenderer={_cellRenderer}
     columnWidth={_getColumnWidth}
     columnCount={rows[0].length}
     height={1024}
     rowHeight={_getColumnHeight}
     rowCount={rows.length}
     width={width}
     styleTopRightGrid={STYLE_TOP_RIGHT_GRID}/>

As you can see MultiGrid use _cellRenderer which is:

const _cellRenderer = ({columnIndex, key, rowIndex, style}) => {
    return(
             <div className="cell">
                 {row[rowIndex][columnIndex]}
             </div>
    );
})

In your css you can just add:

.cell:hover {
    background-color: yellow;
 }

in that way only the cell will change its color, not a row – Anton Apr 06 '19 at 12:38 — Anton, Apr 06 '19 at 12:38

vljs · Answer 3 · 2021-07-26T13:38:22.660

Solved it by getting next & previous element siblings and adding a 'row-hover' classname.

const CLASSNAME = 'row-hover';

const hoverLeftSide = (e, shouldHover) => {
    const prevEl = e.previousElementSibling;
    const prevInSameRow = prevEl && e.style.top === prevEl.style.top;

    if (prevInSameRow) {
        if (shouldHover) {
            prevEl.classList.add(CLASSNAME);
        } else {
            prevEl.classList.remove(CLASSNAME);
        }
    
        hoverLeftSide(prevEl, shouldHover);
    }

}

const hoverRightSide = (e, shouldHover) => {
    const nextEl = e.nextElementSibling;
    const nextInSameRow = nextEl && e.style.top === nextEl.style.top;

    if (nextInSameRow) {
        if (shouldHover) {
            nextEl.classList.add(CLASSNAME);
        } else {
            nextEl.classList.remove(CLASSNAME);
        }
    
        hoverRightSide(nextEl, shouldHover);
    }
}

const hoverRow = (e, shouldHover) => {
    if (shouldHover) {
        e.currentTarget.classList.add(CLASSNAME);
    } else {
        e.currentTarget.classList.remove(CLASSNAME);
    }

    hoverLeftSide(e.currentTarget, shouldHover);
    hoverRightSide(e.currentTarget, shouldHover);
}

export default hoverRow;

// import hoverRow from './hoverRow';
//
// return (
//     <div
//         onMouseOver={(e) => hoverRow(e, true)}
//         onMouseOut={(e) => hoverRow(e, false)}
//     >
//         {children}
//     </div>
// )

React-virtualized MultiGrid row - hover css

3 Answers3