DataGrid not rendering table?

[NickWinston123]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

The DataGrid does not show any rows or data just the navigation buttons on the bottom.

Expected behavior 🤔

The DataGrid should show all of the data in the rows.

Steps to reproduce 🕹

Steps:

1. Install django 4.0
2. Setup react js
3. Add react js build dir to django template
4. Add material ui x data grid and attempt to use datagrid

Context 🔦

Display my data. I had this issue happen in my previous project and I thought it was something I did when trying to learn everything so I made another project, setup reactjs and material ui and tried again and had the same issue.

This is my component that has the datagrid in it:

import React, { useEffect, useState } from "react"
import jQuery from 'jquery'
import { Container } from '@mui/material';
import { DataGrid, GridRowsProp, GridColDef } from '@mui/x-data-grid'


function WatcherOverview() {
    
      const columns = [
        { field: 'id', headerName: 'ID', width: 90 },
        {
          field: 'firstName',
          headerName: 'First name',
          width: 150,
          editable: true,
        },
        {
          field: 'lastName',
          headerName: 'Last name',
          width: 150,
          editable: true,
        },
        {
          field: 'age',
          headerName: 'Age',
          type: 'number',
          width: 110,
          editable: true,
        },
        {
          field: 'fullName',
          headerName: 'Full name',
          description: 'This column has a value getter and is not sortable.',
          sortable: false,
          width: 160,
          valueGetter: (params) =>
            `${params.row.firstName || ''} ${params.row.lastName || ''}`,
        },
      ];
      
      const rows = [
        { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
        { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
        { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
        { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
        { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
        { id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
        { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
        { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
        { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
      ];

      return (
        <Container>
          <h1>Single items:</h1>
          <DataGrid
        rows={rows}
        columns={columns}
        pageSize={5}
        rowsPerPageOptions={[5]}
        checkboxSelection
        disableSelectionOnClick
      />
        </Container>
      );
    }

export default WatcherOverview

Your environment 🌎

`npx @mui/envinfo`

PS D:\Documents\Code\Python\New\django_server> npx @mui/envinfo
npx: installed 2 in 3.132s

  System:
    OS: Windows 10 10.0.22000
  Binaries:
    Node: 14.17.2 - C:\Applications\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.13 - C:\Applications\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.22000.120.0), Chromium (96.0.1054.62)

[siriwatknp]

@mui-org/x should I transfer the issues to mui-x or just tag one of the x team?

[flaviendelangle]

You can transfer it 👍

[flaviendelangle]

@NickWinston123 You have to either give a height to the container of the DataGrid or set the autoHeight prop of the DataGrid to true
Otherwise, it does not know which size to take.

Here is your example with autoHeight: https://codesandbox.io/s/datagrid-v5-quick-start-forked-46udu?file=/src/App.tsx:1417-1418

More details here: https://mui.com/components/data-grid/layout/#predefined-dimensions

[NickWinston123]

@NickWinston123 You have to either give a height to the container of the DataGrid or set the autoHeight prop of the DataGrid to true Otherwise, it does not know which size to take.

Here is your example with autoHeight: https://codesandbox.io/s/datagrid-v5-quick-start-forked-46udu?file=/src/App.tsx:1417-1418

More details here: https://mui.com/components/data-grid/layout/#predefined-dimensions

This was it, I am glad it is working thank you!

[danielvinter]

Autoheight should be true by default if height is not specified.

[flaviendelangle]

The height is set on the parent component, not on the DataGrid itself

[dnikhila]

@flaviendelangle I have added autoHeight, suddenly test cases gets failed even though, can u pls check this comment - #1151 (comment)

[stone2dbone]

My datagrid only renders the header row in test. The entire datagrid renders just fine in the application. Data is generated from an API call, but I mock the data for testing. What am I missing?

Here's my test:

import { getRemovedReleaseSummaries, deleteRelease, setReleaseRecordStatus } from './release-api';
import releaseSummaryDeletedEntries from './data/releaseSummaryDeletedEntries';

let container: any;

const handlers = [
  rest.get('/api/url/inserted/here', (req, res, ctx) => {
    return res(ctx.json(releaseSummaryDeletedEntries));
  })
];

const server = setupServer(...handlers);


beforeAll(() => {
  server.listen();
});

afterEach(() => {
  server.resetHandlers();
});

afterAll(() => {
  server.close();
});

test.only('Should display a DataGrid containing Release data and actions.', async () => {
 
  await getRemovedReleaseSummaries();

  render(<ReleaseDataGrid_Admin />);
 
  // Find the DataGrid, data, and actions.
  const dataGrid = screen.getByRole('grid', { name: /release-admin-datagrid/i });
  const gridRows = await within(dataGrid).findAllByRole('row');
  //screen.debug(undefined, Infinity);
  expect(gridRows).toHaveLength(5);


});

Here's (an abbreviated version of) my datagrid:

import { getRemovedReleaseSummaries, deleteRelease, setReleaseRecordStatus } from './release-api';

function ReleaseDataGrid_Admin() {
  const [releaseList, setReleaseList] = useState<ReleaseSummaryDTO[]>([]);

  const fetchReleases = () => {
    getRemovedReleaseSummaries().then((data) => {
      setReleaseList(data);
    });
  };

  useEffect(() => {
    fetchReleases();
  }, []);
  
  //populate rows
  const rows: GridRowsProp = releaseList.map((datum) => {
    return {
      id: datum.id,
      systemShortName: datum.systemShortName,
      releaseVersion: datum.releaseVersion,
      releaseStatusDescription: datum.releaseStatusDescription,
      releaseTypeName: datum.releaseTypeName,
      proposedReleaseDate: (datum.proposedReleaseDate + '').substring(0, 10),
    };
  });
  
  //define columns
  const columns: GridColDef[] = [
    //{ field: 'id', headerName: 'ID', headerClassName: 'super-app-theme--header', width: 50 },
    {
      field: 'systemShortName',
      headerName: 'System Short Name',
      headerClassName: 'super-app-theme--header',
      width: 250,
    },
    { field: 'releaseVersion', headerName: 'Version Number', headerClassName: 'super-app-theme--header', width: 150 },
    { field: 'releaseStatusDescription', headerName: 'Status', headerClassName: 'super-app-theme--header', width: 150 },
    { field: 'releaseTypeName', headerName: 'Release Type', headerClassName: 'super-app-theme--header', width: 150 },
    {
      field: 'proposedReleaseDate',
      headerName: 'Proposed Release Date',
      headerClassName: 'super-app-theme--header',
      width: 200,
    },
    {
      field: 'actions',
      type: 'actions',
      headerClassName: 'super-app-theme--header',
      width: 150,
      sortable: false,
      hideable: false,
      filterable: false,
      renderCell: (params) => {
        return (
          <>
            <Tooltip title="View Details">
              <IconButton aria-label="details" size="small" href="#">
                <ArticleIcon />
              </IconButton>
            </Tooltip>
            <Tooltip title="Restore">
              <IconButton aria-label="restore" size="small" onClick={() => handleRestoreOpen(params.id)}>
                <RestoreFromTrashIcon />
              </IconButton>
            </Tooltip>
            <Tooltip title="Delete">
              <IconButton aria-label="delete" size="small" onClick={() => handleDeleteOpen(params.id)}>
                <DeleteIcon />
              </IconButton>
            </Tooltip>
          </>
        );
      },
    },
  ];
  
 //datagrid
  return (
    <Box
      sx={{
        marginBottom: '32px',
        maxWidth: '75%',
        height: 500,
        margin: 'auto',
        '& .super-app-theme--header': {
          backgroundColor: 'rgba(255, 255, 255, 1)',
          //color: 'rgba(255, 255, 255, 1)',
        },
      }}
    >
      <StyledDataGrid
        aria-label="release-admin-datagrid"
        autoHeight
        rows={rows}
        columns={columns}
        columnBuffer={8}
        checkboxSelection
        // components={{
        //   Toolbar: CustomGridToolbar,
        // }}
        componentsProps={{
          toolbar: {
            showQuickFilter: true,
          },
        }}
        getRowId={(row) => row.id}
        getRowClassName={(params) => (params.indexRelativeToCurrentPage % 2 === 0 ? 'even' : 'odd')}
        initialState={{
          sorting: {
            sortModel: [{ field: 'systemShortName', sort: 'asc' }],
          },
          columns: {
            columnVisibilityModel: {
              // Hide columns: id, the other columns will remain visible
              id: false,
              recordStatus: true,
            },
          },
        }}
      />
      <Dialog
        open={openRestore}
        onClose={handleRestoreClose}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
      >
        <DialogTitle id="restore-dialog-title">Restore Release</DialogTitle>
        <DialogContent dividers>Are you sure you want to restore this release?</DialogContent>
        <DialogActions>
          <Button onClick={handleRestoreClose}>No</Button>
          <Button onClick={() => handleRestore()} autoFocus>
            Restore
          </Button>
        </DialogActions>
      </Dialog>

      <Dialog
        open={openDelete}
        onClose={handleDeleteClose}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
      >
        <DialogTitle id="delete-dialog-title">Delete Release</DialogTitle>
        <DialogContent dividers>Are you sure you want to delete this release?</DialogContent>
        <DialogActions>
          <Button onClick={handleDeleteClose}>No</Button>
          <Button onClick={() => handleDelete()} autoFocus>
            Delete
          </Button>
        </DialogActions>
      </Dialog>
    </Box>
  );
}

export default ReleaseDataGrid_Admin;

[alexfauquette]

@stone2dbone This issue gets closed in Jan 2022, if you face a bug please open another one.

If your abbreviated version of your data grid works, consider the creation os a code sandbox, (you can edit this one: https://codesandbox.io/s/sdw7yn?file=/demo.tsx) It will simplify the exploration of your bug