Views

Visualize and interact with your data using different view types in NocoDB.

Views provide different ways to visualize and interact with your table data. Each view displays the same underlying data but with different layouts, filters, and sorting options tailored to specific use cases.

What is a View?

A view is a saved configuration that determines how table data is displayed and accessed. Views allow you to:

• Customize which columns are visible
• Apply filters and sorting
• Group and organize data differently
• Share specific data subsets with others
• Create forms for data collection

Multiple Layouts

Display data as Grid, Gallery, Kanban, Calendar, and more

Independent Configs

Each view has its own filters, sorts, and visibility settings

Shareable

Generate public links to share views externally

Collaborative

Team members see the same organized data

View Types

NocoDB supports 8 different view types:

Grid View

The classic spreadsheet-style view:

• Best for: Data entry, bulk editing, detailed analysis
• Features: Inline editing, column resizing, row selection
• Use cases: Managing customer lists, inventory tracking

ViewTypes.GRID (Type: 3)

Gallery View

Card-based visual layout:

• Best for: Image-heavy data, portfolios, catalogs
• Features: Cover images, customizable card content
• Use cases: Product catalogs, team directories, project showcases

ViewTypes.GALLERY (Type: 2)

Form View

Data collection interface:

• Best for: External submissions, surveys, intake forms
• Features: Custom fields, conditional logic, branding
• Use cases: Contact forms, registration, feedback collection

ViewTypes.FORM (Type: 1)

Kanban View

Drag-and-drop board layout:

• Best for: Workflow management, status tracking
• Features: Column grouping, drag-to-update, progress visualization
• Use cases: Project management, sales pipelines, task boards

ViewTypes.KANBAN (Type: 4)

Calendar View

Time-based visualization:

• Best for: Event scheduling, date tracking
• Features: Month/week/day views, date ranges
• Use cases: Event calendars, deadlines, scheduling

ViewTypes.CALENDAR (Type: 6)

Map View

Geospatial data display:

• Best for: Location-based data
• Features: Interactive maps, marker clustering
• Use cases: Store locations, delivery routes, property listings

ViewTypes.MAP (Type: 5)

List View

List view is currently in development. The view type is defined in the type system but full implementation is pending.

Hierarchical nested display (upcoming):

• Best for: Parent-child relationships, nested data
• Features: Expandable levels, linked records
• Use cases: Organization charts, category trees, threaded discussions

ViewTypes.LIST (Type: 7)

Timeline View

Timeline view is currently in development. The view type is defined in the type system but full implementation is pending.

Time-range based visualization (upcoming):

• Best for: Project timelines, scheduling
• Features: Start/end dates, duration display, Gantt-style layout
• Use cases: Project planning, resource allocation, scheduling

ViewTypes.TIMELINE (Type: 8)

Source: globals.ts:36-45

Creating a View

1. Open the table

   Navigate to the table where you want to create a view

2. Click 'Create View'

   Click the ”+” icon next to the views list or use the view dropdown

3. Select view type

   Choose from Grid, Gallery, Form, Kanban, Calendar, Map, List, or Timeline

4. Configure view settings

   • Title: Name your view
   • Description: Add context (optional)
   • Type-specific settings: Configure view-specific options
5. Customize display

   • Show/hide columns
   • Apply filters and sorting
   • Set grouping options (view-dependent)

View Properties

Property	Description	Type
id	Unique identifier	string
title	Display name	string
description	Optional description	string
type	View type (Grid, Gallery, etc.)	ViewTypes
fk_model_id	Parent table ID	string
show	Visibility status	boolean
order	Display order	number
uuid	Shared view identifier	string
password	Shared view password	string
lock_type	Collaborative/locked	string
show_system_fields	Include system columns	boolean

Source: View.ts:93-135

View Columns

Each view maintains its own column configuration:

// Get columns for a specific view
const viewColumns = await View.getColumns(context, viewId);

// Update column visibility and order
await View.updateColumn(context, viewId, columnId, {
  show: true,
  order: 3
});

Column settings per view:

• show: Whether the column is visible
• order: Column display order
• width: Column width (Grid view)

Reference: View.ts:1100-1147

Filters & Sorts

View Filters

Filters determine which records appear in the view:

// Get filters for a view
const filters = await view.getFilters(context);

// Filters form a tree structure with AND/OR logic

See Filters & Sorting for detailed filter configuration.

View Sorting

