検索

ホームページ  >  に質問  >  本文

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

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

私はほぼすべてを試しました。 adazzle の React-data-grid ライブラリを使用して、テーブルの列をフィルタリングおよび並べ替え可能にしたいと考えています。

ああああ

P粉299174094P粉299174094437日前643

全員に返信(1)返信します

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

    返事
    0
  • キャンセル返事