我正在使用 mui 資料表。我已經可以正確檢索資料了。不過，我完全迷失了方向如何顯示資料上address，ID和name和date僅在表中。
代碼和框鏈接：https ://codesandbox.io/s/infallible-feistel-bki5h ? file =/ src/App.js
這是 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",
},
];
下面是代碼。
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;
uj5u.com熱心網友回復：
您需要columns在您的選項包括address，ID，name，和date。您還可以hide列（使用display: false）包含在列串列中的列。請參考以下示例，您也可以查看MUI 資料表檔案。
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}
/>
根據您的評論更新
你需要考慮兩件事：
需要用來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;
}
}
}
需要用于setRowProps根據條件顯示所選行的背景顏色。你需要使用的選項setRowProps
const options = {
filter: true,
filterType: "dropdown",
fixedSelectColumn: false,
rowHover: false,
setRowProps: (row, dataIndex, rowIndex) => {
return {
style: row[1] === "Item" ? { backgroundColor: "skyblue" } : {}
};
}
};
這是完整的示例： Codesandbox 中的更新示例
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/359685.html
標籤：javascript 反应 json 多数据表
下一篇：如何從JSON檔案構建模型