前端项目实战壹佰叁拾叁react-admin+material ui-react-admin之Count之filter加过滤

简介: 前端项目实战壹佰叁拾叁react-admin+material ui-react-admin之Count之filter加过滤
import React from 'react'
import { List,TopToolbar,Count,useStore ,SortButton,DatagridConfigurable,SelectColumnsButton, Datagrid, TextField, EditButton, DeleteButton, BooleanField } from 'react-admin'
import { MenuList, MenuItem, ListItemText } from '@mui/material';
const PostListActions = () => (
    <TopToolbar>
        <SelectColumnsButton preferenceKey="postList1" />
    </TopToolbar>
);
const RSortButtonList = () => {
    const [statusFilter, setStatusFilter] = useStore("statusMenu", { status: 'open' });
    return <List actions={<PostListActions />} resource="t_geyao_person" exporter={false}>
        <SelectColumnsButton preferenceKey="postList1" />
        <MenuItem
            onClick={() => setStatusFilter({ status: true })}
        >
            <ListItemText>Pending</ListItemText>
            <Count resource="t_geyao_person" filter={{ status: true }} />
        </MenuItem>
            <DatagridConfigurable
                preferenceKey="postList1"
                // data={data}
                // total={total}
                // isLoading={isLoading}
                // sort={sort}
                bulkActionButtons={false}
            >
                <TextField source="id" />
                <TextField source="name" />
                <TextField source="sex" />
                <TextField source="salary" />
            </DatagridConfigurable>
    </List>
}
export default RSortButtonList

运行结果

image.png

相关文章
|
1天前
|
前端开发 JavaScript 安全
第十篇 Axios最佳实战:前端HTTP通信的王者之选
第十篇 Axios最佳实战:前端HTTP通信的王者之选
|
1天前
|
前端开发 JavaScript 算法
前端色彩艺术:深入解析与实战指南
前端色彩艺术:深入解析与实战指南
|
2天前
|
缓存 前端开发 UED
实战指南:如何优化前端性能提升用户体验
本文探讨了在当今互联网时代,前端性能优化对于提升用户体验的重要性,以及如何利用各种技术手段实现前端性能的优化。通过介绍前端性能优化的原则、常见的性能优化技巧和工具,以及实际案例分析,帮助开发者深入了解并掌握提升前端性能的方法,从而提升网站的加载速度、响应速度,提高用户的满意度和留存率。
|
2天前
|
JSON JavaScript 前端开发
前端框架vue的样式操作,以及vue提供的属性功能应用实战
前端框架vue的样式操作,以及vue提供的属性功能应用实战
|
2天前
|
JavaScript 前端开发 数据安全/隐私保护
优秀的前端框架vue,原理剖析与实战技巧总结【干货满满】(二)
优秀的前端框架vue,原理剖析与实战技巧总结【干货满满】(二)
|
2天前
|
前端开发 测试技术 开发工具
探索前端框架React Hooks的优势与应用
本文将深入探讨前端框架React Hooks的优势与应用。通过分析React Hooks的特性以及实际应用案例,帮助读者更好地理解和运用这一现代化的前端开发工具。
|
2天前
|
开发框架 Dart 前端开发
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
【4月更文挑战第30天】对比 Flutter(Dart,强类型,Google支持,快速热重载,高性能渲染)与 React Native(JavaScript,庞大生态,热重载,依赖原生渲染),文章讨论了开发语言、生态系统、性能、开发体验、学习曲线、社区支持及项目选择因素。两者各有优势,选择取决于项目需求、团队技能和长期维护考虑。参考文献包括官方文档和性能比较文章。
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
|
1天前
|
前端开发 JavaScript API
阿珊比较Vue和React:两大前端框架的较量
阿珊比较Vue和React:两大前端框架的较量
|
2天前
|
前端开发 JavaScript 开发者
【专栏:HTML与CSS前端技术趋势篇】前端框架(React/Vue/Angular)与HTML/CSS的结合使用
【4月更文挑战第30天】前端框架React、Vue和Angular助力UI开发,通过组件化、状态管理和虚拟DOM提升效率。这些框架与HTML/CSS结合,使用模板语法、样式管理及组件化思想。未来趋势包括框架简化、Web组件标准采用和CSS在框架中角色的演变。开发者需紧跟技术发展,掌握新工具,提升开发效能。
|
2天前
|
开发框架 缓存 前端开发