Таблица реакции ag-grid не отображается?

Новинка для реагирования и аг-сетки. Я пытаюсь реализовать тривиальный пример ag-grid в своем проекте React. Когда я запускаю проект, сетка не отображается. Никаких консольных предупреждений, просто сетка не отображается.

import React from 'react';
import {AgGridReact} from 'ag-grid-react';
import '../../node_modules/ag-grid/dist/styles/ag-grid.css';
import '../../node_modules/ag-grid/dist/styles/theme-material.css';

var headers =  [{headerName: 'Name', field: 'name', width: 150, filter: 'text'},
                {headerName: 'Last', field: 'last', width: 150, filter: 'text'}]

var data = [{name: 'bob', last:'dude'},
            {name: 'will', last:'willdude'}]


export default class Accounts extends React.Component {
  constructor() {
    super();
    this.state = {
        showGrid: true,
        columnDefs: headers,
        rowData: data,
    };
  }
  onGridReady(params) {
      this.api = params.api;
      this.columnApi = params.columnApi;
  }

  render() {
    var gridTemplate;
    gridTemplate = (
        <div  className="ag-material">
            <AgGridReact
                columnDefs={this.state.columnDefs}
                rowData={this.state.rowData}
                onGridReady={this.onGridReady.bind(this)}
                showGrid={this.state.showGrid}
            />
        </div>
    );
    return (
      <div style={{width: '800px'}}>
        <p>I see this</p>
        {gridTemplate}
      </div>
    )
  }
}

Это то, что я вижу, когда запускаю это


person Brom Quinn    schedule 28.11.2016    source источник
comment
Такая же проблема. Есть ответ?   -  person Ryo    schedule 05.12.2016


Ответы (3)


Хорошо, нам нужна высота родительского div.

e.g.

    <div  className="ag-material" style={{height: '500px'}}>
        <AgGridReact
            columnDefs={this.state.columnDefs}
            rowData={this.state.rowData}
            onGridReady={this.onGridReady.bind(this)}
            showGrid={this.state.showGrid}
        />
    </div>
person Ryo    schedule 05.12.2016

Всегда лучше указывать высоту и ширину, иначе таблица ag-grid будет отображаться, настраивая ее в соответствии с минимальным содержимым.

<div className="ag-material" style={{height: 500, width: 500}}>
        <AgGridReact
            columnDefs={this.state.columnDefs}
            rowData={this.state.rowData}
            onGridReady={this.onGridReady.bind(this)}
            showGrid={this.state.showGrid}
        />
</div>
person Ankita Srivastava    schedule 09.07.2020

Я видел аналогичную проблему, когда сетка не отображалась. Добавление стилей сетки устранило проблему для меня.

import '../../node_modules/ag-grid/dist/styles/ag-grid.css';
import '../../node_modules/ag-grid/dist/styles/theme-material.css';
person praveen    schedule 23.06.2020