# svelte-advanced-datatable

> A configurable, server-aware data table for Svelte 5 with first-class support for [DaisyUI](https://daisyui.com).

Latest version **0.16.2** (published 2026-09-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install svelte-advanced-datatable
pnpm add svelte-advanced-datatable
yarn add svelte-advanced-datatable
bun add svelte-advanced-datatable
```

## Health

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

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

Warnings: low downloads; no types; pre 1.0.

Negative: declining downloads.

## Facts

| | |
|---|---|
| Version | 0.16.2 |
| Published | 2026-09-17 |
| First published | 2022-09-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 0 |
| Unpacked size | 487.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 5 |
| Author | Moritz Hein |
| Maintainers | kage0x3b |

## Links

- npm: https://www.npmjs.com/package/svelte-advanced-datatable
- Repository: https://github.com/Kage0x3B/svelte-advanced-datatable
- Homepage: https://svelte-advanced-datatable.moritz.website
- Issues: https://github.com/Kage0x3B/svelte-advanced-datatable/issues
- npm.io page: https://npm.io/package/svelte-advanced-datatable

## Recent versions

- 0.16.2 (latest) — 2026-09-17
- 0.16.1 — 2026-07-01
- 0.16.0 — 2026-05-18
- 0.15.0 — 2026-05-18
- 0.14.3 — 2026-05-11
- 0.14.2 — 2026-05-11
- 0.14.1 — 2026-05-11
- 0.14.0 — 2026-05-11
- 0.13.1 — 2026-05-11
- 0.13.0 — 2026-05-08
- 0.12.1 — 2026-05-08
- 0.12.0 — 2026-05-08
- 0.11.0 — 2026-05-08
- 0.10.0 — 2026-05-08
- 0.8.10 — 2026-01-25
- … 35 more at https://npm.io/package/svelte-advanced-datatable/versions

## README

# Svelte Advanced DataTable

A configurable, server-aware data table for Svelte 5 with first-class support for [DaisyUI](https://daisyui.com).

## Features

- **Server-side or client-side data** — `FetchApiDataSource`, `ApiFunctionDataSource`, `SvelteQueryDataSource`, or
  `LocalDataSource` (client-side filter, sort, paginate).
- **Pagination** with configurable page size and an items-per-page selector.
- **Sorting** — click to sort, Shift-click for multi-column sort.
- **Search and filtering** — basic text search or a structured query parser with field aliases.
- **Row selection and actions** — single + multi-select with a bulk action toolbar, per-row dropdown,
  primary/destructive variants, two-way `bind:selectedIds`.
- **Settings popover** — items per page, density (compact/default/spacious), column visibility, column reordering, reset
  persisted column widths.
- **Column resizing and reordering** with persisted widths and order.
- **Sticky header** that pins while the body scrolls.
- **Export** — CSV / JSON popover with delimiter, quoting and line-ending options. Use `buildExportUrl` to delegate
  large exports to the server.
- **State persistence** — separate session and persistent tiers (sessionStorage / localStorage / custom backend) for
  page, sort, search, column order, widths, density and items-per-page.
- **Internationalisation** — built-in message config, [svelte-i18n](https://github.com/kaisermann/svelte-i18n), or a
  custom `MessageFormatter`.
- **Error handling** — `onError` callback plus a customisable `errorState` slot.
- **Custom column components** for fully bespoke cell rendering.

## Quick links

- [Documentation](https://svelte-advanced-datatable.moritz.website/docs)
- [Getting started](https://svelte-advanced-datatable.moritz.website/docs/getting-started/installation)
- [Data sources](https://svelte-advanced-datatable.moritz.website/docs/guides/data-sources)
- [API reference](https://svelte-advanced-datatable.moritz.website/api-reference)

## Installation

```bash
# Install Tailwind CSS and DaisyUI first (see https://daisyui.com/docs/install)

pnpm add svelte-advanced-datatable
```

## Basic usage

```svelte
<script lang="ts">
    import type { DataTableConfig } from 'svelte-advanced-datatable';
    import { ComponentType, FetchApiDataSource } from 'svelte-advanced-datatable';
    import { DataTable } from 'svelte-advanced-datatable/daisyUi';

    interface UserData {
        id: number;
        userName: string;
    }

    const config: DataTableConfig<UserData> = {
        type: 'userData',
        columnProperties: {
            id: { type: ComponentType.NUMBER },
            userName: { type: ComponentType.STRING }
        },
        dataUniquePropertyKey: 'id',
        messageConfig: {
            id: { label: 'Id' },
            userName: { label: 'Username' }
        }
    };

    const dataSource = new FetchApiDataSource<UserData>('/api/users/list');
</script>

<DataTable {config} {dataSource} />
```

## Selection + actions

Register `actions` to automatically get a checkbox column, a per-row dropdown and a bulk toolbar:

```svelte
<script lang="ts">
    import type { SelectionId } from 'svelte-advanced-datatable';

    let selectedIds: SelectionId[] = $state([]);

    const config: DataTableConfig<UserData> = {
        // ...other options
        actions: [
            { key: 'edit', onSingle: (user) => editUser(user) },
            { key: 'archive', primary: true, onMulti: (ids) => archive(ids) },
            { key: 'delete', variant: 'destructive', primary: true, onMulti: (ids) => remove(ids) }
        ]
    };
</script>

<DataTable {config} {dataSource} bind:selectedIds />
```

See the
[`/example/daisy-ui/svelte-query-actions`](https://svelte-advanced-datatable.moritz.website/example/daisy-ui/svelte-query-actions)
page for a working demo.

## Claude Code skills

Building with [Claude Code](https://claude.com/claude-code)? The repo ships four installable agent skills under
`skills/` that compress the docs into Claude-actionable guidance.

```bash
npx skills add Kage0x3B/svelte-advanced-datatable
```

| Skill                                    | Covers                                                                                 |
| :--------------------------------------- | :------------------------------------------------------------------------------------- |
| `svelte-advanced-datatable`              | Install, import map, `DataTableConfig`, column types, sort/pagination, display.        |
| `svelte-advanced-datatable-data`         | Data sources, basic + advanced search, error handling.                                 |
| `svelte-advanced-datatable-interactions` | Row selection, per-row + bulk actions, modals/links, CSV/JSON + custom export.         |
| `svelte-advanced-datatable-state`        | Persistence tiers (URL / Storage / Snapshot) and i18n (`messageConfig` / svelte-i18n). |

## [Open the documentation](https://svelte-advanced-datatable.moritz.website/docs) for the full configuration reference and more examples.

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