fixed-data-table-2 hover row background color

Question

I've been trying to get this to work for a while now and I haven't been able to come up with anything. The fixed-data-table-2 has a built in functionality for the row css, but that ends up being covered over by the individual cell css and wrapper. I've been doing research on this and I haven't been able to come up with a solution. Any help would be much appreciated.

Here's my current code, please let me know what would need to be changed!

import s from './styles.css';

const FilteredCell = function({ data, rowIndex, columnKey, ...props }) {
  let output = data[rowIndex][columnKey];
  return <Cell {...props}>{output}</Cell>;
};

const rowClassName = () => s.row;
return(
          <Table
            height={filteredData.length * 30 + 60}
            rowsCount={filteredData.length}
            rowHeight={30}
            width={800}
            headerHeight={50}
            onRowClick={this.rowClicked}
            rowClassNameGetter={rowClassName}
          >
            <Column
              columnKey="chromosome"
              width={100}
              header={<Cell>Chromosome</Cell>}
              cell={<FilteredCell data={filteredData} />}
            />
            <Column
              columnKey="position"
              width={200}
              header={<Cell>Position</Cell>}
              cell={<FilteredCell data={filteredData} />}
            />
            <Column
              columnKey="rsid"
              width={150}
              header={<Cell>RSID</Cell>}
              cell={<FilteredCell data={filteredData} />}
            />
            <Column
              columnKey="gene"
              width={100}
              header={<Cell>Gene</Cell>}
              cell={<FilteredCell data={filteredData} />}
            />
            <Column
              columnKey="ref_allele"
              width={100}
              header={<Cell>Reference Allele</Cell>}
              cell={<FilteredCell data={filteredData} />}
            />
            <Column
              columnKey="alt_allele"
              width={100}
              header={<Cell>Alternative Allele</Cell>}
              cell={<FilteredCell data={filteredData} />}
            />
          </Table>
)

And Below is my current css

.row:hover {
    cursor: pointer;
    background-color: yellow:
}

I have been trying to use some of the suggestions I found like

.public_fixedDataTable_bodyRow:hover .public_fixedDataTableCell_main

but it doesn't seem to be working or do anything. I'm not sure if how exactly to load it in right now. The way I'm exporting my component is with

export default connect(select)(withStyles(s)(ExpectoSnpTable));

Maurus Vitor · Answer 1 · 2018-06-22T02:58:42.817

This suggestion you found:

.public_fixedDataTable_bodyRow:hover .public_fixedDataTableCell_main

easily worked for me without using the rowClassNameGetter and by just importing a modified version of the css module that you need to import as advised in the repo (Fixed Data Table - Github Schrodinger)

"Add the default style-sheet dist/fixed-data-table.css using a link tag or import it with a CSS module."

In my case, instead of just doing:

import 'fixed-data-table-2/dist/fixed-data-table.css'

I copied it in my own style file, say, fixed-data-table-2-modified.scss and added:

.public_fixedDataTable_bodyRow:hover .public_fixedDataTableCell_main {
  background-color: #fff2d9; transition: all ease 0.5s;
}

Then imported it as:

import 'fixed-data-table-2-modified.scss'

score 0 · Accepted Answer · answered Apr 24 '18 at 22:38

0

You just making complexing things in your code, no need to s when importing the CSS file.

This way you will have an access to all your classes

import './styles.css';

Now you can apply .row class using className attribute

 <Table
            height={filteredData.length * 30 + 60}
            rowsCount={filteredData.length}
            rowHeight={30}
            width={800}
            headerHeight={50}
            onRowClick={this.rowClicked}
            rowClassNameGetter={'row'}
            className={'row'} 
          >

Delete this

const rowClassName = () => s.row;

No need to use withStyle

answered Apr 24 '18 at 22:38

Liam

6,517
7
25
47

If I don't use the const rowClassName getter though, rowClassNameGetter asks for a function instead, I tried what you recommended, but now instead no styles from the stylesheet are loaded in. – Kevin Yao Apr 26 '18 at 13:55
Well, I don't know what is this attribute for rowClassNameGetter try to not using it if it possible. – Liam Apr 26 '18 at 16:46
Decided to just end up changing the background of each cell when each row is hovered using in line css, thanks for the help anyways! – Kevin Yao Apr 26 '18 at 19:07
I realize this is a few years old but I recently ran into a similar problem; the only change you need to pass in a function is `rowClassNameGetter={() => 'row'}` – 182764125216 Sep 15 '22 at 22:12

fixed-data-table-2 hover row background color

2 Answers2