ag-Grid不显示分组列。

huangapple
go评论202阅读模式
英文:

aggrid does not show group column

问题

我有以下代码用于分组列。但这不会分组列。我正在使用示例代码。

  1. import React, { useEffect, useMemo, useRef, useState } from 'react';
  2. import { AgGridReact } from 'ag-grid-react';
  3. import 'ag-grid-community/dist/styles/ag-grid.css';
  4. import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
  6. const App = () => {
  8.   const [rowData, setRowData] = useState();
  10.   useEffect(() => {
  11.     fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
  12.       .then(result => result.json())
  13.       .then(rowData => setRowData(rowData))
  14.   }, []);
  16.   const defaultColDef = useMemo(() => ({
  17.     resizable: true,
  18.     enableRowGroup: true
  19.   }), []);
  21.   const [columnDefs, setColumnDefs] = useState([
  22.     { field: 'athlete', rowGroup: true },
  23.     { field: 'age', headerName: 'Age12' },
  24.     { field: 'country', rowGroup: true },
  25.     { field: 'year' },
  26.     { field: 'date' },
  27.     { field: 'sport' },
  28.     { field: 'gold' },
  29.     { field: 'silver' },
  30.     { field: 'bronze' },
  31.     { field: 'total' }
  32.   ]);
  34.   return (
  35.     <>
  36.       <div className="ag-theme-alpine" style={{ height: 700, width: '100%' }}>
  37.         <AgGridReact
  38.           animateRows={true}
  39.           rowData={rowData}
  40.           columnDefs={columnDefs}
  41.           defaultColDef={defaultColDef}
  42.           autoGroupColumnDef={{ minWidth: 200 }}
  43.         >
  44.         </AgGridReact>
  45.       </div>
  46.     </>
  47.   );
  48. };
  49. export default App;

AG GRID版本

  1. "dependencies": {
  2.     "ag-grid-community": "^25.3.0",
  3.     "ag-grid-enterprise": "^25.3.0",
  4.     "ag-grid-react": "^25.3.0",
  5.     "react": "^16.13.1",
  6.     "react-dom": "^16.13.1",
  7.     "react-scripts": "5.0.1",
  8.     "web-vitals": "^2.1.4"
  9.   },

Web控制台上，我看到类似以下的语句：

  1. 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.

  1. import React, { useEffect, useMemo, useRef, useState } from &#39;react&#39;;
  2. import { AgGridReact } from &#39;ag-grid-react&#39;;
  3. import &#39;ag-grid-community/dist/styles/ag-grid.css&#39;;
  4. import &#39;ag-grid-community/dist/styles/ag-theme-alpine.css&#39;;
  5. const App = () =&gt; {
  6. const [rowData, setRowData] = useState();
  7. useEffect(() =&gt; {
  8. fetch(&#39;https://www.ag-grid.com/example-assets/olympic-winners.json&#39;)
  9. .then(result =&gt; result.json())
  10. .then(rowData =&gt; setRowData(rowData))
  11. }, []);
  12. const defaultColDef = useMemo( ()=&gt; ( {
  13. resizable: true, 
  14. enableRowGroup: true
  15. }), []);
  16. const [columnDefs, setColumnDefs] = useState([
  17. { field: &#39;athlete&#39;, rowGroup: true },
  18. { field: &#39;age&#39;, headerName: &#39;Age12&#39; },
  19. { field: &#39;country&#39; , rowGroup: true},
  20. { field: &#39;year&#39; },
  21. { field: &#39;date&#39; },
  22. { field: &#39;sport&#39; },
  23. { field: &#39;gold&#39; },
  24. { field: &#39;silver&#39; },
  25. { field: &#39;bronze&#39; },
  26. { field: &#39;total&#39; }
  27. ]);
  28. return (
  29. &lt;&gt;
  30. &lt;div className=&quot;ag-theme-alpine&quot; style={{height: 700, width: &#39;100%&#39;}}&gt;
  31. &lt;AgGridReact
  32. animateRows={true} 
  33. rowData={rowData}
  34. columnDefs={columnDefs}
  35. defaultColDef={defaultColDef}  
  36. autoGroupColumnDef={{ minWidth: 200 }}
  37. &gt;
  38. &lt;/AgGridReact&gt;
  39. &lt;/div&gt;
  40. &lt;/&gt;
  41. );
  42. };
  43. export default App;

AG GRID VERSION

  1. &quot;dependencies&quot;: {
  2. &quot;ag-grid-community&quot;: &quot;^25.3.0&quot;,
  3. &quot;ag-grid-enterprise&quot;: &quot;^25.3.0&quot;,
  4. &quot;ag-grid-react&quot;: &quot;^25.3.0&quot;,
  5. &quot;react&quot;: &quot;^16.13.1&quot;,
  6. &quot;react-dom&quot;: &quot;^16.13.1&quot;,
  7. &quot;react-scripts&quot;: &quot;5.0.1&quot;,
  8. &quot;web-vitals&quot;: &quot;^2.1.4&quot;
  9. },

Web Console, i see statements like

  1. 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

我缺少导入语句：

  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.

huangapple
  • 本文由 发表于 2023年7月10日 20:37:00
  • 转载请务必保留本文链接：https://go.coder-hub.com/76653813.html
  • ag-grid
  • ag-grid-react
  • javascript
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定