Skills
.Work. You
Rest

Tables — Sortable, Filterable, Paginated Data Tables

Community

Build sortable, accessible data tables.

Software Engineering#accessibility#React#WCAG#filtering#pagination#sorting#data-table
AuthorCoriatel
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This skill helps developers quickly implement production-ready data tables with sorting, filtering, pagination, and accessible keyboard support, reducing boilerplate and ensuring WCAG AA compliance.

Core Features & Use Cases

  • Sorting: client-side single-column sorts
  • Filtering and search across all columns
  • Pagination with adjustable page size
  • Accessible table semantics and keyboard navigation

Use cases include admin dashboards, data management UIs, or any page showing large tables.

Quick Start

  1. Create a React project (or integrate into your app) and install the required packages.
  2. Import DataTable and define columns with keys and optional renderers.
  3. Pass your data as an array of objects and render <DataTable data={data} columns={columns} />.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: Tables — Sortable, Filterable, Paginated Data Tables
Download link: https://github.com/Coriatel/Expiry-Alert/archive/main.zip#tables-sortable-filterable-paginated-data-tables

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.