I've been trying to solve this problem for the past few days, but to no avail. I'm trying to make my table columns filterable and sortable using adazzle's React-data-grid library. Here is my code. I don't know what to do next. If anyone is familiar with this please help me.
I've tried almost everything. I want to make my table columns filterable and sortable using adazzle's React-data-grid library.
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] Node.js quick start](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); };