ag-Grid不显示分组列。

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

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 &#39;react&#39;;
import { AgGridReact } from &#39;ag-grid-react&#39;;
import &#39;ag-grid-community/dist/styles/ag-grid.css&#39;;
import &#39;ag-grid-community/dist/styles/ag-theme-alpine.css&#39;;
const App = () =&gt; {
const [rowData, setRowData] = useState();
useEffect(() =&gt; {
fetch(&#39;https://www.ag-grid.com/example-assets/olympic-winners.json&#39;)
.then(result =&gt; result.json())
.then(rowData =&gt; setRowData(rowData))
}, []);
const defaultColDef = useMemo( ()=&gt; ( {
resizable: true, 
enableRowGroup: true
}), []);
const [columnDefs, setColumnDefs] = useState([
{ field: &#39;athlete&#39;, rowGroup: true },
{ field: &#39;age&#39;, headerName: &#39;Age12&#39; },
{ field: &#39;country&#39; , rowGroup: true},
{ field: &#39;year&#39; },
{ field: &#39;date&#39; },
{ field: &#39;sport&#39; },
{ field: &#39;gold&#39; },
{ field: &#39;silver&#39; },
{ field: &#39;bronze&#39; },
{ field: &#39;total&#39; }
]);
return (
&lt;&gt;
&lt;div className=&quot;ag-theme-alpine&quot; style={{height: 700, width: &#39;100%&#39;}}&gt;
&lt;AgGridReact
animateRows={true} 
rowData={rowData}
columnDefs={columnDefs}
defaultColDef={defaultColDef}  
autoGroupColumnDef={{ minWidth: 200 }}
&gt;
&lt;/AgGridReact&gt;
&lt;/div&gt;
&lt;/&gt;
);
};
export default App;

AG GRID VERSION

&quot;dependencies&quot;: {
&quot;ag-grid-community&quot;: &quot;^25.3.0&quot;,
&quot;ag-grid-enterprise&quot;: &quot;^25.3.0&quot;,
&quot;ag-grid-react&quot;: &quot;^25.3.0&quot;,
&quot;react&quot;: &quot;^16.13.1&quot;,
&quot;react-dom&quot;: &quot;^16.13.1&quot;,
&quot;react-scripts&quot;: &quot;5.0.1&quot;,
&quot;web-vitals&quot;: &quot;^2.1.4&quot;
},

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.

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

发表评论

匿名网友

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

确定