@nocobase/plugin-ai 2.1.0-alpha.25 → 2.1.0-alpha.27

package/dist/ai/docs/nocobase/tutorials/v2/02-data-modeling.md

@@ -0,0 +1,319 @@
+# Chapter 2: Data Modeling — Two Tables for a Complete Ticket System
+
+In the last chapter, we installed NocoBase and got familiar with the interface. Now it's time to build the skeleton of our HelpDesk system — the **data model**.
+
+This chapter creates two [collections](/data-sources/data-modeling/collection) — Tickets and Categories — and configures [field types](/data-sources/data-modeling/collection-fields) ([single-line text](/data-sources/data-modeling/collection-fields/basic/input), [dropdown](/data-sources/data-modeling/collection-fields/choices/select), [many-to-one](/data-sources/data-modeling/collection-fields/associations/m2o) relations). The data model is the foundation: figure out what data you need and how it's related, then building pages and setting permissions becomes straightforward.
+
+
+## 2.1 What Are Collections and Fields
+
+If you've used Excel before, this will feel familiar:
+
+| Excel Concept | NocoBase Concept | Description |
+|---------------|-----------------|-------------|
+| Worksheet | Collection | A container for one type of data |
+| Column header | Field | An attribute describing the data |
+| Each row | Record | One specific piece of data |
+
+![02-data-modeling-2026-03-11-08-32-41](https://static-docs.nocobase.com/02-data-modeling-2026-03-11-08-32-41.png)
+
+For example, our "Tickets" collection is like an Excel spreadsheet — each column is a field (Title, Status, Priority...), and each row is one ticket record.
+
+But NocoBase is much more powerful than Excel. It supports multiple **collection types**, each with different built-in capabilities:
+
+| Type | Best For | Examples |
+|------|----------|----------|
+| **General** | Most business data | Tickets, Orders, Customers |
+| **Tree** | Hierarchical data | Category trees, Org charts |
+| Calendar | Date-based events | Meetings, Schedules |
+| File | Attachment management | Documents, Images |
+
+Today we'll use **General** and **Tree** collections. We'll cover the others when needed.
+
+**Enter Data Source Manager**: Click the **"Data Source Manager"** icon in the bottom-left corner (the database icon next to the gear). You'll see the "Main [data source](/data-sources)" — this is where all our tables live.
+
+![02-data-modeling-2026-03-11-08-35-08](https://static-docs.nocobase.com/02-data-modeling-2026-03-11-08-35-08.png)
+
+
+## 2.2 Creating the Core Table: Tickets
+
+Let's jump right in and create the heart of our system — the Tickets table.
+
+### Create the Table
+
+1. On the Data Source Manager page, click **"Main data source"** to enter
+
+![02-data-modeling-2026-03-11-08-36-06](https://static-docs.nocobase.com/02-data-modeling-2026-03-11-08-36-06.png)
+
+2. Click **"Create collection"**, then select **"General collection"**
+
+![02-data-modeling-2026-03-11-08-38-52](https://static-docs.nocobase.com/02-data-modeling-2026-03-11-08-38-52.png)
+
+3. Collection name: `tickets`, Display name: `Tickets`
+
+![02-data-modeling-2026-03-11-08-40-34](https://static-docs.nocobase.com/02-data-modeling-2026-03-11-08-40-34.png)
+
+When creating a table, the system checks a set of **system fields** by default. These automatically track metadata for every record:
+
+| Field | Description |
+|-------|-------------|
+| ID | Primary key, unique identifier |
+| Created at | When the record was created |
+| Created by | Who created the record |
+| Last updated at | When it was last modified |
+| Last updated by | Who last modified it |
+
+Keep these defaults as-is — no manual management needed. You can uncheck them if a specific scenario doesn't need them.
+
+### Adding Basic Fields
+
+The table is created. Now let's add fields. Click **"Configure fields"** on the Tickets table, and you'll see the default system fields already listed.
+
+![02-data-modeling-2026-03-11-08-58-48](https://static-docs.nocobase.com/02-data-modeling-2026-03-11-08-58-48.png)
+
+![02-data-modeling-2026-03-11-08-59-47](https://static-docs.nocobase.com/02-data-modeling-2026-03-11-08-59-47.png)
+
+Click the **"Add field"** button in the top-right corner to expand a dropdown of field types — pick the one you want to add.
+
+![02-data-modeling-2026-03-11-09-00-22](https://static-docs.nocobase.com/02-data-modeling-2026-03-11-09-00-22.png)
+
+We'll add the ticket's own fields first; relation fields come later.
+
+**1. Title (Single line text)**
+
+Every ticket needs a short title to summarize the issue. Click **"Add field"** → select **"Single line text"**:
+
+![02-data-modeling-2026-03-11-09-01-00](https://static-docs.nocobase.com/02-data-modeling-2026-03-11-09-01-00.png)
+
+- Field name: `title`, Display name: `Title`
+- Click **"Set validation rules"**, add a **"Required"** rule
+
+![02-data-modeling-2026-03-11-09-02-40](https://static-docs.nocobase.com/02-data-modeling-2026-03-11-09-02-40.png)
+
+**2. Description (Markdown(Vditor))**
+
+For detailed problem descriptions with rich formatting — images, code blocks, etc. Under **"Add field"** → **"Media"** category, you'll find three options:
+
+| Field Type | Features |
+|-----------|----------|
+| Markdown | Basic Markdown, simple styling |
+| Rich Text | Rich text editor with attachment uploads |
+| **Markdown(Vditor)** | Most feature-rich: WYSIWYG, instant rendering, and source code editing modes |
+
+We'll go with **Markdown(Vditor)**.
+
+![02-data-modeling-2026-03-11-09-09-58](https://static-docs.nocobase.com/02-data-modeling-2026-03-11-09-09-58.png)
+
+- Field name: `description`, Display name: `Description`
+
+![02-data-modeling-2026-03-11-09-10-50](https://static-docs.nocobase.com/02-data-modeling-2026-03-11-09-10-50.png)
+
+**3. Status (Single select)**
+
+![02-data-modeling-2026-03-11-09-12-00](https://static-docs.nocobase.com/02-data-modeling-2026-03-11-09-12-00.png)
+
+Tickets go through stages from submission to completion, so we need a status field to track progress.
+
+- Field name: `status`, Display name: `Status`
+- Add option values (each option needs a "Value" and "Label"; color is optional):
+
+| Value | Label | Color |
+|-------|-------|-------|
+| pending | Pending | Orange |
+| in_progress | In Progress | Blue |
+| completed | Completed | Green |
+
+![02-data-modeling-2026-03-11-09-17-44](https://static-docs.nocobase.com/02-data-modeling-2026-03-11-09-17-44.png)
+
+Fill in the options and save first. Then click **"Edit"** on this field again — now you can set the "Default value" to **"Pending"**.
+
+![02-data-modeling-2026-03-11-09-20-28](https://static-docs.nocobase.com/02-data-modeling-2026-03-11-09-20-28.png)
+
+![02-data-modeling-2026-03-11-09-22-34](https://static-docs.nocobase.com/02-data-modeling-2026-03-11-09-22-34.png)
+
+> The first time you create the field, there are no options yet, so you can't pick a default value — you need to save first, then come back to set it.
+
+> Why a single select? Because status is a fixed set of values. A dropdown prevents users from entering arbitrary text, keeping data clean.
+
+**4. Priority (Single select)**
+
+Helps distinguish urgency so the team can sort and tackle tickets efficiently.
+
+- Field name: `priority`, Display name: `Priority`
+- Add option values:
+
+| Value | Label | Color |
+|-------|-------|-------|
+| low | Low | |
+| medium | Medium | |
+| high | High | Orange |
+| urgent | Urgent | Red |
+
+At this point, the Tickets table has 4 basic fields. But — shouldn't a ticket have a "category"? Like "Network Issue" or "Software Bug"?
+
+We could make Category a dropdown, but you'd quickly run into a problem: categories can have sub-categories ("Hardware" → "Monitor", "Keyboard", "Printer"), and dropdowns can't handle that.
+
+We need **a separate table** for categories. And NocoBase's **Tree collection** is perfect for this.
+
+
+## 2.3 Creating the Categories Tree Table
+
+### What Is a Tree Collection
+
+A tree collection is a special type of table with built-in **parent-child relationships** — every record can have a parent node. This is ideal for hierarchical data:
+
+```
+Hardware          ← Level 1
+├── Monitor       ← Level 2
+├── Keyboard & Mouse
+└── Printer
+Software
+├── Office Apps
+└── System Issues
+Network
+Account
+```
+
+With a general collection, you'd have to manually create a "Parent Category" field to build this hierarchy. A **tree collection handles it automatically** and supports tree views, adding child records, and more.
+
+### Create the Table
+
+1. Go back to Data Source Manager, click **"Create collection"**
+2. This time, select **"Tree collection"** (not General!)
+
+![02-data-modeling-2026-03-11-09-26-07](https://static-docs.nocobase.com/02-data-modeling-2026-03-11-09-26-07.png)
+
+3. Collection name: `categories`, Display name: `Categories`
+
+![02-data-modeling-2026-03-11-09-26-55](https://static-docs.nocobase.com/02-data-modeling-2026-03-11-09-26-55.png)
+
+> After creation, you'll notice the table has two extra relation fields — **"Parent"** and **"Children"** — beyond the standard system fields. This is the tree collection's special power. Use Parent to access the parent node and Children to access all child nodes, without any manual setup.
+
+![02-data-modeling-2026-03-11-09-27-40](https://static-docs.nocobase.com/02-data-modeling-2026-03-11-09-27-40.png)
+
+### Add Fields
+
+Click **"Configure fields"** to enter the field list. You'll see the system fields plus the auto-generated Parent and Children fields.
+Click **"Add field"** in the top-right:
+
+**Field 1: Category Name**
+
+1. Select **"Single line text"**
+2. Field name: `name`, Display name: `Name`
+3. Click **"Set validation rules"**, add a **"Required"** rule
+
+**Field 2: Color**
+
+1. Select **"Color"**
+2. Field name: `color`, Display name: `Color`
+
+![02-data-modeling-2026-03-11-09-28-59](https://static-docs.nocobase.com/02-data-modeling-2026-03-11-09-28-59.png)
+
+The Color field gives each category its own visual identity — it will make the interface much more intuitive later.
+
+![02-data-modeling-2026-03-11-09-29-23](https://static-docs.nocobase.com/02-data-modeling-2026-03-11-09-29-23.png)
+
+With that, both tables' basic fields are configured. Now let's link them together.
+
+
+## 2.4 Back to Tickets: Adding Relation Fields
+
+> **Relation fields can be a bit abstract at first.** If it doesn't click right away, feel free to skip ahead to [Chapter 3: Building Pages](./03-building-pages) and see how data is displayed in practice, then come back here to add the relation fields.
+
+Tickets need to be linked to a category, a submitter, and an assignee. These are called **relation fields** — instead of storing text directly (like "Title" does), they store the ID of a record in another table, and use that ID to look up the corresponding record.
+
+Let's look at a specific ticket — on the left are the ticket's attributes. "Category" and "Submitter" don't store text; they store an ID. The system uses that ID to find the exact matching record from the tables on the right:
+
+
+![02-data-modeling-2026-03-12-00-50-10](https://static-docs.nocobase.com/02-data-modeling-2026-03-12-00-50-10.png)
+
+On the interface, you see names like "Network" and "Alice", but behind the scenes it's all connected by IDs. **Multiple tickets can point to the same category or the same user** — this relationship is called **[Many-to-one](/data-sources/data-modeling/collection-fields/associations/m2o)**.
+
+### Adding Relation Fields
+
+Go back to Tickets → "Configure fields" → "Add field", select **"Many to one"**.
+
+![02-data-modeling-2026-03-12-00-52-39](https://static-docs.nocobase.com/02-data-modeling-2026-03-12-00-52-39.png)
+
+You'll see these configuration options:
+
+| Option | Description | How to Fill |
+|--------|-------------|-------------|
+| Source collection | Current table (auto-filled) | Don't change |
+| **Target collection** | Which table to link to | Select the target |
+| **Foreign key** | The linking column stored in the current table | Enter a meaningful name |
+| Target collection key field | Defaults to `id` | Keep as-is |
+| ON DELETE | What happens when the target record is deleted | Keep as-is |
+
+![02-data-modeling-2026-03-12-00-58-38](https://static-docs.nocobase.com/02-data-modeling-2026-03-12-00-58-38.png)
+
+> The foreign key defaults to a random name like `f_xxxxx`. We recommend changing it to something meaningful for easier maintenance. Use lowercase with underscores (e.g., `category_id`) instead of camelCase.
+
+Add the following three fields:
+
+**5. Category → Categories table**
+
+- Display name: `Category`
+- Target collection: Select **"Categories"** (if not in the list, type the name and it will be auto-created)
+- Foreign key: `category_id`
+
+**6. Submitter → Users table**
+
+Records who submitted this ticket. NocoBase has a built-in Users table — just link to it.
+
+- Display name: `Submitter`
+- Target collection: Select **"Users"**
+- Foreign key: `submitter_id`
+
+![02-data-modeling-2026-03-12-01-00-09](https://static-docs.nocobase.com/02-data-modeling-2026-03-12-01-00-09.png)
+
+**7. Assignee → Users table**
+
+Records who is responsible for handling this ticket.
+
+- Display name: `Assignee`
+- Target collection: Select **"Users"**
+- Foreign key: `assignee_id`
+
+![02-data-modeling-2026-03-12-01-00-22](https://static-docs.nocobase.com/02-data-modeling-2026-03-12-01-00-22.png)
+
+
+## 2.5 The Complete Data Model
+
+Let's review the full data model we've built:
+
+![02-data-modeling-2026-03-16-00-30-35](https://static-docs.nocobase.com/02-data-modeling-2026-03-16-00-30-35.png)
+
+`}o--||` represents a many-to-one relationship: "many" on the left, "one" on the right.
+
+
+## Summary
+
+In this chapter we completed the data modeling — the entire skeleton of our HelpDesk system:
+
+1. **Tickets** (`tickets`): 4 basic fields + 3 relation fields, created as a **General collection**
+2. **Categories** (`categories`): 2 custom fields + auto-generated Parent/Children fields, created as a **Tree collection** with built-in hierarchy support
+
+Key concepts we learned:
+
+- **Collection** = A container for one type of data
+- **Collection types** = Different types for different scenarios (General, Tree, etc.)
+- **Field** = A data attribute, created via "Configure fields" → "Add field"
+- **System fields** = ID, Created at, Created by, etc. — auto-checked when creating a table
+- **Relation field (Many-to-one)** = Points to a record in another table, linking tables together
+
+> You may notice that later screenshots already contain data — we pre-loaded test data for demonstration purposes. In NocoBase, all CRUD operations are done through the frontend pages. Chapter 3 covers building tables to display data, and Chapter 4 covers forms for data entry — stay tuned.
+
+
+## Next Chapter Preview
+
+The skeleton is ready, but the tables are still empty. In the next chapter, we'll build pages to make the data visible.
+
+See you in Chapter 3!
+
+
+## Related Resources
+
+- [Data Sources Overview](/data-sources) — Core data modeling concepts in NocoBase
+- [Field Types](/data-sources/data-modeling/collection-fields) — Complete field type reference
+- [Many-to-One Relations](/data-sources/data-modeling/collection-fields/associations/m2o) — Relationship configuration guide

package/dist/ai/docs/nocobase/tutorials/v2/03-building-pages.md

@@ -0,0 +1,240 @@
+# Chapter 3: Building Pages — From Blank to Functional
+
+In the last chapter, we built the skeleton of our data tables — but right now the data only lives in the "backend." Users can't see it at all. In this chapter, we'll bring our data **front and center**: create a [Table block](/interface-builder/blocks/data-blocks/table) to display ticket data, configure field visibility, sorting, [filtering](/interface-builder/blocks/filter-blocks/form), and pagination, turning it into a real, usable ticket list.
+
+## 3.1 What Is a Block
+
+In NocoBase, a **Block** is a building brick on a page. Want to show a table? Drop in a Table block. Need a form? Add a Form block. A single page can freely combine multiple blocks, and you can drag and drop to rearrange the layout.
+
+Common block types:
+
+| Type | Purpose |
+|------|---------|
+| Table | Displays multiple records in rows and columns |
+| Form | Lets users input or edit data |
+| Details | Shows the full information of a single record |
+| Filter Form | Provides filter criteria to narrow down data in other blocks |
+| Chart | Pie charts, line charts, and other visualizations |
+| Markdown | A section of custom text or instructions |
+
+Remember this analogy: **Blocks = building bricks**. We're about to use them to assemble our tickets page.
+
+## 3.2 Adding a Menu and Pages
+
+First, we need to create an entry point for "Tickets" in the system.
+
+1. Click the **[UI Editor](/get-started/how-nocobase-works)** toggle in the top-right corner to enter design mode (the entire page will show orange editable borders).
+2. Click the **"Add menu item"** button (`+` icon) in the top navigation bar, select **"Add group"**, and name it **"Tickets"**.
+3. The "Tickets" menu appears immediately in the top navigation bar. **Click on it** — a sidebar menu will expand on the left.
+4. In the sidebar, click the orange **"Add menu item"** button, select **"Modern page (v2)"**, and add two sub-pages one by one:
+   - **All Tickets** — displays all tickets
+   - **Categories** — manages category data
+
+![03-building-pages-2026-03-12-09-38-36](https://static-docs.nocobase.com/03-building-pages-2026-03-12-09-38-36.png)
+
+![03-building-pages-2026-03-12-09-41-26](https://static-docs.nocobase.com/03-building-pages-2026-03-12-09-41-26.png)
+
+> **Note**: You'll see both "Classic page (v1)" and "Modern page (v2)" options. This tutorial uses **v2** throughout.
+
+## 3.3 Adding a Table Block
+
+Now go to the "All Tickets" page and add a Table block:
+
+1. On the blank page, click **"Add block"**.
+2. Select **Data blocks -> Table**.
+3. In the [collection](/data-sources/data-modeling/collection) list that pops up, select **"Tickets"** (the table we created in the last chapter).
+
+![03-building-pages-2026-03-13-08-44-07](https://static-docs.nocobase.com/03-building-pages-2026-03-13-08-44-07.png)
+
+Once the Table block is added, you'll see an empty table on the page.
+
+![03-building-pages-2026-03-13-08-44-29](https://static-docs.nocobase.com/03-building-pages-2026-03-13-08-44-29.png)
+
+An empty table with no data isn't very useful for testing. Let's quickly add an "Add new" button so we can enter some test data:
+
+1. Click **"Configure actions"** in the top-right corner of the table, and check **"Add new"**.
+
+![03-building-pages-2026-03-17-14-58-39](https://static-docs.nocobase.com/03-building-pages-2026-03-17-14-58-39.png)
+
+2. Click the new **"Add new"** button, then in the popup select **Add block → Form (Add New) → Current collection**.
+
+![03-building-pages-2026-03-17-14-59-42](https://static-docs.nocobase.com/03-building-pages-2026-03-17-14-59-42.png)
+
+3. In the popup, click **"Configure fields"** and check the fields you need (Title, Status, Priority, etc.); click **"Configure actions"** and enable the **"Submit"** button.
+
+![03-building-pages-2026-03-17-15-00-54](https://static-docs.nocobase.com/03-building-pages-2026-03-17-15-00-54.png)
+
+![03-building-pages-2026-03-17-15-01-49](https://static-docs.nocobase.com/03-building-pages-2026-03-17-15-01-49.png)
+
+4. Fill in a few test tickets and submit — you'll see the data appear in the table.
+
+![03-building-pages-2026-03-17-15-03-04](https://static-docs.nocobase.com/03-building-pages-2026-03-17-15-03-04.png)
+
+> We'll cover form configuration in detail (field linkage, edit forms, detail popups, etc.) in [Chapter 4](/tutorials/v2/04-forms-and-details). For now, just being able to enter data is enough.
+
+## 3.4 Configuring Display Columns
+
+By default, a table won't automatically show all [fields](/data-sources/data-modeling/collection-fields). We need to manually choose which columns to display:
+
+1. On the right side of the Table block header, click **"Fields"**.
+2. Check the fields you want to show:
+   - **Title** — the ticket subject, visible at a glance
+   - **Status** — current processing progress
+   - **Priority** — urgency level
+   - **Category** — a relation field that will display the category name
+   - **Submitter** — who submitted the ticket
+   - **Assignee** — who is responsible
+3. Fields you don't need to display (like ID or Created at) can be left unchecked to keep the table clean.
+
+![03-building-pages-2026-03-13-08-47-18](https://static-docs.nocobase.com/03-building-pages-2026-03-13-08-47-18.png)
+
+> **Tip**: You can drag and drop to reorder the displayed fields. Put the most important ones — "Title" and "Status" — up front so key information is visible at a glance.
+
+### Relation Fields Showing IDs
+
+After enabling "Category," you'll notice the table shows category IDs (numbers) instead of names. That's because relation fields default to using ID as the title field. Two ways to fix this:
+
+**Option A: Change it in the column settings (current table only)**
+
+Click the column settings for the "Category" column and find **"Title field"**. Change it from ID to **Name**. This only affects the current Table block.
+
+![03-building-pages-2026-03-13-09-23-03](https://static-docs.nocobase.com/03-building-pages-2026-03-13-09-23-03.png)
+
+![03-building-pages-2026-03-13-09-24-44](https://static-docs.nocobase.com/03-building-pages-2026-03-13-09-24-44.gif)
+
+**Option B: Change it in the data source (global, recommended)**
+
+Go to **Settings -> [Data sources](/data-sources) -> Collections -> Categories**, and change the **"Title field"** to **Name**. All blocks referencing the Categories collection will then display names by default. After the change, you'll need to re-add the field on the page for it to take effect.
+
+![03-building-pages-2026-03-13-09-23-41](https://static-docs.nocobase.com/03-building-pages-2026-03-13-09-23-41.png)
+
+## 3.5 Adding Filtering and Sorting
+
+As tickets pile up, we'll need to quickly find specific ones. NocoBase provides several ways to filter data — let's start with the most common: the **Filter Form block**.
+
+### Adding a Filter Form
+
+1. On the All Tickets page, click **"Add block"** and select **Filter blocks -> Filter form**.
+2. In v2 pages, there's no collection selection step — the Filter form is added directly to the page.
+3. In the Filter form, click **"Fields"**. A list of all filterable data blocks on the current page will appear, e.g., `Table: Tickets #c48b` (the code after `#` is the block's UID, useful for distinguishing multiple blocks from the same collection).
+
+![03-building-pages-2026-03-13-08-48-37](https://static-docs.nocobase.com/03-building-pages-2026-03-13-08-48-37.png)
+
+4. Hover over a block name to expand its list of filterable fields. Click to add them: **Status**, **Priority**, **Category**.
+
+![03-building-pages-2026-03-13-09-25-44](https://static-docs.nocobase.com/03-building-pages-2026-03-13-09-25-44.png)
+
+5. Once added, users can type filter criteria and the table data will **update automatically in real time**.
+
+![03-building-pages-2026-03-13-09-27-23](https://static-docs.nocobase.com/03-building-pages-2026-03-13-09-27-23.gif)
+
+### Multi-Field Fuzzy Search
+
+What if you want a single search box to match across multiple fields at once?
+
+Click the settings icon in the top-right corner of a search field and you'll see **"Connect fields"**. It lists all searchable fields from each block on the page — by default, only "Title" is connected.
+
+![03-building-pages-2026-03-13-09-30-06](https://static-docs.nocobase.com/03-building-pages-2026-03-13-09-30-06.png)
+
+Select additional fields like **Description** so that a keyword search matches all of them simultaneously.
+
+You can even search through relation fields — click "Category," then in the next level check "Category Name." Now searches will also match against category names.
+
+![03-building-pages-2026-03-13-09-31-35](https://static-docs.nocobase.com/03-building-pages-2026-03-13-09-31-35.png)
+![03-building-pages-2026-03-13-09-32-20](https://static-docs.nocobase.com/03-building-pages-2026-03-13-09-32-20.png)
+
+> **Connect fields is powerful**: it works across multiple blocks and multiple fields. If your page has several data blocks, try adding more and experiment!
+
+### Don't Want Auto-Filtering?
+
+If you'd prefer users to click a button before filtering takes effect, click **"[Actions](/interface-builder/actions)"** at the bottom-right of the Filter form and enable the **"Filter"** and **"Reset"** buttons. Users will then need to click "Filter" to apply their criteria.
+
+![03-building-pages-2026-03-13-09-33-15](https://static-docs.nocobase.com/03-building-pages-2026-03-13-09-33-15.png)
+
+### Alternative: The Table's Built-in Filter Action
+
+Besides a dedicated Filter Form block, the Table block itself has a built-in **"Filter"** action. Click **"Actions"** above the Table block and enable **"Filter"**. A filter button will appear in the table toolbar. Clicking it opens a condition panel where users can filter data by field values directly.
+
+![03-building-pages-2026-03-13-09-34-25](https://static-docs.nocobase.com/03-building-pages-2026-03-13-09-34-25.png)
+![03-building-pages-2026-03-13-09-36-09](https://static-docs.nocobase.com/03-building-pages-2026-03-13-09-36-09.png)
+
+If you don't want users to hunt for fields every time they open the filter, you can pre-configure default filter fields in the Filter button's settings — so the most common criteria are ready to use right away.
+
+![03-building-pages-2026-03-13-09-38-37](https://static-docs.nocobase.com/03-building-pages-2026-03-13-09-38-37.png)
+
+> **Note**: The table's built-in Filter action currently **does not support fuzzy search** — it only handles exact matches and condition-based filtering. If you need fuzzy search, use the Filter Form block with "Connect fields" described above.
+
+### Setting Default Sorting
+
+We want the newest tickets to appear at the top:
+
+1. Click the **block settings** icon (three-line icon) in the top-right corner of the Table block.
+2. Find **"Set default sorting rules"**.
+3. Add a sort field: select **Created at**, set the order to **Descending**.
+
+![03-building-pages-2026-03-13-09-40-54](https://static-docs.nocobase.com/03-building-pages-2026-03-13-09-40-54.png)
+
+This way, newly submitted tickets always appear at the top, making them easier to handle.
+
+## 3.6 Configuring Row Actions
+
+Viewing a list isn't enough — we also need to click into tickets to see details and make edits.
+
+1. In the actions column, click the second "+" icon.
+2. Click to add actions: **View**, **[Edit](/interface-builder/actions/edit)**, **[Delete](/interface-builder/actions/delete)**.
+3. Each row will now have "View", "Edit", and "Delete" buttons in the actions column.
+
+![03-building-pages-2026-03-13-09-42-42](https://static-docs.nocobase.com/03-building-pages-2026-03-13-09-42-42.png)
+
+Clicking the "View" or "Edit" button opens a Drawer where we can place blocks to show or edit the full record. We'll configure that in detail in the next chapter. Clicking "Delete" removes the row.
+
+## 3.7 Adjusting Page Layout
+
+By now the page has both a Filter Form and a Table block, but they're stacked vertically by default — which may not look great. NocoBase lets you **drag and drop** to rearrange blocks.
+
+In design mode, hover over the drag handle at the top-left corner of a block (the cursor will change to a crosshair), then hold and drag.
+
+**Drag the Filter Form above the Table**: Grab the Filter Form block and move it toward the top edge of the Table block. When a blue guide line appears, release — the Filter Form will snap into place above the Table.
+
+**Drag filter fields onto the same row**: Inside the Filter Form, fields are stacked vertically by default. Drag "Priority" to the right of "Status" — when a vertical guide line appears, release. The two fields will sit side by side on one row, saving vertical space.
+
+> Almost everything in NocoBase supports drag-and-drop — action buttons, table columns, menu items, and more. Feel free to explore!
+
+## 3.8 Configuring the Categories Page
+
+Don't forget — we created a "Categories" sub-page back in section 3.2. Now let's add content to it. The setup is similar to the ticket list — add a Table block, check fields, configure actions — so we won't repeat every step. Just one key difference.
+
+Remember the "Categories" collection we created in Chapter 2? It's a **tree table** (supports parent-child hierarchy). To display the tree structure correctly, you need to enable a setting:
+
+1. Go to the "Categories" page and add a Table block, selecting the "Categories" collection.
+2. Click the Table block's **block settings** (three-line icon), find **"Tree table"**, and toggle it on.
+
+Once enabled, the table will display categories in an indented hierarchy showing parent-child relationships, instead of listing all records flat.
+
+3. Check the fields you want to display (e.g., Name, Description), and configure row actions ([Add new](/interface-builder/actions/add-new), Edit, Delete).
+4. **Layout tip**: Put "Name" in the first column and "Actions" in the second. The categories table doesn't have many fields, so a two-column layout is more compact and user-friendly.
+
+[Screenshot: Categories tree table configured]
+
+## Summary
+
+Congratulations! Our ticket system now has a proper **management interface**:
+
+- A clear menu structure (Tickets -> All Tickets / Categories)
+- A **Table block** displaying ticket data
+- A **Filter Form** for quick filtering by status, priority, and category
+- **Sorting rules** that order tickets by creation time, newest first
+- Row action buttons for convenient viewing and editing
+- A **tree table** displaying category hierarchy
+
+Easier than you expected, right? The entire process required zero lines of code — everything was done through drag-and-drop and configuration.
+
+## Next Chapter Preview
+
+Being able to "see" data isn't enough — users also need to **submit new tickets**. In the next chapter, we'll build Form blocks, configure field linkage rules, and enable change history to track every modification to a ticket.
+
+## Related Resources
+
+- [Blocks Overview](/interface-builder/blocks) — All block types explained
+- [Table Block](/interface-builder/blocks/data-blocks/table) — Table block configuration guide
+- [Filter Block](/interface-builder/blocks/filter-blocks/form) — Filter form setup