Mui-dataTables：如何将数据放入表格？ 我正在使用MUI-Databers。我已经可以正确检索数据。但是，我对仅在表中显示数据地址，ID和名称以及日期显示的如何显示。 codesandbox链接：https：//

Question

和

name

以及仅在表中显示。

codesandbox链接：

https：//codesandbox.io/s/infallible-feistel-bki5h？file =/src/app.js

这是JSON格式的数据。

date

below是代码。

[
  {
    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;

选项，其中包括

columns

，

address

，

ID

和

Answer 1

。您还可以

date

列（使用

hide

）包含在您的列列表中。请以下示例，您也可以检查

MUIDataTable

文档。

display: false

根据您的评论来做

您需要考虑两件事：

需要使用

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}
/>

显示复杂的JSON数据，例如customBodyRender

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

在这里是一个完整的例子：

codesandbox

中的示例