I am currently utilizing Airtable as a temporary database for some fundamental data, and I want to use Material-UI’s DataGrid to present this information. While I’m able to fetch the data and see it in the console.log, I’m having trouble getting it to display in the DataGrid.
Here’s what I’m working with, including my implementation of MUI DataGrid and the Airtable npm package:
import React, { useEffect, useState } from ‘react’;
import { makeStyles } from ‘@material-ui/styles’;
import { Container } from ‘@material-ui/core’;
import { DataGrid } from ‘@mui/x-data-grid’;
import Airtable from ‘airtable’;
const airtableBase = new Airtable({ apiKey: ‘’ }).base('’);
const useStyles = makeStyles((theme) => ({
container: {
marginTop: ‘10vh’,
},
}), {});
const columns = [
{ field: ‘id’, headerName: ‘ID’, width: 90 },
{ field: ‘institution’, headerName: ‘Institution Name’, width: 150 },
{ field: ‘locality’, headerName: ‘Location’, width: 150 },
{ field: ‘region’, headerName: ‘State’, width: 150 },
];
export default function DataGridComponent() {
const classes = useStyles();
const [dataRows, setDataRows] = useState();
useEffect(() => {
airtableBase(‘Table 1’)
.select({
maxRecords: 3,
view: ‘Grid view’,
})
.eachPage((records, fetchNext) => {
setDataRows(records);
console.log(records);
fetchNext();
});
}, );
return (
Select at least 1 college
{dataRows && (
)}
);
}