So fügen Sie einer Spalte im React Data Grid einen Filter hinzu

Question

Ich habe in den letzten Tagen versucht, dieses Problem zu lösen, aber ohne Erfolg. Ich versuche, meine Tabellenspalten mithilfe der React-Data-Grid-Bibliothek von adazzle filterbar und sortierbar zu machen. Hier ist mein Code. Ich weiß nicht, was ich als nächstes tun soll. Wenn jemand damit vertraut ist, helfen Sie mir bitte.

Ich habe fast alles versucht. Ich möchte meine Tabellenspalten mithilfe der React-Data-Grid-Bibliothek von adazzle filterbar und sortierbar machen.

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;

Answer 1

// 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);
  };