Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can i change the cell colour in ANTD table according to the value?

Tags:

reactjs

antd

I have table and i want change the colour of that cell based on the value. if value of cell is more than 50 text colour of cell should be red. if cell value is less than 20 then green.So configuration of cell should be based on the condition ..I'm attaching the code here. I'm new to coding and this is the first project. much appreciate if anyone could help me.

import React from 'react';
import { Divider, Table, Tag } from 'antd'
import report from './report.json'
import 'antd/dist/antd.css'
import {
  Header,
  Header1,
  TableSchema,
  Header2,
  C1,C2,C3,C4,Rank
} from './style.js'

const { Column, ColumnGroup } = Table;

const data = [
  {
    key:'0',
    class: 'All India',
    circle: 'All India',
    subHeader1: 12,
    subHeader2: 66,
    subHeader3: 32,
    subHeader4:52,
    subHeader5: 74,
    subHeader6: 32
  },
  {
    key:'0',
    class: '1',
    circle: 'GUJ',
    subHeader1: 42,
    subHeader2: 16,
    subHeader3: 70,
    subHeader4:12,
    subHeader5: 54,
    subHeader6: 33
  },
  {
    key: '1',
    class: '1',
    circle: 'DEL',
    subHeader1: 32,
    subHeader2: 66,
    subHeader3: 74,
    subHeader4:22,
    subHeader5: 42,
    subHeader6: 31
  },
]
class App extends React.Component {
  render() {
    console.log(report)
    const items = report.data.columns.map(item =>
      (
        item.subHeader ? (<ColumnGroup title={item.columnName}>
          {
            item.subHeader.map((it,index) => (
              <Column title={it.name} dataIndex={it.dataIndex} key="2" />
            ))
          }
        </ColumnGroup>) : <Column title={item.columnName} dataIndex={item.dataIndex} key="age" />
      )
     )
    return(
      <div id="root">
        <Header>
          <Header1>
            {report.header.displayName}
          </Header1>
          <Header2>
            DATA - {report.header.month}
          </Header2>
        </Header>
        <TableSchema>
        <Table dataSource={data} bordered title={() => `${report.header.displayName}` }>
          {items}
        </Table>
        </TableSchema>
      </div>
    )
  }
}

export default App;
like image 607
Anurag Mathur Avatar asked Nov 29 '19 07:11

Anurag Mathur


People also ask

How do I make an ANTD table responsive?

You can make use of the responsive property on the column that you want to control for screen sizes. Just add a From To column with a custom render function, and set the responsive property on that column to only show on xs screens. The From and To columns will have the responsive property set to show on md and above.

How do you sort an ANTD table?

Simply define a new sorting routine in utils/sorter. js , add it to the Sorter “enum,” and use it in your sorter prop for any column that needs it. You can check out the CodeSandbox for this tutorial to play around with the result.

How do I select a row in ANTD table?

Rows can be selectable by making first column as a selectable column. You can use rowSelection.type to set selection type. Default is checkbox . selection happens when clicking checkbox by default.


1 Answers

Customise table cells:

You can change color of specific cell(s) as per certain conditions, you need to target render attribute of columns.

For example, if cell Amount is more than 50, then render cell color as red, otherwise green. antd-table-cell-color

render(text, record) {
          return {
            props: {
              style: { background: parseInt(text) > 50 ? "red" : "green" }
            },
            children: <div>{text}</div>
          };
        }

Columns array

 columns: [
      {
        title: "Date",
        dataIndex: "date",
        width: 200
      },
      {
        title: "Amount",
        dataIndex: "amount",
        width: 100,
        render(text, record) {
          return {
            props: {
              style: { background: parseInt(text) > 50 ? "red" : "green" }
            },
            children: <div>{text}</div>
          };
        }
      },
      {
        title: "Type",
        dataIndex: "type",
        width: 100
      },
      {
        title: "Note",
        dataIndex: "note",
        width: 100
      }
    ]


Customise table rows:

If you want to change the color of rows rather than cells, then you need to target props rowClassName

antd-table-row-color

 <Table
        bordered
        columns={columns}
        dataSource={this.data}
        rowClassName={(record, index) => (record.amount > 50 ? "red" : "green")}
      />

css

.red{
  color: red; 
}
.green {
   color :green; 
}

data

data = [
    {
      key: 0,
      date: "2018-02-11",
      amount: 40,
      type: "income",
      note: "transfer"
    },
    {
      key: 1,
      date: "2018-03-11",
      amount: 243,
      type: "income",
      note: "transfer"
    },
    {
      key: 2,
      date: "2018-04-11",
      amount: 98,
      type: "income",
      note: "transfer"
    }
  ];

here is a demo, let me know

Update 01:

OP asked in the comment section: I want to change the colour for "may" subheader in each column

Answer: Feel free to play around the code to match your expectations. In your case, you need something like this ?

background: it.name === "May" ? (parseInt(text) > 50 ? "#08AE4E" : "#f54840") :"#000"

custom-pic

like image 76
blueseal Avatar answered Nov 01 '22 11:11

blueseal