Showing Airtable content in Material-UI X Data Grid

Other Questions Airtable
1

Help needed: Displaying Airtable data in MUI X Data Grid

I’m trying to show Airtable info in a Material-UI X Data Grid. I can get the data from Airtable and see it in the console, but it won’t show up in the grid. The grid only shows column headers, not the actual data.

Here’s what I’ve done so far:

import React, { useEffect, useState } from 'react';
import { DataGrid } from '@mui/x-data-grid';
import AirtableClient from 'airtable-client';

const dataClient = new AirtableClient({ apiKey: 'your-key-here' });

const columns = [
  { field: 'id', headerName: 'ID', width: 90 },
  { field: 'schoolName', headerName: 'School', width: 150 },
  { field: 'city', headerName: 'City', width: 150 },
  { field: 'region', headerName: 'Region', width: 150 }
];

function SchoolList() {
  const [schoolData, setSchoolData] = useState([]);

  useEffect(() => {
    dataClient.fetchRecords('SchoolInfo')
      .then(data => {
        setSchoolData(data);
        console.log(data);
      });
  }, []);

  return (
    <div>
      {schoolData && (
        <DataGrid
          rows={schoolData}
          columns={columns}
          pageSize={5}
          checkboxSelection
        />
      )}
    </div>
  );
}

export default SchoolList;

Any ideas on why the data isn’t showing up in the grid? Thanks!

2

I’ve encountered this issue before when working with Airtable and MUI X Data Grid. The problem likely stems from a mismatch between the Airtable data structure and what the DataGrid expects. To resolve this, you’ll need to transform your Airtable records before setting them as rows.

Try modifying your useEffect hook like this:

useEffect(() => {
  dataClient.fetchRecords('SchoolInfo')
    .then(data => {
      const formattedData = data.map(record => ({
        id: record.id,
        schoolName: record.fields.schoolName,
        city: record.fields.city,
        region: record.fields.region
      }));
      setSchoolData(formattedData);
    });
}, []);

This should align your data with the column structure you’ve defined, allowing the grid to properly display the information. Let me know if you need any further clarification.

3

hey there! i faced a similar prob. u must shape your Airtable records to fit DataGrid, eg convert each record to include an id and fields like schoolName, city, and region. u can then use this new array for rows. hope it helps!

4

I’ve had success integrating Airtable with MUI X Data Grid in a recent project. One crucial step is handling the asynchronous nature of data fetching. You might want to add a loading state to your component:

const [loading, setLoading] = useState(true);

Then, in your useEffect, set loading to false after the data is fetched and processed. In your return statement, you can conditionally render a loading indicator or the DataGrid:

return (

{loading ? ( ) : ( )}
);

This approach ensures the grid only renders when data is available, preventing any potential rendering issues. Also, double-check that your Airtable field names exactly match the ones you’re using in your code. Case sensitivity matters here.