英文:
aggrid does not show group column
问题
我有以下代码用于分组列。但这不会分组列。我正在使用示例代码。
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
const App = () => {
const [rowData, setRowData] = useState();
useEffect(() => {
fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
.then(result => result.json())
.then(rowData => setRowData(rowData))
}, []);
const defaultColDef = useMemo(() => ({
resizable: true,
enableRowGroup: true
}), []);
const [columnDefs, setColumnDefs] = useState([
{ field: 'athlete', rowGroup: true },
{ field: 'age', headerName: 'Age12' },
{ field: 'country', rowGroup: true },
{ field: 'year' },
{ field: 'date' },
{ field: 'sport' },
{ field: 'gold' },
{ field: 'silver' },
{ field: 'bronze' },
{ field: 'total' }
]);
return (
<>
<div className="ag-theme-alpine" style={{ height: 700, width: '100%' }}>
<AgGridReact
animateRows={true}
rowData={rowData}
columnDefs={columnDefs}
defaultColDef={defaultColDef}
autoGroupColumnDef={{ minWidth: 200 }}
>
</AgGridReact>
</div>
</>
);
};
export default App;
AG GRID版本
"dependencies": {
"ag-grid-community": "^25.3.0",
"ag-grid-enterprise": "^25.3.0",
"ag-grid-react": "^25.3.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
Web控制台上，我看到类似以下的语句：
ag-grid-community.cjs.js:1732 AG Grid: rowGroup is only valid in ag-grid-enterprise, your column definition should not have rowGroup
从网站上可以看到：
AG Grid Enterprise是根据我们的最终用户许可协议（EULA）分发的商业产品，并由我们的技术支持团队提供支持。要评估AG Grid Enterprise，您无需我们的许可 - 所有功能都已解锁。要临时隐藏水印和浏览器控制台错误，请通过电子邮件联系我们以获取临时评估密钥。
那么如何使行分组有效工作。
英文:
I have below code to group columns. But this does not group columns. I am using sample code.
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
const App = () => {
const [rowData, setRowData] = useState();
useEffect(() => {
fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
.then(result => result.json())
.then(rowData => setRowData(rowData))
}, []);
const defaultColDef = useMemo( ()=> ( {
resizable: true,
enableRowGroup: true
}), []);
const [columnDefs, setColumnDefs] = useState([
{ field: 'athlete', rowGroup: true },
{ field: 'age', headerName: 'Age12' },
{ field: 'country' , rowGroup: true},
{ field: 'year' },
{ field: 'date' },
{ field: 'sport' },
{ field: 'gold' },
{ field: 'silver' },
{ field: 'bronze' },
{ field: 'total' }
]);
return (
<>
<div className="ag-theme-alpine" style={{height: 700, width: '100%'}}>
<AgGridReact
animateRows={true}
rowData={rowData}
columnDefs={columnDefs}
defaultColDef={defaultColDef}
autoGroupColumnDef={{ minWidth: 200 }}
>
</AgGridReact>
</div>
</>
);
};
export default App;
AG GRID VERSION
"dependencies": {
"ag-grid-community": "^25.3.0",
"ag-grid-enterprise": "^25.3.0",
"ag-grid-react": "^25.3.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
Web Console, i see statements like
ag-grid-community.cjs.js:1732 AG Grid: rowGroup is only valid in ag-grid-enterprise, your column definition should not have rowGroup
From Website:
AG Grid Enterprise is a commercial product distributed under our EULA and supported by our technical staff. To evaluate AG Grid Enterprise you don't need our permission – all features are unlocked. To temporarily hide the watermark and browser console errors e-mail us to get a temporary evaluation key.
So how to make the row Group working.
答案1
得分: 1
我缺少导入语句：
import 'ag-grid-enterprise';
只有在使用企业版时，行分组才能正常工作。上述语句将启用企业版。
英文:
I was missing import statement:
import 'ag-grid-enterprise';
Row Grouping will only work when you use enterprise version. The above statement will enable enterprise version.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论