Overview
Multi-column views enable the display of multiple columns in using tree or list view controls. They are instantiated differently in the UI Toolkit and IMGUI frameworks.
Create in UI Toolkit
Multi-column views are not in the UI Builder library as of 2022.1.
To create these controls;
1. First add multi-column viewcontrols to UXML,
2. define the column data in C# and reference this object,
3. and customize using Column properties.
A list view with multi-column support.
Docs ->
A tree view with multi-column support.
Docs ->
Represents a collection of columns.
Docs ->
UXML multi-column list view element
Docs ->
UXML multi-column tree view element
Docs ->
Examples on populating data and initializing cells in C# on Unity Manual
Docs ->
Not in UI Builder library.
Multi-column views are not yet added to the UI Builder library. However you can add them as custom UXML objects and bind data in C#.
1. Add the control to UXML
To create a list or tree view with multiple columns, first create a MultiColumnListView or MultiColumnTreeView UI control, and define the number of columns and column titles in a UXML file.
Examples below have a column with a list of planets and toggles that indicate whether the planet is populated:
Multi-column list view UXML
Add the following code in a .uxml file:
<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
<ui:MultiColumnListView fixed-item-height="20">
<!-- Columns and Column aren't Visual Elements or controls. They are considered attributes of MultiColumnListView. -->
<ui:Columns>
<ui:Column name="name" title="Name" width="80" />
<ui:Column name="populated" title="Populated?" width="80" />
</ui:Columns>
</ui:MultiColumnListView>
</ui:UXML>
Multi-column tree view UXML
Add the following code in a .uxml file:
<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
<ui:MultiColumnTreeView fixed-item-height="20">
<!-- Columns and Column aren't Visual Elements or controls; they are considered attributes of MultiColumnListView. -->
<ui:Columns>
<ui:Column name="name" title="Name" width="120" />
<ui:Column name="populated" title="Populated?" width="80" />
</ui:Columns>
</ui:MultiColumnTreeView>
</ui:UXML>
3. Customize with properties
Column class properties are used to define how a user interacts with a column in a multi-column view, and how its data and the data of each cell in this column are represented.
Callback for constructing the visual representation of the column in the header.
Docs ->
The maximum width of the column.
Docs ->
The minimum width of the column.
Docs ->
Indicates whether the column is optional. Optional columns can be shown or hidden interactively by the user.
Docs ->
Indicates whether the columns can be reordered interactively by user.
Docs ->
Indicates whether the column can be resized interactively by the user.
Docs ->
Indicates whether columns are resized as the user drags resize handles or only upon mouse release.
Docs ->
Indicates whether the column can be sorted.
Docs ->
Indicates whether the column will be automatically resized to fill the available space within its container.
Docs ->
Create in IMGUI
Multi-column views are the standard tree view control configured with MultiColumnHeader and MultiColumnHeaderState classes.
A general purpose class that can be used with the TreeView to create multi-column tree views and list views.
Docs ->
State used by the MultiColumnHeader.
Docs ->
Multi-column tree view example;
1. Create some columns using MultiColumnHeaderState and set the column properties.
var columnList = new List();
// Create 10 columns where the text of each column is its index (i)
for (var i = 0; i < 10; i++)
{
columnList.Add(new MultiColumnHeaderState.Column
{
headerContent = i,
headerTextAlignment = TextAlignment.Left,
sortedAscending = true,
sortingArrowAlignment = TextAlignment.Left,
width = 100,
minWidth = 30,
autoResize = true
})
}
2. Create a Column State object with the created columns
MultiColumnHeaderState columnState = new
MultiColumnHeaderState(columnList);
3. Create a MultiColumnHeader object with the state
MultiColumnHeader header = new MultiColumnHeader(columnState);
4. Create a TreeView with the MultiColumnHeader object.
TreeView treeView = new TreeView(..., header);
Multi-column list view example;
To create a list view follow the same steps above for the multi-column tree view but ensure all view items are located under the root to make it a listview (so that there are no hierarchical relationships).
