如何将数据放入 table 中？

Question

我正在使用 mui-datatables。我已经可以正确检索数据了。但是，我完全不知道如何仅在 table.[=18= 中显示数据 address、ID 和 name，以及 date ]

codesandbox link :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;

Answer 1

您需要 columns 个选项，其中包括 address、ID、name 和 date。您还可以将 hide 列（使用 display: false）包含到您的列列表中。请看下面的例子，你也可以查看 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}
/>

根据您的评论更新

你需要考虑两件事：

需要使用 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" } : {}
      };
    }
  };

完整示例如下： Updated Example in Codesandbox

如何将数据放入 table 中？

How can I put the data inside the table?

javascript

json

reactjs

mui-datatable