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
8 Kobe BryantSG Los Angeles Lakers 1 Tracy McGradySG Houston Rockets 23 Lebron JamesPF Los Angeles Lakers 3 Dwayne WadeSG Miami Heat 15 Vince CarterSG Atlanta Hawks 34 Charles BarkleyPF N/A 15 Nikola JokićPF Denver Nuggets 0 Russell WestbrookPG Houston Rockets 7 Kevin DurantPF Brooklyn Nets 13 James HardenPG/SG Houston Rockets 13 Paul GeorgeSG Los Angeles Clippers 25 Ben SimmonsPG Philadelphia 76ers 2 Kawhi LeonardSG/SF Los Angeles Clippers 21 Joel EmbiidC Philadelphia 76ers 34 Giannis AntetokounmpoPF Milwaukee Bucks 30 Stephen CurryPG Golden State Warriors 11 Klay ThompsonSG Golden State Warriors 23 Anthony DavisPF Los Angeles Lakers
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 on of the next releases

	columnsManager?: boolean;

}
NameTypeDefault valueDescription
enabled booleanfalse Turns on column menu.
sort booleanfalse Enabled sorting section
columnsManager booleanfalse Column management allows you to turn on / off column on the grid.

Related articles:

We use cookies to improve your experience. If you continue browsing, we assume that you consent to our use of cookies.