Reactjs 定制react gridjs的桌面

在使用默认搜索栏之前，我想对其进行如下自定义：

在搜索栏前面添加一个按钮

在搜索占位符中使用图标（

）

以下是我目前的代码：

import { Grid, _ } from 'gridjs-react';

const tableColumns = [
  'Name',
  'Phone',
  {
    name: 'Custom component',
    formatter: (text) => _(<b>{text}</b>)
  }
]
const tableData = [
  ['John', 12345, 'myText1'],
  ['Mike', 67891, 'myText2'],
]

export default function myCustomGrid() {
  return (
    <Grid
      sort={true}
      search={true} // This adds the search inp
      columns={tableColumns}
      data={tableData}
      language={{
        search: {
          placeholder: 'This might be a good use-case for a portal.

This allows us to more flexibly decide where we render our button. Using portals we can make the button a sibbling of the search input:

const gridjsHeadRoot = document.getElementsByClassName("gridjs-head");

class GridHeaderButton extends React.Component {
  constructor(props) {
    super(props);
    this.el = document.createElement("button");
    this.el.innerText = "Click";
    this.el.style.cssText = `
      background-color: #0069d9;
      color: #fff; 
      border-radius: .25rem;
      padding: .375rem .75rem;
      float: right
    `;
    this.el.onclick = function () {
      // Do something
    };
  }

  componentDidMount() {
    gridjsHeadRoot[0].appendChild(this.el);
  }

  componentWillUnmount() {
    gridjsHeadRoot[0].removeChild(this.el);
  }

  render() {
    return ReactDOM.createPortal(this.props.children, this.el);
  }
}

import{Grid，}来自'gridjs react'；
常量表列=[
“姓名”，
"电话",，
{
名称：“自定义组件”，
格式化程序：（文本）=>（文本）
}
]
常数表数据=[
[John'，12345'，myText1']，
[Mike'，67891'，myText2']，
]
导出默认函数myCustomGrid（）{
返回(
这可能是一个很好的应用程序用例

这使我们能够更灵活地决定在何处呈现按钮。使用门户，我们可以使按钮成为搜索输入的同级：

然后你可以这样使用它：

函数MyCustomGrid（）{
返回(
很好的技巧！但是，示例中有两个小问题：按钮悬停时会触发1列悬停。2列文本略高于排序箭头。@AnisBenna我用一种更好的方法更新了答案。它应该可以解决您提到的问题。