PHP 7.3 reached end of support in December 2021 and Adobe Commerce 2.3.x reaches end of support in September 2022. You may want to consider planning your upgrade now to Adobe Commerce 2.4.x and PHP 7.4.x to help maintain PCI compliance.

TimelineColumns component

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

Configuration 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

Integrate the TimelineColumns component with the Listing component

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<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