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
Dessie Nolan	Europe	Opera	59
Velma Gorczany	South America	Firefox	24
Alisha Hartmann	Asia	Firefox	29
Briana Ruecker	South America	Edge	45
Marquis Jacobs	Africa	Internet Explorer	49
5 items	4 continents	4 browsers	206

Multi-line use case:

Name	Continent	Browser	Visits
Dessie Nolan	Europe	Opera	59
Velma Gorczany	South America	Firefox	24
Alisha Hartmann	Asia	Firefox	29
Briana Ruecker	South America	Edge	45
Marquis Jacobs	Africa	Internet Explorer	49
5 items	4 continents	4 browsers	206

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