7.4 Sub-Taible UI Navigation

You understand sub-taibles and how to work with parent-child data. Now let's master the UI navigation—the visual elements, interaction patterns, and efficient workflows for moving between parent and child views.

This section is your complete guide to the sub-taible user interface.

---

The Parent View: What You See

When viewing a parent taible that contains sub-taible columns, here's what the interface looks like.

Sub-Taible Column Appearance

Sub-taible columns appear like any other column in your taible, with a column header and cells containing data.

Visual indicators:

• Column header: Shows the column name you gave it (like "Order Items")
• Cell content: Displays the data stored in the column (often shows count like "[3 items]")
• Standard appearance: Consistent with other column types in your taible

Parent Taible View

Orders taible showing sub-taible columns. Hover over the "Order Items" cells to see navigation buttons.

Order ID	Customer	Order Items	Total
1001	John	[3 items]	$95
1002	Sarah	[5 items]	$280
1003	Mike	[0 items]	$0
1004	Lisa	[1 item]	$50

Tip: Hover over any "Order Items" cell to reveal the navigation button

---

Navigation Button

The key feature that makes sub-taibles interactive is the navigation button that appears when you hover over a sub-taible cell.

Navigation Button Example

Hover over the cell below to see the navigation button appear.

[3 items]

What happens on click:

• Opens the child taible view
• Shows only children of this parent row
• URL changes to include parent filter

How it works:

1. Move your mouse over a sub-taible cell
2. Navigation button appears on the right side (square arrow icon)
3. Click the button to open the child taible
4. View opens showing only children of this parent row

What happens on click:

• Opens the child taible in a new view
• Automatically filters to show only this parent's children
• URL changes to include the parent row filter
• You can edit, add, or review child rows

---

The Child View: What You See

After clicking the navigation button, you enter the child view.

Child View Header

The header shows you where you are and provides navigation back to the parent.

Child View Header

When you navigate to a child taible, the header shows your location and provides a way to go back.

Orders / Order Items

Header Components:

• Back Button (←): Returns to parent taible
• Breadcrumb: "Orders / Order Items" shows parent-child relationship

Note: The breadcrumb format is always "Parent Taible / Child Taible"

Header components:

• Back button (←): Click to return to the parent taible
• Breadcrumb: Shows "Parent Taible / Child Taible" to confirm your location

---

Complete Child View

Here's what a full child taible view looks like:

Complete Child View

Full child taible view showing only items for Order #1001.

Orders / Order Items

Product Name	Quantity	Unit Price	Total	Status
Product A	2	$10.00	$20.00	Shipped
Product B	1	$20.00	$20.00	Pending
Product C	3	$15.00	$45.00	Shipped

Showing 3 of 3 rows

Features:

• Header shows breadcrumb and back button
• Grid shows all child rows for this parent
• Footer shows filtered row count
• Add Row button creates new child linked to this parent

What you can do:

• ✅ View all children for this specific parent
• ✅ Edit cells in manual columns
• ✅ See results from calculated columns
• ✅ Watch cell states (Processing, Done, Failed, Skipped)
• ✅ Sort and resize columns
• ✅ Delete rows
• ✅ Add new child rows (automatically linked to this parent)

Parent link is automatic:

• New rows are automatically linked to the current parent
• You don't see a "parent" column in the grid
• The link is stored internally and shown in the breadcrumb

---

Understanding URLs

URLs change when you navigate between parent and child views. Understanding this helps you bookmark views and share links with your team.

URL Structure for Navigation

Understanding how URLs change when navigating between parent and child views.

PARENT TAIBLE

/taibles/orders_table_id

Shows all parent rows (all orders)

↓ Click navigation button

CHILD TAIBLE (FILTERED)

/taibles/order_items_table_id?parentRow=1001

Shows only children of parent row #1001

↓ Click back button or remove ?parentRow

CHILD TAIBLE (ALL CHILDREN)

/taibles/order_items_table_id

Shows all children from all parents (no filter)

Key Points:

• ?parentRow= parameter filters children to a specific parent
• Without this parameter, you see all children from all parents
• You can bookmark URLs for quick access to specific views
• Share URLs with team members to show exact data

Three URL patterns:

1. Parent taible: /taibles/orders_table_id

   • Shows all parent rows

2. Child taible (filtered): /taibles/order_items_table_id?parentRow=1001

   • Shows only children of parent row #1001
   • Created when you click navigation button from parent cell

