问题
I was trying to implement the row auto height feature described in the docs here:
https://www.ag-grid.com/javascript-grid-row-height/#auto-row-height
However it seems to not be working in my case. What happens for me is that the text doesn't wrap at all and it just creates a single long line for each row.
I've tried adapting the code as best as I could to my own app, but maybe I missed something? I'll be thankful if you could take a look at my code and tell me if something is missing:
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>
);
}
The css class:
.custom-datagrid {
height: 100%;
border: 0px;
margin-top: 0px !important;
margin-right: 0px !important;
margin-left: 0px !important;
}
What am I missing?
回答1:
In my case I have ra-ui-grid
it is the same as your component - UxDataGrid
Inside ra-ui-grid
I have next definitions:
.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%;
}
}
Then in some component, I am using ra-ui-grid with 2 wrappers
.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;
}
}
来源:https://stackoverflow.com/questions/65518883/react-ag-grid-row-auto-height-doesnt-work