---
tags:
- UI Page widgets
alias: user-guide-uipage-widgets-column-view
widgetname: Column View
description: "This documentation explains how to create and customize a column view widget with editable data"
---

# Column View

![columnViewIcon](images/uiColumnViewIcon.png)

## Overview

The Column View widget allows you to easily represent a column view with editable leaves. In this widget settings, you can configure the columns to be displayed and the leaf fields that can be linked. To configure the widget that will appear in the leaves, simply drag and drop a new widget into the leaf area. Below is an example of a Column View widget with three columns.

![columnViewExample](images/uiPageExample16.png)

## General Steps

{% include-markdown 'includes/pages/ui_widgets_general_steps.md' %}

![columnGeneral](images/column_general.png)

## Widget Customization

1. Optionally, in the **Style** tab, you can define a Border Width and Color.

    ![columnSetup](images/column_style.png)

2. In the **Setup** tab, you can specify the following properties:

    * **Allow Multi-Selection** - When set to `true`, this option allows you to select multiple rows.
    * **Keep Path When Data Changes** - Retains the selected path even when the data changes.
    * **Add and Delete Leafs** - Enables the option to add and delete leaves.
    * **Show Footer** - Displays the footer section.
    * **Auto Select Mode** - You can choose between No Selection, Focus, or Select mode. When adding a new leaf, it sets the selection mode to the chosen input. Focus will move the cursor to the input, while Select will move the cursor and select all the content in the input. This is only available if Auto Select Mode is not set to No Selection.

    ![columnSetup](images/column_setup.png)

3. In the **Columns** tab, configure the details and entries you desire.

    ![column columns tab](images/column_columns.png)

4. In the **Leaf Fields** tab, define the details you require.

    ![column leaf fields](images/column_leaf.png)

5. Optionally, define the **Links** between this widget and other elements of the UI Page.

    ![column links](images/column_links.png)

6. Select **Save and Close** to complete the widget configuration.