Data not displayed after rows updated in Material Ui Datagrid

user_3282808 0
Viewed 2632

This component is used to display the users. Once a new user is added from another component usersUpdated gets toggled and a call is made to backend to fetch all the users again which contains the newly added user and display in the Datagrid. But the datagrid does not display any record and distorts the datagrid UI. If the page is refreshed or some other action is performed in Datagrid like changing the pageSize displays all the records properly.

    const UsersDisplayTable = (props) => {

    const usersUpdated = props.usersUpdated;
    const [columns, setColumns] = useState(
       [
                    {
                        field: 'email',
                        headerName: 'Email',
                        align: "left",
                        headerAlign: "left",
                        flex: 1,
                        filterable: true
                    },
                    {
                        field: 'dateOfBirth',
                        headerName: 'Date Of Birth',
                        align: "center",
                        headerAlign: "center",
                        flex: 0.75,
                        filterable: false,
                        sortable: false,
                        valueFormatter: (params) => {
                            const valueFormatted = moment(
                                    new Date(params.row.dateOfBirth)).format(
                                    'DD MMM YYYY');
                            return `${valueFormatted}`;
                        }
                    },
                    {
                        field: "actions",
                        headerName: "Actions",
                        sortable: false,
                        filterable: false,
                        align: "center",
                        headerAlign: "center",
                        flex: 0.75,
                        renderCell: (params) => {
                            return (
                                    <>
                                        <EditUserIcon
                                                onClick={(e) => props.editUser(
                                                        e, params.row)}
                                                title='Edit'/>
                                    </>
                            );
                        }
                    }
                ]
    );

    const [allUsers, setAllUsers] = useState([]);

    useEffect(() => {
        axios
        .get("/get-all-users")
        .then(data => {
            setAllUsers(data.data.data)
        }).catch(error => {})
    }, [usersUpdated])

    return (
            <>
                <DataGrid
                            sortingOrder={["desc", "asc"]}
                            rows={allUsers} columns={columns}
                            disableSelectionOnClick
                            disableColumnSelector />
            </>
    );
   }
   export default UsersDisplayTable;

Initial load of datagrid enter image description here

after adding dynamic row or user enter image description here

Is this a limitation of Material UI Datagrid?

material-ui reactjs datagrid
1 Answers

I was experiencing the same issue using @mui/x-data-grid version 5.0.1.

I was able to get around this issue by setting up a useEffect with a dependency on my rows. Within this use effect I just toggle a state variable which I use for the row height in my grid.

const [rowHeight, setRowHeight] = useState(28);    

useEffect(() => {
         if (rowHeight === 28) {
           setRowHeight(29);
         }else {
          setRowHeight(28);
         }
      }, [rows]);

...

<DataGrid
  rows={rows}
  columns={columns}
  pageSize={pgSize}
  rowHeight={rowHeight}
  ...otherProps  
/>

I think by changing the height it's triggering a re-render of the grid and its contents.

This solution is a hack to work-around a bug in the code.

user_25909280
Related