Variable: ColumnView

const ColumnView: object

Defined in: react/src/generated/jsx.ts:11511

Presents a large dynamic list of items using multiple columns with headers.

GtkColumnView uses the factories of its columns to generate a cell widget for each column, for each visible item and displays them together as the row for this item.

The [property@Gtk.ColumnView:show-row-separators] and [property@Gtk.ColumnView:show-column-separators] properties offer a simple way to display separators between the rows or columns.

GtkColumnView allows the user to select items according to the selection characteristics of the model. For models that allow multiple selected items, it is possible to turn on rubberband selection, using [property@Gtk.ColumnView:enable-rubberband].

The column view supports sorting that can be customized by the user by clicking on column headers. To set this up, the GtkSorter returned by [method@Gtk.ColumnView.get_sorter] must be attached to a sort model for the data that the view is showing, and the columns must have sorters attached to them by calling [method@Gtk.ColumnViewColumn.set_sorter]. The initial sort order can be set with [method@Gtk.ColumnView.sort_by_column].

The column view also supports interactive resizing and reordering of columns, via Drag-and-Drop of the column headers. This can be enabled or disabled with the [property@Gtk.ColumnView:reorderable] and [property@Gtk.ColumnViewColumn:resizable] properties.

To learn more about the list widget framework, see the overview.

CSS nodes

columnview[.column-separators][.rich-list][.navigation-sidebar][.data-table]
├── header
│   ├── <column header>
┊   ┊
│   ╰── <column header>
│
├── listview
│
┊
╰── [rubberband]

GtkColumnView uses a single CSS node named columnview. It may carry the .column-separators style class, when [property@Gtk.ColumnView:show-column-separators] property is set. Header widgets appear below a node with name header. The rows are contained in a GtkListView widget, so there is a listview node with the same structure as for a standalone GtkListView widget. If [property@Gtk.ColumnView:show-row-separators] is set, it will be passed on to the list view, causing its CSS node to carry the .separators style class. For rubberband selection, a node with name rubberband is used.

The main columnview node may also carry style classes to select the style of list presentation: .rich-list, .navigation-sidebar or .data-table.

Accessibility

GtkColumnView uses the [enum@Gtk.AccessibleRole.tree_grid] role, header title widgets are using the [enum@Gtk.AccessibleRole.column_header] role. The row widgets are using the [enum@Gtk.AccessibleRole.row] role, and individual cells are using the [enum@Gtk.AccessibleRole.grid_cell] role

Type Declaration

Name	Type	Defined in
`Item`	`"ColumnView.Item"`	react/src/generated/jsx.ts:11513
`Root`	`"ColumnView.Root"`	react/src/generated/jsx.ts:11512

CSS nodes

Accessibility

Type Declaration​

Type Declaration