skills.rest
slingr-stack
slingr-stackOFFICIAL
Explore all skills by this author →
WebsiteGitHub

frontend-table-views

Build routed Drumr Framework table views with separated layout and tableOptions.

Updated Sep 16, 2025
Search Tags:#typescript#frontend#routing#crud#pagination#datatable#tableview
One-click install
npx skills add https://github.com/slingr-stack/qa-test-drumr --skill frontend-table-views
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-table-views
Source: https://github.com/slingr-stack/qa-test-drumr/tree/main/project-management-app/.agents/skills/frontend-table-views
Command: npx skills add https://github.com/slingr-stack/qa-test-drumr --skill frontend-table-views

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you build and maintain Drumr Framework table pages without mixing routing, page chrome, and table behavior, so list views stay consistent, typed, and easy to update.

Core Features & Use Cases

  • Route-driven table pages: Register each table page in app.registerRoutes() so routing remains the source of truth.
  • Clean TableView structure: Keep page-level props on TableView and move columns, filters, sorting, selection, and action wiring into tableOptions.
  • Strong typing for complex tables: Use dataTable.options<T>() when you want columns, toolbar actions, and callbacks validated together.
  • Refresh and post-action flows: Use DataTableRef or tableOptions.onActionExecuted to refresh after mutations and handle completion logic.
  • Practical use cases: Ideal for paginated model lists, embedded tables inside read views, CRUD toolbars, row actions, and custom row-click navigation.

Quick Start

Ask the assistant to create or refactor a Drumr Framework TableView page by registering the route, moving table behavior into tableOptions, and wiring any refresh or action callbacks you need.

Frequently Asked Questions about frontend-table-views

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

FAQPage Schema
How do I structure a routed frontend table view without mixing routing and table configuration?▼

Routed frontend table views keep routing as the source of truth by registering pages in app.registerRoutes(), placing page-level props on TableView, and moving columns, filters, and actions into typed tableOptions.

What's the best way to type columns and toolbar actions for a CRUD datatable in TypeScript?▼

Typing CRUD datatable columns and toolbar actions is handled by using dataTable.options<T>(), which validates columns, toolbar actions, and callbacks together for strongly typed table configuration.

How do I refresh a paginated model list after executing a row or toolbar action?▼

Refreshing a paginated model list after mutations uses DataTableRef or tableOptions.onActionExecuted to trigger data reloads and handle post-action completion logic directly within the table view.

Can I build embedded tables and custom row-click navigation for paginated lists?▼

Embedded tables and custom row-click navigation are supported for paginated lists, allowing you to wire row actions, CRUD toolbars, and specific click behaviors within the tableOptions configuration.

Does this approach support filtering and sorting alongside CRUD toolbar actions?▼

Filtering, sorting, and selection are fully supported alongside CRUD toolbar actions by defining these behaviors inside the strongly typed tableOptions object rather than cluttering the page component.

Why should I move table behavior out of the page component for frontend list views?▼

Moving table behavior out of the page component prevents list-page layout, table configuration, and action handling from mixing, ensuring frontend list views remain consistent, strongly typed, and easy to update.

Related Skills

Explore More Software Engineering Skills→
wildwasserwildwasser
35

obsidian-bases

Create and edit YAML-based Obsidian Base files with multiple views.

Community
Intermediate
MadAppGangMadAppGang
278

tanstack-query

Manage server state and data fetching in React with TanStack Query v5.

Official
Intermediate
slingr-stackslingr-stack

frontend-helpers

Standardize Drumr frontend helper usage for navigation, toolbars, and queries.

Official
Advanced
omakeiomakei
2

nuxt-tables

Create Nuxt 4 data tables with a reusable column builder and DataTable component.

Community
Intermediate