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

으아악