---
name: 'figma-datatable-generator'
description: 'Generates Wangsvue DataTables from Figma, including toolbars, bulk actions, search, filter, and pagination. Invoke when converting complex table designs from Figma.'
---

# Figma DataTable Generator

This skill specializes in converting Figma design into feature-rich Wangsvue `DataTable` modules. It handles toolbar button integration, bulk actions, and server-side table configurations.

## 🚨 Mandatory Architectural Principles

- **Business Logic Placement**: All table logic (columns, fetch functions, state) MUST be in `components/modules/`.
- **Component Exclusivity**: ONLY use WangsVue components.

## 🛠️ Figma Metadata Interpretation

### 1. Toolbar Generation

When frames contain lists of buttons/instances (e.g., `Button Search`, `Button Filter`, `Button View Log`):

#### Toolbar Layout (Right Side)

Group the buttons identified in the Figma context in a flex container on the right side. These buttons are **optional** and should only be generated if they exist in the metadata:

- **Search**: `<ButtonSearch :table-name="tableName" />` (Invoke if `Button Search` or `Input Search` instance is found).
- **Filter**: `<ButtonFilter :table-name="tableName" />` (Invoke if `Button Filter` instance is found).
- **Download**: `<ButtonDownload :table-name="tableName" file-name="[EntityName]" />` (Invoke if `Button Download` or `Export` instance is found).
- **View Log**: `<ButtonViewLog />` (Invoke if `Button View Log` instance is found).
- **Primary Action**: A generic `<Button />` (e.g., "Add", "Create"). Map the `label`, `icon`, and `severity` based on the Figma instance properties (e.g., `severity="primary"` for main actions).

#### Toolbar Layout (Left Side) - ButtonBulkAction

Include `<ButtonBulkAction />` on the left side of the toolbar if:

1. A frame named **"Bulk action"** or similar exists in the metadata.
2. **OR** the first column of the table contains a checkbox selection (TH with checkbox or Table Data with checkbox).

### 2. DataTable Configuration

Identify all table headers by finding instances named **"TH"** in the Figma metadata. For each "TH" instance, invoke `get_design_context` to extract precise configuration:

- **Column Mapping**:

  - `header`: The text content found within the `<p>` tag (e.g., "Device Name").
  - `field`: camelCase version of the `header` text (e.g., `deviceName`).
  - `sortable`: Set to `true` if the `get_design_context` code contains an element with `data-name="arrow-up-down-line"`. Otherwise, set to `false` or omit.
  - `dateFormatOptions`: For columns containing date/time values, provide this object. Set `showDate: true` to display the date and `showTime: true` if time values are present in the design. Omit for non-date columns.
  - `bodyComponent`:
    - Use `BadgeGroup` if a column contains multiple `Badge` instances or text like `+% more`. Reference the `template` section in `DataTable` documentation via `mcp_wangsvue-docs` and `BadgeGroup` for correct implementation.
    - Use `Badge` if a column contains a single `Badge` instance. Especially for Badge contains Statuses value, set the `format` to `nowrap`.
    - Use `Image` if a column contains an image. Provide the src from the specified field, e.g., `:src="item.imageUrl"` and set the `size` to `small`.

- **Table Props**:
  - `lazy`: Always `true` for table with pagination, unless the user specifies otherwise.
  - `use-paginator`: Set to `true` if the Figma metadata contains a pagination component (e.g., `Pagination`). Otherwise, set to `false`.
  - `v-model:selected-data`: Required if `ButtonBulkAction` is present.
  - `fetch-function`: Map to a service method from the API services package (e.g., `@fewangsit/api-services-template` or as provided by the user in the prompt).
  - `data-key`: Use `_id` by default.
  - `use-option`: Set to `false` if you DO NOT find an element with `data-name="more-line"` or an ellipsis button in the Figma context. If found, leave as default (`true`) and provide the `:options` prop bound to a computed property or variable initialized with an empty array `[]`.

## 📋 Implementation Checklist

1. **Service Integration**: Import the relevant service and DTOs from the API services package (e.g., `@fewangsit/api-services-template` or as specified).
2. **State Management**:
   - `tableName`: Unique string (e.g., `entity-table`).
   - `selectedData`: Ref for bulk selection.
   - `columns`: Typed as `TableColumn<T>[]`.
3. **Template Structure**:
   ```html
   <div class="flex flex-col gap-4" data-wv-name="[module-name]">
     <div class="flex items-center justify-between gap-2">
       <ButtonBulkAction ... />
       <!-- Left Side -->
       <div class="flex items-center gap-2 ml-auto">
         <!-- Right Side Buttons -->
         <ButtonSearch ... />
         <ButtonFilter ... />
         <ButtonDownload ... />
         <ButtonViewLog ... />
         <button ... />
       </div>
     </div>
     <DataTable ... />
   </div>
   ```

## 🔍 Discovery Protocol

1. **Call `get_metadata`** to identify the overall structure and find all instances named **"TH"**.
2. **Call `get_design_context`** for each identified **"TH"** node ID to extract the header text and sortable state.
3. **Call `list_all_components`** to verify toolbar components.
4. **Call `analyze_component`** for `datatable` and toolbar buttons to check prop requirements.
5. **Call `resolve_type_definition`** for DTOs and item types from the API service package.