Question: how to highlight row selection?

[kayazinc]

Use-case

1. User clicks on the cell on the table.
2. The row on the table is highlighted.

I tried the solution on https://github.com/facebook/fixed-data-table/issues/189 and the following is the result:

See the blue circle, there is a empty "space". Is there anyway to fill the entire row, i.e. fill the empty space too?

[csatish]

@kayazinc Can you please share some code to show selection highlight?

[kayazinc]

@csatish, at cell definition, you can set the style.

const DateCell = ({rowIndex, data, col, ...props}) => (
  <Cell {...props} className="highlight">  // set the highlight style
    {data.getObjectAt(rowIndex)[col].toLocaleString()}
  </Cell>
);

[varenya]

Cell class applies at cell not the row level right? @kayazinc

[Dhruv56]

You can use rowClassNameGetter to apply class on a Row. Refer to documentation for more details @varenya

[varenya]

I tried that but it works on cell only...

[undejavue]

+1, want to highlight whole row on hover; no success (

[rahadian347]

i can't use rowClassNameGetter to change row's background color , it'cant change row's background color, only cell background, any idea ?