reactjs - 材料表 - 如果没有数据显示消息
问题描述
我正在使用材料表https://material-table.com/#/docs/get-started。但是,如果没有返回数据,我似乎找不到任何有关显示默认消息的信息?
我想知道是否有人知道我会怎么做。下面是我创建的测试表(带有假数据)。现在,如果该数据为空,我想要一条消息显示表格数据将在何处显示“立即创建广告”,并带有一个按钮。
import React from 'react';
import { forwardRef } from 'react';
import MaterialTable from 'material-table';
import AddBox from '@material-ui/icons/AddBox';
import ArrowDownward from '@material-ui/icons/ArrowDownward';
import Check from '@material-ui/icons/Check';
import ChevronLeft from '@material-ui/icons/ChevronLeft';
import ChevronRight from '@material-ui/icons/ChevronRight';
import Clear from '@material-ui/icons/Clear';
import DeleteOutline from '@material-ui/icons/DeleteOutline';
import Edit from '@material-ui/icons/Edit';
import FilterList from '@material-ui/icons/FilterList';
import FirstPage from '@material-ui/icons/FirstPage';
import LastPage from '@material-ui/icons/LastPage';
import Remove from '@material-ui/icons/Remove';
import SaveAlt from '@material-ui/icons/SaveAlt';
import Search from '@material-ui/icons/Search';
import ViewColumn from '@material-ui/icons/ViewColumn';
export default function MaterialTableDemo() {
const tableIcons = {
Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />),
DetailPanel: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
Export: forwardRef((props, ref) => <SaveAlt {...props} ref={ref} />),
Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />),
FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
PreviousPage: forwardRef((props, ref) => <ChevronLeft {...props} ref={ref} />),
ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
SortArrow: forwardRef((props, ref) => <ArrowDownward {...props} ref={ref} />),
ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />)
};
const columns = {columns: [
{ title: 'Ad Name', field: 'name' },
{ title: 'Status', field: 'status' },
{ title: 'Formate', field: 'formate'},
{ title: 'Cost Type', field: 'costtype'},
{ title: 'Ad Listens', field: 'adlistens', type: "numeric" },
{ title: 'Ads Served', field: 'adserved', type: "numeric" },
{ title: 'Budget', field: 'budget', type: "numeric" },
{ title: 'End Date', field: 'enddate', type: "date" },
]};
const data = { data: [
{ name: 'Test Ad', status: 'Pending', formate: 'Radio/Podcast', costtype: 'PPL', adlistens:0, adserved:0, budget:'$100', enddate:'02-02-2025' },
{ name: 'ZTest Ad', status: 'Pending', formate: 'Radio/Podcast', costtype: 'PPL', adlistens:0, adserved:0, budget:'$100', enddate:'02-05-2025' },
{ name: 'DTest Ad', status: 'Pending', formate: 'Radio/Podcast', costtype: 'PPL', adlistens:0, adserved:0, budget:'$100', enddate:'02-01-2025' },
]};
return (
<div style={{ maxWidth: "90%", margin:'5vh auto' }}>
<MaterialTable
title="Your Ads"
icons={tableIcons}
columns={columns.columns}
data={data.data}
/*editable={{
onRowAdd: (newData) =>
new Promise((resolve) => {
setTimeout(() => {
resolve();
setState((prevState) => {
const data = [...prevState.data];
data.push(newData);
return { ...prevState, data };
});
}, 600);
}),
onRowUpdate: (newData, oldData) =>
new Promise((resolve) => {
setTimeout(() => {
resolve();
if (oldData) {
setState((prevState) => {
const data = [...prevState.data];
data[data.indexOf(oldData)] = newData;
return { ...prevState, data };
});
}
}, 600);
}),
onRowDelete: (oldData) =>
new Promise((resolve) => {
setTimeout(() => {
resolve();
setState((prevState) => {
const data = [...prevState.data];
data.splice(data.indexOf(oldData), 1);
return { ...prevState, data };
});
}, 600);
}),
}}*/
/>
</div>
);
}
解决方案
你可以用一种更优雅的方式来实现这一点,通过使用这样的localization
道具:
<MaterialTable
localization={{
body: {
emptyDataSourceMessage: (
<Button color="primary" className={classes.button}>
Create your ad now
</Button>
),
},
}}
{...otherProps}
/>;
推荐阅读
- python - If 语句嵌套在 For 循环中 - 获取错误 = Series 的真值不明确。使用 a.empty、a.bool()、a.item()、a.any() 或 a.all()
- python - 使用PostgreSQL时如何将变量插入python
- path - PyCharm 远程解释器 [Errno 2] 没有这样的文件或目录:nvcc
- mule - 是否有 DataWeave 1.0“for”运算符?
- c# - 使用扩展授权的身份服务器 4 Windows 身份验证不起作用
- google-chrome - Chrome 未在网络推送通知中打开链接
- c# - .net:如何使用 C# 将用户添加到 Active Directory 安全组?
- function - 为什么模式匹配中不允许使用 [x, y, _]
- javascript - 无法使用 $(this) 定位元素
- apache - 无法访问 Solr 核心