skills.rest
twofoldtech-dakota
twofoldtech-dakotaCOMMUNITY
Explore all skills by this author →
GitHub

data-table

Render accessible data tables with sorting, filtering, and pagination in SvelteKit.

1|Updated Feb 20, 2026
Search Tags:#tailwind#pagination#sorting#sveltekit#data-table#neo-brutalist
One-click install
npx skills add https://github.com/twofoldtech-dakota/plugin-migration-planner --skill data-table
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: data-table
Source: https://github.com/twofoldtech-dakota/plugin-migration-planner/tree/main/.claude/skills/data-table
Command: npx skills add https://github.com/twofoldtech-dakota/plugin-migration-planner --skill data-table

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Data-table engineering to render datasets as accessible, well-structured tables in SvelteKit apps, automatically choosing layouts and interactions based on data shape.

Core Features & Use Cases

  • Analyze data shape and automatically select table mode (static, client, server).
  • Configure columns with alignment, formatting, and responsive priority.
  • Implement sorting, filtering, and pagination with semantic markup and keyboard navigation.
  • Support responsive patterns like priority-based column hiding and mobile card layouts.
  • Ensure accessibility with proper table semantics, captions, and keyboard interactions.

Quick Start

Render a responsive, accessible data table for the given dataset with sorting, pagination, and keyboard navigation.

Frequently Asked Questions about data-table

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create accessible data tables in SvelteKit with sorting and pagination?▼

To create accessible data tables in SvelteKit, use a server-first approach with Svelte 5 stores that automatically implements semantic markup, sorting, pagination, and keyboard navigation for your web app datasets.

How does a data table automatically choose between client and server modes?▼

A data table automatically selects between static, client, and server modes by analyzing the shape of your dataset, optimizing rendering and interactions for API responses, arrays, or database queries.

Can I implement responsive column hiding and mobile card layouts for data tables?▼

Yes, you can implement responsive patterns for data tables including priority-based column hiding and mobile card layouts, ensuring datasets remain accessible and well-structured across different screen sizes.

What is the best way to configure table columns for dashboards and admin panels?▼

The best way to configure table columns for dashboards and admin panels is through smart column configuration, allowing you to set alignment, formatting, and responsive priority for well-formatted data displays.

Does this data table approach support keyboard navigation and semantic markup?▼

Yes, this data table approach fully supports keyboard navigation and semantic markup, including proper table semantics and captions to ensure accessibility compliance for data-rich web pages.

When should I use a server-first approach for data tables?▼

Use a server-first approach for data tables when handling large datasets from API responses or database queries in SvelteKit apps, with optional client interactivity via Svelte 5 stores for sorting and filtering.

Related Skills

Explore More Software Engineering Skills→
joshka0joshka0
3

foxctl JQ

Filter, transform, and extract fields from JSON or YAML using jq queries.

Community
Basic
Pans0020Pans0020

markdown-exporter

Convert Markdown content into DOCX, PPTX, XLSX, PDF, HTML, IPYNB, MD, CSV, JSON/JSONL, XML, and extracted code files.

Community
Advanced
rattamnoonrattamnoon

tailwind-css-patterns

Applies Tailwind CSS utility patterns to React, Vue, and Svelte components.

Community
Intermediate
IDEA-on-ActionIDEA-on-Action

react-component

Generate React component files with PascalCase names and shadcn/ui integration.

Official
Intermediate