Skip to content

TableView Addon

Evgeny Chesnokov requested to merge echesnokov/kirigami-addons:tableview into master

Description

This plugin provides a set of components for displaying data in a tabular format. You can display both regular lists (QAbstractListView/ListModel) and full tables (QAbstractTableView/TableModel).

Screenshot_20240219_024122

Content

The plugin includes the following components:

  • KTableView
  • KHeaderComponent

KTableView

Main table widget. In order to use the table, it is enough to provide a model that needs to be displayed and specify columns with data.

Usage example:

 KTableView {
     model: customModel
     
     KHeaderComponent {
         width: 200
         title: i18n("Title")
         roleName: "title"
     }
     
     KHeaderComponent {
         width: 200
         title: i18n("Value")
         roleName: "value"
     }
 }

The component provides the ability to set the following properties to change the appearance of the table:

  • useStroke
  • alternatingRows
  • compact

The component uses ItemSelectionModel to implement custom selection of table rows. The behavior of the selector can be changed using the properties:

  • selectionType
  • selectionMode

Instead of the built-in ItemSelectionModel in the selectionModel property, you can set your own instance of the class, for example, to access selected items from the C++ side.

To indicate sorting, the table has the sortRole and sortOrder properties. If the role property in KHeaderComponent matches sortRole, then an indicator will appear in the table header.

More details about all properties, methods and signals can be found in the source code.

KHeaderComponent

The component that is responsible for representing the columns that will be displayed in the table. In this component, you can change the main header widget, assign a custom widget for each row in the current column, or add an additional widget next to the header:

  • itemDelegate
  • headerDelegate
  • leading

You can disable the ability to resize a column or move it to another location using the properties:

  • resizable
  • draggable

Screenshots

Screenshot_20240219_024139 Screenshot_20240219_024258 Screenshot_20240219_024313 Screenshot_20240219_024326

Edited by Evgeny Chesnokov

Merge request reports

Loading