Sort and filter does not work at the same column

[rohit-squirrel]

Sort and Filter does not work at same column, i have added filter in headerRender, filter is showing and working fine but sort is not. @amanmahajan7

Environment

• react-data-grid 7.0.bet-12:
• react 18.0:

[vishal-vc]

@amanmahajan7 any solution for this?

[amanmahajan7]

Can you please create a reproducible example? You probably need to use sortStatus in your custom headerRenderer https://github.com/adazzle/react-data-grid/blob/main/src/headerRenderer.tsx#L68

[farooq7124]

@amanmahajan7 Can you please help with below code snippet how to pass sortStatus and use it to achieve filter with sort. Below is my filter snippet code.

Col Def ---> { name: 'Name', id: 'name', key: 'name', width: 300, sortable: true, formatter: (param) => <RowFormatter data={param} />, headerCellClass: this.state.filters.enable ? filterColumnClassName : '', headerRenderer: headerRenderer, },

  `const headerRenderer = (p) => (
  <FilterRenderer {...p} filters={this.state.filters}>
    {({ filters, ...rest }) => (
      <input
        {...rest}
        style={{ inlineSize: '100%', padding: 4, fontSize: 14 }}
        onChange={(e) => {
          let newState = this.state.filters
          newState = set(
            newState,
            `${p?.column?.key}`,
            e.target.value?.toUpperCase()
          )
          this.setFilters(newState)
        }}
        onKeyDown={inputStopPropagation}
      />
    )}
  </FilterRenderer>
)`

import { useFocusRef } from react-data-grid
export const FilterRenderer = ({
  isCellSelected,
  column,
  children,
  filters,
}) => {
  const { ref, tabIndex } = useFocusRef(true)

  return (
    <>
      <div>{column.name}</div>
      {filters.enable && <div>{children({ ref, tabIndex, filters })}</div>}
    </>
  )
}

[rohit-squirrel]

Any updates on this? @amanmahajan7