在React Data Grid中如何為列新增篩選器

Question

這幾天我一直在嘗試解決這個問題，但一無所獲。我正在嘗試使用 adazzle 的 React-data-grid 庫使我的表列可過濾和可排序。這是我的程式碼。我不知道下一步該做什麼。如果有人熟悉這個請幫助我。

我已經嘗試了幾乎所有的方法。我想使用 adazzle 的 React-data-grid 庫使我的表格列可過濾和可排序。

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