I am using Airtable as a temporary database for basic data, and using MUI X Data Grid to display it. I am able to retrieve the data from Airtable and have it show in console.log, but cannot send it to the DataGrid to display.
This is the MUI X Data Grid - https://mui.com/components/data-grid/#mit-version
This is the Airtable npm package https://www.npmjs.com/package/airtable
This is the console.log displaying the data retrieved.
This is where the error is on the site, it only displays the column header, not the data.
import React, { useEffect, useState } from "react";
import { makeStyles } from "@material-ui/styles";
import { Container, Grid } from "@material-ui/core";
import { DataGrid } from "@mui/x-data-grid";
import Airtable from "airtable";
const base = new Airtable({ apiKey: "*****" }).base(
"*****"
);
const useStyles = makeStyles(
(theme) => ({
container: {
marginTop: "10vh",
},
}),
{}
);
const col = [
{ field: "id", headerName: "ID", width: 90 },
{ field: "name", headerName: "Institution Name", width: 150 },
{ field: "town", headerName: "Location Town", width: 150 },
{ field: "state", headerName: "State", width: 150 },
];
export default function CE3() {
const classes = useStyles();
const [rows, setRows] = useState([]);
useEffect(() => {
base("Table 1")
.select({
maxRecords: 3,
view: "Grid view",
})
.eachPage((records, fetchNextPage) => {
setRows(records);
console.log(records);
fetchNextPage();
});
}, []);
return (
<div>
<Container fixed={true} className={classes.container}>
Select at least <strong>1</strong> college
<br></br>
{rows && (
<DataGrid
rows={rows}
columns={col}
pageSize={5}
rowsPerPageOptions={[5]}
checkboxSelection
disableSelectionOnClick
/>
)}
</Container>
</div>
);
}
You must set a height to the parent of the DataGrid so that the DataGrid can match this height (see https://mui.com/components/data-grid/layout/#predefined-dimensions)
Or set the autoHeight
prop to true (see https://mui.com/components/data-grid/layout/#auto-height)