svelte-advanced-datatable-interactions

svelte-advanced-datatable-interactions is a skill for Claude Code, Codex from Kage0x3B/svelte-advanced-datatable. It costs 142 tokens per session (2,828 once invoked), scanned A, original, MIT.

A guide for adding user interactions to the svelte-advanced-datatable component, a Svelte table for displaying data. It covers selecting rows, row actions, clicks, and exporting data.

In plain words
What is it for?
Use it to add edit, archive, or delete actions, open modals or links from row clicks, preserve selection across pages, and export visible data as CSV or JSON.
Why use it?
It explains how to connect table rows to individual or bulk operations without designing those interaction patterns from scratch.

Skill for Claude CodeCodex

Written for no agent in particular: nothing here depends on one.

Good fit Use it to add edit, archive, or delete actions, open modals or links from row clicks, preserve selection across pages, and export visible data as CSV or JSON.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/kage0x3b/svelte-advanced-datatable/svelte-advanced-datatable-interactions
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add Kage0x3B/svelte-advanced-datatable --skill svelte-advanced-datatable-interactions
Clone the repo
git clone --depth 1 https://github.com/Kage0x3B/svelte-advanced-datatable

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for svelte-advanced-datatable-interactions

README.md
[![agentmods](https://agentmods.dev/badge/skills/kage0x3b/svelte-advanced-datatable/svelte-advanced-datatable-interactions/github.svg)](https://agentmods.dev/skills/kage0x3b/svelte-advanced-datatable/svelte-advanced-datatable-interactions)
Your own site
<a href="https://agentmods.dev/skills/kage0x3b/svelte-advanced-datatable/svelte-advanced-datatable-interactions"><img src="https://agentmods.dev/badge/skills/kage0x3b/svelte-advanced-datatable/svelte-advanced-datatable-interactions/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for svelte-advanced-datatable-interactions

Your own site · 80×15
<a href="https://agentmods.dev/skills/kage0x3b/svelte-advanced-datatable/svelte-advanced-datatable-interactions"><img src="https://agentmods.dev/badge/skills/kage0x3b/svelte-advanced-datatable/svelte-advanced-datatable-interactions.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 142 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 2,828 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00142 $0.02828
Opus 5 $0.00071 $0.01414
Sonnet 5 $0.00028 $0.00566
Haiku 4.5 $0.00014 $0.00283

Measured 10d ago against content hash 2df18a0a2391, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-10, from the pricing page.

Security

Grade A, and why

svelte-advanced-datatable-interactions scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 10d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/svelte-advanced-datatable-interactions/SKILL.md · 267 lines

How it starts

The opening of the file, as written. The whole thing — 267 lines — stays where its author put it; the contents beside it link to each section on GitHub.

svelte-advanced-datatable — selection, actions, modals, export

How users interact with rows: selection, actions (per-row dropdown + bulk toolbar), what happens on row click (modal / callback / link), and exporting the visible dataset.

1. Actions — DataTableAction<Data>[]

Declaring even one action lights up the entire selection UI: a leading checkbox column, a trailing three-dot per-row dropdown, and a bulk toolbar that slides in beside the search field when ≥1 row is selected. Selection persists across pagination — cross-page bulk ops work out of the box.

import type { DataTableAction, DataTableConfig, SelectionId } from 'svelte-advanced-datatable';

const config: DataTableConfig<UserData> = {
    // ...
    actions: [
        { key: 'edit', icon: PencilIcon, onSingle: (item) => openEditDialog(item) },
        { key: 'archive', icon: ArchiveIcon, primary: true, onMulti: (ids) => archiveUsers(ids) },
        { key: 'delete', icon: TrashIcon, primary: true, variant: 'destructive', onMulti: (ids) => deleteUsers(ids) }
    ],
    messageConfig: {
        // ...column labels...
        actions: { edit: 'Edit', archive: 'Archive', delete: 'Delete' }
    }
};
Property Type Default Notes
key string required Stable id. Used as list key AND as messageConfig.actions.<key> lookup for the label.
icon Component Svelte icon component. Size via tailwind (e.g. class="size-4").
variant 'default' | 'primary' | 'destructive' 'default' destructive = red.
primary boolean false Render as standalone button in the bulk toolbar (else in "More" overflow). Cap: primaryActionsCount.
hideInRow boolean false Suppress in the per-row dropdown.
hideInBulk boolean false (implicit when no onMulti) Suppress in the bulk toolbar.
rowVisible (item) => boolean Per-row gate for the row dropdown.
onSingle (item) => void | Promise<void> Row-dropdown handler. Receives the full row.
onMulti (ids: SelectionId[]) => void | Promise<void> Bulk-toolbar handler. Receives IDs only — cross-page rows aren't loaded.
refreshAfter boolean true Call dataSource.refresh() after the handler resolves.
clearSelectionAfter boolean true bulk / false single Wipe selection after the handler resolves.

Read the full file on GitHub · 267 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 10d ago First seen · 267 lines · 142 tokens per session scan A 2df18a0a2391

Subscribe to this mod's changes

svelte-advanced-datatable-interactions is a skill published in the GitHub repository Kage0x3B/svelte-advanced-datatable (5 stars, last pushed 2mo ago), licensed MIT. It adds 142 tokens to every session and 2,828 once invoked, about $0.0007 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Related

Other skills, from other repositories

oat-css

Our preferred CSS framework — ultra-lightweight, semantic HTML UI library (8KB). Style web UIs with semantic HTML and minimal classes. Override with app-level SCSS only when necessary.

spinspire/pocketbase-sveltekit-starter · 42 tokens

pwa

Use when the user asks to make a site installable, turn it into a PWA, add a service worker, add a web app manifest, enable "add to home screen", or support offline. Also use when adding favicon/app icons, iOS home-screen support (apple-mobile-web-app meta tags), or verifying PWA installability.

spinspire/pocketbase-sveltekit-starter · 72 tokens

frontend-design

Create distinctive, production-grade frontend interfaces with high design quality and accessible markup. Use this skill when the user asks to build or beautify web components, pages, applications, landing pages, dashboards, artifacts, or React/HTML/CSS UI. Generates creative, polished code that avoids generic AI…

spinspire/pocketbase-sveltekit-starter · 76 tokens

migrate-v8-to-v9

Complete Angular v8-to-v9 migration reference: injectTable and injection context, explicit features and row-model slots, signal/atom state, FlexRender directives, type generics, prototype methods, sorting, sizing, selection, and logical pinning.

TanStack/table · 58 tokens

custom-features

Author a TanStack Table v9 feature plugin across every FeatureMap and API installation surface: state, options, column definitions, table, column, row, cell, header, row-model functions/caches, defaults, prototypes, and table/row/column instance data lifecycles. Load for initTableInstanceData, resetTableInstanceData…

TanStack/table · 93 tokens

row-selection

Maintain rowSelection ID state with stable getRowId, single, multi, subrow, and Shift-range rules, selected row models, handler anchors, and manual-pagination semantics. Load when implementing getToggleSelectedHandler, enableRowRangeSelection, selectChildren, deselectParents, or selected IDs that outlive loaded Row…

TanStack/table · 68 tokens