使用 React Table 库时，我可以渲染包含字符串和导入组件的列 header 吗？

Question

是否可以呈现包含字符串和导入组件的列 header 以类似于下图：

我有一个我导入的箭头排序图标，我想将其包含在字符串值旁边的一些 header 中（例如， Location, First Name, Last Name, etc.) 以指示列是可排序的。下面的代码是我如何尝试构建一个这样的 header:

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

我看到的不是所需的输出，而是“位置 [object Object] 作为列的 header。如果有人能解释我的内容，我将不胜感激我做错了并指出正确的方向以产生所需的 header.

Answer 1

实验实例

// Custom Header Cell component
import React from "react";
const HeaderButton = ({ lablel }) => {
  return (
    <div>
      <span>{lablel}</span>
      <button>Button</button>
    </div>
  );
};

export default HeaderButton;

//Usage

import HeaderButton from "./HeaderButton"

//Column Definition

const columns = [
  {
    Header: <HeaderButton lablel="Prefix " />,
    accessor: "name"
  }];

Answer 2

我能够通过如下重写我的 Header 参数来解决我的问题：

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

使用 React Table 库时，我可以渲染包含字符串和导入组件的列 header 吗？

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

reactjs

react-table

react-table-v7

实验实例