How to show Airtable records in Material-UI DataGrid component

Other Questions Airtable
1

I’m working on a project where I need to pull data from Airtable and show it in a Material-UI DataGrid. The data is coming through fine when I check the console, but the grid only shows column headers and no actual rows.

Here’s my current setup:

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 database = new Airtable({ apiKey: "your-key" }).base("your-base-id");

const useStyles = makeStyles(() => ({
  wrapper: {
    marginTop: "5vh",
  },
}));

const columns = [
  { field: "id", headerName: "Record ID", width: 100 },
  { field: "title", headerName: "Company Name", width: 200 },
  { field: "city", headerName: "City", width: 120 },
  { field: "region", headerName: "Region", width: 120 },
];

export default function CompanyList() {
  const classes = useStyles();
  const [data, setData] = useState([]);

  useEffect(() => {
    database("Companies")
      .select({
        maxRecords: 5,
        view: "Main view",
      })
      .eachPage((items, getNext) => {
        setData(items);
        console.log(items);
        getNext();
      });
  }, []);

  return (
    <Container className={classes.wrapper}>
      <p>Choose companies from the list below:</p>
      {data && (
        <DataGrid
          rows={data}
          columns={columns}
          pageSize={10}
          rowsPerPageOptions={[10]}
          checkboxSelection
        />
      )}
    </Container>
  );
}

The console shows the records properly but the grid stays empty. What am I missing here?

2

Your DataGrid structure is the problem. Airtable sends records with id and fields properties, but DataGrid wants flat objects with an id field.

You need to flatten the Airtable data first. Here’s the fix:

useEffect(() => {
  database("Companies")
    .select({
      maxRecords: 5,
      view: "Main view",
    })
    .eachPage((items, getNext) => {
      const transformedData = items.map(record => ({
        id: record.id,
        title: record.fields['Company Name'], // adjust field names to match your Airtable
        city: record.fields['City'],
        region: record.fields['Region']
      }));
      setData(transformedData);
      getNext();
    });
}, []);

I hit this exact issue building an Airtable dashboard last year. Spent an hour debugging the same thing.

Double-check your field names match exactly what’s in Airtable - they’re case sensitive.

Also consider adding a loading state since eachPage can be slow with bigger datasets.

3

Yeah, eachPage is causing another issue - it’s overwriting your data array instead of adding to it. If you only need 5 records, just use firstPage(). Otherwise, you’ll need to properly accumulate the results. Also double-check that your Airtable field names match what’s in your columns config.