如何使用react-data-grid创建动态列并绑定设备值

问题背景 #

已有dailyLogsData日志数据，需将每个device_name作为列展示，对应device_value填充到对应行中。现有代码已生成设备列，但未将设备值绑定到行数据，导致设备列无内容。

解决方案 #

核心是在生成行数据时，将每个设备的键值对合并到行对象中，确保列key与行数据属性名完全匹配。

修改后的完整代码 #

import DataGrid from 'react-data-grid';

const dailyLogsData = [
  {
    id: 1,
    date_created: "01/15/2023",
    time_updated: "15:53:05",
    usage_notes: "sample notes",
    maintenance_notes: "sample notes",
    devices: [
      { device_name: "Port Engine", device_value: "0125", device_id: 1 },
      { device_name: "Generator", device_value: "0252", device_id: 2 },
      { device_name: "Water Maker", device_value: "0321", device_id: 3 },
      { device_name: "Fuel Engine", device_value: "", device_id: 4 },
      { device_name: "Radiator", device_value: "", device_id: 5 },
    ],
  },
  {
    id: 2,
    date_created: "01/16/2023",
    time_updated: "15:53:05",
    usage_notes: "sample notes",
    maintenance_notes: "sample notes",
    devices: [
      { device_name: "Port Engine", device_value: "0125", device_id: 1 },
      { device_name: "Generator", device_value: "0252", device_id: 2 },
      { device_name: "Water Maker", device_value: "0321", device_id: 3 },
      { device_name: "Fuel Engine", device_value: "0321", device_id: 4 },
      { device_name: "Radiator", device_value: "0321", device_id: 5 },
    ],
  },
];

const YourComponent = () => {
  // 生成设备列（原有逻辑保持不变）
  const columns = dailyLogsData[0].devices.map((item) => ({
    key: item.device_name.replace(/ /g, ""),
    name: item.device_name.toUpperCase(),
  }));

  // 合并基础列与设备列（原有逻辑保持不变）
  const columns2 = [
    { key: "id", name: "ID" },
    { key: "date_time", name: "DATE/TIME" },
    { key: "usage_notes", name: "USAGE NOTES" },
    { key: "maintenance_notes", name: "MAINTENANCE NOTES" },
    ...columns,
  ];

  // 修改行数据生成逻辑：合并设备值到行对象
  const rows = dailyLogsData.map((item) => ({
    id: item.id,
    date_time: `${item.date_created} | ${item.time_updated}`,
    usage_notes: item.usage_notes,
    maintenance_notes: item.maintenance_notes,
    // 将设备数组转为键值对，键为去除空格的device_name，值为device_value
    ...Object.fromEntries(
      item.devices.map(device => [
        device.device_name.replace(/ /g, ""),
        device.device_value
      ])
    )
  }));

  return (
    <DataGrid columns={columns2} rows={rows} />
  );
};

export default YourComponent;

关键说明 #

• 利用Object.fromEntries()将设备数组转换为键值对对象，键名与列定义的key完全匹配（去除空格的device_name），确保React Data Grid能正确匹配列与行数据。
• 保持原有列生成逻辑不变，仅修改行数据的生成，保证列与行数据的属性名一一对应。

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