Is it possible to render a column header that contains a string & an imported component to resemble something like the following image:
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.
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>
),