Search code examples
reactjsreact-tablereact-table-v7

Can I render a column header that contains a string & an imported component when using React Table library?


Is it possible to render a column header that contains a string & an imported component to resemble something like the following image:

Table Column Header Example

I've got an arrow sort icon that I've imported that I'd like to include in some headers beside a string value (e.g., Location, First Name, Last Name, etc.) to indicate that the columns are sortable. The following code is how I've tried to build one such header:

{
    Header: `Location ${<ArrowSort />}`,
    accessor: 'location',
    disableFilters: true
}

Rather than the desired output, I'm seeing "Location [object Object] as the column's header. I'd really appreciate it if someone could explain what I'm doing wrong and point me in the right direction to produce the desired header.


Solution

  • I was able to resolve my issue by rewriting my Header parameter as the following:

    Header: () => (
      <div className="flex">
        <div className="inline-flex">Location</div>
        <div className="inline-flex">
          <ArrowSort />
        </div>
      </div>
    ),