When I add simple table on my page:
...
const [columnDefs] = useState([
{ headerName: "id", field: "id" },
{ headerName: "name", field: "name" },
{ headerName: "type", field: "type" },
]);
const defaultColDef = useMemo(() => {
return {
flex: 1,
minWidth: 140,
resizable: true,
};
}, []);
return (
<>
<div className="ag-theme-alpine" style={{ height: 400, width: 500 }}>
<AgGridReact
rowData={foundTemplates}
columnDefs={columnDefs}
getRowId={getRowId}
defaultColDef={defaultColDef}></AgGridReact>
pagination={false}
</div>
</>
);
foundTemplates has the following structure:
{ id: 1, name: "testName1", type: "TestRFQ", description: "description1", ownerCurrentUser: true, lastUsed: true },
{ id: 2, name: "testName2", type: "TestRFI", description: "description2", ownerCurrentUser: false, lastUsed: true },
{ id: 3, name: "testName3", type: "TestAuction", description: "description3", ownerCurrentUser: true, lastUsed: false },
{ id: 4, name: "testName4", type: "TestAuction", description: "description4", ownerCurrentUser: false, lastUsed: false },
I have a problem with displaying data in the right way: all data is displaying in one column (despite I have some kind of column definitions with 3 fields at least). Also I've tried to remove a pagination block ( pagination={false}
), but it is still displaying. How it looks now
In general I'm planning to use custom cell renderer for info displaying, but now I can't even display a simple data.
The root cause: I didn't import ag-grid css.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.