Using different font size in each row in antd react table

Question

I have a straighforward react table by antd and I noticed all font sizes in all tables are the same.

I have different sizes in my json file as such :

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

Answer 1

Just style the rendered row with Column.render property.

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>
  );
}