CSS for colouring one row of antd table in react

Question

This is the CSS for the antd style I'm using

style.css

.ant-table-tbody > tr > td, .ant-table-thead > tr > th
{
    padding:4px;    
}
tr:nth-child(odd){ 
    background: #f1e6ff;
}
tr:nth-child(even){
    background: white;
}
thead[class*="ant-table-thead"] th{
    background-color:#000 !important;
    color: white;
    font-weight: bold;
    border-color: #000;
    text-align: center;
  }
.table_btn
{
    margin:0 !important;
}
.ant-btn
{
    margin:0;
}
.ant-table-tbody > tr:hover > td {
    color: #fff;
}

index.less

@import "callout";
@import 'e-commerce';
@import "pricing-tables";
@import "login";
@import "dashboard";
@import "error";
@import "editor";
@import "testimonials";


tr:nth-child(odd){
    background:inherit !important;
}
.ant-modal-content {
    .ant-modal-close{
        color: #fff !important;
    }
    .ant-modal-header {
        background-color: #000000;
        .ant-modal-title {
            color: #fff !important;
        }
    }
}

.table-wrapper {
    .ant-btn {
        padding: 0 10px;
        height: 30px;
        font-size: 13px;
        > .anticon {
             + span {
                margin-left: 5px;
             }
            } 
        &.ant-btn-success {
            color: #3d8918;
            border-color: #d9d9d9;
            &:hover {
                background-color:#3d8918;
                color: #fff;
            }
        }
        &.ant-btn-danger {
            color: #c70d17;
            background-color:#fff;
            &:hover{
                background-color:#c70d17;
                color: #fff;
            }
        }
    }
    .actions {
       text-align: right;
       .ant-input {
          border-radius: 2px;
          padding:0 10px;
          font-size: 13px;
          height: 30px;
       }
    }
    .table-layout {
        .ant-table-small{
            > .ant-table-content{
                > .ant-table-body {
                    margin: 0 !important;
                    > table {
                        > .ant-table-tbody{
                            > tr{
                                > td{
                                    padding: 2px 8px !important;
                                    font-size: 13px !important; 
                                    text-align:center;
                                    min-width: 80px;
                                    .ant-btn {
                                        width:100px;
                                    }
                                 }
                            } 
                        }
                    }   
                }
            }

index.js

<Table
                    className="table-layout"
                    columns={this.state.columns}
                    dataSource={filteredData}
                    rowClassName='data-row'
                    bordered={true}
                    size={"small"}
                    onRowDoubleClick={ (record, index, event) => this.handleEditModal(record) }
                    onRowClick={(record, index, event) => this.handleRowClick(record)}
                    loading={this.state.loading}
                    pagination={{ pageSize: 14 }}                   
                />

This is how Table is used in the index page. style.css and index.less are the pages for CSS.

Can anybody help me to write one CSS in this page for making one row green color ? I want to make one row green based on condition. I need the CSS I need to call the CSS in the page where code is

add an active class based on condition and add CSS`tr.active { background-color: green;}` — Mehraj Khan, Nov 09 '18 at 06:39

shaahiin · Answer 1 · 2020-04-21T01:09:43.527

I found two ways to do this as of now:

One way is to use rowClassName prop of Table:

.table-row-light {
    background-color: #ffffff;
}
.table-row-dark {
    background-color: #fbfbfb;
}

<Table
  rowClassName={(record, index) => index % 2 === 0 ? 'table-row-light' :  'table-row-dark'}
  columns={columns}
  dataSource={dataSource}
  loading={loading}
/>

Second way is to use plain CSS

.table-striped-rows tr:nth-child(2n) td {
    background-color: #fbfbfb;
}
.table-striped-rows thead {
    background-color: #f1f1f1;
}

<Table
  className="table-striped-rows"
  columns={columns}
  dataSource={dataSource}
  loading={loading}
/>

Note that rowClassName works only for rows, so for CSS on table headers we can only use plain CSS like above.

score 10 · Answer 2 · answered Mar 11 '19 at 10:20

10

See if these Jsfiddle links helps you. They show 2 ways to change backgroung-color your rows.

https://jsfiddle.net/2b2376a4/

data: [
        {id:1, name: 'one', color: '#fff'},
        {id:2, name: 'two', color: '#eee'},
        {id:3, name: 'three', color: '#ddd'}
      ]

for first link

  render(text, record) {
            return {
                props: {
                style: { background: record.color },
              },
                children: <div>{text}</div>,
            };
          },

for second link

 rowClassName={(record) => record.color.replace('#', '')}

answered Mar 11 '19 at 10:20

Prakhar Mittal

6,315
1
14
31

How to disable `:hover` for the antd table? – Amanda Jun 21 '19 at 11:30
Can we do this for headers as well? – P-RAD Nov 20 '19 at 12:24
@P-RAD I haven't tried that but I guess we can. You can also directly change the CSS by targeting .antd-table-head. – Prakhar Mittal Jan 07 '20 at 11:32
Please accept this answer so that the other developer knows the answer too. – Prakhar Mittal Mar 01 '20 at 13:35

score 1 · Answer 3 · edited Aug 17 '23 at 21:37

1

I am not a fan of using class names and I see nobody mentioned that there is another simpler approach by using the onRow prop:


<Table 
   ...
   onRow={(record, index) => ({
     style: {
         background: record === 'something' ? 'red' : 'default',
     }
   })}
/>

edited Aug 17 '23 at 21:37

Maxime Lafarie

2,172
1
22
41

answered Jun 13 '23 at 09:21

Silvio Biasiol

856
8
14

1

Works perfectly! – Maxime Lafarie Aug 17 '23 at 21:44
@MaximeLafarie I am glad it was useful for you :) – Silvio Biasiol Aug 22 '23 at 13:07

score 0 · Answer 4 · answered Feb 24 '22 at 15:13

if you want to use styled-components you can wrap it like this


const StyledTable: React.FC<TableProps<T>> = styled(Table)`
  .ant-table-header th {
    background-color: green;
  }
`

export const Table = () => (
    <StyledTable
      columns={columns}
      dataSource={data}
      ...
    />

CSS for colouring one row of antd table in react

4 Answers4