How override selected row styles?

[iakovalgaev]

I want to customize selected rows but I didn't find a way to do it. Even my <Row className='some' /> className prop is added before the library classes. And I can't override inline styles normally.

[rwieruch]

Hi @bezvrednyy Thanks for asking:

If you want to give a row a specific CSS class, do it this way:

<Row className="foo" ... >

Then if you want to style all Row components with this CSS class, specify it in the THEME that is passed to const = useTheme(THEME):

const THEME = {
  Row: `
    &.foo {
      background-color: pink;
    }
  `
};

Regarding the selected state on a row, when you inspect the HTML elements in the browser, you will see that the Row component receives the following optional* CSS classes based on its select status:

row-select-selected
row-select-single-selected

While the former is applied for multi-select, the latter gets applied for single select. So if you want to style a row for multi-select, do it the following way:

const THEME = {
  Row: `
    &.row-select-selected {
      background-color: red;
    }
  `
};

For single select it would look like this:

const THEME = {
  Row: `
    &.row-select-single-selected {
      background-color: blue;
    }
  `
};

If you want to style both cases the same way, then use the selectors this way:

const THEME = {
  Row: `
    &.row-select-selected, &.row-select-single-selected {
      background-color: orange;
    }
  `
};

Let me know if this answer helped you!

[rwieruch]

Regarding the select state. What you can do at the moment is using the select object to find out about which items are selected:

const select = useRowSelect(data);

console.log(select.state);

// ... then in the Row component when you assign the className conditionally:

<Row className={select.state.ids.includes(item.id) ? "multi-selected" : "not-selected"}  ... >

// ... or for single select

<Row className={select.state.id === item.id ? "single-selected" : "not-selected"}  ... >

What I also could think of is adding some more styling options to the hook itself:

const select = useRowSelect(data, { onChange }, {
  classNameSelected: 'my-custom-selected-class',
  classNameSingleSelected: 'my-custom-single-selected-class',
  classNameMultiSelected: 'my-custom-multi-selected-class',
});

Do you think this would be useful or do the previous recommendations already help?

[iakovalgaev]

The previous recommendations helped. Thanks.

There was another problem. If the cells of the last column are set to display: none. The width and min-width for specified in useTheme are redefined.
By what principle does this happen and how can I fix it?
I want to add row actions with display: none and position: absolute. They were displayed when hovering over the structure and at the same time they were NOT a column and did not take up the width.

[rwieruch]

If you want to hide a cell, check out the built-in feature: https://react-table-library.com/?path=/docs/compact-table--column-hiding Hope this helps.

[iakovalgaev]

I want to do a hover effect.

Speaking of hiding columns. I don't like the built-in way. It works fast, but does not recalculate the table. If I have a table with a horizontal scroll, I want its width to decrease when hiding the column. But this doesn't happen, so I use external filtering by changing columns.

[rwieruch]

Does this story help? There you got a hover effect. Just added it with the latest deploy. https://react-table-library.com/?path=/docs/misc-actions--base

@bezvrednyy please open a new discussion if the topic changed in the future. Thanks for all your input :)