# Table View

Work with tasks in a responsive, adaptive Kanban-style table layout that matches Notion and Linear.

import { Aside, CardGrid, Steps } from '@astrojs/starlight/components';

## Overview

Table view gives you a grid-based way to organize and manage tasks, similar to Notion or Linear. It adapts to the columns you need and keeps your layout preferences saved across sessions.

**Horizontal scrolling across all columns:** When a table's columns exceed the available width on your device (for example on narrow windows or very wide column sets), a visible horizontal scrollbar appears. This lets you scroll to see remaining columns in the grid without obscured headers or black space, ensuring you can reach every column in the row set.

**Unsaved sort states and saved views:** Sorting the table creates an unsaved view. An "orange Save view + Reset" indication appears in the header. Press Save to capture the sort configuration as a saved view, or Reset to discard it. Existing saved views reopen the table pre-sorted.

**Multiselect via Shift+E:** Press Shift+E to select the current row and add it to the selection set. From any multi-selected row, press Shift+E repeatedly to accumulate or extend the selection for bulk actions.

## Mouse-Accessible New Task Control

At the right end of a table's top row sits a quiet ghost button that creates new tasks. It provides a mouse-based way to add tasks without leaving the grid:

**Behavior:**
- With quick entry enabled, click **+ New task** to open a compact title field for the selected column.
- Press <kbd>Enter</kbd> to save each task and keep the empty field open for the next title. Press <kbd>Esc</kbd> to close it; reopening restores an unsaved title.
- Press <kbd>C</kbd> when you need the full task creator instead.
- Hidden from cross-board My Tasks tables.
- Uses only theme tokens so it matches your current customization.

**Accessibility:**
- Keyboard-focusable (tab into it, and Shift+Tab out).
- Excluded from the cross-board My Tasks table.
- Highlighted on hover and focus to make its purpose clear without taking up screen space.

## Adaptive layout

Table view automatically adjusts to the columns you're using:

- **Flexible title column:** The title column flexes to fill the remaining horizontal space; its width is a minimum, so you can use full width without nested scrolling or cramped visibility.
- **Flexible columns:** The table layout derives from your visible sections and columns, so you see the most relevant information without cramped spacing.
- **Full-title row behavior:** Press <kbd>Enter</kbd> to open a task focused on its description; the task detail view updates inline within the row, preserving the table layout without needing to leave the grid.

## Excel-style frozen panes

When you scroll horizontally across a table with many columns, the **Ticket** and **Title** columns stay visible while you view the rest of the grid. This frozen-pane behavior mimics Excel, ensuring the identifier and description of each row are always visible:

- **Ticket column**: Stays fixed on the far left, showing the task number consistently across scrolling
- **Title column**: Stays visible to the right of the Ticket column, keeping the task's primary label in view

This remains true for table layouts, board table views, and subtask tables, so you can always identify rows regardless of how far right you need to scroll.

## Column picker

Customize your table view with the column picker:

1. Press <kbd>Ctrl+K</kbd> and search for "Configure table" or "Column picker".
2. Select which columns to display and hide.
3. Click **APPLY** to persist your selection across sessions.

The palette in table view is the same one you get on the board, so board commands such as sorting, filter match mode, and board time tracking are all available without switching layouts.

Your column choices are saved per user, so each team member can have their own table layout.

<Aside type="tip">

The column picker and table layout are per-user settings. You can show or hide any column without deleting it, and changes apply immediately to your view.

</Aside>

## Move a task to another section

Drag any row onto another section's card and the task moves into that section. The row is the drag handle and the section card is the drop target, so nothing extra appears on screen; the card you are over takes the normal hover highlight.

Dragging is off in two cases, because a drop would be meaningless or wrong:

- **A column sort is active.** Rows render as one flat list with no section groups to drop into.
- **On /my-tasks.** Rows are grouped by due time or by board, not by a board column, so a move would target the wrong thing.

## The Created column

Turn on **Created** in the column picker to see when each task was opened, and click the header twice to sort oldest first.

It shows a real date rather than an age, because **On board** already gives you the age in days and "412d" does not tell you when something started. Dates outside the current year keep their year (`12 Sep, 2025`), so an old task can never be mistaken for a recent one. Sorting runs on the underlying timestamp, not the displayed text.

## Drag to reorder and resize

Drag columns directly to reorder them in place; the order stays in sync with the Table columns picker dropdown. Drag the column edge to resize each column to your preferred width. The title column remains locked as the leftmost column, with ticket detail keyed by title; the title column still flexes to fill leftover width.

### AMOLED hover and drag

On AMOLED displays, table resize handles are more visible:

