rare-sapphire
rare-sapphire15mo 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
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
ambitious-aqua15mo ago
Hey @harisris, isn't filtering work for your case?
rare-sapphire
rare-sapphire15mo 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
ambitious-aqua15mo 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
rare-sapphire
rare-sapphire15mo ago
I try and get back to you if I have issues
ambitious-aqua
ambitious-aqua15mo ago
Good luck! 🚀
rare-sapphire
rare-sapphire15mo 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