When I added data here inside the MuiDatatable, it will show this error

Cannot read properties of undefined (reading 'split')

How do I fix this and display the data?

I have recreated the issue in codesandbox: https://codesandbox.io/s/xenodochial-fog-s984v0?file=/src/App.js

Codes:

export default function App() {
  console.log(data);
  const columns = [
    {
      name: "id",
      label: "System ID", //or the order ID here
      options: {
        filter: true,
        sort: true,
        display: false
      }
    },

    {
      label: "Name",
      options: {
        filter: true,
        sort: true
      }
    },
    {
      label: "Address",
      options: {
        filter: true,
        sort: true
      }
    },

    {
      label: "Cart Items",
      options: {
        filter: true,
        sort: true
      }
    },
    {
      label: "Total Amount",
      options: {
        filter: true,
        sort: true
      }
    }
  ];
  const options = {
    filter: true,
    selectableRows: "none",
    responsive: "simple"
    // onRowClick: handleRowClick,
  };
  return (
    <div className="App">
      <ThemeProvider theme={createTheme()}>
        {" "}
        <MUIDataTable
          title={"Reports"}
          options={options}
          columns={columns}
          data={data}
        />
      </ThemeProvider>
    </div>
  );
}

CodePudding user response：

Where is your data defined? Please make sure that data is an array of objects with structure as your columns array of the table.