T
TanStack•2y ago
relaxed-coral

Render multiple cols in one cell

What if i dont want to render 2 diff columns 'name' and 'phone' but wanna render a single column with a cell like <div>{name}<br />{phone}? How can i get the both values for the cell?
1 Reply
ratty-blush
ratty-blush•2y ago
two ways that both seem like kind of the same thing 
colHelper.accessor('name', {
  cell: (info) => {
    const provider = info.getValue()
    if (info.row.original.providerType !== 'saml') return provider
    return (
      <LinkCell to={pb.samlIdp({ ...siloSelector, provider })}>{provider}</LinkCell>
    )
  },
}),
colHelper.accessor((row) => ({ name: row.name, providerType: row.providerType }), {
  header: 'name',
  cell: (info) => {
    const { name: provider, providerType } = info.getValue()
    if (providerType !== 'saml') return provider
    return (
      <LinkCell to={pb.samlIdp({ ...siloSelector, provider })}>{provider}</LinkCell>
    )
  },
}),
colHelper.accessor('name', {
  cell: (info) => {
    const provider = info.getValue()
    if (info.row.original.providerType !== 'saml') return provider
    return (
      <LinkCell to={pb.samlIdp({ ...siloSelector, provider })}>{provider}</LinkCell>
    )
  },
}),
colHelper.accessor((row) => ({ name: row.name, providerType: row.providerType }), {
  header: 'name',
  cell: (info) => {
    const { name: provider, providerType } = info.getValue()
    if (providerType !== 'saml') return provider
    return (
      <LinkCell to={pb.samlIdp({ ...siloSelector, provider })}>{provider}</LinkCell>
    )
  },
}),
i.e., you can select both using an accessor function, or select one and use row.original to get the other. in your case, since name and phone are both equally important, maybe the second is clearer?

Did you find this page helpful?