CODEWITHSUNDEEP
reactjsdatagridmaterial-ui
SparkOn
SparkOn

Reputation: 8946

Data not displayed after rows updated in Material Ui Datagrid

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?

Upvotes: 6

Views: 7609

Answers (3)

Embedded_Mugs
Embedded_Mugs

Reputation: 2406

For me setting the autoHeight prop to true fixed the issue:

  <DataGridPremium
   autoHeight={true}
    ....
  />

Upvotes: 3

Pinx0
Pinx0

Reputation: 1258

I found the same issue on @mui/x-data-grid v5.17.14 (and Next.js 13 if that has anything to do with it)

In my case, the bug was when changing to a new page. I was pushing that change of page to the query params of the URL instead of using state, and then reading from there like this:

export default function usePagination(initialValues?:PaginationOptions) {
  const {query, push} = useRouter();
  const pageSize = Number(query.pageSize) > 0 ? Number(query.pageSize) : initialValues?.initialPageSize ?? GLOBAL_DEFAULT_PAGE_SIZE;
  const page = Number(query.page) > 0 ? Number(query.page) : initialValues?.initialPage ?? 1;
  const setPage = (input:number) => push({query:{...query, page:input+1}});
  const setPageSize = (input:number) => push({query:{...query, pageSize:input}});
  return {page, pageSize, setPage, setPageSize};
}

That doesn't work because datagrid must somehow be checking which parameter caused the re-render, and since this change was coming from a change in URL, it didn't react properly.

Forcing to use a useState for the page fixes the issue:

export default function usePagination(initialValues?:PaginationOptions) {
  const {query, push} = useRouter();
  const pageSize = Number(query.pageSize) > 0 ? Number(query.pageSize) : initialValues?.initialPageSize ?? GLOBAL_DEFAULT_PAGE_SIZE;
  const [page,setPageState] = useState(Number(query.page) > 0 ? Number(query.page) : initialValues?.initialPage ?? 1);
  const setPage = (input:number) => {setPageState(input+1); push({query:{...query, page:input+1}})};
  const setPageSize = (input:number) => push({query:{...query, pageSize:input}});
  return {page, pageSize, setPage, setPageSize};
}

Upvotes: 1

user2590928
user2590928

Reputation: 176

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.

Upvotes: 3

Related Questions