前端项目实战壹佰贰拾肆react-admin+material ui-react-admin之FilterButton

简介: 前端项目实战壹佰贰拾肆react-admin+material ui-react-admin之FilterButton
import { 
    CreateButton,
    Datagrid,
    FilterButton,
    FilterForm,
    ListBase,
    Pagination,
    TextField,
    TextInput,
    BooleanField
} from 'react-admin';
import { Stack } from '@mui/material';
const postFilters = [
    <TextInput label="Search" source="q" alwaysOn />,
    <TextInput label="Title" source="title" defaultValue="Hello, World!" />,
];
const ListToolbar = () => (
    <Stack direction="row" justifyContent="space-between">
        <FilterForm filters={postFilters} />
        <div>
            <FilterButton filters={postFilters} />
            <CreateButton />
        </div>
    </Stack>
)
export const FilterButtonList = () => (
    <ListBase resource="t_geyao_person">
        <ListToolbar />
        <Datagrid>
        <TextField source='id'></TextField>
            <TextField source='name'></TextField>
            <TextField source='sex'></TextField>
            <TextField source='salary'></TextField>
            <BooleanField source='status'></BooleanField>
        </Datagrid>
        <Pagination />
    </ListBase>
)

运行结果

image.png

相关文章
|
SQL Oracle 关系型数据库
根据Excel接口文档生成不同类型的数据创建表的sql
根据Excel接口文档生成不同类型的数据创建表的sql
|
19天前
|
人工智能 JSON 供应链
畅用7个月无影 JVS Claw |手把手教你把JVS改造成「科研与产业地理情报可视化大师」
LucianaiB分享零成本畅用JVS Claw教程(学生认证享7个月使用权),并开源GeoMind项目——将JVS改造为科研与产业地理情报可视化AI助手,支持飞书文档解析、地理编码与腾讯地图可视化,助力产业关系图谱构建。
23536 12
畅用7个月无影 JVS Claw |手把手教你把JVS改造成「科研与产业地理情报可视化大师」
|
6天前
|
Shell API 开发工具
Claude Code 快速上手指南(新手友好版)
AI编程工具卷疯啦!Claude Code凭借任务驱动+终端原生的特性,成了开发者的效率搭子。本文从安装、登录、切换国产模型到常用命令,手把手带新手快速上手,全程避坑,30分钟独立用起来。
1929 12
|
3天前
|
人工智能 开发工具 iOS开发
Claude Code 新手完全上手指南:安装、国产模型配置与常用命令全解
Claude Code 是一款运行在终端环境中的 AI 编程助手,能够直接在命令行中完成代码生成、项目分析、文件修改、命令执行、Git 管理等开发全流程工作。它最大的特点是**任务驱动、终端原生、轻量高效、多模型兼容**,无需图形界面、不依赖 IDE 插件,能够深度融入开发者日常工作流。
1338 1
|
5天前
|
人工智能 JSON BI
DeepSeek V4-Pro 接入 Claude Code 完全实战:体验、测试与关键避坑指南
Claude Code 作为当前主流的 AI 编程辅助工具,凭借强大的代码理解、工程执行与自动化能力深受开发者喜爱,但原生模型的使用成本相对较高。为了在保持能力的同时进一步降低开销,不少开发者开始寻找兼容度高、价格更友好的替代模型。DeepSeek V4 系列的发布带来了新的选择,该系列包含 V4-Pro 与 V4-Flash 两款模型,并提供了与 Anthropic 完全兼容的 API 接口,理论上只需简单修改配置,即可让 Claude Code 无缝切换为 DeepSeek 引擎。
1362 0
|
12天前
|
人工智能 缓存 Shell
Claude Code 全攻略:命令大全 + 实战工作流(完整版)
Claude Code 是一款运行在终端环境下的 AI 编码助手,能够直接在项目目录中理解代码结构、编辑文件、执行命令、执行开发计划,并支持持久化记忆、上下文压缩、后台任务、多模型切换等专业能力。对于日常开发、项目维护、快速重构、代码审查等场景,它可以大幅减少手动操作、提升编码效率。本文从常用命令、界面模式、核心指令、记忆机制、图片处理、进阶工作流等维度完整说明,帮助开发者快速上手并稳定使用。
2913 4
|
3天前
|
人工智能 JSON BI
Claude Code 搭配 DeepSeek V4-Pro 完整测评:超越 Claude Sonnet 4.5,低成本高效能背后的真实表现
Claude Code 凭借强大的代码理解、工程执行与自动化任务能力,成为开发者广泛使用的 AI 编程工具。但原生模型的调用成本较高,长期高频使用会带来明显开销。DeepSeek V4 系列模型发布后,凭借优秀的代码能力与兼容 Anthropic 协议的 API 接口,成为替代原生模型的高性价比选择。本文完整记录将 Claude Code 对接 DeepSeek V4-Pro 的配置流程、真实任务测试效果、优势亮点与必须注意的使用限制,为开发者提供可直接落地的参考方案。
910 2

热门文章

最新文章