# angular-tanstack-table

> tanstack table adapter for angular

Latest version **1.0.2** (published 2024-02-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install angular-tanstack-table
pnpm add angular-tanstack-table
yarn add angular-tanstack-table
bun add angular-tanstack-table
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2024-02-01 |
| First published | 2024-01-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 21.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | Janakirao Gokavalsa |
| Maintainers | jrgokavalsa |
| Keywords | angular, table, tanstack-table, angular-tanstack-adapter, angular-table, angular-material-table, angular-grid, sortable-table, grouping-table, data-table, datatable, pagination, filterable-table |

## Links

- npm: https://www.npmjs.com/package/angular-tanstack-table
- Repository: https://github.com/jrgokavalsa/angular-tanstack-adapter
- Homepage: https://github.com/jrgokavalsa/angular-tanstack-adapter#readme
- Issues: https://github.com/jrgokavalsa/angular-tanstack-adapter/issues
- npm.io page: https://npm.io/package/angular-tanstack-table

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.3.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

- 1.0.2 (latest) — 2024-02-01
- 1.0.1 — 2024-01-27
- 1.0.0 — 2024-01-27
- 0.0.1 — 2024-01-22

## README

# angular-tanstack-table

Angular-tanstack-table is a GitHub repository that provides an adapter for using tanstack table library in Angular applications. It allows you to create and customize data tables with features such as sorting, filtering, pagination, and more.

## Demo Application

https://jrgokavalsa.github.io/angular-tanstack-adapter/

## Prerequisites

Before using this table component, ensure that you have the following prerequisites installed:

- Angular 17
- Tanstack 8.11.7

## Installation

You can install the Angular Tanstack adapter using npm. Open your terminal and run the following command:

```bash
npm install angular-tanstack-table
```

## Usage Standlone Components

- Import FlexRenderDirective from the library as follows.

```typescript
@Component({
  ....
  standalone: true,
  imports: [CommonModule, FlexRenderDirective],
})
```

- use createAngularTable from the library to get the table Instance.

```typescript
export class BasicComponent implements OnInit {
  data: Person[] = [];
  table!: Table<Person>;
  ngOnInit() {
    this.data = [...defaultData];
    this.table = createAngularTable({
      data: this.data,
      columns: defaultColumns,
      getCoreRowModel: getCoreRowModel(),
    });
  }
}
```

```html
<ng-container
  *flexRender="
                  header.column.columnDef.header;
                  props: header.getContext();
                  let header
                "
>
  {{ header }}
</ng-container>
```

## Examples

- Basic
- Sorting
- Grouping
- Selecting
- \* More examples to coming soon.

You can find some examples of how to use this library in different scenarios in the [examples](https://github.com/jrgokavalsa/angular-tanstack-adapter/tree/main/src/app/examples)

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