将JSON加载到ag-grid Table (React)的步骤如下:
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
state = {
rowData: []
};
componentDidMount() {
fetch('your_json_url')
.then(response => response.json())
.then(data => this.setState({ rowData: data }));
}
render() {
return (
<div className="ag-theme-alpine" style={{ height: '400px', width: '600px' }}>
<AgGridReact
columnDefs={this.columnDefs}
rowData={this.state.rowData}
/>
</div>
);
}
constructor(props) {
super(props);
this.columnDefs = [
{ headerName: 'Column 1', field: 'column1' },
{ headerName: 'Column 2', field: 'column2' },
// 其他列定义...
];
}
这样,当组件加载时,它会从服务器获取JSON数据,并将数据加载到ag-grid表格中显示出来。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。
领取专属 10元无门槛券
手把手带您无忧上云