如何根据值更改ANTD表中的单元格颜色? [英] How can i change the cell colour in ANTD table according to the value?

问题描述

我有表格，我想根据值更改该单元格的颜色.如果单元格的值超过 50，则单元格的文本颜色应为红色.如果单元格值小于 20，则为绿色.因此，单元格的配置应基于条件.我在此处附上代码.我是编码新手，这是第一个项目.如果有人可以帮助我，非常感谢.

从'react'导入React；从'antd'导入{分隔符，表，标签}从'./report.json'导入报告导入'antd/dist/antd.css'进口 {标题，标题1，表模式，标题2，C1,C2,C3,C4,Rank来自'./style.js'const { 列，列组 } = 表；常量数据 = [{键:'0'，班级:全印度"，圆圈:全印度"，子标题1:12，子标题2:66，子标题3:32，子标题4:52,子标题5:74，子标题6:32},{键:'0'，班级:'1'，圆圈:'GUJ'，子标题 1: 42,子标题2:16，子标题3:70，子标题4:12,子标题5:54，子标题6:33},{键:'1'，班级:'1'，圆圈:'DEL'，子标题1:32，子标题2:66，子标题3:74，子标题4:22,子标题5:42，子标题6:31},]类 App 扩展了 React.Component {使成为() {控制台日志(报告)const items = report.data.columns.map(item =>(item.subHeader ?(<ColumnGroup title={item.columnName}>{item.subHeader.map((it,index) => (<列标题={it.name} dataIndex={it.dataIndex} key="2"/>))}</ColumnGroup>) : <列标题={item.columnName} dataIndex={item.dataIndex} key="age"/>))返回(<div id="root"><标题><标题1>{report.header.displayName}</Header1><标题2>数据 - {report.header.month}</Header2></标题><表架构><表格数据源={data} 边框标题={() =>`${report.header.displayName}` }>{项目}</表></TableSchema>

)}}导出默认应用程序；

解决方案

自定义表格单元格:

您可以根据特定条件更改特定单元格的颜色，您需要针对 columns 的 render 属性.

例如，如果单元格Amount大于50，则将单元格颜色渲染为red，否则green>.

render(text, record) {返回 {道具: {样式:{ 背景:parseInt(text) >50 ?红色":绿色"}},孩子:<div>{text}</div>};}

列数组

 列:[{title: "日期",数据索引:日期"，宽度:200},{title: "金额",数据索引:金额"，宽度:100，渲染(文本，记录){返回 {道具: {样式:{ 背景:parseInt(text) >50 ?红色":绿色"}},孩子:<div>{text}</div>};}},{title: "类型",数据索引:类型"，宽度:100},{title: "注意",数据索引:注释"，宽度:100}]

---

自定义表格行:

如果你想改变行的颜色而不是单元格的颜色，那么你需要定位 props rowClassName

 <表有边框的列={列}数据源={this.data}rowClassName={(record, index) =>(record.amount > 50 ? "red" : "green")}/>

css

.red{红色;}.绿色 {颜色:绿色；}

数据

data = [{关键:0，日期:2018-02-11"，数量:40，类型:收入"，注:转移"},{关键:1，日期:2018-03-11"，数量:243，类型:收入"，注:转移"},{关键:2，日期:2018-04-11"，数量:98，类型:收入"，注:转移"}];

这是一个

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;

解决方案

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.

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

 <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"

这篇关于如何根据值更改ANTD表中的单元格颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！