🖥️ The Interface — A Guided Tour

Understand each part of the screen

The Screen Layout

Here's what you see when you open a data table:

┌──────────────────────────────────────────────────────────────┐
│  APP TITLE BAR                                    USER INFO  │
├──────────┬───────────────────────────────────────────────────┤
│          │                                                   │
│ MENU     │  [☰ Actions ▼]  Table Title   [View ▼] [Filter ▼]│
│ • Item   │                                     Records: 42   │
│ • Item   │  ┌─────────────────────────────────────────────┐  │
│   ├─Sub  │  │ ID │ NAME    │ VALUE  │ DATE       │ STATUS │  │
│   └─Sub  │  ├────┼─────────┼────────┼────────────┼────────┤  │
│ • Item   │  │  1 │ Data    │ 100    │ 01/01/2026 │ Open   │  │
│          │  │  2 │ Data    │ 200    │ 02/01/2026 │ Closed │  │
│ 🎨 Theme │  │  3 │ Data    │ 300    │ 03/01/2026 │ Open   │  │
│          │  └─────────────────────────────────────────────┘  │
│          │                                                   │
│          │  1 : 25 : 42    [<<] [<] [ 1 ] of 2 [>] [>>]  25▼│
└──────────┴───────────────────────────────────────────────────┘

Notice there are no Edit/Delete buttons on each row — instead, you click a row to select it, then act on it from the Actions menu (the ☰ button at the top-left of the table). This keeps the table clean and works the same way at every level of the application.

Part 1: The Left Menu

Navigation to different areas

