这几天我一直在尝试解决这个问题，但一无所获。我正在尝试使用 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 ( 
  rows[i]} rowsCount={rows.length} minHeight={300} onColumnResize={(idx, width) => console.log(`Column ${idx} has been resized to ${width}`) } enableCellSelect /> 
 ); } export default Data;