CSS for colouring one row of antd table in react

user_10191105 0
Viewed 43354

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

antd redux reactjs css
3 Answers

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.

user_68679520

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

https://jsfiddle.net/2b2376a4/

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('#', '')}
user_94781450

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}
      ...
    />
user_39521800
Related