TimelineColumn component

The TimelineColumns UI component is a collection of columns represented as the timeline.

Options

Option
Description
Type
Default
component
The path to the component's .js file, relative to RequireJS.
String
'Magento_Ui/js/timeline/timeline'
recordTmpl
The path to the .html template of the listing (grid) record.
String
'ui/timeline/record'
dateFormat
Date format for start_time and end_time columns.
String
'YYYY-MM-DD HH:mm:ss'
headerFormat
Date format for the displayed column headers.
String
'ddd MM/DD'
scale
The scale of the grid range in days.
Number
7
scaleStep
The scaling step in days.
Number
1
minScale
The minimal scale in days.
Number
7
maxScale
The maximum scale in days.
Number
28
displayMode
Initial display mode.
String
'timeline'
displayModes
List of available display modes.
Object
{timeline: {label: 'Timeline',value: 'timeline',template: 'ui/timeline/timeline'}}
viewConfig
Configurations for the TimelineView component.
Object
{timeline: {label: 'Timeline',value: 'timeline',template: 'ui/timeline/timeline'}}

Sources files

Extends Columns:

Examples

Integration

<listing>
    <columns name="cms_page_columns" component="Magento_Ui/js/timeline/timeline">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="scale" xsi:type="number">7</item>
            </item>
        </argument>
        <column name="name">
            <settings>
                <filter>text</filter>
                <label translate="true">Name</label>
            </settings>
        </column>
        <column name="start_time" class="Magento\Ui\Component\Listing\Columns\Date" component="Magento_Ui/js/grid/columns/date">
            <settings>
                <dateFormat>YYYY-MM-DD HH:mm:ss</dateFormat>
                <label translate="true">Start Time</label>
            </settings>
        </column>
        <column name="end_time" class="Magento\Ui\Component\Listing\Columns\Date" component="Magento_Ui/js/grid/columns/date">
            <settings>
                <dateFormat>YYYY-MM-DD HH:mm:ss</dateFormat>
                <label translate="true">End Time</label>
            </settings>
        </column>
    </columns>
</listing>

Result

TimelineColumns Component Example