mui-datatables如何将指定字段数据渲染到表格中？

1. 配置列定义 #

mui-datatables通过columns参数控制展示的字段，你需要先定义对应4个字段的列配置，嵌套字段可以通过customBodyRender自定义取值逻辑：

const columns = [
  {
    name: "address",
    label: "地址"
  },
  {
    name: "id",
    label: "ID",
    options: {
      customBodyRender: (value, tableMeta) => tableMeta.rowData.items.id
    }
  },
  {
    name: "name",
    label: "姓名"
  },
  {
    name: "date",
    label: "日期",
    options: {
      customBodyRender: (value, tableMeta) => {
        // 将秒级时间戳转换为可读日期格式，可按需调整输出格式
        return new Date(tableMeta.rowData.items.date.seconds * 1000).toLocaleString()
      }
    }
  }
]

2. 修正过滤逻辑 #

你原代码中的时间对比逻辑有误，存储的date是对象格式，需要先转成时间戳再比较，同时可以合并两个过滤条件提升效率：

const filtered = users.filter(d => {
  // 过滤item2为false的条目
  if(d?.items?.item2 !== false) return false
  // 过滤时间小于当前时间的条目
  const itemTime = d?.items?.date?.seconds ? d.items.date.seconds * 1000 : 0
  return itemTime <= Date.now()
})

3. 传入组件调用 #

保持原组件调用逻辑不变，传入定义好的columns即可，组件会自动仅展示配置的4个字段：

return (
  <div>
    <MUIDataTable title={"List"} columns={columns} data={filtered} />
  </div>
)

内容的提问来源于stack exchange，提问作者JS3