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

react data table column filter problem with sort

我正在为我的项目使用 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'内。我是怎么解决这个问题的。

改变这个

<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排序相关的道具,所以你只需要在点击你想要排序的元素时将它们提供给那个元素

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