Change Button Color Dynamically in Ant Design pro table

Question

I am using ant design pro to generate a table. Now I want to implement button in one column and change the color of button depending on the value. But I am struggling how to implement this.

Similar like the image. When false I can use danger to create a red button. But how can I disable danger depending on cell value.

My Code for this-->

const columns = [
{
  title: 'News Reported',
  dataIndex: 'newsReported',
  hideInForm: true,
  hideInSearch:true,
  sorter: true,
},
{
  title: 'Trustworthy',
  dataIndex: 'trustworthy',
  hideInForm: true,
  sorter: true,
  valueEnum: {
    0: {
      text: 'False',
      status: 'False',
    },
    1: {
      text: 'True',
      status: 'True',
    },
  },
  render: (_) => (
      <Button
        type="primary" danger
        onClick={() => {
          console.log("Option Clicked",_)
        }}
      >
        {_}
      </Button>
  ),
},
]

  return (
<PageHeaderWrapper>
  <ProTable
    rowKey="key"
    actionRef={actionRef}
    request={(params, sorter, filter) => queryRule({ ...params, sorter, filter })}
    columns={columns}
    rowSelection={false}
    scroll={{ x: 700 }}
  />


</PageHeaderWrapper>
);

If any way I could set danger to false depending on the cell value, I could achieve my goal. But how can I do this?

Thanks in advance.

Answer 1

So, found the problem. As I am using value enum, when passing a parameter in render it was taking the text value of enum. Found out render has another parameter record which has the row values. Using that I can get the output I want. Is this the best way, that I don't know. So the working code is for me now -->

render: (_,record) => (
    <Button
      type="primary" danger={!record.status}
      onClick={() => {
        console.log("Option Clicked",_,record.status)
      }}
    >
      {_}
    </Button>
  ),