salix/front/core/components/smart-table/index.html

<div class="vn-pa-md">
    <vn-horizontal class="actions">
        <div class="actions-left">
            <vn-button icon="view_column"
                id="shownColumns"
                ng-if="$ctrl.options.activeButtons.shownColumns"
                ng-click="smartTableColumns.show($event)"
                vn-tooltip="Shown columns">
            </vn-button>
            <div ng-transclude="actions"></div>
        </div>
        <div class="actions-right">
            <div class="totalRows" ng-if="$ctrl.model.data"> 
                {{model.data.length}} 
                <span translate>results</span> 
            </div>
            <vn-button icon="search"
                ng-if="$ctrl.options.activeButtons.search"
                ng-click="$ctrl.displaySearch()"
                vn-tooltip="Search">
            </vn-button>
            <div class="button-group"
                ng-if="$ctrl.options.activeButtons.crud">
                <vn-button icon="add"
                    ng-click="$ctrl.createRow()"
                    vn-tooltip="Add new row">
                </vn-button>
                <vn-button icon="undo"
                    ng-click="$ctrl.model.undoChanges()"
                    vn-tooltip="Undo">
                </vn-button>
                <vn-button icon="delete"
                    ng-click="deleteConfirmation.show($event)"
                    ng-show="$ctrl.checkedRows.length > 0"
                    vn-tooltip="Remove selected rows">
                </vn-button>
                <vn-button icon="save"
                    ng-click="$ctrl.saveAll()"
                    vn-tooltip="Save data">
                </vn-button>
            </div>
            <vn-button icon="refresh"
                ng-click="$ctrl.model.refresh()"
                vn-tooltip="Refresh">
            </vn-button>
        </div>
    </vn-horizontal>
    <div id="table"></div>
    <div ng-transclude="pagination">
        <vn-pagination
            ng-if="$ctrl.model"
            model="$ctrl.model"
            class="vn-pt-md">
        </vn-pagination>
    </div>
</div>

<vn-confirm
    vn-id="deleteConfirmation"
    on-accept="$ctrl.deleteAll()"
    question="Are you sure you want to continue?"
    message="Remove selected rows">
</vn-confirm>

<vn-crud-model
    ng-if="$ctrl.viewConfigId"
    vn-id="userViewModel" 
    url="UserConfigViews"
    link="{tableCode: $ctrl.viewConfigId, userFk: $ctrl.currentUserId}"
    data="$ctrl.viewConfig"
    auto-load="true">
</vn-crud-model>
<vn-popover vn-id="smart-table-columns" message="Fields to show">
    <tpl-body>
        <div class="smart-table-columns vn-pa-md vn-w-sm">
            <vn-horizontal>
                <h6 translate style="margin:0">Shown columns</h6>
                <vn-icon 
                    vn-none
                    icon="info" 
                    color-marginal
                    vn-tooltip="Check the columns you want to see"/>
            </vn-horizontal>
            <div class="vn-mb-md">
                <vn-check label="Tick all"
                    ng-model="$ctrl.checkAll">
                </vn-check>
            </div>

            <vn-horizontal class="vn-mb-md">
                <vn-check ng-repeat="column in $ctrl.columns"
                    label="{{column.caption}}"
                    ng-model="$ctrl.viewConfig[0].configuration[column.field]">
                </vn-check>
            </vn-horizontal>
            <vn-horizontal>
                <vn-button
                    label="Save"
                    ng-click="$ctrl.saveViewConfig()">
                </vn-button>
            </vn-horizontal>
        </div>
    </tpl-body>
</vn-popover>