> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# View component

> The view component is a specialized tool for surfacing dashboard data — configure different professional view types in a dashboard to build interfaces purpose-built for specific business scenarios.

## Overview

The view component is a specialized tool for surfacing dashboard data. Configure different professional view types to **build interfaces purpose-built for specific business scenarios**.

**Common dashboard view scenarios**:

* **Specialized business views**: pick a view type that matches the data viz need.
  * **Gallery view**: product showcase, case library, knowledge base — image-heavy content.
  * **Kanban view**: agile dev, task management, workflow — drag-driven flow management.
  * **Gantt view**: project management, progress tracking, resource scheduling — timeline.
  * **Calendar view**: schedules, meetings, events — time-organized content.
  * **Grid view**: classic data viewing, editing, filtering, sorting.

## Workflow

### **Add a view component**

1. Open the AI Table app module.
2. From the left nav, pick the page.
3. Find **View** in the component category, then pick **Grid, Kanban, Calendar, Gantt or Gallery**.

### Basic config

After adding, in the right panel:

* **Title**
  * Default is "View"; rename freely.
* **Data**
  * **Table and range**: pick a specific table and data range.
    * **All data** lets you set additional filter conditions.
* **Field management**
  * **Visible fields**: control which fields show, and the order.

    * Click the icon next to a field to show / hide.
    * Drag the icon on the left to reorder.
    * *Note: this controls display and order only — you can't add, edit, or delete the fields themselves here.*
* **View-type-specific config**

  Each view type has its own settings:

  * **Grid view**: grouping, sorting, row height density.
  * **Kanban view**: group-by field, card cover field (needs an attachment field), display mode (regular / compact), show field names, sorting.
  * **Gantt view**: start date field, end date field, title field, color field, work-days-only toggle, sorting.
  * **Gallery view**: card cover field (needs an attachment field), show field titles, sorting.
  * **Calendar view**: sorting, start date field, end date field, title field, color field.

### Custom config

* **Toolbar display**

  Pick which interactive buttons appear in the top toolbar:

  * **Filter**: filter button — quick filter setup.
  * **Sort**: sort button — sort by field.
  * **Find**: search box — keyword search.
  * **Group**: group button — group config.
* **Custom style**
  * **Background color**: component background, from swatch.
  * **Border**:
    * **Border color**: from preset or custom.
    * **Border thickness**: `1px`, `2px` etc. from dropdown.
  * **Title color**: separate color for the component title — contrast with background.
* **Permissions**
  * **Record actions**
    * **Allow add records**: when checked, an **Add record** button shows in the top-left.

  * **Custom button label**: rename the button — "Add record" → "New project", "Add customer", etc.
* **Custom buttons**
  * Toggle on to add custom buttons in the view. Like the button component, supports configuring click actions.

  * Duplicate / delete buttons. With multiple, drag up/down to reorder.

### **Component management**

* **Action menu**

  Select the component, click the icon at the top-right:

  * **Configure**: open config panel.
  * **Duplicate**: copy on the same page.
  * **Copy to**: copy to another page in this app.
  * **Delete**: remove from the page.
* **Resize and move**

  * **Resize**: drag the bottom-right handle.
  * **Move**: hover, hold, drag.

## FAQ

#### Q: Max view components per page (Grid, Card, Gallery, Gantt, Calendar combined)?

A: 10.

#### Q: Max custom buttons?

A: 10.