Column Types
Sunday supports 17 different column types to track various types of data.
Available Column Types
| Type | Description | Example Value |
|---|---|---|
status | Progress status | Done, Working, Stuck |
person | Team member assignment | User ID(s) |
date | Single date | 2025-01-15 |
priority | Importance level | Critical, High, Medium, Low |
text | Free-form text | "Meeting notes..." |
number | Numeric value | 42 |
timeline | Date range | Jan 15 - Jan 30 |
timeTracking | Time entries | 2h 30m |
labels | Tags/categories | ["Frontend", "Urgent"] |
dropdown | Select from options | "Option A" |
link | URL | https://example.com (opens in a new tab) |
email | Email address | john@example.com |
phone | Phone number | +1-555-0123 |
checkbox | Boolean toggle | true/false |
rating | Star rating | 4/5 |
progress | Percentage | 75% |
location | Location/address | "New York, NY" |
files | File attachments | [...files] |
Status Column
Track task progress with predefined statuses.
Default Statuses
| Status | Color | Meaning |
|---|---|---|
| Done | Green | Completed |
| Working | Blue | In progress |
| Stuck | Red | Blocked |
| Pending | Gray | Not started |
| Review | Yellow | Needs review |
Custom Color Rules
Add colors for custom values:
{
type: "status",
colorRules: [
{ value: "done", color: "#22C55E" },
{ value: "working", color: "#3B82F6" },
{ value: "stuck", color: "#EF4444" }
]
}Person Column
Assign team members to tasks.
- Multiple assignees supported
- Displays user avatars
- Click to add/remove people
Date Column
Single date picker for deadlines, milestones, etc.
- Calendar picker UI
- Relative date display (Today, Tomorrow, etc.)
- Overdue highlighting
Priority Column
Mark task importance.
| Priority | Color | Use Case |
|---|---|---|
| Critical | Red | Urgent, blocking issues |
| High | Orange | Important tasks |
| Medium | Yellow | Normal priority |
| Low | Gray | Nice-to-have |
Text Column
Free-form text input for notes, descriptions, or any text data.
- Supports multi-line text
- Expandable on click
Number Column
Numeric data entry.
- Supports integers and decimals
- Optional unit suffix
- Sortable
Timeline Column
Date range for task duration.
{
startDate: "2025-01-15",
endDate: "2025-01-30"
}- Visualized as bars in Timeline view
- Drag to adjust duration
- Shows in calendar views
Time Tracking Column
Track time spent on tasks.
- Start/stop timer
- Manual time entries
- Displays total duration
See Time Tracking for more details.
Labels Column
Tag tasks with multiple labels.
- Predefined label options
- Color-coded tags
- Filter by labels
Dropdown Column
Select from predefined options.
{
type: "dropdown",
options: ["Option A", "Option B", "Option C"]
}Link Column
Store URLs with clickable links.
- Auto-detects URLs
- Opens in new tab
Email Column
Email addresses with mailto: link.
- Click to compose email
- Validation for email format
Phone Column
Phone numbers with tel: link.
- Click to call
- Supports international formats
Checkbox Column
Simple boolean toggle.
- Check/uncheck via click
- Filter by checked/unchecked
Rating Column
Star rating (1-5).
- Click to set rating
- Visual star display
Progress Column
Percentage progress bar.
- 0-100% range
- Visual progress indicator
- Drag to adjust
Location Column
Address or location text.
- Free-form text
- Could integrate with maps
Files Column
File attachments.
- Multiple files per task
- Upload/download
- Preview support
Adding Columns
Via UI
- Click + in the table header
- Select column type
- Configure settings
- Enter column name
Via API
POST /api/boards/[boardId]/columns
Content-Type: application/json
{
"name": "Deadline",
"type": "date",
"required": false,
"description": "Task deadline"
}Column Configuration
interface Column {
id: string
name: string
type: ColumnType
width?: number // Pixel width
visible?: boolean // Show/hide
required?: boolean // Required field
defaultValue?: string // Default value
options?: string[] // For dropdown
colorRules?: { // Custom colors
value: string
color: string
}[]
description?: string // Help text
}Store Actions
import { useAppStore } from '@/lib/store'
// Column actions
const addColumn = useAppStore((s) => s.addColumn)
const updateColumn = useAppStore((s) => s.updateColumn)
const deleteColumn = useAppStore((s) => s.deleteColumn)
const reorderColumns = useAppStore((s) => s.reorderColumns)
// Add column
addColumn(boardId, {
name: 'Priority',
type: 'priority'
})
// Update column
updateColumn(boardId, columnId, {
name: 'New Name',
width: 150
})
// Reorder columns
reorderColumns(boardId, ['col-1', 'col-3', 'col-2'])