Components/Data display

EList List

import EUI 1.0

Examples

Preset list items

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EList { width: 420 height: 270 bordered: true items: [{ "key": "a", "title": qsTr("Project Alpha"), "description": qsTr("Click the controls or resize the window to explore.") }, { "key": "b", "title": qsTr("Project Beta"), "description": qsTr("Click the controls or resize the window to explore.") }, { "key": "c", "title": qsTr("Project Gamma"), "description": qsTr("Click the controls or resize the window to explore.") }] }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Header and footer

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EList { width: 420 height: 270 headerText: qsTr("Project Alpha") footerText: qsTr("Click the controls or resize the window to explore.") items: [{ "key": "a", "title": qsTr("Project Alpha"), "description": qsTr("Click the controls or resize the window to explore.") }, { "key": "b", "title": qsTr("Project Beta"), "description": qsTr("Click the controls or resize the window to explore.") }, { "key": "c", "title": qsTr("Project Gamma"), "description": qsTr("Click the controls or resize the window to explore.") }] }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Pagination

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EList { width: 420 height: 270 pageSize: 2 bordered: true pagination: true items: [{ "key": "a", "title": qsTr("Project Alpha"), "description": qsTr("Click the controls or resize the window to explore.") }, { "key": "b", "title": qsTr("Project Beta"), "description": qsTr("Click the controls or resize the window to explore.") }, { "key": "c", "title": qsTr("Project Gamma"), "description": qsTr("Click the controls or resize the window to explore.") }] }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Responsive grid

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EList { width: 420 height: 270 itemDelegate: Component { EListItem { split: false } } grid: ({ "xs": 1, "sm": 2, "md": 3, "gutter": 12, "itemHeight": 130 }) items: [{ "key": "a", "title": qsTr("Project Alpha"), "description": qsTr("Click the controls or resize the window to explore.") }, { "key": "b", "title": qsTr("Project Beta"), "description": qsTr("Click the controls or resize the window to explore.") }, { "key": "c", "title": qsTr("Project Gamma"), "description": qsTr("Click the controls or resize the window to explore.") }] }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Empty and loading states

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EList { items: [] width: 420 height: 270 bordered: true }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Properties

PropertyDescriptionValues and default

borderedbool

Show the list outer border.

Defaultfalse

columnsintRead only

Column count resolved from component width and grid breakpoints.

DefaultComputed

currentPageint

Current page, starting at 1 and clamped to the valid range.

Default1

effectivePageSizeintRead only

Validated page size.

DefaultComputed

emptyTextstring

Description shown for an empty list.

DefaultELocale.texts.NoData

footerDelegateComponent

Custom list footer component.

Defaultnull

footerTextstring

List footer text.

Default""

gridvar

Responsive list grid settings; breakpoints follow the container width.

Fields:
columns, column, xs
sm, md, lg
xl, xxl, gutter
itemHeight

Defaultnull

gutterrealRead only

Validated grid gutter.

DefaultComputed

headerDelegateComponent

Custom list header component.

Defaultnull

headerTextstring

List header text.

Default""

itemCountintRead only

Total number of source items.

DefaultComputed

itemDelegateComponent

Custom item delegate; receives itemData, itemIndex, and related context.

Defaultnull

itemsvar

List data array; replace it to update the view.

Default[]

loadingbool

Show the loading overlay.

Defaultfalse

pageCountintRead only

Computed total page count, at least 1.

DefaultComputed

pageItemsvarRead only

Current page items, or all data when pagination is disabled.

DefaultComputed

pageOffsetintRead only

Source array offset of the first item on the current page.

DefaultComputed

pageSizeint

Items per page; the effective value is at least 1.

Default10

paginationbool

Enable built-in pagination.

Defaultfalse

rowKeyvar

Stable key field or (item, index) callback; missing fields fall back to the index.

Default"key"

splitbool

Show dividers between list items.

Defaulttrue

viewaliasRead only

Current underlying EListy or GridView instance.

DefaultviewLoader.item

Signals

SignaturePurpose

pageChanged(int page)

Emitted when the current page changes; page is the new one-based page number.

itemClicked(var item, int index)

Emitted when a list item is clicked; item is its data and index is its zero-based index.

Methods

SignaturePurpose

normalizePage()

Clamp the current page to the valid range, for example after the page count decreases.

setPage(page)

Switch to one-based page page; return true on success, or false when disabled or the page is invalid.

resolveColumns()

Return the list column count for the current width and grid configuration.