[英]Using different font size in each row in antd react table
I have a straighforward react table by antd and I noticed all font sizes in all tables are the same.我有一个 antd 的直接反应表,我注意到所有表中的所有字体大小都相同。
I have different sizes in my json file as such :我的 json 文件中有不同的大小,例如:
{
"id": "29609-p3bse3294pj",
"size": 32,
"price": 806,
"date": "Wed Jul 31 2019 05:50:53 GMT+0300 (Turkey Standard Time)"
},
{
"id": "72738-axmupi8rnkb",
"size": 23,
"price": 370,
"date": "Sat Jul 20 2019 18:22:35 GMT+0300 (Turkey Standard Time)"
},
and I wish to render each row in respective of the size provided for the font of that row.并且我希望按照为该行的字体提供的大小分别呈现每一行。
Just style the rendered row with Column.render
property .只需使用
Column.render
属性设置渲染行的样式。
const dataSource = [
{
id: '29609-p3bse3294pj',
size: 32,
price: 806
},
{
id: '72738-axmupi8rnkb',
size: 23,
price: 370
}
];
const columns = [
{
title: 'Price',
dataIndex: 'price',
key: 'id',
render: (price, record) => (
<Typography.Text style={{ fontSize: record.size }}>
{price}
</Typography.Text>
)
}
];
export default function App() {
return (
<FlexBox>
<Table
rowKey={record => record.id}
dataSource={dataSource}
columns={columns}
/>
</FlexBox>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.