Lists

import {List} from 'cx/widgets';

The List control displays a collection of items and offers navigation and selection.

Header 1
Description
Header 2
Description
Header 3
Description
Header 4
Description
Header 5
Description

Examples:

Grouping

<List
    records-bind="$page.records"
    selection={PropertySelection}
    style="width:200px"
    emptyText="No results found."
    mod="bordered"
    onItemDoubleClick={(e, {store}) => { MsgBox.alert(store.get('$record.text')) }}
>
    <div>
        <strong>Header <Text expr="{$index}+1"/></strong>
    </div>
    Description
</List>

Copied!Cx Fiddle

Configuration

Property	Description	Type
grouping	Grouping configuration. Check the example for more information.	config
indexAlias indexName	Alias used to expose record index. Defaults to `$index`.	string
recordAlias recordName	Alias used to expose record data. Defaults to `$record`.	string
records	An array of records to be displayed in the list.	array
selection	Selection configuration. See Selections for more details.	config
sortDirection	A binding used to store the sort direction. Available only if `sorters` are not used. Possible values are `"ASC"` and `"DESC"`. Defaults to `"ASC"`.	string
sortField	A binding used to store the name of the field used for sorting the collection. Available only if `sorters` are not used.	string
sorters	A binding used to store the sorting order list. This should be an array of objects with `field` and `direction` properties (equivalent to `sortField` and `sortDirection` properties).	array
class className	Additional CSS classes to be applied to the element. If an object is provided, all keys with a "truthy" value will be added to the CSS class list.	string/object
itemClass itemClassName	CSS class that will be applied to all list items.	string/object
itemDisabled	Parameter used for disabling specific items in the list.	boolean
itemStyle	CSS style that will be applied to all list items.	string/object
mod	Appearance modifier. For example, `mod="big"` will add the CSS class `.cxm-big` to the block element.	string/array
outerLayout	Defines the outer layout which wraps the widget.	widget
putInto contentFor	Used with outer layouts. Specifies the name of the content placeholder which should render the widget.	string
scrollSelectionIntoView	Set to `true` to add ensure that selected record is automatically scrolled into the view on selection change.	boolean
selectMode	Lists in this mode perform selection automatically without offering cursor navigation.	boolean
selectOnTab	If this field is set to `true` pressing the `Tab` key will select the item under cursor.	boolean
sortOptions	Options for data sorting. See Intl.Collator options for more info.	record
style	Style object applied to the wrapper div. Used for setting the dimensions of the element.	string/object
vdomKey	Key that will be used as the key when rendering the React component.	string
visible if	Visibility of the widget. Defaults to `true`.	boolean

Documentation

Lists