0

我正在尝试使用 ag-grid-react 来使用 reactjs 显示信息。我正在尝试非常基本的 ag-grid 示例。我有下面的代码片段，可以使用 ag-grid-react 框架以表格格式显示数据。我需要帮助以表格格式显示数据

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);

上面的代码导致以下 UI 视图

在此处输入图像描述

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;
4

0 回答 0