前端项目实战伍拾捌react-admin+material ui-踩坑-List需要Datagrid中body写法

简介: 前端项目实战伍拾捌react-admin+material ui-踩坑-List需要Datagrid中body写法

List需要Datagrid进行包裹

import React from "react"
import { Datagrid, DatagridBody, List,BooleanField, TextField, RecordContextProvider } from 'react-admin';
import { TableCell, TableRow, Checkbox } from '@mui/material';
const MyDatagridRow = ({ record, id, onToggleItem, children, selected, selectable }) => (
    <RecordContextProvider value={record}>
        <TableRow>
            {/* first column: selection checkbox */}
            <TableCell padding="none">
                {selectable && (
                     <Checkbox
                         checked={selected}
                         onClick={event => onToggleItem(id, event)}
                     />
                )}
            </TableCell>            
            {/* data columns based on children */}
            {React.Children.map(children, field => (
                <TableCell key={`${id}-${field.props.source}`}>
                    {field}
                </TableCell>
            ))}
        </TableRow>
    </RecordContextProvider>
);
const MyDatagridBody = props => <DatagridBody {...props} row={<MyDatagridRow />} />;
const MyDatagrid = props => <Datagrid {...props} body={<MyDatagridBody />} />;
const DatagridBodyList = () => (
    <List resource="t_geyao_person">
        <MyDatagrid>
            <TextField source="id" />
            <TextField source='name'></TextField>
            <TextField source='sex'></TextField>
            <TextField source='salary'></TextField>
            <BooleanField source='status'></BooleanField>
        </MyDatagrid>
    </List>
)
export default DatagridBodyList;

运行结果

image.png

相关文章
|
1月前
|
C# 开发者 Windows
基于Material Design风格开源、易用、强大的WPF UI控件库
基于Material Design风格开源、易用、强大的WPF UI控件库
142 0
|
6天前
|
前端开发 安全 UED
【项目实战】从终端到浏览器:实现 ANSI 字体在前端页面的彩色展示
在学习和工作中,我们经常需要使用日志来记录程序的运行状态和调试信息。而为了更好地区分不同的日志等级,我们可以使用不同的颜色来呈现,使其更加醒目和易于阅读。 在下图运行结果中,我们使用了 colorlog 库来实现彩色日志输出。通过定义不同日志等级对应的颜色,我们可以在控制台中以彩色的方式显示日志信息。例如,DEBUG 级别的日志使用白色,INFO 级别的日志使用绿色,WARNING 级别的日志使用黄色,ERROR 级别的日志使用红色,CRITICAL 级别的日志使用蓝色。
|
21天前
IDEA 插件 Material Theme UI收费后 免费的办法
IDEA 插件 Material Theme UI收费后 免费的办法
35 2
|
1月前
|
开发框架 前端开发 开发者
【Flutter前端技术开发专栏】Flutter的Material Design与Cupertino Design风格
【4月更文挑战第30天】Flutter框架支持Material Design和Cupertino Design两种设计风格,助力开发者创建吸引人的移动应用。Material Design基于现实世界物理规律,提供`Scaffold`、`Card`等组件,实现纸片效果和直观体验。Cupertino Design注重简洁图标和流畅动画,借助`CupertinoTabScaffold`、`CupertinoActivityIndicator`等组件呈现苹果风格界面。Flutter的`Theme`类允许统一管理应用样式,开发者可根据需求混搭两种风格,实现跨平台的优质用户体验。
【Flutter前端技术开发专栏】Flutter的Material Design与Cupertino Design风格
|
1月前
|
移动开发 前端开发 JavaScript
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
|
10月前
|
资源调度 前端开发 JavaScript
关于react-admin+material ui项目的总结
关于react-admin+material ui项目的总结
127 0
|
10月前
|
前端开发
前端项目实战壹佰叁拾react-admin+material ui-react-admin之SelectColumnsButton之使用
前端项目实战壹佰叁拾react-admin+material ui-react-admin之SelectColumnsButton之使用
40 0
|
10月前
|
前端开发 数据库
前端项目实战伍拾壹​react-admin+material ui-踩坑-创建数据库完数据库表需要重启
前端项目实战伍拾壹​react-admin+material ui-踩坑-创建数据库完数据库表需要重启
67 0
|
8月前
Cocos Creator3.8 项目实战(九)2D UI DrawCall优化详解(下)
Cocos Creator3.8 项目实战(九)2D UI DrawCall优化详解(下)
|
8月前
|
缓存 中间件 atlas
Cocos Creator3.8 项目实战(八)2D UI DrawCall优化详解(上)
Cocos Creator3.8 项目实战(八)2D UI DrawCall优化详解(上)
240 0