List Component

The List component is the most powerful data display component in EmberBlocks. It connects to your database tables and displays records in various styles with built-in features for filtering, sorting, and pagination.

Overview

The List component supports four display styles:

Style	Description	Best For
Table	Traditional columns and rows with sorting and filtering	Data grids, spreadsheet-like views
List	Compact vertical list with primary/secondary fields	Contact lists, simple item lists
Kanban	Drag-and-drop board with cards in lanes	Task management, workflow tracking
Cards	Grid of cards with images and action buttons	Product catalogs, galleries

Adding a List Component

Open the Layout tab in your app editor
Drag the List component from the palette onto your canvas
Select the component to open the settings panel
Choose a data table and configure display options

Common Settings

These settings apply to all display styles:

Setting	Type	Description
Display Style	Dropdown	table, list, kanban, or cards
Table	Dropdown	Select the source data table
Title	Text/Formula	Component title
Description	Text/Formula	Component description
Filter Formula	Formula	Filter which rows to display
Sort Field	Dropdown	Default field to sort by
Sort Direction	Toggle	Ascending or Descending
Pagination	Toggle	Enable/disable pagination
Rows Per Page	Number	Items per page (10, 25, 50, 100)
Show Search	Toggle	Enable search functionality
Row Click Action	Action	Action when a row is clicked
Density	Dropdown	compact, comfortable, or spacious

Table Style

The Table style provides a spreadsheet-like view with advanced features for data management.

Column Configuration

Configure which fields appear and their order:

In the settings panel, go to Columns
Drag fields to reorder
Toggle visibility for each field
Set column width and alignment

Column Pinning

Pin important columns to the left or right edge:

Column Settings:
  - Pin Position: left | right | none

Pinned columns stay visible while scrolling horizontally.

Column Formatting

Format values for better readability:

Format Type	Options	Example
Number	Decimals, thousands separator	1,234.56
Currency	Symbol, decimals	$1,234.00
Percentage	Decimals	75.5%
Date	short, long, relative	Jan 23, 2026

Row Grouping

Group rows by field values:

Grouping:
  - Level 1: status
  - Level 2: category
  - Level 3: assigned_to

Supports up to 3 grouping levels
Groups can be expanded/collapsed
Shows group counts

Conditional Row Styling

Apply colors based on data values:

Conditional Styles:
  - Condition: {{$row.status = 'overdue'}}
    Background: #fee2e2
    Text: #991b1b
  - Condition: {{$row.status = 'completed'}}
    Background: #dcfce7
    Text: #166534

Styles are applied in priority order (first match wins).

Summary Row

Display aggregate values at the top or bottom:

Aggregation	Description
SUM	Total of all values
AVG	Average of all values
COUNT	Number of rows
MIN	Minimum value
MAX	Maximum value

Row Selection

Enable selection for bulk actions:

Setting	Description
Selection Mode	Single or Multi-select
Show Checkboxes	Display selection checkboxes
Select All	Allow selecting all visible rows

Export to CSV

Export data with the built-in export button:

Option	Description
Current Page	Export visible rows only
All Data	Export all matching rows
Selected Rows	Export only selected rows

List Style

The List style provides a compact vertical view, ideal for mobile or sidebar displays.

List Settings

Setting	Type	Description
Primary Field	Dropdown	Main display field
Secondary Field	Dropdown	Subtitle field
Tertiary Field	Dropdown	Additional info line
Image Field	Dropdown	Thumbnail image field
Image Shape	Dropdown	circle, square, or rounded
Image Size	Dropdown	sm, md, or lg
Show Dividers	Toggle	Lines between items
Badge Field	Dropdown	Status badge field
Badge Colors	Object	Value to color mapping

Badge Configuration

Map field values to badge colors:

Badge Field: status
Badge Colors:
  active: green
  pending: yellow
  inactive: gray

Kanban Style

The Kanban style displays data as cards organized in columns (lanes), perfect for workflow management.

Kanban Settings

Setting	Type	Description
Lane Field	Dropdown	Field to group cards by
Lane Order	Array	Custom lane ordering
Lane Colors	Object	Lane header colors by value
Card Title Field	Dropdown	Card title field
Card Description Field	Dropdown	Card body text
Card Avatar Field	Dropdown	Assignee avatar
Tags Field	Dropdown	Tags/labels field
Due Date Field	Dropdown	Due date indicator
Priority Field	Dropdown	Priority indicator
Cover Image Field	Dropdown	Card cover image
Show Lane Count	Toggle	Show item count per lane
WIP Limit	Number	Work-in-progress limit
Show WIP Warning	Toggle	Highlight when over limit
Enable Drag & Drop	Toggle	Allow card dragging
Update Field on Drop	Toggle	Update lane field when moved

