Table Builder

What it does

The Table Builder skill enables AI agents to generate production-ready data tables with features like sorting, filtering, and pagination. It allows for both server-side and client-side rendering of these tables, providing flexibility in how the data is displayed and managed. The tool supports various configurations including column definitions, row actions (edit, delete, view), empty/loading states, and mobile responsiveness through stacked columns or horizontal scrolling.

When to use it

• You need to present structured data in an organized and interactive format.
• You want to allow users to sort and filter data within a table.
• You require pagination for large datasets to improve performance and user experience.
• You're building a dashboard or application that requires dynamic data tables.
• You need to display different views (e.g., no data, error) based on the current state of the data.

Key capabilities

• Sorting: Allows users to sort table columns in ascending or descending order.
• Filtering: Enables filtering of rows based on column values.
• Pagination: Divides large datasets into manageable pages for efficient browsing.
• Column Configuration: Define custom column headers, data types, and cell rendering logic.
• Row Actions: Implement actions like editing, deleting, or viewing individual rows.
• Mobile Responsiveness: Adapts table layout to different screen sizes (stacked columns or horizontal scroll).

Example prompts

• "Create a table of users with columns for ID, Name, Email, and Status."
• "Generate a data table showing orders, with sorting enabled on the 'Date' column and pagination set to 10 items per page."
• “Build a table displaying product inventory, including an ‘Edit’ action for each row.”

Tips & gotchas

• The skill requires understanding of column definitions (accessor keys) to properly configure the table.
• This is specifically designed for creating data tables; it's not intended for general-purpose coding assistance.
• Consider the performance implications when dealing with very large datasets, especially in client-side rendering mode.