Saltar al contenido principal
NeuralUIv1.14.3Nuevo
GitHub
Componente

Tree Table

Wrapper jerárquico sobre neu-table para visualizar estructuras anidadas en columnas, manteniendo selección, paginación y look tabular.

TypeScript
import { NeuTreeTableComponent, NeuTreeTableNode } from '@neural-ui/core/tree-table';
import { NeuTableColumn, NeuTableExpandDirective } from '@neural-ui/core/table';

Mapa de repositorio

Combina nodos padre e hijos con metadatos por columna para inventarios técnicos o exploradores internos.

Mapa de repositorio
# Nodo Responsable Estado Actualizado Acciones
1
Workspace Neuralroot
Monorepo principal
Platform Activo 2026-05-04
2
neural-admin-pro
Aplicación de administración
Frontend Activo 2026-05-02
3
neural-ui-showcase
Documentación viva y demos
DX Beta 2026-05-04
4
Demo de Tree
Frontend Activo 2026-05-04
5
Demo de Tree Tablenew
Frontend Beta 2026-05-04
6
neural-ui-workspace
Paquete de componentes
Design System Activo 2026-05-04
7
tree
Frontend Activo 2026-05-04
8
tree-tablenew
Frontend Beta 2026-05-04
9
scheduler-gantt
Planning Planificado 2026-05-06

Jerarquía regional

Sirve para ownership, equipos o catálogos multinivel donde necesitas densidad de tabla y contexto jerárquico.

Nodo Responsable Estado Actualizado
Norteamérica
Ops Activo 2026-05-03
Estados Unidos
Sales Activo 2026-05-04
Canadá
Sales Beta 2026-05-02
Europa
Ops Activo 2026-05-03
España
Support Activo 2026-05-01
Alemania
Support Planificado 2026-05-07
IDs seleccionados
Último evento
TypeScript
import { NeuTableColumn, NeuTableExpandDirective } from '@neural-ui/core/table';
import { NeuTreeTableComponent, NeuTreeTableNode } from '@neural-ui/core/tree-table';

interface RepoMeta {
  owner: string;
  status: string;
}

@Component({
  imports: [NeuTreeTableComponent, NeuTableExpandDirective],
  template: `
<neu-tree-table
  [nodes]="nodes"
  [columns]="columns"
  [selectable]="true"
  [pagination]="true"
  [sortable]="true"
  [multiSort]="true"
  [columnChooser]="true"
  [exportable]="true"
  [expandable]="true"
>
  <ng-template neuTableExpand let-node let-row="row">
    {{ node.description }} · level {{ row.__treeLevel }}
  </ng-template>
</neu-tree-table>`
})
export class MyComponent {
  columns: NeuTableColumn[] = [
    { key: 'label', header: 'Node', width: '320px', sortable: true },
    { key: 'owner', header: 'Owner', filterable: true, editable: true },
    { key: 'status', header: 'Status', type: 'badge' },
  ];

  nodes: NeuTreeTableNode<RepoMeta>[] = [
    {
      id: 'workspace',
      label: 'Workspace',
      expanded: true,
      data: { owner: 'Platform', status: 'active' },
      children: [{ id: 'showcase', label: 'Showcase', data: { owner: 'DX', status: 'beta' } }],
    },
  ];
}