反应数据 table 列过滤器问题与排序

Question

我正在为我的项目使用 React 数据 table。目前我正在使用列过滤功能和列排序功能。这是我的 table header.

 <thead>
  {headerGroups.map((headerGroup) => (
    <tr {...headerGroup.getHeaderGroupProps()}>
      {headerGroup.headers.map((column) => (
        <th {...column.getHeaderProps(column.getSortByToggleProps())}>
          {column.render("Header")}
          <span>
            {column.isSorted ? (
              column.isSortedDesc ? (
                <i class="mdi mdi-menu-down sort-arrow"></i>
              ) : (
                <i class="mdi mdi-menu-up sort-arrow"></i>
              )
            ) : (
              ""
            )}
          </span>
          <div>{column.canFilter ? column.render("Filter") : null}</div>
        </th>
      ))}
      <th>Action</th>
    </tr>
  ))}
</thead>

列筛选器和列排序功能正常工作。但我的问题是，当我单击列过滤器文本框时，列排序开始触发并排序 header。原因是所有元素都在同一个'th'内。我是怎么解决这个问题的。

Answer 1

改变这个

<th {...column.getHeaderProps(column.getSortByToggleProps())}>
          {column.render("Header")}
          <span>
            {column.isSorted ? (
              column.isSortedDesc ? (
                <i class="mdi mdi-menu-down sort-arrow"></i>
              ) : (
                <i class="mdi mdi-menu-up sort-arrow"></i>
              )
            ) : (
              ""
            )}
          </span>
          <div>{column.canFilter ? column.render("Filter") : null}</div>
        </th>

至

<th {...column.getHeaderProps()}>
<span  {...column.getSortByToggleProps()}>
          {column.render("Header")}
          <span>
            {column.isSorted ? (
              column.isSortedDesc ? (
                <i class="mdi mdi-menu-down sort-arrow"></i>
              ) : (
                <i class="mdi mdi-menu-up sort-arrow"></i>
              )
            ) : (
              ""
            )}
          </span>
</span>
          <div>{column.canFilter ? column.render("Filter") : null}</div>
        </th>

应该可以解决问题，基本上getSortByToggleProps return排序相关的道具，所以你只需要在点击你想要排序的元素时将它们提供给那个元素

Answer 2

我不确定这是否有帮助，因为 OP 似乎没有使用 FontAwesome，但我遇到了类似的问题并找到了这个解决方案：

反应数据 table 列过滤器问题与排序

react data table column filter problem with sort

reactjs

react-table