3. Child taible (all): /taibles/order_items_table_id

   • Shows all children from all parents
   • Access by navigating directly to child taible from overview

Practical uses:

• Bookmark filtered views you access frequently
• Share specific parent-filtered URLs with team members
• Copy URLs to documentation or notes
• Navigate directly by pasting URLs

---

Navigation Workflows

Common patterns for working efficiently with parent-child navigation.

Workflow 1: Review Multiple Parents' Children

Goal: Check items for several orders

Navigation Workflow

Step-by-step flow for reviewing multiple parents' children.

1. Start: Parent Taible (Orders)

View all parent rows

↓ Hover on Order #1001, click navigation button

2. Child View (Order #1001 Items)

Review items, edit if needed

↓ Click back button (←)

3. Back to: Parent Taible (Orders)

Find next order to review

↓ Hover on Order #1002, click navigation button

4. Child View (Order #1002 Items)

Review items, edit if needed

↓ Click back button (←)

5. Back to: Parent Taible (Orders)

Continue with next order...

Alternative: Bulk Operations Across All Parents

1. Taibles Overview

Navigate to "Order Items" directly

↓ Click on child taible

2. Child View (All Order Items)

See items from all parents • Apply filters • Bulk edit

When to use each approach:

Parent → Child: Reviewing or editing children specific to each parent

Direct Child Access: Bulk operations across multiple parents

Steps:

1. Start in parent taible (Orders)
2. Hover over first parent row's sub-taible cell
3. Click navigation button
4. Review children in filtered view
5. Click back button (←)
6. Repeat for next parent

Best for: Reviewing or editing children specific to each parent order

---

Workflow 2: Bulk Operations Across All Parents

Goal: Update items across multiple orders at once

Steps:

1. Navigate to child taible directly from taibles overview
   • Don't go through a parent cell
   • Click on "Order Items" in the taibles list
2. View ALL children from all parents
3. Use Filter button to narrow down items
   • Example: Filter where status = "Pending"
4. Select multiple rows
5. Make bulk changes

Best for:

• Operations spanning multiple parents
• Finding items across all orders
• Bulk updates or deletions
• Reporting and analysis

---

Workflow 3: Add Children to Specific Parents

Goal: Add new items to a specific order

Steps:

1. Navigate to parent taible
2. Find the parent row
3. Click navigation button to open filtered child view
4. Click "Add Row" button at bottom
5. New row appears, already linked to this parent
6. Enter data and save

Advantages:

• Parent link is automatic (no manual selection needed)
• Context is clear (you know which order you're adding to)
• Fast for adding multiple items to same parent

---

Workflow 4: Monitor Processing Across Children

Goal: Watch automation status on child rows

When you have calculated columns running in child rows, you can monitor their progress in real-time.

Cell states you'll see:

• ✅ Done (green checkmark) - Completed successfully
• ⏳ Processing (blue spinner) - Currently running
• ⏸ Idle (gray) - Waiting to start
• ❌ Failed (red X) - Error occurred
• ⏭ Skipped (gray) - Condition not met

Real-time updates:

• Cells update automatically as automation runs
• No need to refresh the page
• Watch progress across all child rows
• See which items are processing, done, or failed

Navigate to parent:

• Parent cells can show aggregate status
• Example: "2 of 3 items processed"
• Updates as children complete

---

Filtering and Searching

How filters work in parent and child views.

Automatic Parent Filtering

When you click the navigation button in a parent cell:

• The URL includes ?parentRow=<row_id>
• Child taible automatically shows only this parent's children
• This filter is automatic and cannot be removed in this view
• The row count at the bottom confirms filtered results

Example: "Showing 3 of 3 rows" means you're viewing 3 children for this specific parent.

---

Adding Additional Filters

You can add more filters on top of the automatic parent filter.

Steps:

1. Click "Filter" button in child view toolbar
2. Select a column to filter by
3. Choose an operator (equals, contains, greater than, etc.)
4. Enter a value
5. Apply the filter

Result: Child rows are further narrowed by your criteria

Useful for:

• Large numbers of children (100+ items per parent)
• Finding specific child rows
• Focusing on a subset (pending items, high-value items, etc.)

---

Viewing All Children (No Parent Filter)

To see children from all parents:

Navigate directly to the child taible:

• From taibles overview, click on the child taible name
• Don't use the navigation button in a parent cell

URL: /taibles/order_items_table_id (no ?parentRow= parameter)

What you see:

• All child rows from every parent
• Total row count includes all parents
• No automatic parent filtering

Now you can:

• Filter by any child column across all parents
• Search across entire dataset
• Perform bulk operations
• Generate reports

---

Best Practices for Navigation

✅ Do This

1. Use the Back Button for Quick Returns

• Click the ← arrow in header to return to parent view
• Or use your browser's back button
• Simple and reliable navigation

2. Bookmark Frequent Views

• Save URLs for views you access often
• Share bookmarks with team members
• Quick access to specific filtered views

3. Check the Header to Know Where You Are

• Look at breadcrumb format: "Parent / Child"
• Confirms which taible you're viewing
• Shows the parent-child relationship

4. Use Direct Child Access for Bulk Work

• Navigate directly to child taible from taibles overview
• Better for cross-parent operations
• Faster for bulk updates or analysis

5. Pay Attention to Row Counts

• Check "Showing X of Y rows" at bottom
• Confirms how many children you're viewing
• Helps verify filters are working correctly

---

❌ Avoid This

1. Don't Get Lost in Navigation

• Always check the header breadcrumb
• Note whether you're in parent or child view
• Use back button if unsure

2. Don't Forget Which Parent You're Viewing

• In filtered child view, check URL for ?parentRow=
• Remember which parent's children you're editing
• Avoid making changes to wrong parent's data

3. Don't Navigate When Direct Access Is Better

• For bulk operations, access child taible directly
• Don't click through multiple parents unnecessarily
• Choose the right access method for your task

4. Don't Lose Track of Your Work

• Use browser tabs to reference multiple views
• Bookmark important filtered views
• Keep track of which orders/parents you've reviewed

---

Visual Indicators and States

Understanding what you see in the UI.

Column Headers

Sub-taible columns display with a standard column header showing:

• Column name you assigned
• Column type icon (consistent with other column types)
• Any active sorting indicators

---

Cell States for Calculated Columns

If your child taible has calculated columns running automation, you'll see state indicators:

Column headers show aggregate status:

• "2 running, 1 failed" - Summary across all rows
• Click header to see details

Cell states (for individual cells):

• Processing (blue spinner)
• Done (green checkmark)
• Failed (red X mark)
• Idle (gray)
• Skipped (gray badge)

These states help you monitor automation progress across child rows.

---

Empty Child View

When a parent has no children yet:

You'll see:

• Empty grid (no rows)
• Header still shows breadcrumb (Parent / Child)
• "Add Row" button available at bottom

To add first child:

• Click "Add Row" at bottom
• New row appears, already linked to parent
• Enter data and save

---

Summary: Navigation Mastered

You now understand:

✅ Parent View UI

• Sub-taible column appearance
• Navigation button on hover
• Click behavior to access children
• URL structure with parent parameter

✅ Child View UI

• Header with breadcrumb (Parent / Child)
• Back button to return to parent
• Row count display at bottom
• Add Row button
• Full grid functionality

✅ Navigation Workflows

• Review children from multiple parents
• Edit children across all parents
• Add children to specific parents
• Monitor processing in child rows

✅ Filtering

• Automatic parent filtering via URL parameter
• Direct child access for all-parent view
• Filter button for additional criteria
• Row count confirmation

✅ URL Navigation

• Understand parent filter parameter
• Bookmark specific views
• Share URLs with team

✅ Best Practices

• Use back button for returns
• Check header for context
• Choose right access method (filtered vs. direct)
• Bookmark frequent views

---

The Complete Navigation Flow

Parent to filtered children:

1. Parent View (Orders)
   ↓ Hover on row, click navigation button

2. Child View (Order #1001 Items - Filtered)
   ↓ Edit, add, review
   ↓ Click ← Back button

3. Parent View (Orders)
   ↓ Find different order
   ↓ Hover and click navigation button

4. Child View (Order #1002 Items - Filtered)
   ↓ Edit, add, review
   ↓ Click ← Back button

5. Parent View (Orders)

Direct to all children:

1. Taibles Overview
   ↓ Click "Order Items" in list

2. Child View (All Order Items - No Filter)
   ↓ See items from all parents
   ↓ Apply filters as needed
   ↓ Bulk edit across parents

Straightforward, reliable navigation ✓

---

🎉 Congratulations! You've mastered sub-taible navigation. You can now move between parent and child views, understand the filtering system, and work productively with parent-child relationships.

You're ready to build and navigate multi-level data automations! 🚀