Insert column at the first position in grid

I am trying to insert row selection at the first position of grid but it always ends up among hidden columns. I did the same thing with delete button column and it worked just fine.

protected getColumns(): Slick.Column[] {
var cols = super.getColumns();

    cols.unshift({
        field: 'Delete Row',
        name: '',
        format: ctx => '<a class="inline-action delete-row" title="delete">' +
            '<i class="fa fa-trash-o text-red"></i></a>',
        width: 24,
        minWidth: 24,
        maxWidth: 24,
        visible: true
    });

    cols.unshift(Serenity.GridRowSelectionMixin.createSelectColumn(() => this.rowSelection));

    return cols;

The problem is not incorrect implementation of selection row. I know that because I tried it with different columns with same results. I also tried to set "visible" to true Any ideas? Thanks

This code will make your selection column stay at first position

protected getPersistedSettings() {
    let setting = super.getPersistedSettings();

    let idCol = Q.tryFirst(setting.columns, x => x.id == "__select__");
    if (idCol) {
        setting.columns.splice(setting.columns.indexOf(idCol), 1);
        setting.columns.splice(0, 0, idCol);
    }

    return setting;
}

But make sure that the selection is not in hidden list