Conditionally rendering cell data based on accessor value

0
votes

Just started using react-table, trying to figure out how to conditionally render something based on the accessor value. I get back some data from an api call and use one of the values for the accessor.

{
   Header: "Action",
   id: "startTime",
   accessor: "attributes.startTime"
}

So I have a column with header "Action", here I want to conditionally render a button if the accessor value attrbiutes.startTime === null or something along those lines.

Rendering of the UI occurs in a different file so I also need to access it there for handling button onClick

I have a codesandbox here with a working example.

1
reactjsreact-table

1 Answers

1
votes

You can use custom cell renderer

const columns = [

  {
     Header: "Action",
     id: "startTime",
     accessor: "attributes.startTime",
     Cell: props => {
        return props.value === null ? <button>Click Me </button> : props.value;
     }
  }
];