react data table column filter problem with sort

Question

I am using react data table for my project. currently I am using column filtering feature and column sort feature. This is my 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>

Column filter and Column sort features are working correctly. but my problem is, when I click column filter textbox, column sort start to fire and sorting header. Reason is all element is inside the same'th'. how I solve this issue.

Rohit Garg Rohit Garg · Accepted Answer · 2020-12-17T13:35:43

Changing this

<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>

to

<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>

should solve the issue, basically getSortByToggleProps return sort related props, so you need to provide them to that element only on click of which you want to sort

react data table column filter problem with sort

2 Answers