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.