# @guiexpert/angular-table

> This is the angular component of the GuiExpert Table Project.

Latest version **22.1.84** (published 2026-06-16) · 0 weekly downloads

## Install

```sh
npm install @guiexpert/angular-table
pnpm add @guiexpert/angular-table
yarn add @guiexpert/angular-table
bun add @guiexpert/angular-table
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 22.1.84 |
| Published | 2026-06-16 |
| First published | 2023-03-29 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 1 |
| Unpacked size | 60.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | guiexpert |

## Links

- npm: https://www.npmjs.com/package/@guiexpert/angular-table
- npm.io page: https://npm.io/package/@guiexpert/angular-table

## Dependencies (1)

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

## Recent versions

- 22.1.84 (latest) — 2026-06-16
- 17.1.83 (a17) — 2026-01-24
- 15.1.83 (a15) — 2026-01-24
- 20.1.83 (a20) — 2026-01-24
- 14.1.83 (a14) — 2026-01-24
- 18.1.83 (a18) — 2026-01-24
- 16.1.83 (a16) — 2026-01-24
- 19.1.83 (a19) — 2026-01-24
- 15.0.7 (angular15) — 2024-02-20
- 14.0.8 (angular14) — 2024-02-20
- 21.1.83 — 2026-01-24
- 17.1.82 — 2026-01-23
- 20.1.82 — 2026-01-23
- 16.1.82 — 2026-01-23
- 15.1.82 — 2026-01-23
- … 248 more at https://npm.io/package/@guiexpert/angular-table/versions

## README

# @guiexpert/angular-table

This is the angular component of the GuiExpert Table Project.

## Become a master at creating web applications with large tables

This is the UI-agnostic table component for your next web app. 😊

<img src="https://raw.githubusercontent.com/guiexperttable/website-astro/main/src/assets/screens/heatmap.png" width="50%">

### Version compatibility



| Angular | @guiexpert/angular-table |
|:--------|:-------------------------|
| 21.x.x  | ^21.0.0                  |
| 20.x.x  | ^20.0.0                  |
| 19.x.x  | ^19.0.0                  |
| 18.x.x  | ^18.0.0                  |
| 17.x.x  | ^17.0.0                  |
| 16.x.x  | ^16.0.7                  |
| 15.x.x  | ^15.0.2                  |
| 14.x.x  | ^14.0.3                  |
|


### Features
- Handle large datasets easily
- Excellent performance for large tables by vertical and horizontal virtual scrolling
- Fully-featured (advanced sorting and filtering)
- Highly customizable orderData grid
- Outstanding performance
- No third-party dependencies
- UI-agnostic
- Column Interactions (resize, reorder)
- Sorting Rows
- Row, Column, and Range Selection
- Single and Multi Selection
- UI-agnostic
- Row and Column Spanning
- Fixed Columns (Left and Right)
- Tree table (Hierarchical View)
- Accessibility support: Keyboard Shortcuts
- Custom Filtering
- In-place Cell Editing
- Userdefined Key and Mouse Events
- Customizable Look & Feel (via CSS variables)
- Row sorting
- Column Reordering (Drag and Drop)
- State Persistence (Row Sorting, Column Order, Selection)
- Customizable Cell Contents via Renderer for Header, Body and Footer
- Full control over the HTML structure and style


## Links

- [Demos](https://gui.expert/demos)
- [Documentation](https://gui.expert/doc)
- [API](https://gui.expert/api)

## Get Started

Add the following two NPM packages to your existing angular project (run this in your project root directory):

```
npm install --save @guiexpert/table @guiexpert/angular-table
```

Import the (standalone) TableComponent in your angular module:

```
@NgModule({
    imports: [
      CommonModule,
      TableComponent, ...
```

Add guiexpert-table component to a template:

```
<guiexpert-table
  [tableModel]="tableModel"
  [tableOptions]="tableOptions"
  class="table-div"
></guiexpert-table>
```


Add two properties (tableModel and tableOptions) to the component:

```
import {
  TableFactory,
  TableModelIf,
  TableOptions,
  TableOptionsIf
} from "@guiexpert/table";

tableModel: TableModelIf = TableFactory.createTableModel({
  headerData: [
    ['Header 1', 'Header 2']
  ],
  bodyData: [
    ['Text 1a', 'Text 2a'],
    ['Text 1b', 'Text 2b'],
  ]
});

tableOptions = {
  ...new TableOptions(),
  hoverColumnVisible: false,
  defaultRowHeights: {
  header: 40,
  body: 34,
  footer: 0
}

```

There are numerous possibilities to create table models.
Please refer to the [Documentation](https://gui.expert/doc) for further information or the [Demo](https://gui.expert/demos) section for examples.

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