T
TanStack•2y ago
harsh-harlequin

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
rival-black
rival-black•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?
harsh-harlequin
harsh-harlequinOP•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
rival-black
rival-black•2y ago
great 👌
harsh-harlequin
harsh-harlequinOP•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>
    }
  }),
harsh-harlequin
harsh-harlequinOP•2y ago
@0xChupaCabra Please how can u achieve this since i don't have a column defined for the burger menu action ?
No description
rival-black
rival-black•2y ago
sorry, you want to have the burger in the same cell?
harsh-harlequin
harsh-harlequinOP•2y ago
Yes Thanks i have figured it out
yelping-magenta
yelping-magenta•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?