React Data Gridの列にフィルターを追加する方法

Question

ここ数日間、この問題を解決しようと試みてきましたが、役に立ちませんでした。 adazzle の React-data-grid ライブラリを使用して、テーブルの列をフィルター可能および並べ替え可能にしようとしています。これが私のコードです。次に何をすればいいのか分かりません。誰かこれに詳しい人がいたら助けてください。ほぼすべてを試してみました。 adazzle の React-data-grid ライブラリを使用して、テーブルの列をフィルタリングおよび並べ替え可能にしたいと考えています。 importReact,{useState,useEffect}from"reac

P粉933003350 · Answer

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