# Customizing Layouts

Configure which columns appear in your views and how they're organized.

## Overview

Simpl's layout system lets you customize how each table is displayed. Control which fields appear, their order, and how they're presented—separately for list and detail views.

## Why Customize Layouts?

Different tables need different presentations:

- **Users table**: Show name, email, status—hide internal IDs
- **Orders table**: Show order number, total, date—hide metadata
- **Logs table**: Show timestamp, level, message—hide JSON blobs

Layouts help you focus on what matters for each table.

## Opening the Layout Panel

Click the **Layout** button in the toolbar to open the layout configuration panel.

## List View Layout

The list view layout controls what appears in record cards.

### Column Visibility

Toggle columns on or off:

- **Visible columns** appear as field pills on record cards
- **Hidden columns** are only shown in the detail view
- Some columns are always visible (like the primary key)

### Column Order

Drag and drop columns to reorder them:

1. Hover over a column row
2. Grab the drag handle (⋮⋮)
3. Drag to the desired position
4. Release to save

The first visible column becomes the **title field** displayed prominently on each card.

### Quick Actions

Use the quick action buttons for faster configuration:

| Action         | Description                          |
|----------------|--------------------------------------|
| Select All     | Show all columns                     |
| Deselect All   | Hide all columns (except primary)    |
| Reset          | Return to auto-generated layout      |

## Detail View Layout

Configure the detail view separately from the list view:

- Different columns can be visible in each view
- Different ordering for each view
- Commonly: show all columns in detail, fewer in list

## Automatic Layout Generation

When you first view a table, Simpl automatically generates a layout:

### Smart Field Detection

The auto-layout algorithm prioritizes:

1. **Title fields** (name, title, label) - displayed first
2. **Timestamps** (created_at, updated_at) - for context
3. **Foreign keys** - for relationships
4. **Text fields** - readable content
5. **Other fields** - remaining columns

### Primary Field Selection

Simpl identifies the most likely "title" field based on:

- Column names (name, title, label, email)
- Column types (short text preferred over long text)
- Table context

## Layout Persistence

### Saved Per Table

Each table has its own layout configuration stored in your account. Changes persist across:

- Browser sessions
- Page refreshes
- Different devices

### Schema Changes

When your database schema changes (columns added/removed):

1. Simpl detects the change on schema refresh
2. Removed columns are automatically cleaned from layouts
3. New columns are added with sensible defaults
4. Existing column order is preserved

## Language Preferences

For code-like fields (JSON, SQL, etc.), you can set syntax highlighting preferences:

Available highlighting options:

- JSON
- SQL
- JavaScript
- Python
- Plain text

This affects how the field is rendered in the detail view.

## Best Practices

### List View Philosophy

For list views, prioritize:

1. **Identifiable information** - What makes records distinguishable?
2. **Status fields** - Current state at a glance
3. **Key dates** - When was it created/updated?
4. **Primary relationships** - Related entities

Hide in list view:

- Long text fields
- JSON/complex data
- Internal IDs (except primary key)
- Rarely-needed metadata

### Detail View Philosophy

For detail views, include:

- All relevant fields
- Full content (no truncation)
- Complete relationship information
- Technical details when needed

### Start Simple

Begin with fewer visible columns, then add more as needed. It's easier to expand than to reduce clutter.

## Layout Examples

### User Table

**List view columns:**

1. Name (title)
2. Email
3. Status
4. Created At

**Hidden in list:** ID, password hash, settings JSON, metadata

### Product Table

**List view columns:**

1. Product Name (title)
2. Price
3. Category
4. Stock Status

**Hidden in list:** Description, SKU, supplier ID, images JSON

### Order Table

**List view columns:**

1. Order Number (title)
2. Customer → (relationship)
3. Total
4. Status
5. Order Date

**Hidden in list:** Line items JSON, shipping details, internal notes

## Resetting Layouts

To return to the auto-generated layout:

1. Open the Layout panel
2. Click **Reset Layout**
3. Confirm the reset

This regenerates the layout using Simpl's heuristics, discarding your customizations.

## Next Steps

- [View complete record details](/content/docs/features/detail-view/index.html)
- [Edit records inline](/content/docs/features/editing/index.html)
- [Navigate relationships](/content/docs/features/relationships/index.html)