wok-ui-table

Render configurable data tables with typed row bindings and checkbox columns.

Updated Sep 14, 2023
One-click install
npx skills add https://github.com/PeakTai/wok-ui --skill wok-ui-table
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wok-ui-table
Source: https://github.com/PeakTai/wok-ui/tree/main/skills/wok-ui-table
Command: npx skills add https://github.com/PeakTai/wok-ui --skill wok-ui-table

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The wok-ui table module provides a composable, type-safe data grid for rendering tabular data with built-in support for normal columns, index columns, and checkbox-based selection, along with optional borders for clearer visuals.

Core Features & Use Cases

  • Data-binding with generics to render typed rows
  • Normal columns, index column, and checkbox column
  • Optional bordered table styling for clearer UI
  • Use cases include admin dashboards, data lists, and editable grids

Quick Start

Mount a Table by creating a data list and configuring columns, then mount it to a DOM element.

Frequently Asked Questions about wok-ui-table

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

FAQPage Schema
How do I render a TypeScript data table with typed row bindings?▼

To render a TypeScript data table with typed row bindings, configure a generic data list and define columns using Table components, then mount the table to a DOM element. This ensures type-safe rows for your tabular data.

Can I add a checkbox selection column to my data table?▼

Yes, you can add a checkbox selection column by implementing the TableCheckboxColumn component. It supports checkbox-based selection scenarios natively alongside normal and index columns within the same type-safe grid.

Does this data table solution support bordered layouts for admin dashboards?▼

Yes, the data table solution supports bordered layouts for admin dashboards by providing an optional bordered styling option. This delivers clearer visual boundaries for data lists and editable grids.

How do I display an index column in a TypeScript data grid?▼

You can display an index column in a TypeScript data grid by using the TableIndexColumn component within your table configuration. It integrates seamlessly with generic typed rows to provide row numbering.

Can table cells render arbitrary modules in a TypeScript data table?▼

Yes, table cells can render arbitrary modules in a TypeScript data table. The TableColumn implementation supports content cells that render custom modules, enabling flexible UI compositions within typed row bindings.