Dynamic Columns

A common grid requirement is a possibility to configure visible columns.

Note: this cannot be achieved using columns property, since columns property is not bindable.

One way of doing this is by using ContentResolver. ContentResolver would listen to the changes of some store, i.e. visibleColumns and re-create columns array every time the store changes. However, since grid would be re-rendered on each store change, state of the grid, i.e. scroll, column widths (if resized from the initial width) would be lost.

To avoid this, columnParams and onGetColumns callback were introduced.

Visible Columns:

Name

Continent

Browser

Visits

Name	Continent	Browser	Visits
Deanna Zemlak	North America	Internet Explorer	11
Thea Borer	South America	Safari	86
Weldon Lakin	Africa	Safari	85
Pearline Herzog	South America	Safari	81
Hermann Mohr	Europe	Opera	97
5 items	4 continents	3 browsers	360

Multi-line use case:

Name	Continent	Browser	Visits
Deanna Zemlak	North America	Internet Explorer	11
Thea Borer	South America	Safari	86
Weldon Lakin	Africa	Safari	85
Pearline Herzog	South America	Safari	81
Hermann Mohr	Europe	Opera	97
5 items	4 continents	3 browsers	360

Controller Grids Columns

<div style="margin-bottom: 10px" ws>
    Visible Columns:
    <LookupField
        values-bind="$page.visibleColumns"
        options={[
            {id: 'fullName', text: 'Name'},
            {id: 'continent', text: 'Continent'},
            {id: 'browser', text: 'Browser'},
            {id: 'visits', text: 'Visits'},
        ]}
        multiple={true}
    />
</div>

<Grid
    records-bind='$page.records'
    style={{width: "100%"}}
    columnParams-bind="$page.visibleColumns"
    onGetColumns={(visibleColumns) => {
        return allColumns.filter(c => visibleColumns.includes(c.field));
    }}
/>

<div text="Multi-line use case:" visible-expr='{$page.visibleColumns.length}' style='margin: 20px 0' />

<Grid
    records-bind="$page.records"
    style={{width: "100%"}}
    columnParams-bind="$page.visibleColumns"
    onGetColumns={(visibleColumns) => {
        let columns = allColumns.filter(c => visibleColumns.includes(c.field));
        if (!columns.length) return {};

        return {
            style: {
                background: {expr: "{$record.showDescription} ? '#fff7e6' : null"}
            },
            line1: {
                columns: [
                    ...columns,
                    {
                        header: false,
                        align: "center",
                        pad: false,
                        items: <cx>
                            <cx>
                                <Button
                                    mod="hollow"
                                    icon="drop-down"
                                    onClick={(e, {store}) => {
                                        store.toggle('$record.showDescription');
                                    }}
                                />
                            </cx>
                        </cx>,
                        visible: columns.length > 0
                    }
                ]
            },
            line3: {
                visible: {expr: "{$record.showDescription}"},
                columns: [{
                    colSpan: 1000,
                    style: 'border-top-color: rgba(0, 0, 0, 0.05)',
                    items: <cx>
                        <div>
                            {columns.map(c => <cx>
                                <div>
                                    <div
                                        text-tpl={`${c.header}: `}
                                        style='width: 70px; display: inline-block; text-align: right; margin-right: 10px; font-weight: bold'
                                    />
                                    <div text-tpl={`{$record.${c.field}}`} style='display: inline-block'/>
                                </div>
                            </cx>)}
                        </div>
                    </cx>
                }]
            }
        }
    }}
/>

Copied!Cx Fiddle

Documentation

Dynamic Columns