Data Table

Display, sort, and filter structured data in a tabular format.

228|18|Updated Dec 7, 2024
One-click install
npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill data-table-thedaviddias
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: Data Table
Source: https://github.com/thedaviddias/ux-patterns-for-developers/tree/main/skills/table
Command: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill data-table-thedaviddias

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a structured way to display large amounts of data in rows and columns, making it easy for users to scan, compare, and interact with information efficiently.

Core Features & Use Cases

  • Structured Data Display: Presents data in a clear, tabular format.
  • Sorting and Filtering: Allows users to organize and find specific data points.
  • Responsive Design: Adapts to different screen sizes, ensuring usability on various devices.
  • Use Case: Displaying a list of users with their names, emails, and roles, allowing an administrator to sort by name or filter by role.

Quick Start

Use the Data Table skill to display the following user data: name, email, and role.

Frequently Asked Questions about Data Table

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

FAQPage Schema
How do I display structured data in a responsive table with sorting and filtering?

To display structured data with sorting and filtering, you need a semantic HTML table structure with ARIA attributes. This approach supports responsive design and adapts to different screen sizes for efficient data presentation and interaction.

What is the best way to handle large datasets in a tabular format?

Handling large datasets in a tabular format requires pagination to avoid rendering performance issues. Implementing pagination alongside sorting and filtering ensures users can efficiently scan and compare large amounts of data without delay.

Do I need semantic HTML and ARIA attributes for data table accessibility?

Yes, you need semantic HTML table structures and ARIA attributes for data table accessibility. These elements ensure that interactive features like sorting and filtering are properly conveyed to individuals relying on assistive technologies.

Can I use a data table for displaying user lists with roles and emails?

Yes, you can use a data table for displaying user lists with names, emails, and roles. This allows an administrator to easily sort by name or filter by specific roles to find relevant information quickly.

Does a responsive data table adapt to different screen sizes for mobile devices?

Yes, a responsive data table adapts to different screen sizes to ensure usability on mobile devices. Responsive design is critical for maintaining the ability to interact with structured data across various viewing contexts without losing functionality.