ColumnStore

A store specialized in handling columns. Used by the Grid to hold its columns and used as a chained store by each SubGrid to hold theirs. Should not be instantiated directly, instead access it through grid.columns or subGrid.columns.

Observing for changes

If you want to listen for changes to the columns in the ColumnStore. For example, if you are interested in when a column has been moved, simply use the on method to listen for the move event:

grid.columns.on({
    move({ records }) {
        // The `records` object contains the moved column records
    }
});

Modifying columns in the ColumnStore

// resize first column
grid.columns.first.width = 200;

// remove city column
grid.columns.get('city').remove();

// add new column
grid.columns.add({text : 'New column'});

// add new column to specific region (SubGrid)
grid.columns.add({text : 'New column', region : 'locked'});

// add new column to 'locked' region (SubGrid)
grid.columns.add({text : 'New column', locked : true});

Storing column state

To store the size and position of columns after a user makes a change, please see GridState.

Useful functions

Member	Description
add	Add a column to the grid
remove	Remove column(s) from the grid
get	Get a column by its id or field name
visibleColumns	Array of currently visible columns

Configs

Configs are options you supply in a configuration object when creating an instance of this class

autoAddField : Booleanfalse
Automatically adds a field definition to the store used by the Grid when adding a new Column displaying a non-existing field.

To enable this behaviour:
```
const grid = new Grid({
    columns : {
        autoAddField : true,
        data         : [
            // Column definitions here
        ]
    }
}
```
syncDataOnLoad : Boolean/SyncDataOnLoadOptionstrue

ColumnStore uses syncDataOnLoad by default (with threshold : 1), to ensure good performance when binding to columns in frameworks.

See syncDataOnLoad for more information.

Properties

Properties are getters/setters or publicly accessible variables on this class

isColumnStore : Booleantrue

READONLY

static

ADVANCED

Identifies an object as an instance of ColumnStore class, or subclass thereof.

bottomColumns : Column[]

READONLY

Bottom columns are the ones displayed in the bottom row of a grouped header, or all columns if not using a grouped header. They are the columns that actually display any data.
topColumns : Column[]

READONLY

Returns the top level columns. If using grouped columns, this is the top level columns. If no grouped columns are being used, this is the leaf columns.
usesAutoHeight : Boolean

internal

READONLY

Checks if any column uses autoHeight
usesFlexAutoHeight : Boolean

internal

READONLY

Checks if any flex column uses autoHeight
visibleColumns : Column[]

READONLY

Returns the visible leaf headers which drive the rows' cell content.
isColumnStore : Booleantrue

READONLY

ADVANCED

Identifies an object as an instance of ColumnStore class, or subclass thereof.

Functions

Functions are methods available for calling on the class

getColumnClass( type )
: Column

internal

static

Returns registered column class for specified type.

registerColumnType( columnClass, simpleRendererfalse )

static

Call from custom column to register it with ColumnStore. Required to be able to specify type in column config.

// create and register custom column
class CustomColumn {
 static get type() {
     return 'custom';
 }
}
ColumnStore.registerColumnType(CustomColumn, true);
// now possible to specify in column config
let grid = new Grid({
  columns: [
    { type: 'custom', field: 'id' }
  ]
});

createRecord( )

private

Used internally to create a new record in the store. Creates a column of the correct type by looking up the specified type among registered columns.
generateColumnForField( dataField, defaults )
: Column

internal

Generates a new Column instance which may be subsequently added to this store to represent the passed DataField of the owning Grid's store.
get( field )
: Column

Get column by field. To be sure that you are getting exactly the intended column, use getById with the columns id instead.
getTreeMixedClass( BaseClass )
: Function

private

Returns a cached class that combines the given column class with TreeColumnMixin. Uses class caching to avoid recreating mixed classes repeatedly.
indexOf( recordOrId )
: Number
indexOf extended to also accept a columns field, for backward compatibility.
```
grid.columns.indexOf('name');
```
removeAll( silentfalse )
: Boolean

Removes all columns.

Triggers: beforeRemove, removeAll, change

Events

Events are triggered for certain actions in this class and can be listened for to react to those actions in your code

columnHide

Fires when a column has been hidden.
columnShow

Fires when a column is shown.

Event handlers

Event handlers are callbacks called as a result of certain actions in this class

ColumnStore

Observing for changes

Modifying columns in the ColumnStore

Storing column state

Useful functions

See also

Configs

Properties

Functions

Events

Event handlers

Source path

Inheritance tree3

Mixins16

Contents