How to create a column of cells that only contain icons using React Table library?

Question

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?

score 1 · Accepted Answer · answered Jul 06 '21 at 23:24

Like the error says, each of your columns needs either an id field or an accessor field which is a string. This is so react-table has something to identify each column with. Whenever you aren't trying to access any of the fields from your data array, you should use the id field. Something like this should work:

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

You should also include the Header: "" to fill the columns header with an empty string.

For more info, check the id section under Column Options in the docs: https://react-table.tanstack.com/docs/api/useTable#column-options

How to create a column of cells that only contain icons using React Table library?

1 Answers1