如何在 React Data Grid 中创建动态列-js教程-PHP中文网

如何在 react data grid 中创建动态列

本教程详细介绍了如何在 React Data Grid 中处理嵌套数据结构，以实现动态列的创建和数据展示。通过将嵌套的设备信息转换为可渲染的表格列，并优化行数据结构，您将学会如何从原始数据中提取关键信息，并将其映射到 `react-data-grid` 组件所需的列定义和行数据格式，从而构建灵活且可扩展的数据表格。

在现代前端应用中，数据展示是核心功能之一。react-data-grid 是一个功能强大且性能优越的表格组件，但当遇到数据结构中包含嵌套数组，并且需要将这些嵌套数组的元素动态地转换为表格列时，就需要进行一些数据转换。本教程将指导您如何从一个包含设备列表的日志数据中，动态生成表格列并正确填充行数据。

数据结构概览

假设我们有如下的日志数据 dailyLogsData，其中每个日志条目都包含一个 devices 数组，每个 device 对象有 device_name 和 device_value：

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 },
      // ... 更多设备
    ],
  },
  {
    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 },
      // ... 更多设备
    ],
  },
  // ... 更多日志
];

登录后复制

我们的目标是将 devices 数组中的 device_name 作为表格的列标题，而 device_value 作为对应行的单元格内容。

动态列定义

react-data-grid 的 columns 属性需要一个包含 key 和 name 属性的对象数组。对于动态生成的列，我们可以从 dailyLogsData 的第一个条目中提取 devices 数组来生成这些列。为了确保 key 的唯一性和避免空格问题，我们通常会对 device_name 进行处理。

首先，定义固定列：

const fixedColumns = [
  { key: "id", name: "ID" },
  { key: "date_time", name: "DATE/TIME" },
  { key: "usage_notes", name: "USAGE NOTES" },
  { key: "maintenance_notes", name: "MAINTENANCE NOTES" },
];

登录后复制

接着，从 dailyLogsData 的第一个条目（假设所有条目的设备列表结构一致）中提取设备信息，生成动态列：

const dynamicColumns = dailyLogsData[0].devices.map((item) => ({
  key: item.device_name.replace(/ /g, ""), // 移除空格作为 key
  name: item.device_name.toUpperCase(), // 大写作为列名
}));

登录后复制

最后，将固定列和动态列合并：

阿里妈妈·创意中心

阿里妈妈营销创意中心

查看详情

const columns = [...fixedColumns, ...dynamicColumns];

登录后复制

行数据转换

这是实现动态列的关键步骤。react-data-grid 的 rows 属性需要一个对象数组，每个对象代表一行，其属性名（key）应与 columns 定义中的 key 相匹配，属性值即为单元格内容。

我们需要遍历 dailyLogsData 中的每个日志条目，并为每个条目构建一个行对象。在这个行对象中，除了 id、date_time 等固定属性外，还需要将 devices 数组中的每个设备转换为行对象的属性。

const rows = dailyLogsData.map((item) => {
  const row = {
    id: item.id,
    date_time: `${item.date_created} | ${item.time_updated}`,
    usage_notes: item.usage_notes,
    maintenance_notes: item.maintenance_notes,
  };

  // 遍历设备的数组，将每个设备转换为行对象的属性
  item.devices.forEach((device) => {
    // 使用与列 key 相同的逻辑生成属性名
    row[device.device_name.replace(/ /g, "")] = device.device_value;
  });

  return row;
});

登录后复制

在这个转换过程中，row[device.device_name.replace(/ /g, "")] = device.device_value; 这一行至关重要。它动态地创建了新的属性，例如 PortEngine: "0125", Generator: "0252"，这些属性名与我们之前在 dynamicColumns 中生成的 key 完全匹配。

集成到 React Data Grid

有了 columns 定义和 rows 数据，现在可以将其传递给 DataGrid 组件：

import DataGrid from 'react-data-grid';

function MyDynamicGrid() {
  // ... dailyLogsData 定义 ...
  // ... columns 定义 ...
  // ... rows 定义 ...

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

登录后复制

完整示例

将上述逻辑整合到一个 React 组件中，完整的实现如下：

import React from 'react';
import DataGrid from 'react-data-grid';
import 'react-data-grid/lib/styles.css'; // 导入样式

function DynamicDataGridExample() {
  const dailyLogsData = [
    {
      id: 1,
      date_created: "01/15/2023",
      time_updated: "15:53:05",
      usage_notes: "sample notes 1",
      maintenance_notes: "maintenance notes 1",
      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 2",
      maintenance_notes: "maintenance notes 2",
      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 },
      ],
    },
    // 更多数据...
  ];

  // 1. 定义固定列
  const fixedColumns = [
    { key: "id", name: "ID" },
    { key: "date_time", name: "DATE/TIME" },
    { key: "usage_notes", name: "USAGE NOTES" },
    { key: "maintenance_notes", name: "MAINTENANCE NOTES" },
  ];

  // 2. 从第一个数据条目动态生成设备列
  // 确保 dailyLogsData 至少有一个条目
  const dynamicDeviceColumns = dailyLogsData.length > 0
    ? dailyLogsData[0].devices.map((item) => ({
        key: item.device_name.replace(/ /g, ""), // 移除空格作为 key
        name: item.device_name.toUpperCase(), // 大写作为列名
      }))
    : [];

  // 3. 合并所有列
  const columns = [...fixedColumns, ...dynamicDeviceColumns];

  // 4. 转换行数据
  const rows = dailyLogsData.map((item) => {
    const row = {
      id: item.id,
      date_time: `${item.date_created} | ${item.time_updated}`,
      usage_notes: item.usage_notes,
      maintenance_notes: item.maintenance_notes,
    };

    // 将 devices 数组中的每个设备转换为行对象的属性
    item.devices.forEach((device) => {
      // 属性名必须与列定义中的 key 匹配
      row[device.device_name.replace(/ /g, "")] = device.device_value;
    });

    return row;
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <h2>动态列 React Data Grid 示例</h2>
      <DataGrid columns={columns} rows={rows} />
    </div>
  );
}

export default DynamicDataGridExample;

登录后复制

注意事项与最佳实践

key 的一致性: 确保在生成列定义 (columns) 和行数据 (rows) 时，用于动态属性的 key 命名规则完全一致。例如，本例中使用了 device_name.replace(/ /g, "")。
数据完整性: 动态列的生成通常依赖于数据源的结构。如果 dailyLogsData 为空，或者 devices 数组为空，应添加适当的检查以避免运行时错误。例如，在生成 dynamicDeviceColumns 时，我们增加了 dailyLogsData.length > 0 的判断。
性能优化: 对于非常大的数据集，频繁地进行 map 和 forEach 操作可能会影响性能。在这种情况下，可以考虑使用 useMemo 或 useCallback 钩子来缓存列和行数据的生成结果，避免不必要的重新计算。
列排序/过滤/编辑: react-data-grid 支持列的排序、过滤和编辑。对于动态生成的列，这些功能同样适用，但可能需要自定义实现或配置。
数据源一致性: 确保所有 dailyLogsData 条目中的 devices 数组具有相同的 device_name 集合，否则动态生成的列可能无法完全覆盖所有数据。如果 device_name 集合不一致，您可能需要更复杂的逻辑来收集所有唯一的 device_name 作为列。