Columns Menu
Some of the functionalities can be triggered from the column menu. Simply move your mouse cursor to the column header and the column menu button should appear. Clicking it should open a window with list of actions that can be done regarding selected column.
The features are:
- sorting,
- changing column order,
- column management.
Example
component.ts
Number
Name
Position
Team
import { Component } from '@angular/core';
import { GuiCellView, GuiColumnMenu, GuiSorting } from '@generic-ui/ngx-grid';
@Component({
template: `
<gui-grid [columns]="columns"
[source]="source"
[columnMenu]="columnMenu"
[sorting]="sorting"
</gui-grid>
`
})
export class ColumnsMenuComponent {
columns = [{
header: 'Number',
field: 'number',
width: 120
}, {
header: 'Name',
field: 'name',
view: GuiCellView.ITALIC
}, {
header: 'Position',
field: 'position',
view: GuiCellView.BOLD
}, {
header: 'Team',
field: 'team'
}];
columnMenu: GuiColumnMenu = {
enabled: true,
sort: true,
columnsManager: true
};
sorting: GuiSorting = {
enabled: true,
multiSorting: true
};
source = source;
}To configure column menu actions:
export interface GuiColumnMenu {
enabled?: boolean;
sort?: boolean;
filter?: boolean; // will appear in one of the next releases
columnsManager?: boolean;
}
Inputs
| Input | Type | Default | Description |
|---|---|---|---|
| enabled | boolean | false | Turns on column menu. |
| sort | boolean | false | Enabled sorting section |
| columnsManager | boolean | false | Column management allows you to turn on / off column on the grid. |