Я пытаюсь использовать ag-grid-реагировать для отображения информации, используя reactjs. Я пытаюсь очень простой пример 1013 * ag-grid. Ниже приведен фрагмент кода для отображения данных в табличном формате с использованием инфраструктуры ag-grid-реагировать. Мне нужна помощь для отображения данных в табличном формате
import React, { Component, Fragment } from 'react';
import { withStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import InputLabel from '@material-ui/core/InputLabel';
import InputAdornment from '@material-ui/core/InputAdornment';
import clsx from 'clsx';
import SearchIcon from '@material-ui/icons/Search';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-balham.css';
const useStyles = theme => ({
root: {
color: 'blue',
width: '100%',
height: '100%'
},
searchBar: {
width: '70%'
},
margin: {
margin: theme.spacing(1),
}
});
class App extends Component {
constructor(props) {
super(props);
this.state = {
searchQuery: "",
showGrid: true,
columnDefs: [
{ headerName: "Make", field: "make" },
{ headerName: "Model", field: "model" },
{ headerName: "Price", field: "price" }
],
rowData: [
{ make: "Toyota", model: "Celica", price: 35000 },
{ make: "Ford", model: "Mondeo", price: 32000 },
{ make: "Porsche", model: "Boxter", price: 72000 }
]
}
}
render() {
const { classes } = this.props;
return(
<div className={classes.root}>
<TextField
id="search-query-id"
placeholder="Search"
multiline
variant="outlined"
fullWidth
InputProps={{
startAdornment: (<InputAdornment position="start"><SearchIcon /></InputAdornment>)
}}
/>
<div className="ag-theme-balham" style={ {height: '200px', width: '600px'} }>
<AgGridReact
columnDefs={this.state.columnDefs}
rowData={this.state.rowData}>
</AgGridReact>
</div>
</div>
);
}
}
export default withStyles(useStyles)(App);
приведенный выше код приводит к следующему виду интерфейса
webpack файл конфигурации:
const webpack = require('webpack');
const config = {
entry: __dirname + '/src/index.jsx',
output: {
path: __dirname + '/dist',
filename: 'evidence.js',
},
resolve: {
extensions: ['.js', '.jsx', '.css']
},
module: {
rules: [
{
test: /\.jsx?/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.css?/,
loader: "css-loader"
},
{
test: /\.(png|jpg|gif|svg|jpeg )$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 10000
}
}
]
}
]
}
}
module.exports = config;