CODEWITHSUNDEEP
htmlcssreactjsantd
Amanda
Amanda

Reputation: 2153

Do nothing on table row hover - How could I do this?

I have been trying to disable the row hover for antd table (for expandable rows) but no success. I want to disable the hover on all child rows.

Here is a simple table that I am generating using antd.

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Table } from 'antd';

const columns = [
    {
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
    }
];

const data = [
    {
        key: 1,
        name: 'John Brown sr.',
        age: 60,
        address: 'New York No. 1 Lake Park',
        children: [
        {
            key: 11,
            name: 'John Brown',
        },
        {
            key: 12,
            name: 'John Brown jr.'
        },
        {
            key: 13,
            name: 'Jim Green sr.'
        },
        ],
    }
];



ReactDOM.render(
    <Table columns={columns} dataSource={data} />,
    document.getElementById('container'),
);

Here is the table fiddle that shows the table, that gets rendered. The CSS that I am trying to apply the change the hover is:

tr.ant-table-row.ant-table-row-level-1:hover {
   background: red;
}

But this does not work. I see a fluctuation of colors between red and blue. How could I do this?

What I mainly want is no hover effect. But I am unable to do this.

Upvotes: 4

Views: 23239

Answers (5)

JadeNebula
JadeNebula

Reputation: 11

This turned off the row highlight hover for me.

  .ant-table-tbody > tr.ant-table-row:hover > td {
      background: none !important;
  }

Upvotes: 1

Charles
Charles

Reputation: 455

The accepted answers did not work for me, if anyone else has this problem this is how I fixed it:

First, set the className property in the Table component to something, for e.g. 'time-table-row-select' like below:

<Table
    dataSource={data}
    columns={columns}
    className='time-table-row-select'
/>

Then add the following in CSS:

.time-table-row-select > .ant-spin-nested-loading > .ant-spin-container > div > .ant-table-content > .ant-table-body > table > tbody > tr:hover > td {
    background-color: unset;
}

Alternatively, if you're using the scroll parameter you need to use this:

.time-table-row-select > .ant-spin-nested-loading > .ant-spin-container > div > .ant-table-content > .ant-table-scroll > .ant-table-body > table > tbody > tr:hover > td {
    background-color: unset;
}

Since there appears to be additional caveats depending on how you are using the table, I'll go through my logic for how to figure out which class selector to use (as it seems like most people on web development stackoverflow do not do this & it's incredibly frustrating):

Find the location of the class you provided to the Table component, then append each subsequent child tag to your selector until you reach the tr tag that follows tbody, add :hover to it, then add > td to that

enter image description here

Upvotes: 3

Sebastian Hernandez
Sebastian Hernandez

Reputation: 2376

If you are overriding other theme variables with Less, you can just add this line to the variables override file.

@table-row-hover-bg: unset;

You can also change unset to any other color you want to set there.

Upvotes: 0

adesurirey
adesurirey

Reputation: 2620

Try this :

.ant-table-tbody > tr.ant-table-row-level-1:hover > td {
  background: unset;
}

That's working on your fiddle.

(background: unset as suggested by @ravibagul91)

Upvotes: 10

ravibagul91
ravibagul91

Reputation: 20755

This is the place you can change this effect,

.ant-table-thead>tr.ant-table-row-hover:not(.ant-table-expanded-row)>td, 
.ant-table-tbody>tr.ant-table-row-hover:not(.ant-table-expanded-row)>td, 
.ant-table-thead>tr:hover:not(.ant-table-expanded-row)>td, 
.ant-table-tbody>tr:hover:not(.ant-table-expanded-row)>td {
    background: unset; //Change the existing color to `unset`
}

Upvotes: 9

Related Questions