# @codehint-ng/tree-table

> A simple component to display tree-hierarchically data in table.

Latest version **18.0.3** (published 2025-01-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install @codehint-ng/tree-table
pnpm add @codehint-ng/tree-table
yarn add @codehint-ng/tree-table
bun add @codehint-ng/tree-table
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 18.0.3 |
| Published | 2025-01-15 |
| First published | 2020-04-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 131.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | mazhekin |
| Keywords | Angular |

## Links

- npm: https://www.npmjs.com/package/@codehint-ng/tree-table
- Repository: https://github.com/codehint-ng/ng-controls
- Homepage: https://github.com/codehint-ng/ng-controls#readme
- Issues: https://github.com/codehint-ng/ng-controls/issues
- npm.io page: https://npm.io/package/@codehint-ng/tree-table

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.0.0

## Recent versions

- 18.0.3 (latest) — 2025-01-15
- 18.0.2 — 2024-08-30
- 18.0.1 — 2024-08-01
- 18.0.0 — 2024-08-01
- 17.0.0 — 2024-08-01
- 16.0.0 — 2024-08-01
- 15.0.1 — 2024-03-11
- 15.0.0 — 2024-03-11
- 14.0.0 — 2024-01-25
- 13.0.0 — 2024-01-16
- 12.0.1 — 2023-09-20
- 12.0.0 — 2023-09-20
- 1.0.11 — 2022-08-30
- 1.0.10 — 2022-02-17
- 1.0.9 — 2022-02-17
- … 10 more at https://npm.io/package/@codehint-ng/tree-table/versions

## README

# @codehint-ng/tree-table

A simple component to display tree-hierarchically data in table.

## Usage

For example: You have some tree data like this:
    
        interface CustomItem {
            id: number;
            parentId: number;
            data1: string;
            data2: string;
            data3: string;
        }
        
        myCustomData: CustomItem[] = [...];

1) Register the @codehint-ng/tree-table in your module:

        import { CngTreeTableModule } from '@codehint-ng/tree-table';

        @NgModule({
        imports: [
            CngTreeTableModule
            ...
        ],
        ...

2) Then define displaying cng-tree-table in your component template:
 
        <cng-tree-table
            [columns]="[
                {title: 'Column1', template: tmplColumn1},
                {title: 'Column2', template: tmplColumn2},
                {title: 'Column3', template: tmplColumn3}
            ]"
        >
        </cng-tree-table>

        <ng-template #tmplColumn1 let-treeTableItem>
            {{ treeTableItem.data.data1 }}
        </ng-template>

        <ng-template #tmplColumn2 let-treeTableItem>
            {{ treeTableItem.data.data2 }}
        </ng-template>

        <ng-template #tmplColumn3 let-treeTableItem>
            {{ treeTableItem.data.data3 }}
        </ng-template>
 
3) Prepare your custom tree-hierarchically data for passing it into cng-tree-table 
component: 
     
    So you need to map it into structure TreeTableItem<T> that cng-tree-table can display, like this:
    
        function customDataToTreeTableItems(customData: CustomItem[])
                : TreeTableItem<CustomItem>[] {
                
            const treeTableItems = (customData || []).map((customItem: CustomItem) => {
                const item: TreeTableItem<CustomItem> = {
                    id: customItem.id,
                    parentId: customItem.parentId || 0,
                    data: customItem
                };
                return item;
            });
            return treeTableItems;
        }

4) Append your treeTableItems into cng-tree-table: 
    
        myCustomData: CustomItem[] = [...];
        @ViewChild(CngTreeTableComponent, {static: true}) cngTreeTable: CngTreeTableComponent<CustomItem>;
        
        ngOnInit() {
            const treeTableItems = customDataToTreeTableItems(this.myCustomData);
            this.cngTreeTable.appendItems(treeTableItems);
            ....
        }

---
_Source: https://npm.io/package/@codehint-ng/tree-table · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._