如何在Thingsboard中制作分组Entities Table部件及层级样式效果？

一、原生支持情况 #

Entities Table部件默认仅支持平铺式的数据展示，原生不提供类似Hierarchy Widget的层级分组折叠功能，但可以通过自定义开发或配置扩展实现分组效果。

二、实现类似Hierarchy Widget的分组表格方法 #

1. 数据预处理+前端自定义渲染 #

• 后端层面：通过微流、数据库查询或API对实体数据按目标分组字段进行聚合，生成包含组信息与子项的结构化数据（例：[{组名: "XX组", 子项: [实体1, 实体2]}, ...]）。
• 前端层面：基于现有Entities Table进行二次开发，添加分组头部行与折叠逻辑：
  • 给每个分组添加可点击的组头行，点击时切换下方子项的显示/隐藏状态；
  • 子项行保持原有Entities Table的样式与交互。
    示例伪代码（前端自定义组件片段）：

  // 分组后的数据结构示例
  const groupedData = [
    { groupId: 1, groupName: "设备组A", entities: [{ id: 101, name: "设备1" }, { id: 102, name: "设备2" }] },
    { groupId: 2, groupName: "设备组B", entities: [{ id: 201, name: "设备3" }] }
  ];
  
  return (
    <table className="entities-table">
      {groupedData.map(group => (
        <React.Fragment key={group.groupId}>
          {/* 分组头部行，点击切换折叠状态 */}
          <tr className="group-header" onClick={() => setCollapsed(prev => ({...prev, [group.groupId]: !prev[group.groupId]}))}>
            <td colSpan="3">{group.groupName}</td>
          </tr>
          {/* 折叠状态下显示子项 */}
          {!collapsed[group.groupId] && group.entities.map(entity => (
            <tr key={entity.id}>
              <td>{entity.id}</td>
              <td>{entity.name}</td>
              <td>{/* 其他字段 */}</td>
            </tr>
          ))}
        </React.Fragment>
      ))}
    </table>
  );
  

2. 使用第三方现成组件 #

如果是低代码平台（如Mendix、OutSystems），可以直接在平台组件市场搜索分组表格/层级表格类第三方部件，这类组件通常已封装好分组折叠逻辑，只需绑定实体数据并配置分组字段即可使用。

3. 替换为TreeTable组件 #

若技术栈允许，直接使用支持层级展示的TreeTable组件（如Ant Design TreeTable、PrimeNG TreeTable）替代原生Entities Table，将实体数据转换为树结构（通过父ID或分组字段关联）后绑定，即可实现类似Hierarchy Widget的折叠效果。

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