MENU
├─ 📋 Section A
├─ 📦 Section B
│  ├─ Sub-item 1
│  ├─ Sub-item 2
│  └─ Sub-item 3
├─ 🗂️ Section C
└─ 📚 Docs
  • Click any menu item to load that table into the main area (the page doesn't reload — content swaps in place).
  • Sections expand and collapse like an accordion, and can nest several levels deep.
  • Menu items may be filtered views of the same table (e.g. "Open Items" vs "All Items").
  • A theme picker at the bottom of the sidebar changes the colour scheme.

Part 2: The Action Bar

Above every table you'll see one bar:

[☰ ▼]  Table Title   [👁 View profile ▼]  [🔍 Quick filter ▼]   Records: 42

☰ Actions Menu (the hamburger button) — this is the main control. Hover or click to open it:

Item What it does
Create New Opens a blank form in a popup window
Filters Opens the search & filter panel (see Part 5)
Reports Print/report options for this table
Settings Table display settings
Adhoc Query Ask a free-form question of this table's data

When you select a row, a "Selected Record" section appears at the bottom of the same menu:

Item What it does
View Show the record read-only — choose Inline, Modal, or Slider
Edit Opens the record's form in a popup window
Delete Soft-deletes the record (asks for confirmation first)
Restore Un-deletes a soft-deleted record (only shown for deleted rows)
Profile switcher (only on some tables)
Switches between column layouts — e.g. a compact view vs a detailed view.
Quick filter switcher (only on some tables)
One-click preset filters — e.g. "All Records" vs "Overdue only".
Records count (far right)
How many records match the current filter.

Part 3: The Data Table

The main area shows your records:

┌──────┬──────────┬──────────┬──────────────┬──────────┐
│ ID ▲ │ NAME     │ VALUE    │ DATE         │ STATUS   │
├──────┼──────────┼──────────┼──────────────┼──────────┤
│ 1    │ Record1  │ 100      │ 01/01/2026   │ Open     │
│ 2    │ Record2  │ 200      │ 02/01/2026   │ Closed   │ ← click to select
│ 3    │ Record3  │ 300      │ 03/01/2026   │ Open     │
└──────┴──────────┴──────────┴──────────────┴──────────┘
Click a row to select it
The row highlights, related records load below it (see Part 7), and the "Selected Record" actions become available in the Actions menu.
Click a column heading to sort
Click again to reverse the order. An arrow shows the current sort. (Calculated columns can't be sorted.)
Ctrl+Click a reference value to look it up
If a cell shows a value that comes from another table (a code, a name, a linked record), hold Ctrl and click it to open the related record.

Part 4: Pagination

At the bottom of the table:

1 : 25 : 42      [<<]  [<]  [ 2 ] of 5  [>]  [>>]      Page size: 25 ▼
  • 1 : 25 : 42 reads as showing records 1 to 25 of 42.
  • << / >> jump to the first / last page; < / > step one page.
  • The page number is a box you can type in — enter a page number and press Enter to jump straight there.
  • Page size selects how many records show per page.

Part 5: Search & Filters

There is no always-visible search box — searching lives in the Filters panel. Open it with ☰ Actions → Filters:

┌────────────────────────────────────────────────────┐
│ [✕] [✓ Apply] [↻ Reset]        Filter Records      │
├────────────────────────────────────────────────────┤
│ Quick Search                                       │
│ [Search across all fields...........]  Page size ▼ │
│ ☑ Include soft-deleted records                     │
│                                                    │
│ Advanced Field Filters                             │
│ [Name.......]  [Status ▼]  [Date from... to...]    │
└────────────────────────────────────────────────────┘
Quick Search
One box that searches across all of the table's text fields at once.
Advanced Field Filters
Filter on specific fields — exact values, dropdown choices, date ranges.
Include soft-deleted records
Tick this to also see records that have been deleted (they can then be selected and restored).

Click the ✓ (tick) button to apply, ↻ to reset everything, ✕ to close the panel.

Part 6: Forms (When Adding/Editing)

Create New and Edit open the form in a popup window — the window closes itself automatically after you save, and the table refreshes:

┌─────────────────────────────────────┐
│ Create New Record                   │
├─────────────────────────────────────┤
│ Name *                              │
│ [_________________________]         │
│                                     │
│ Date *                              │
│ [📅 Date Picker]                    │
│                                     │
│ Category                            │
│ [Select ▼]                          │
│                                     │
│ Related Record                      │
│ [🔍 Type to search...]              │
│                                     │
│ [Save] [Cancel]                     │
└─────────────────────────────────────┘

Field Types You'll See

  • Text Field: Type text (name, description, etc.)
  • Number Field: Type numbers
  • Date Field: Click to pick a date
  • Dropdown: Click to select from a list
  • Checkbox: Click to mark as yes/no
  • Lookup/Search: Type to search related records in another table

Red Asterisk (*): This field is required — you must fill it in.

Viewing without editing: use ☰ Actions → View and pick how you want it shown — Inline (below the table), Modal (centred dialog), or Slider (panel from the side).

Part 7: Hierarchical Navigation (Parent → Child)

When you select a row, its related records appear automatically below it, organised into tabs — one tab per related table:

Main table:
┌────────────────────────────────────┐
│ ▶ Parent Row (selected/highlighted)│
└────────────────────────────────────┘
        ↓ appears automatically
┌─[ Items ]─[ History ]─[ Notes ]────┐   ← one tab per related table
│ [☰ ▼]  Items          Records: 3   │   ← child tables get their own
│ ┌────────────────────────────────┐ │      action bar — Create New,
│ │ Row 1                          │ │      Filters, etc. all work here
│ │ Row 2                          │ │
│ └────────────────────────────────┘ │
└────────────────────────────────────┘

How it works: 1. Click a row in the main table — its related tabs load below. 2. Click a tab to switch between related tables. 3. Click a row inside a child tab — its related records load below that, another level down. 4. Selecting a different parent row clears and reloads everything below it, so what you see always belongs to the selected row.

Common Interactions

✏️ To Edit a Record

  1. Click the row to select it (it highlights)
  2. Open ☰ Actions → Edit (in the "Selected Record" section)
  3. The form opens in a popup window with the current information
  4. Change what you need and click Save
  5. The popup closes itself and the table refreshes

🗑️ To Delete a Record

  1. Click the row to select it
  2. Open ☰ Actions → Delete
  3. A confirmation dialog appears — confirm to proceed
  4. The record is soft-deleted: hidden from view, but not destroyed — it can be restored later (tick Include soft-deleted records in Filters, select it, then ☰ Actions → Restore)
  1. Open ☰ Actions → Filters
  2. Type in the Quick Search box (searches all fields), or set specific Advanced Field Filters
  3. Click the ✓ Apply button — the table refreshes to matching records
  4. Click ↻ Reset to clear all filters and see everything again

➕ To Add a Record

  1. Open ☰ Actions → Create New (no row selection needed)
  2. A blank form opens in a popup window
  3. Fill in the required fields (marked with red *)
  4. Click Save — the popup closes and the new record appears

Tips & Tricks

  • Select first, then act — Edit, Delete, and View all operate on the currently selected (highlighted) row.
  • Sort by clicking column headings — often faster than filtering.
  • Ctrl+Click a reference value to jump to the related record.
  • Keyboard shortcuts: Ctrl+E edits the selected row, Ctrl+N creates a new record, Ctrl+Shift+S opens settings, Tab moves between form fields, Escape closes dialogs.
  • Deleted doesn't mean gone — soft-deleted records can be shown again via Filters and restored from the Actions menu.
  • Quick filters and profiles (when present next to the table title) are the fastest way to switch between common views.

Next: Create your first record → Your First Record