Drag and Drop

When enabled, users can drag cards between lanes:

Enable Drag & Drop in settings
Enable Update Field on Drop
The lane field value updates automatically when a card is moved

WIP Limits

Set work-in-progress limits to highlight overloaded lanes:

WIP Limit: 5
Show WIP Warning: enabled

Lanes exceeding the limit show a visual warning.

Cards Style

The Cards style displays data as a grid of cards, ideal for visual content.

Cards Settings

Setting	Type	Description
Columns	Number	Grid columns (1-4)
Gap	Dropdown	sm, md, or lg
Show Header	Toggle	Display card header
Header Avatar Field	Dropdown	Avatar in header
Header Title Field	Dropdown	Title in header
Header Subtitle Field	Dropdown	Subtitle in header
Image Field	Dropdown	Main image field
Image Aspect	Dropdown	video (16:9) or square (1:1)
Title Field	Dropdown	Card title
Description Field	Dropdown	Card description
Show Footer	Toggle	Display footer actions
Left Action	Action	Left footer button
Right Action	Action	Right footer button
Menu Actions	Actions	3-dot menu actions (max 3)

Card Actions

Configure interactive elements on each card:

Footer:
  Left Action: View Details
  Right Action: Edit
Menu Actions:
  - Duplicate
  - Archive
  - Delete

Filtering Data

Filter Formula

Write formulas to filter displayed rows:

{{$row.status = 'active'}}
{{$row.created_at > TODAY() - 7}}
{{$row.assigned_to = $user.id}}

Using Filter Components

Connect a separate Filter component for user-controlled filtering:

Add a Filter component to your view
In the List settings, reference filter values:

{{GET_FILTER('status') = $row.status}}

Search

Enable the search bar to let users search across text fields:

Show Search: enabled
Search Fields: name, email, description

Sorting

Default Sort

Set the initial sort order:

Sort Field: created_at
Sort Direction: Descending

User Sorting

In Table style, users can click column headers to sort. The current sort is indicated by an arrow icon.

Pagination

Settings

Setting	Description
Enabled	Toggle pagination on/off
Rows Per Page	Default page size
Page Size Options	Available size choices

Infinite Scroll

For List and Cards styles, enable infinite scroll instead of pagination:

Pagination: disabled
Infinite Scroll: enabled

Row Actions

Row Click

Configure what happens when a row is clicked:

Row Click Action: Navigate
Target View: item-details
Parameters:
  - id: {{$row.id}}

Bulk Actions

Enable selection and add actions for selected rows:

Enable row selection in settings
Add a Button component with an action using $selectedRows
The action runs for all selected rows

Example button configuration:

Label: "Delete Selected"
Action: Delete Row
Row: {{$selectedRows}}
Confirm Dialog: enabled

Best Practices

Performance

Enable pagination for large datasets
Limit visible columns to essential fields
Use filter formulas to reduce initial data load

User Experience

Choose the display style that matches your use case
Provide clear column headers and descriptions
Enable search for tables with many rows

Data Integrity

Use confirmation dialogs for destructive bulk actions
Validate row selection before bulk operations
Provide undo options where possible

Mobile

Use List or Cards style for mobile-friendly views
Reduce columns in Table style for smaller screens
Consider responsive column hiding

Common Patterns

Task Board

Style: Kanban
Lane Field: status
Lane Order: ["todo", "in_progress", "review", "done"]
Card Title: task_name
Enable Drag & Drop: true
Update Field on Drop: true

Product Catalog

Style: Cards
Columns: 3
Image Field: product_image
Image Aspect: square
Title Field: product_name
Description Field: short_description
Footer Actions: View Details, Add to Cart

Contact List

Style: List
Primary Field: full_name
Secondary Field: email
Tertiary Field: phone
Image Field: avatar
Image Shape: circle

Data Grid

Style: Table
Show Search: true
Pagination: true
Rows Per Page: 25
Row Selection: multi
Export: enabled

Next Steps

Learn about related components and features:

Button Component - Add action buttons
Text Component - Display dynamic text
Actions - Configure row and bulk actions
Formulas - Write filter and display formulas