Control record order:

// Get sorts for a view
const sorts = await view.getSorts(context);

// Each sort has:
// - fk_column_id: Column to sort by
// - direction: 'asc' or 'desc'

Sharing Views

Share views publicly with external users:

Enable Sharing

// Generate shareable link
const sharedView = await View.share(context, viewId);
// Returns view with uuid for public access

Password Protection

// Add password to shared view
await View.passwordUpdate(context, viewId, {
  password: 'secure-password'
});

Verify Access

// Check password for shared view
const isValid = await View.verifyPassword(view, inputPassword);

Disable Sharing

// Remove public access
await View.sharedViewDelete(context, viewId);

Reference: View.ts:1564-1679

View-Specific Features

Gallery View Options

// Get gallery configuration
const galleryView = await GalleryView.get(context, viewId);

// Gallery-specific properties:
// - fk_cover_image_col_id: Column for card cover image

Kanban View Options

// Get kanban configuration
const kanbanView = await KanbanView.get(context, viewId);

// Kanban-specific properties:
// - fk_grp_col_id: Grouping column (typically SingleSelect)
// - fk_cover_image_col_id: Cover image column

Calendar View Options

// Calendar requires date range configuration
const calendarView = await CalendarView.get(context, viewId);
const ranges = await CalendarRange.read(context, viewId);

// Calendar ranges define:
// - fk_from_column_id: Start date column
// - fk_to_column_id: End date column (optional)

Form View Options

// Get form configuration
const formView = await FormView.get(context, viewId);

// Form-specific properties:
// - heading: Form title
// - subheading: Form description
// - submit_another_form: Allow multiple submissions
// - show_blank_form: Show empty form after submit

Managing Views

Listing Views

// Get all views for a table
const views = await View.list(context, tableId);

// Get views with full details
const detailedViews = await View.listWithInfo(context, tableId);

Getting View Details

// Get view by ID
const view = await View.get(context, viewId);

// Get view by title
const view = await View.getByTitleOrId(context, {
  fk_model_id: tableId,
  titleOrId: 'My View'
});

Updating a View

await View.update(context, viewId, {
  title: 'Updated View Name',
  description: 'New description',
  show_system_fields: true,
  lock_type: 'collaborative'
});

Reference: View.ts:1681-1792

Duplicating a View

Create a copy with all settings:

await View.insert(context, {
  fk_model_id: tableId,
  title: 'Copy of View',
  type: ViewTypes.GRID,
  copy_from_id: sourceViewId  // Copy filters, sorts, columns
}, ncMeta);

Reference: View.ts:295-799

Deleting a View

await View.delete(context, viewId);

Deleting a view removes all its configurations (filters, sorts, column settings) but does not affect the underlying data.

View Permissions

Lock Types

Control edit access:

• collaborative: Anyone with access can edit
• locked: Only owner can modify view settings
• personal: Private view visible only to creator

Row Coloring

Conditional formatting based on rules:

// Row coloring modes
row_coloring_mode: {
  'field-based',  // Color based on field value
  'condition-based'  // Color based on filter conditions
}

Advanced Features

Column Insertion

Add columns to all views automatically:

// When adding a new column, it's added to all views
await View.insertColumnToAllViews(context, {
  fk_column_id: newColumnId,
  fk_model_id: tableId,
  order: 5,
  column_show: {
    show: true,
    view_id: specificViewId  // Optional: show only in specific view
  }
});

Reference: View.ts:829-966

View Caching

Optimize performance with query caching:

// Clear cached queries for a view
await View.clearSingleQueryCache(
  context,
  tableId,
  [view],
  ncMeta
);

Best Practices

Create views for different audiences

Make separate views for different user types (e.g., customer-facing, internal team, executive summary).

Use descriptive view names

Name views based on their purpose: “Active Projects”, “Q4 Sales”, “Pending Approvals”.

Minimize visible columns

Show only relevant columns in each view to reduce clutter and improve performance.

Combine filters strategically

Use view filters instead of manual filtering to save time and ensure consistency.

Share with care

When sharing views externally, review visible data and apply appropriate filters first.

Choose the right view type

Match view type to use case: Kanban for workflows, Calendar for events, Gallery for visual content.

Related Resources

Filters & Sorting

Learn how to filter and sort data in views

Tables

Understand the relationship between tables and views

Fields

Configure which fields appear in each view

Sharing

Share views with team members and external users