# @sneat/datagrid

> Angular wrapper around [Tabulator](http://tabulator.info) (`sneat-datagrid`), used for dense result grids — e.g. DataTug's table/query results page.

Latest version **0.27.25** (published 2026-09-11) · 0 weekly downloads

## Install

```sh
npm install @sneat/datagrid
pnpm add @sneat/datagrid
yarn add @sneat/datagrid
bun add @sneat/datagrid
```

## Health

**Score 50/100 (C)** — status: active.

Positive: no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.27.25 |
| Published | 2026-09-11 |
| First published | 2026-03-03 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | sneat-team |

## Links

- npm: https://www.npmjs.com/package/@sneat/datagrid
- npm.io page: https://npm.io/package/@sneat/datagrid

## Recent versions

- 0.27.25 (latest) — 2026-09-11
- 0.27.24 — 2026-09-10
- 0.27.23 — 2026-09-10
- 0.27.22 — 2026-09-10
- 0.27.21 — 2026-09-10
- 0.27.20 — 2026-09-08
- 0.27.19 — 2026-09-08
- 0.27.18 — 2026-09-08
- 0.27.17 — 2026-09-07
- 0.27.16 — 2026-09-06
- 0.27.15 — 2026-09-06
- 0.27.14 — 2026-09-06
- 0.27.13 — 2026-09-05
- 0.27.12 — 2026-09-05
- 0.27.11 — 2026-09-05
- … 60 more at https://npm.io/package/@sneat/datagrid/versions

## README

# @sneat/datagrid

Angular wrapper around [Tabulator](http://tabulator.info) (`sneat-datagrid`),
used for dense result grids — e.g. DataTug's table/query results page.

## Basic usage

```html
<sneat-datagrid
  [columns]="columns"
  [data]="rows"
  layout="fitColumns"
/>
```

## Cell selection (opt-in)

Cell/range selection is off by default so existing consumers are unaffected.
Set `selectableRange` to enable it, and listen to `cellSelected` for the
currently active cell (fired on a mouse click, and — once `selectableRange`
is on — on keyboard arrow-key navigation between cells too):

```html
<sneat-datagrid
  [columns]="columns"
  [data]="rows"
  [selectableRange]="true"
  (cellSelected)="onCellSelected($event)"
/>
```

```ts
import { IDataGridCellSelectedEvent } from '@sneat/datagrid';

onCellSelected(event: IDataGridCellSelectedEvent): void {
  // event.column.field  — e.g. "CustomerId"
  // event.column.index  — the field's position in the `columns` input
  // event.value         — the cell's current value
  // event.rowData       — the full row's data object
  console.log(event);
}
```

`selectableRange` mirrors Tabulator's own option: `true` for unlimited
ranges, or a number to cap how many ranges can be selected at once. It is
mutually exclusive with row selection (`selectable`) — Tabulator disables
range selection and logs a console warning if both are set.

## Column markers

`columnMarkers` renders a small, unobtrusive badge in a column's header,
keyed by field. The grid applies no semantic meaning to these — it only
renders what the consumer passes (e.g. a semantic-detection layer flagging a
declared or inferred `CustomerId` column):

```html
<sneat-datagrid
  [columns]="columns"
  [data]="rows"
  [columnMarkers]="{ CustomerId: { label: 'PK', title: 'Primary key', kind: 'declared' } }"
/>
```

`kind` is purely presentational (`'declared'` vs `'inferred'` render with a
slightly different style); it carries no behaviour.

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