Conditionally rendering cell data based on accessor value

[tkrebs2]

Just started using react-table, I have a lot of cases where I need to render certain things in table cells based on their values.

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

If attributes.startTime === null I want to render a button <button .. > some action </button.
I have a codesandbox here to make my use case more clear.

[tannerlinsley]

Your sandbox looks great to me. Using a ternary in the Cell renderer to check the value and render accordingly is the best way to achieve this! :)

[tkrebs2]

hmm something is off with the comparison. Half the attributes.startTime values are null while the other half contains date strings, but it's still rendering as if they are all null

[tannerlinsley]

Dates are interesting. Aside from checking if it's null or not, I would suggest something like this:

Header: "Action",
            id: "startTime",
            accessor: row => row.attributes.startTime ? new Date(row.attributes.startTime) : null,
            Cell: props => {
// You'll want to format your date here too, something like props.value.toLocaleDateString()
              return props.value == null ? (
                <button>Click Me </button>
              ) : (
                <button disabled> No action </button>
              );
            }

[tkrebs2]

Thanks for the feedback. The weird thing is I don't actually want to manipulate the dates in this cell, I just want to simply check if something other than an empty string or null value exists in attributes.startTime. For some perspective, I want to render a cancel button for the objects (schedules) that do have a date string inside attributes.startTime, no actual formatting is needed, that is handled in other cells.

[tannerlinsley]

Try this: https://codesandbox.io/s/react-table-executions-h376q

[tkrebs2]

Yup exactly what I was looking for. Thank you very much.