[英]How can I put the data inside the table?
I am using mui-datatables.我正在使用 mui 数据表。 I can already retrieve the data correctly.我已经可以正确检索数据了。 However, I am quite lost on how to display the data address
, ID
, and name
, and date
only in the table.但是,我对如何仅在表格中显示数据address
、 ID
和name
和date
非常迷茫。
codesandbox link: https://codesandbox.io/s/infallible-feistel-bki5h?file=/src/App.js代码框链接: https://codesandbox.io/s/infallible-feistel-bki5h?file=/src/App.js
This is the data in a JSON format.这是 JSON 格式的数据。
[
{
name: "Sample Name",
items: {
id: "34234242",
selectedItem: "Item",
date: { seconds: 1636905600, nanoseconds: 0 },
item1: true,
item2: false,
},
address: "Ayala",
email: "sample email",
phone: "823840820943",
},
];
Below are the codes.下面是代码。
const filter = users.filter((d) => d?.items?.item2 == false);
const filtered = selection.filter((f) => f?.items?.date <= new Date());
return (
<div>
{" "}
<MUIDataTable title={"List"} columns={columns} data={filtered} />
</div>
);
};
export default UserTable;
You need columns
options where you include address
, ID
, name
, and date
.您需要包含address
、 ID
、 name
和date
的columns
选项。 You can also hide
column (using display: false
) that are included into your column list.您还可以hide
列列表中包含的列(使用display: false
)。 please the below example and you can check MUI Datatable documentation too.请参考下面的示例,您也可以查看MUI Datatable文档。
import MUIDataTable from "mui-datatables";
const columns = [
{
name: "name",
label: "Name",
options: {
filter: true,
sort: true,
}
},
{
name: "company",
label: "Company",
options: {
filter: true,
sort: false,
}
},
{
name: "city",
label: "City",
options: {
filter: true,
sort: false,
display: false,
}
},
{
name: "state",
label: "State",
options: {
filter: true,
sort: false,
}
},
];
const data = [
{ name: "Joe James", company: "Test Corp", city: "Yonkers", state: "NY" },
{ name: "John Walsh", company: "Test Corp", city: "Hartford", state: "CT" },
{ name: "Bob Herm", company: "Test Corp", city: "Tampa", state: "FL" },
{ name: "James Houston", company: "Test Corp", city: "Dallas", state: "TX" },
];
const options = {
filterType: 'checkbox',
};
<MUIDataTable
title={"Employee List"}
data={data}
columns={columns}
options={options}
/>
Update based on your comment根据您的评论更新
You need to consider two things:你需要考虑两件事:
Need to use customBodyRender
to show complex json data like items.SelectedItem
需要使用customBodyRender
显示复杂的 json 数据,如items.SelectedItem
{
name: "items",
label: "Item",
options: {
filter: true,
sort: true,
customBodyRender: (value, tableMeta, updateValue) => {
console.log(value, tableMeta, updateValue, "test");
return value.selectedItem;
}
}
}
Need to use setRowProps
to show background color of selected row based on condition.需要使用setRowProps
根据条件显示所选行的背景颜色。 you need options to use setRowProps
您需要使用setRowProps
的选项
const options = {
filter: true,
filterType: "dropdown",
fixedSelectColumn: false,
rowHover: false,
setRowProps: (row, dataIndex, rowIndex) => {
return {
style: row[1] === "Item" ? { backgroundColor: "skyblue" } : {}
};
}
};
Here is the complete example:Updated Example in Codesandbox这是完整的示例:Codesandbox 中的更新示例
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.