Lists That Become Cards on Mobile

A multi-column data table on a phone is a user experience problem waiting to happen. Columns compress until they're unreadable. Horizontal scrolling is tolerable for a spreadsheet but frustrating in a business app. Important information ends up truncated or off-screen.

The solution isn't to build a separate mobile list view — it's to make the list view adapt intelligently to the screen it's displayed on.

Automatic Table-to-Card Transformation

List components in Swifty automatically switch from a tabular layout to a card layout on small screens. Each row becomes a card: a self-contained block that presents the same data in a stacked vertical format rather than a compressed horizontal row.

The card shows the record's primary field prominently, with secondary fields arranged below in a readable layout. Status badges, date fields, and relation labels all render in their standard formats within the card.

Which Fields Appear in the Card

Cards derive their content from the column configuration of the table. The field marked as the primary field in the column definition appears as the card's main title. The next few columns appear as labeled key-value pairs below it. Fields marked as secondary or compact appear in a smaller type below the primary information.

You don't configure a separate card layout. The column configuration serves both purposes: it defines the table's column order and the card's field priority.

Actions Work the Same Way

Row actions — edit, delete, custom buttons — are accessible from card view just as they are from table view. A three-dot menu on each card reveals the available actions. If an action was configured for the list, it's available in both table and card mode.

Switch Manually When Needed

While automatic card mode applies at mobile breakpoints, users can manually switch between table and card view on any screen size. A view toggle in the list header lets users choose their preferred presentation. Some people prefer the card view even on desktop for visual-heavy data like image-containing objects.

A Better Experience for Field Teams

Mobile list usability matters most for teams working in the field: technicians, delivery drivers, sales reps, warehouse staff. These users check records quickly, update statuses, and find information under pressure. A card layout that presents information clearly on a small screen in bright outdoor light is genuinely more useful than a compressed table.

Automatic adaptation means the same workspace that serves office users on desktop serves field teams on mobile — without separate configuration.