ag-grid-react не отображается должным образом

Следуя образцу из документации: https://www.ag-grid.com/best-react-data-grid/index.php

После создания нового приложения для реагирования (несколько раз пробовали на разных машинах)

create-react-app whatever

Если я применяю таблицы стилей (ag-grid.css и theme-fresh.css), все, что отображается, - это серая линия поперек страницы. Любая другая комбинация отображает пустую страницу. Удаление ag-grid.css визуализирует сетку, но она беспорядочно перемешана.

Кто-нибудь успешно использовал это в последнее время с React? Кто-нибудь рекомендует что-то другое? (требования: разбиение по страницам, сортировка, фильтрация, выбираемые строки)

Благодарность :-)

import React, { Component } 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-fresh.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      columnDefs: [
        {headerName: 'First Name', field: 'name' },
        {headerName: 'Last Name', field: 'lname'  }
      ],
      rowData: [
        { name: 'Dave', lname: 'Smith' },
        { name: 'Tommy', lname: 'Smith' },
        { name: 'Lea', lname: 'Jones' }
      ]
    }
  }
  render() {
    return (
      <div className="ag-fresh">
        <AgGridReact
            columnDefs={this.state.columnDefs}
            rowData={this.state.rowData}
          rowSelection="multiple"
          enableColResize="true"
          enableSorting="true"
          enableFilter="true"
          groupHeaders="true"
          rowHeight="22"
          debug="true"
        />
      </div>
    );
  }
}

export default App;

reactjs ag-grid-react ag-grid
person schmoopy    schedule 21.09.2016    source источник

Ответы (2)


arrow_upward
11
arrow_downward

Внешняя сетка требовала высоты :-(

В документации это не показано. Не уверен, почему для сетки нет минимальной высоты по умолчанию, но ее нет.

person schmoopy    schedule 24.09.2016
comment
проклятие. Я бы никогда об этом не подумал. - person Codious-JR; 07.02.2017

arrow_upward
3
arrow_downward

По сути, вам нужно что-то вроде этого, где сетка обернута элементом, имеющим высоту:

<div className="ag-fresh">
  <div className="grid_height_fix">
  <AgGridReact columnDefs={this.state.columnDefs} rowData={this.state.data.gridDate} >
  </AgGridReact>
  </div>
</div>
.grid_height_fix {height:800px;}

person Dave    schedule 26.01.2017