Skills
.Work. You
Rest

Table Patterns

Official

Standardize table views and interactions in your web apps.

Software Engineering#web development#filtering#pagination#table patterns#table components
Authorbytetalent
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill helps streamline the development of table views by establishing a consistent hierarchy, component usage, and data handling across various web applications.

Core Features & Use Cases

  • Consistent Component Hierarchy: Provides a structured guide for implementing table views, ensuring a consistent and scalable UI.
  • Server-side Operations: Recommends server-side pagination, sorting, and filtering for handling large datasets, improving performance.
  • Quick Start: Implement a full-featured table in your Next.js app by following the pattern guidelines and using the useEntityList hook.

Quick Start

To create a table pattern in your Next.js application, use the following steps:

  1. Implement a FilterActionBar at the top for search and filtering.
  2. Include a PaginationBar to manage pagination.
  3. Use sortable and filterable columns.
  4. Apply row actions with destructive actions positioned appropriately.

Dependency Matrix

Required Modules

None required

Components

scriptsreferencesassets

💻 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: Table Patterns
Download link: https://github.com/bytetalent/docs/archive/main.zip#table-patterns

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 620,000+ vetted skills library on demand.