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.
| # | Nodo | Responsable | Estado | Actualizado | Acciones | ||
|---|---|---|---|---|---|---|---|
Todas | Todas | ||||||
| 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' } }],
},
];
}