title: How can i change the cell colour in ANTD table according to the value?
body: <p>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.</p>
  
  <pre><code>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 =&gt;
        (
          item.subHeader ? (&lt;ColumnGroup title={item.columnName}&gt;
            {
              item.subHeader.map((it,index) =&gt; (
                &lt;Column title={it.name} dataIndex={it.dataIndex} key="2" /&gt;
              ))
            }
          &lt;/ColumnGroup&gt;) : &lt;Column title={item.columnName} dataIndex={item.dataIndex} key="age" /&gt;
        )
       )
      return(
        &lt;div id="root"&gt;
          &lt;Header&gt;
            &lt;Header1&gt;
              {report.header.displayName}
            &lt;/Header1&gt;
            &lt;Header2&gt;
              DATA - {report.header.month}
            &lt;/Header2&gt;
          &lt;/Header&gt;
          &lt;TableSchema&gt;
          &lt;Table dataSource={data} bordered title={() =&gt; `${report.header.displayName}` }&gt;
            {items}
          &lt;/Table&gt;
          &lt;/TableSchema&gt;
        &lt;/div&gt;
      )
    }
  }
  
  export default App;
  </code></pre>