Can table cells just contain an icon?

[lilfrootyloops]

Is it possible to render icons inside column cells without having any other corresponding data that's coming from the source the table's pulling from for the other table values? I'm just trying to make a column of right-facing arrows at the end of each row. FWIW, this additional column is supposed to have a blank header.

The following is how I'm currently trying to implement it, which is causing an Error: A column ID (or string accessor) is required! error:

const columns = [
    {
        Header: 'First Name',
        accessor: 'firstName',
    },
    {
        Header: 'Last Name',
        accessor: 'lastName',
    },
    {
        Cell: () => (<ArrowFacingRight />)
    },
]

Could someone please explain how I could go about doing what I'm trying to accomplish?

[utkarsh-source]

Yes it is possible, infact I have added custom buttons for CRUD operations as well

[JoseSNubimetrics]

Sorry, Where is this?? thanks!

[LinnJS]

@lilfrootyloops the problem is the Cell func is in an object by its self when it does in fact need a header and accessor prop as well. The accessor is used as the id if I am not mistaken.

If you moved that Cell func into the lastName object the lastName value would be just that one emoji.

With that being said that does not really solve your problem. Perhaps you wanted a status column that took in props of yes, no, and maybe which you wanted to resolve as a ✅ , ❌ , and ❓.

The first thing I would do is make a component that accepts those three enums and returns one of those emojis per enum.

Something like this:

export const StatusEmojis = ({ status }: { status: 'yes' | 'no' | 'maybe' }) => {
  if (status === 'yes') {
    return <span>✅</span>;
  }

  if (status === 'no') {
    return <span>❌</span>;
  }

  if (status === 'maybe') {
    return <span>❓</span>;
  }

  return null;
};

Then you need to wire up you columns something like this:

export const columns = [
  {
    Header: 'First Name',
    accessor: 'firstName',
  },
  {
    Header: 'Last Name',
    accessor: 'lastName',
  },
  {
    Header: 'Status',
    accessor: 'status',
    Cell: ({ getValue }: { getValue: () => 'yes' | 'no' | 'maybe' }) => <StatusEmojis status={getValue()} />,
  },
];

This way the cell gets both a header title and a id via the Header and accessor props.

CC: @JoseSNubimetrics this might be what you are looking for as well 🙂

[JoseSNubimetrics]

This is exactly what I was looking for. Thanks, @LinnJS !

[LinnJS]

@JoseSNubimetrics no problem do you mind marking my reply as the answer would love the credit 😄

[lilfrootyloops]

Wow, I'm surprised to see activity on this discussion after almost a year. I did receive help with my issue from someone on Stack Overflow then; however, it warms my heart to see that you've tried to help me now @LinnJS. Thank you!

And yes, the crux of my issue was that I did not have either an id field or accessor field in my icon column — which is what you have explained too. So for that, I will mark your response as the answer. Cheers! 🍻