T
TanStack•2y ago
evident-indigo

How to render cell based on condition

One of the columns i have is Status which can only be number 0 , 1 , 2 and so on and i would like to render the description based on the number where 0 will be showing pending on the table 1 will show approved and 2 will show done, How can i achieve this ? 
const columns = [
  columnHelper.accessor('firstName', {
    cell: (info) => info.getValue(),
    header: () => <span>First Name</span>
  }),
  columnHelper.accessor((row) => row.lastName, {
    id: 'lastName',
    cell: (info) => <i>{info.getValue()}</i>,
    header: () => <span>Last Name</span>
  }),
  columnHelper.accessor('status', {
    header: () => 'Status',
    cell: (info) => info.renderValue()
  }),
]
const columns = [
  columnHelper.accessor('firstName', {
    cell: (info) => info.getValue(),
    header: () => <span>First Name</span>
  }),
  columnHelper.accessor((row) => row.lastName, {
    id: 'lastName',
    cell: (info) => <i>{info.getValue()}</i>,
    header: () => <span>Last Name</span>
  }),
  columnHelper.accessor('status', {
    header: () => 'Status',
    cell: (info) => info.renderValue()
  }),
]
8 Replies
exotic-emerald
exotic-emerald•2y ago
 cell: ({ cell: { value } }) => (
          <p style={{ color: value > 600 ? 'red' : '' }}>{value}</p>
        ),
 cell: ({ cell: { value } }) => (
          <p style={{ color: value > 600 ? 'red' : '' }}>{value}</p>
        ),
something like this?
evident-indigo
evident-indigoOP•2y ago
yes! let me try that This example is based on style which is still helpfull But i want to render div element I found a solution Thanks
exotic-emerald
exotic-emerald•2y ago
great 👌
evident-indigo
evident-indigoOP•2y ago
This is my solution below 
columnHelper.accessor('status', {
    header: () => 'Status',
    cell: (info) => {
      const status = info.row.original.status

      let statusText = ''
      switch (status) {
        case 0:
          statusText = 'Pending'
          break
        case 1:
          statusText = 'Approved'
          break
        case 2:
          statusText = 'Done'
          break

        default:
          statusText = 'Unknown'
          break
      }

      return <span>{statusText}</span>
    }
  }),
columnHelper.accessor('status', {
    header: () => 'Status',
    cell: (info) => {
      const status = info.row.original.status

      let statusText = ''
      switch (status) {
        case 0:
          statusText = 'Pending'
          break
        case 1:
          statusText = 'Approved'
          break
        case 2:
          statusText = 'Done'
          break

        default:
          statusText = 'Unknown'
          break
      }

      return <span>{statusText}</span>
    }
  }),
evident-indigo
evident-indigoOP•2y ago
@0xChupaCabra Please how can u achieve this since i don't have a column defined for the burger menu action ?
No description
exotic-emerald
exotic-emerald•2y ago
sorry, you want to have the burger in the same cell?
evident-indigo
evident-indigoOP•2y ago
Yes Thanks i have figured it out
genetic-orange
genetic-orange•2y ago
I your status example you can use the info.getValue() or destructure info to { getValue } as you have status as an accessor so you don't need to pick it up from info.row.original.status or even better if you want to sort by your mapped values later make the accessor a callback (row) => { switch here} and in the cell callback just have the span with getValue()

Did you find this page helpful?