Column
A column defines the width and placement of content inside a row.
Columns hold the actual fields, buttons, tables, or other components that users interact with. A row can contain one column for a simple full-width section, or multiple columns to place related information side by side.
When to Use It
Use columns when a screen needs more structure than a single vertical stack of fields.
Columns work well when users need to compare related information, scan a compact group of fields, or keep primary and secondary information visually separate. For example, contact details can sit next to address details, or planning fields can sit next to status fields.
Columns should make a screen easier to scan. If users need to read fields in a strict sequence, a single-column layout may be clearer.
What Can Be Configured
Content
A column contains the components that appear inside it.
- Add fields, buttons, tables, or other components
- Give the column an optional title
- Decide whether the column should hold one focused group or several smaller items
Width
Columns control how much horizontal space each group receives.
- Use a narrow column for short fields or supporting information
- Use a wider column for longer text, tables, or primary content
- Let a column size itself automatically when the content should define the width
Collapsing
Columns can be collapsible when their content is useful but not always needed.
- Allow users to collapse or expand a column
- Decide whether the column starts open or collapsed
Visual Separation
Columns can help separate neighbouring groups of information.
- Add a title to clarify the column's purpose
- Use a vertical separator when adjacent columns need a stronger boundary
- Adjust the title size when a column heading should feel secondary
Conditional Display
Columns can be shown or hidden depending on the record.
- Hide a column when its information is not relevant
- Keep detail views focused by only showing the right column in the right situation