Sorting and filtering in one column

[mateusz-placzek]

How do I combine sorting and filtering in one column?

When I try to do this, the column header with the filter overrides the sort column header.
Is there a way to manually add sorting to a header with a filter to the example from the demo site?

Demo

Many thanks.

[mteason]

You should render your own header with sort and filter. The build-in filter style is not flexible for your requirement.

[mateusz-placzek]

I'don't know how to do it and im stuck. Is there proper documentation or tutorial for header rendering.

[noah-ellman]

Very easy. The built-in sorting header is HeaderRenderer, so just use that as a child in your FilterableHeaderRenderer component.

[ybdiel]

A sample would had been nice

[maarli]

Example for a column definition:

         {
            key: "article_number", 
            name: "Article Number",
            headerCellClass:"filter-cell",
            headerRenderer: (p: HeaderRendererProps<Rows>) =>  (
                <> 
                    <div>{headerRenderer<Rows, unknown>({...p})}</div>
                    <FilterRenderer ... >
                        ...
                    </FilterRenderer>
                </>
            ),
            sortable: true
        },

[Randhir01]

I tried same but didn't work for me.Below code is used

import React, { createContext, createElement, useContext, useMemo, useEffect, useLayoutEffect as useLayoutEffect$1, useRef, useState, useCallback, memo, useId, forwardRef, useImperativeHandle } from 'react';
import { flushSync } from 'react-dom';
import clsx from 'clsx';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import ReactDataGrid from "react-data-grid";
import 'react-data-grid/lib/styles.css';

class EmptyToolbar extends React.Component {
componentDidMount() {
this.props.onToggleFilter()
}

render() {
    return (<div></div>)
}

}

class Title extends React.Component {
constructor(props) {
super(props);
this.state = {
rows: [
{ id: 1, name: 'John', age: 25 },
{ id: 2, name: 'Jane', age: 30 },
{ id: 3, name: 'Doe', age: 40 },
],
columns: [
{
key: 'id',
name: 'ID',
width: 100,
sortable: true,
filterRenderer: () => ,
},
{
key: 'name',
name: 'Name',
width: 200,
sortable: true,
filterRenderer: () => ,
},
{
key: 'age',
name: 'Age',
width: 100,
sortable: true,
filterRenderer: () => ,
},
],
sortColumn: null,
sortDirection: 'NONE',
filters: {},
};
}

    handleSort = (columnKey, direction) => {
        this.setState({ sortColumn: columnKey, sortDirection: direction });
    };

    handleFilterChange = (columnKey, value) => {
        this.setState((prevState) => ({
            filters: { ...prevState.filters, [columnKey]: value },
        }));
    };
    rowGetter = rowIdx => {
        const rows = this.state.rows;
        return rows[rowIdx];
    };
render() {
    //return 
    const { rows, sortColumn, sortDirection, filters } = this.state;

    const FilterInput = ({ columnKey }) => (
        <input
            type="text"
            onChange={(e) => this.handleFilterChange(columnKey, e.target.value)}
            placeholder={`Filter ${columnKey}`}
        />
    );

    const filteredRows = rows.filter((row) =>
        Object.entries(filters).every(([key, value]) =>
            row[key].toString().toLowerCase().includes(value.toLowerCase())
        )
    );
    return (
        <div>
           
            <ReactDataGrid
                enableCellSelect={true}
                columns={this.state.columns}
                onGridSort={this.handleSort}
                rowGetter={this.rowGetter}
                rowsCount={this.state.rows.length}
                toolbar={<EmptyToolbar />} //here's the EmptyToolbar component placed
                onAddFilter={this.handleFilterChange}
                 />
        </div>
    );

}

}

export default Title;

Please suggest