# ngm-tree-grid

> A tree grid that supports editable fields like Inputs and Checkboxes.

Latest version **16.0.0** (published 2024-12-26) · 0 weekly downloads

## Install

```sh
npm install ngm-tree-grid
pnpm add ngm-tree-grid
yarn add ngm-tree-grid
bun add ngm-tree-grid
```

## 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 | 16.0.0 |
| Published | 2024-12-26 |
| First published | 2022-07-04 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 128.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Mostafa Soleimani |
| Maintainers | mostafasoleimani1987 |
| Keywords | Tree Grid, Tree Table, Grid, Tree |

## Links

- npm: https://www.npmjs.com/package/ngm-tree-grid
- Repository: https://github.com/MostafaSoleimani/Angular-libs/blob/main/projects/ngm-tree-grid
- Homepage: https://github.com/MostafaSoleimani/Angular-libs/blob/main/projects/ngm-tree-grid/README.md
- npm.io page: https://npm.io/package/ngm-tree-grid

## Dependencies (2)

- [tslib](https://npm.io/package/tslib.md) ^2.3.0
- [ngm-live-search](https://npm.io/package/ngm-live-search.md) ^16.0.0

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 16.0.0 (latest) — 2024-12-26
- 15.0.0 — 2024-12-26
- 14.0.0 — 2024-12-26
- 2.0.5 — 2022-07-22
- 2.0.3 — 2022-07-21
- 2.0.2 — 2022-07-21
- 2.0.1 — 2022-07-21
- 2.0.0 — 2022-07-21
- 1.1.4 — 2022-07-21
- 1.1.3 — 2022-07-06
- 1.1.2 — 2022-07-06
- 1.1.1 — 2022-07-04
- 1.1.0 — 2022-07-04
- 1.0.10 — 2022-07-04
- 1.0.9 — 2022-07-04
- … 8 more at https://npm.io/package/ngm-tree-grid/versions

## README

# NgmTreeGrid

A tree grid that supports editable fields like Inputs and Checkboxes.

## Demo

You can find [Demo](https://stackblitz.com/edit/angular-ivy-z3d4sk?file=src%2Fapp%2Fapp.component.ts) here.

It shows your kindness if you give star on my github. I will appreciate that.
You can find [Repo](https://github.com/MostafaSoleimani/Angular-libs/blob/main/projects/ngm-tree-grid) here.

## Installation

Install ngm-tree-grid with npm

```bash
  cd my-project
  npm i ngm-tree-grid
  npm i ngm-live-search
```

## Usage/Examples

```javascript
import { NgmTreeGridModule } from "ngm-tree-grid";

@NgModule({
  imports: [NgmTreeGridModule],
})
export class AppModule {}
```

Then in your component.html

```html
<div class="tree-grid">
  <ngm-tree-grid
    [dataSource]="dataSource"
    [config]="treeGridConfig"
    (expand)="onExpand($event)"
    (collapse)="onCollapse($event)"
  >
    <ng-template #treeGridHeader>
      first header
    </ng-template>
    <ng-template #treeGridHeader>
      second
    </ng-template>
    <ng-template #treeGridCell let-item>
      <div>{{ item.title.caption }}</div>
    </ng-template>

    <ng-template #treeGridCell let-item>
      <input type="checkbox" />
    </ng-template>
  </ngm-tree-grid>
</div>
```

Then in your component put

```typescript
export class YourComponent {
  dataSource = new NgmDataSource();
  getChildrenFn = (obj: any) => obj.nodes ?? [];
  treeGridConfig: INgmTreeGridConfig = {
    columns: [
      {
        header: "Title: ",
        width: 50,
      },
      {
        header: "Id: ",
        width: 50,
      },
    ],
    searchFn: (item, text: string) =>
      item.name.toLocaleLowerCase().includes(text.toLocaleLowerCase()),
  };

  data = [
    {
      id: 1,
      name: "Mostafa",
      nodes: [
        {
          id: 2,
          name: "Soleimani",
        },
      ],
    },
  ];

  ngOnInit() {
    this.dataSource.data = this.data;
    this.dataSource.getChildrenFn = (obj: any) => obj.nodes ?? [];
  }

  onExpand(e: INgmExpansion) {
    console.log("expand:   ", e);
  }

  onCollapse(e: INgmExpansion) {
    console.log("collapse:   ", e);
  }
}
```

## API Reference

#### Inputs and Outputs

| Parameter      | Type                 | Description                                      |
| :------------- | :------------------- | :----------------------------------------------- |
| `[config]`     | `INgmTreeGridConfig` | configuration of tree-grid header and search     |
| `[dataSource]` | `INgmDataSource`     | data and a func to get children                  |
| `(expand)`     | `Output`             | emits when user expand a node returns the item   |
| `(collapse)`   | `Output`             | emits when user collapse a node returns the item |

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