标签: gridjs

我不想使用默认的搜索栏，而是想按如下方式自定义它：

1. 在搜索栏前面添加一个按钮。
2. <i className="fa fa-search"/>在搜索占位符中使用图标 ( )。

到目前为止，这是我的代码：

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: ' Search...'
        }
      }}
      pagination={{
        enabled: true,
        limit: 2
      }}
    />
  );
}

我正在使用该gridjs-react库创建一个表，如下所示：

<Grid
  columns={['Name', 'Email']}
  data={[
    ['John', 'john@example.com'],
    ['Mike', 'mike@gmail.com']
  ]}
  ref={tableRef}
  search={true}
  pagination={{
    enabled: true,
    limit: 1,
  }}
/>

但是，我想最终向 dom 添加一个项目以获得以下结果：

我考虑过使用ref，但无法访问以下 div，因为它仅在安装组件 Grid 之后才呈现：（据我所知）

我想最初将数据渲染到 Grid.JS，然后我的页面可能会获取其他数据并添加其他行或填充某些行中缺少的数据。我不确定渲染一次后写入 Grid.JS 的语法是什么。我的想法是，我必须重新渲染整个表格，这就是我在下面尝试的但出现错误的方法。

我试过这个：

    new gridjs.Grid({
      columns: ["Name", "Email", "Phone Number"],      
      data: [["Mark", "mark@gmail.com", "(01) 22 888 4444"],["Eoin", "eoin@gmail.com", "0097 22 654 00033"],["Sarah", "sarahcdd@gmail.com", "+322 876 1233"],["Afshin", "afshin@mail.com", "(353) 22 87 8356"]]}).render(document.getElementById("gridjs"));

    new gridjs.Grid({
      columns: ["Test", "Email", "Phone Number"],
      data: [["test", "test@example.com", "(353) 01 222 3333"],["Mark", "mark@gmail.com", "(01) 22 888 4444"],["Eoin", "eoin@gmail.com", "0097 22 654 00033"],["Sarah", "sarahcdd@gmail.com", "+322 876 1233"],["Afshin", "afshin@mail.com", "(353) 22 87 8356"]]}).render(document.getElementById("gridjs"));

当我尝试执行此操作时，我在控制台中收到以下错误：

[Grid.js] [ERROR]: The container element [object HTMLDivElement] is not empty. Make sure the …