如何根据值更改ANTD表中的单元格颜色? [英] How can i change the cell colour in ANTD table according to the value?
问题描述
我有一张桌子，我想根据该值更改该单元格的颜色.如果单元格的值大于50，则该单元格的文本颜色应为红色.如果单元格值小于20，则为绿色.因此，单元格的配置应基于条件..我在此处附加代码.我是编码的新手，这是第一个项目.非常感谢有人能帮助我.
import从'react'导入React；从'antd'导入{除法器，表格，标签}从"./report.json"导入报告导入'antd/dist/antd.css'进口 {标头标头1，TableSchema，标头2，C1，C2，C3，C4，等级}来自"./style.js"const {Column，ColumnGroup} =表；const data = [{键:"0"，类别:全印度"，圈子:全印度"，subHeader1:12subHeader2:66，subHeader3:32，subHeader4:52，subHeader5:74，subHeader6:32}，{键:"0"，类别:"1"，圈子:"GUJ"，subHeader1:42subHeader2:16subHeader3:70，subHeader4:12，subHeader5:54subHeader6:33}，{键:"1"，类别:"1"，圈子:"DEL"，subHeader1:32，subHeader2:66，subHeader3:74，subHeader4:22，subHeader5:42subHeader6:31}，]App类扩展了React.Component {使成为() {console.log(报告)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"><标题>< Header1>{report.header.displayName}</Header1>< Header2>数据-{report.header.month}</Header2></Header>< TableSchema><表格dataSource = {data}带边框的标题= {()=>`$ {report.header.displayName}`}>{项目}</表></TableSchema></div>)}}导出默认应用程序； 自定义表格单元格:
您可以根据特定条件更改特定单元格的颜色，您需要定位列的 render 属性.
例如，如果单元格 Amount 大于 50 ，则将单元格颜色呈现为 red ，否则将其呈现为 green .
渲染(文本，记录){返回 {道具: {样式:{背景:parseInt(text)>50?"red":"green"}}，子级:< div> {text}</div>};} 列数组
列:[{标题:日期"，dataIndex:日期"，宽度:200}，{标题:金额"，dataIndex:数量"，宽度:100，渲染(文本，记录){返回 {道具: {样式:{背景:parseInt(text)>50?"red":"green"}}，子级:< div> {text}</div>};}}，{标题:类型"，dataIndex:类型"，宽度:100}，{标题:注释"，dataIndex:注释"，宽度:100}]
自定义表格行:
如果要更改行的颜色而不是单元格的颜色，则需要定位道具 rowClassName
<表接壤的列= {columns}dataSource = {this.data}rowClassName = {(记录，索引)=>(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屋！
