前端项目实战壹佰叁拾叁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

相关文章
|
3月前
|
前端开发 JavaScript API
React Native实战:构建跨平台移动应用
React Native实战:构建跨平台移动应用
66 0
|
3月前
|
移动开发 前端开发 JavaScript
React 表单验证实战
【10月更文挑战第25天】本文介绍了 React 表单验证的常见方法,包括原生 HTML5 验证、自定义验证逻辑和第三方库(如 Formik 和 Yup)的使用。通过具体代码示例,详细讲解了每种方法的实现步骤,并探讨了常见问题和易错点及其解决方法。旨在帮助开发者提高表单验证的有效性和安全性。
116 8
|
4月前
|
前端开发 数据安全/隐私保护
前端技术实战:React Hooks 实现表单验证
【10月更文挑战第1天】前端技术实战:React Hooks 实现表单验证
|
5月前
|
前端开发
React技术栈-react使用的Ajax请求库实战案例
这篇文章介绍了在React应用中使用Axios和Fetch库进行Ajax请求的实战案例,展示了如何通过这些库发送GET和POST请求,并处理响应和错误。
79 10
|
6月前
|
vr&ar C# 图形学
WPF与AR/VR的激情碰撞:解锁Windows Presentation Foundation应用新维度,探索增强现实与虚拟现实技术在现代UI设计中的无限可能与实战应用详解
【8月更文挑战第31天】增强现实(AR)与虚拟现实(VR)技术正迅速改变生活和工作方式,在游戏、教育及工业等领域展现出广泛应用前景。本文探讨如何在Windows Presentation Foundation(WPF)环境中实现AR/VR功能,通过具体示例代码展示整合过程。尽管WPF本身不直接支持AR/VR,但借助第三方库如Unity、Vuforia或OpenVR,可实现沉浸式体验。例如,通过Unity和Vuforia在WPF中创建AR应用,或利用OpenVR在WPF中集成VR功能,从而提升用户体验并拓展应用功能边界。
135 1
|
6月前
|
前端开发 Java UED
JSF 面向组件开发究竟藏着何种奥秘?带你探寻可复用 UI 组件设计的神秘之路
【8月更文挑战第31天】在现代软件开发中,高效与可维护性至关重要。JavaServer Faces(JSF)框架通过其面向组件的开发模式,提供了构建复杂用户界面的强大工具,特别适用于设计可复用的 UI 组件。通过合理设计组件的功能与外观,可以显著提高开发效率并降低维护成本。本文以一个具体的 `MessageComponent` 示例展示了如何创建可复用的 JSF 组件,并介绍了如何在 JSF 页面中使用这些组件。结合其他技术如 PrimeFaces 和 Bootstrap,可以进一步丰富组件库,提升用户体验。
76 0
|
JavaScript 数据安全/隐私保护
React.js 入门与实战课程思维导图
原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,在这里分享了课程中的思维导图,供大家参考。原文发表于我的技术博客 此导图为课程中整理的重要知识点以及大纲导图,供大家学习参考之用,不可用于其他商业用途。
1405 0
|
9月前
|
存储 前端开发 中间件
React组件间的通信
React组件间的通信
72 1
|
9月前
|
前端开发 应用服务中间件 数据库
react服务端组件
react服务端组件
65 0
|
9月前
|
前端开发 JavaScript
快速上手React:从概述到组件与事件处理
快速上手React:从概述到组件与事件处理

热门文章

最新文章

  • 1
    用自然语言控制电脑,字节跳动开源 UI-TARS 的桌面版应用!内附详细的安装和配置教程
  • 2
    UI-TARS:字节跳动开源专注于多平台 GUI 自动化交互的视觉语言模型
  • 3
    移动端UI名词 - AxureMost
  • 4
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
  • 5
    unity判断鼠标在不在UI上
  • 6
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 7
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 8
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 9
    详解智能编码在前端研发的创新应用
  • 10
    巧用通义灵码,提升前端研发效率