?? ?? ?? ? ??? ????? ????? ??? ?????. 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;