- **Hover:** a 2px purple accent line appears on the edge while hovering over a column boundary.
- **Drag:** the guide line extends the full height of the table to show the planned column width.
- **Header feedback:** hovering any column header shows faint separators between columns for better discoverability of the grid.

### Excel-style resize model

Table view resize now follows an Excel-like model that gives you predictable control over column sizes:

- **First resize:** On your first resize of any column, the Title column's flex width is frozen at its rendered pixel width, making it fixed thereafter. All other columns reset to auto-fit width and wait for your next resize action.
- **Subsequent resizes:** After the initial resize, dragging any column edge follows your cursor 1:1 as you expand or shrink the column.
- **Wider grab strip:** Resize handles include a 12px wide grab strip that makes one-touch sizing easier on touch devices or small windows.
- **Reset to default:** Use the Table columns picker (e.g., ...) and click **Reset to default** (or Reset to original) to restore the original auto-fit width for all columns.

This Excel-style resize behavior ensures clearer feedback and deliberate resizing flow, especially when setting up a stable table layout.

## Advanced column configuration

Open the Configure table modal for more control over your table setup:

1. Press <kbd>Ctrl+K</kbd> and search for "Configure table".
2. In the column picker, click the ⋮ or **edit** icon next to "Columns" to open advanced options.
3. Choose from additional columns:

**Visibility options**
- **Visible columns** — toggle columns on and off without permanently deleting them. The table updates instantly.

**Additional columns**
- **Tags** — render label pills from your tags/column. Shows up to 3 pills, with "+N" expanding the rest. Pill clicks jump to other tasks with the same tag.
- **Comments** — count of comments per task with hover preview (up to 3 lines). Click to open the task.
- **Created** — full timestamp of task creation (e.g., "Jul 26, 2026 at 10:42 AM"). Click to view original creation.
- **Column** — which board section or column a task belongs to. Click to jump to that section on the board.
- **Status** — copy of the board column name for card-based views (e.g., "Done", "In Progress", "Review").
- **Stale** — indicator of task staleness when the board staleness toggle is enabled. Shows up to 7 days amber/red signal, empty when fresh, and hidden when the toggle is off. Click to sort by staleness (sorting column appears between Due and Updated).

**Actions**
- Drag columns by their grip handle to reorder them.
- Drag a column edge to resize to your preferred width.
- Click **Reset to default** or **Reset to original** to restore the original auto-fit layout.

<Aside type="note">

"Reset to default" or "Reset to original" places the Status column immediately after Title and moves Updated header to the right.

</Aside>

### Sort-Driven Columns

While sorting, the View engine adds columns to improve clarity:

- **Status column:** Appears immediately after Title, matching the board column name (e.g., Done, In Progress, Review). It hides when the sort is cleared.
- **Stale column (optional):** Only appears in the headers when sorting by staleness and the board staleness toggle is on. It hides again when staleness sorting is cleared or the toggle is off.

These additions keep the table focused around the sorted criteria without overwhelming you with every board field.

## Keyboard shortcuts

| Shortcut | Action |
|----------|--------|
| <kbd>Ctrl+K</kbd> | Open the command palette. Table view has the full board palette, including the column picker |
| <kbd>Shift+F</kbd> | Toggle focused search on the board |
| <kbd>W</kbd> | Start or stop the timer for the selected task |
| <kbd>Enter</kbd> | Open task focused on description and keep the table layout |
| <kbd>Shift+E</kbd> | Select (or extend selection of) the current table row for bulk actions |

## Sorting behavior

When you sort a table, the experience tightens to show you the most useful columns at once:

- **Status column auto-shows** — as soon as you sort, a Status column appears immediately after the Title column, matching the board column name (e.g., Done, AI Review, Bugs). The column hides again when you clear the sort.
- **Updated header right-aligned** — the Updated header stays visibly right-aligned over the rest of the column headers.
- **Stale column option** — when sorting by staleness, a Stale column appears between Due and Updated headers. It hides when staleness sorting is cleared or when the board staleness toggle is off.

This pattern keeps the table focused on the sorted criteria without overwhelming you with every board field.

## Use cases

Table view is great for:

- **Analyzing lots of tasks:** See many items at once in a compact grid without losing readability.
- **Comparing priorities:** Side-by-side visibility of priority, size, and due dates.
- **Quick filtering:** Combine visibility filters with your column choices to surface the exact set of tasks you need.
- **Tracking staleness:** Use the Stale column to identify tasks that haven't been updated recently, especially on boards with staleness detection enabled.
- **Bulk work:** Combine multiselect with bulk actions (e.g., Move, Archive) for rapid processing.

## Scroll positions

**Full-height scroll container:** The scroll container reaches the bottom of the window, so the horizontal scrollbar stays pinned at the bottom regardless of row count. This ensures stable navigation when working with rows of any size.
