[英]React ag-grid row auto height doesn't work
我試圖實現此處文檔中描述的行自動高度功能:
https://www.ag-grid.com/javascript-grid-row-height/#auto-row-height
但是,它似乎不適用於我的情況。 對我來說發生的是文本根本不換行,它只是為每一行創建一個長行。
我已經嘗試盡可能地調整代碼以適應我自己的應用程序,但也許我錯過了什么? 如果您能查看我的代碼並告訴我是否缺少某些內容,我將不勝感激:
const defaultColDefProperties = {
flex: 1,
editable: true,
resizable: true,
floatingFilter: true,
filter: true,
wrapText: true,
autoHeight: true,
};
const columnDefinition = [{headerName: "Key", field: "Key"},
{headerName: "Value", field: "Value"}];
const ConfigurationDataGrid = (props) =>
{
const [gridRowData, setGridRowData] = useState([]);
const gridApi = useRef(null);
useEffect(async () =>
{
const getRowData = async () =>
{
let rowData = await WebApi.getRowData();
setGridRowData(rowData);
}
await getRowData();
},[]);
const onGridReady = params =>
{
gridApi.current = params.api;
}
const onColumnResized = (params) =>
{
params.api.resetRowHeights();
}
const onColumnVisible = (params) =>
{
params.api.resetRowHeights();
}
return (
<div style={{ width: '100%', height: '100%' }}>
<UxDataGrid
id='datagrid'
className='custom-datagrid'
onGridReady={onGridReady}
columnDefs={columnDefinition}
rowData={gridRowData}
defaultColDef={defaultColDefProperties}
onColumnResized={onColumnResized}
onColumnVisible={onColumnVisible}/>
</div>
);
}
css class:
.custom-datagrid {
height: 100%;
border: 0px;
margin-top: 0px !important;
margin-right: 0px !important;
margin-left: 0px !important;
}
我錯過了什么?
就我而言,我有ra-ui-grid
它與您的組件相同 - UxDataGrid
在ra-ui-grid
我有下一個定義:
.html:
<ag-grid-angular
class="ag-theme-balham grid"
...
></ag-grid-angular>
.ts:
defaultColDef: {
flex: 1,
...
},
.scss:
ra-ui-grid {
height: 100%;
display: flex;
flex-flow: column nowrap;
.grid {
height: 100%;
}
}
然后在某些組件中,我使用帶有 2 個包裝器的 ra-ui-grid
.html
<div class="io">
<div class="io__table">
<ra-ui-grid
[data]="data"
[config]="gridConfig"
[columns]="columnDefs"
(onPaginationChanged)="paginationChanged.next($event)"
></ra-ui-grid>
</div>
</div>
.scss:
.io {
height: calc(100% - 36px);
display: flex;
flex-direction: column;
&__table {
flex: 1;
min-height: 254px;
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.