React table is getting sorted on filter

Question

I am creating a grid for my project where I need to implement column filtering. I have done it mostly, but facing an issue, that is whenever I click on the filter input box for ID column that column gets sorted. I have tried using e.stopPropagation() but that is not working.

A working copy of my code base can be found at https://4hz20.csb.app/, and the code is available at https://codesandbox.io/s/data-table-forked-4hz20

ColumnFilter.js

import React from "react";
import styled from "styled-components";

const Input = styled.input`
  width: 144px;
  margin: 8px 0;
  padding: 12px;
  border: solid 1px #c2c3c9;
  background-color: #ffffff;
`;

export const ColumnFilter = ({ column }) => {
  const { filterValue, setFilter } = column;
  return (
    <Input
      value={filterValue || ""}
      onChange={(e) => {
        e.stopPropagation();
        setFilter(e.target.value);
        return false;
      }}
      placeholder="Search"
    />
  );
};

additionally I am using manualFilters: true, manualSortBy: true and manualPagination: true as I want to handle them on server-side, but manual sorting and manual filter does not seem to work together, refer DataGrid.js line 37-39.

Answer 1

I changed the code from

<th scope="col" {...column.getHeaderProps(column.getSortByToggleProps())}>
    {column.render("Header")}
    <span>
        {column.disableSortBy ? "" : column.isSorted n? column.isSortedDesc ? " 🠓" : "  " : " ⇵"}
    </span>
    <div>
        {column.canFilter ? column.render("Filter") : null}
    </div>
</th>

to

<th scope="col">
    <div {...column.getHeaderProps(column.getSortByToggleProps())}>
        {column.render("Header")}
        <span>
            {column.disableSortBy ? "" : column.isSorted n? column.isSortedDesc ? " 🠓" : "  " : " ⇵"}
        </span>
    </div>
    <div>
        {column.canFilter ? column.render("Filter") : null}
    </div>
</th>

Wrapped the desired elements in a div and passed {...column.getHeaderProps(column.getSortByToggleProps())} to it.