Sorting and filter is not working using react data grid

[Randhir01]

i'm facing the issue when integrate the sorting and filter using react data grid and react version 18..Below code is use. Any suggestion what's wrong in the code.

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: () => <FilterInput columnKey="id" />, }, { key: 'name', name: 'Name', width: 200, sortable: true, filterRenderer: () => <FilterInput columnKey="name" />, }, { key: 'age', name: 'Age', width: 100, sortable: true, filterRenderer: () => <FilterInput columnKey="age" />, }, ], 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}
                
                rowsCount={this.state.rows.length}
                toolbar={<EmptyToolbar />} //here's the EmptyToolbar component placed
                onAddFilter={this.handleFilterChange}
                 />
        </div>
    );

}

}

export default Title;

[truk]

You might be using a really old version. ReactDataGrid isn't an exported component at this point and onGridSort isn't a current prop. Try using a current version and use <DataGrid> and you'll get a lot of sorting out of the box

[amanmahajan7]

Closing due to lack of activity. Please open a new issue with a reproducible example if this is still an issue