deep-jade•2y ago

Display only certain rows in List view Mui

Hello everyone !! I have a user ressources in which i have all users (admin and non admin) and need to display only the admin user in the list view of the ressources. How can do that in my user list component or maybe in the DataProvider ?

7 Replies

refine-support-bot•2y ago

Hey, I am refine support bot :wave:. I am here to help you with your question. I searched for the answer to your question in the refine documentation and could not find an answer. Please wait for someone from the refine core team or the community to try to help you. 👊

ambitious-aqua•2y ago

Hey @harisris, isn't filtering work for your case?

deep-jadeOP•2y ago

Hi @aliemirs in my case i don't want non admin user at all i only want to display admin. I don't know if it can be done with filtering

ambitious-aqua•2y ago

Depending on the data hook you're using, you can pass filters or if you're using datagrid/table hooks you can pass permanentFilter to your query. If your data provider supports filtering, you'll get the filtered data (in your case only the admin users) and you can show the data then

deep-jadeOP•2y ago

I try and get back to you if I have issues

ambitious-aqua•2y ago

Good luck! 🚀

deep-jadeOP•2y ago

Finally i've made a function which update a roles state accord to a checkbox :

    const [displayAdmin, setDisplayAdmin] = useState(false);
  
    let adminsTab: string[] = [];

    const handleFilter = () => {
        setDisplayAdmin(!displayAdmin);
        if (!displayAdmin) {
            dataGridProps.rows.map(user => {
                if (user.roles.includes("ROLE_ADMIN")) {
                    adminsTab.push(user);
                }
            });
        }

        return adminsTab;
    };

    const [displayAdmin, setDisplayAdmin] = useState(false);
  
    let adminsTab: string[] = [];

    const handleFilter = () => {
        setDisplayAdmin(!displayAdmin);
        if (!displayAdmin) {
            dataGridProps.rows.map(user => {
                if (user.roles.includes("ROLE_ADMIN")) {
                    adminsTab.push(user);
                }
            });
        }

        return adminsTab;
    };

and i made my list like that :

             <List
                title=""
                wrapperProps={{
                    sx: {
                        "-webkit-box-shadow": "none",
                        "-moz-box-shadow": "none",
                        "box-shadow": "none"
                    }
                }}>
                <FormControlLabel
                    label="Display only admin unsers"
                    control={<Checkbox onChange={handleFilter} />}
                />
                <DataGrid
                    {...restDataGridProps}
                    paginationMode="server"
                    onPageChange={onPageChange}
                    pageSize={30}
                    columns={columns}
                    autoHeight
                    rows={displayAdmin === false ? rows : adminsTab}
                />
            </List>

             <List
                title=""
                wrapperProps={{
                    sx: {
                        "-webkit-box-shadow": "none",
                        "-moz-box-shadow": "none",
                        "box-shadow": "none"
                    }
                }}>
                <FormControlLabel
                    label="Display only admin unsers"
                    control={<Checkbox onChange={handleFilter} />}
                />
                <DataGrid
                    {...restDataGridProps}
                    paginationMode="server"
                    onPageChange={onPageChange}
                    pageSize={30}
                    columns={columns}
                    autoHeight
                    rows={displayAdmin === false ? rows : adminsTab}
                />
            </List>

i try to pass the data like that rows={displayAdmin === false ? rows : adminsTab} in the DataGrid but it does not work when the state is true. How can pass dynamically to the DataGrid according to my state ? (dataGridProps rows and my adminsTab have the same format) I finnaly found a solution :

  useEffect(() => {
        if (dataGridProps && adminTab.length === 0) {
            setAdminTab(dataGridProps.rows);
        }
    }, [dataGridProps]);

    useEffect(() => {
        console.debug({displayAdmin});
        if (displayAdmin) {
            let adminsTab: string[] = [];
            dataGridProps.rows.map(user => {
                if (user.roles.includes("ROLE_ADMIN")) {
                    adminsTab.push(user);
                }
            });
            setAdminTab(adminsTab);
        } else {
            setAdminTab(dataGridProps.rows);
        }
    }, [displayAdmin]);

  useEffect(() => {
        if (dataGridProps && adminTab.length === 0) {
            setAdminTab(dataGridProps.rows);
        }
    }, [dataGridProps]);

    useEffect(() => {
        console.debug({displayAdmin});
        if (displayAdmin) {
            let adminsTab: string[] = [];
            dataGridProps.rows.map(user => {
                if (user.roles.includes("ROLE_ADMIN")) {
                    adminsTab.push(user);
                }
            });
            setAdminTab(adminsTab);
        } else {
            setAdminTab(dataGridProps.rows);
        }
    }, [displayAdmin]);

            <List
                title=""
                wrapperProps={{
                    sx: {
                        "-webkit-box-shadow": "none",
                        "-moz-box-shadow": "none",
                        "box-shadow": "none"
                    }
                }}>
                <FormControlLabel
                    label="Display only admin users"
                    control={<Checkbox onChange={() => {
                        setDisplayAdmin(!displayAdmin);
                    }} />}
                />
                <DataGrid
                    {...restDataGridProps}
                    paginationMode="server"
                    onPageChange={onPageChange}
                    pageSize={30}
                    columns={columns}
                    autoHeight
                    rows={adminTab}
                />
            </List>

            <List
                title=""
                wrapperProps={{
                    sx: {
                        "-webkit-box-shadow": "none",
                        "-moz-box-shadow": "none",
                        "box-shadow": "none"
                    }
                }}>
                <FormControlLabel
                    label="Display only admin users"
                    control={<Checkbox onChange={() => {
                        setDisplayAdmin(!displayAdmin);
                    }} />}
                />
                <DataGrid
                    {...restDataGridProps}
                    paginationMode="server"
                    onPageChange={onPageChange}
                    pageSize={30}
                    columns={columns}
                    autoHeight
                    rows={adminTab}
                />
            </List>

the issue was that the admin was not store anywhere and was always empty