Saya telah cuba menyelesaikan masalah ini sejak beberapa hari lalu tetapi tidak berjaya. Saya cuba menjadikan lajur jadual saya boleh ditapis dan diisih menggunakan perpustakaan React-data-grid adazzle. Inilah kod saya. Saya tidak tahu apa yang perlu dilakukan seterusnya. Jika sesiapa yang biasa dengan ini tolong bantu saya.
Saya telah mencuba hampir semua perkara. Saya mahu menjadikan lajur jadual saya boleh ditapis dan boleh diisih menggunakan perpustakaan React-data-grid adazzle.
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; 
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
// 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); };