如何将数据放入表中？

Question

我正在使用 mui 数据表。我已经可以正确检索数据了。但是，我对如何仅在表格中显示数据address、ID、name 和date 感到很困惑。

codesandbox 链接：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