[英]ag-grid-react does not render properly
按照文檔中的示例: https://www.ag-grid.com/best-react-data-grid/index.php
創建新的 React 應用程序后(在不同的機器上嘗試過幾次)
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;
外網格需要一個高度:-(
文檔沒有顯示這一點。 不知道為什么網格沒有最小默認高度,但沒有。
所以基本上你需要這樣的東西,其中網格用一個高度為的元素包裹:
<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;}
新的更好的方法來做到這一點:
const GridExample = () => {
const containerStyle = useMemo(() => ({ width: '100%', height: '100%' }), []);
const gridStyle = useMemo(() => ({ height: '100%', width: '100%' }), []);
return (
<div style={containerStyle}>
<div style={gridStyle} className="ag-theme-alpine">
<AgGridReact
...
></AgGridReact>
</div>
</div>
);
};
這樣你就可以更好地控制尺寸。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.