search

Home  >  Q&A  >  body text

How to add filter to column in React Data Grid

I've been trying to solve this problem for the past few days, but to no avail. I'm trying to make my table columns filterable and sortable using adazzle's React-data-grid library. Here is my code. I don't know what to do next. If anyone is familiar with this please help me.

I've tried almost everything. I want to make my table columns filterable and sortable using adazzle's React-data-grid library.

import React, { useState, useEffect } from "react";
import ReactDataGrid from "react-data-grid";
//import {  Toolbar, Filters } from "react-data-grid-addons";

function Data() {
  const [columns, setColumns] = useState([]);
  const [rows, setRows] = useState([]);

  useEffect(() => {

    const defaultComponentProperties = {
      resizable: true,
      filterable: true,
      sortable: true,
    };
    // Fetch grid configuration
    fetch('../local-json/gridConfig.json')
      .then(response => response.json())
      .then(myConfig => {
        myConfig = myConfig.map(c => ({...c, ...defaultComponentProperties}))
        setColumns(myConfig)
      })
      .catch(error => {
        console.error('Error fetching grid configuration:', error);
      })
      // .catch((error) => {
      //   console.error("Error fetching grid configuration:", error);
      // });


    // Fetch grid data
    fetch('../local-json/gridData.json')
      .then(response => response.json())
      .then(myData => {
        setRows(myData);
      })
      .catch(error => {
        console.error('Error fetching grid data:', error);
      });
  }, [])
  // .catch((error) => {
  //   console.error("Error fetching grid data:", error);
  // });


  return (
    <div className="grid-container">
      <ReactDataGrid
        columns={columns}
        rowGetter={i => rows[i]}
        rowsCount={rows.length}
        minHeight={300}
        onColumnResize={(idx, width) =>
          console.log(`Column ${idx} has been resized to ${width}`)
        }
        enableCellSelect
      />
    </div>
  );
}

export default Data;

P粉299174094P粉299174094426 days ago631

reply all(1)I'll reply

  • P粉933003350

    P粉9330033502023-09-15 00:06:15

    // handle the filtering 
    const handleFilterChange = (filter) => {
        const newFilters = { ...filters };
        if (filter.filterTerm) {
          newFilters[filter.column.key] = filter;
        } else {
          delete newFilters[filter.column.key];
        }
        setFilters(newFilters);
      };
    
      const getValidFilterValues = (columnId) => {
        let values = rows.map((r) => r[columnId]);
        return values.filter((item, i, a) => {
          return i === a.indexOf(item);
        });
      };
    
    // clearing filters
      const onClearFilters = () => {
        setFilters({});
      };
    // handle sorting 
      const handleSort = (sortColumn, sortDirection) => {
        const sortedRows = [...rows];
        sortedRows.sort((a, b) => {
          const valueA = a[sortColumn];
          const valueB = b[sortColumn];
    
          if (sortDirection === "ASC") {
            return valueA < valueB ? -1 : valueA > valueB ? 1 : 0;
          } else if (sortDirection === "DESC") {
            return valueA > valueB ? -1 : valueA < valueB ? 1 : 0;
          }
    
          return 0;
        });
    
        setRows(sortedRows);
      };

    reply
    0
  • Cancelreply