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
8Kobe BryantSGLos Angeles Lakers1Tracy McGradySGHouston Rockets23Lebron JamesPFLos Angeles Lakers3Dwayne WadeSGMiami Heat15Vince CarterSGAtlanta Hawks34Charles BarkleyPFN/A15Nikola JokićPFDenver Nuggets0Russell WestbrookPGHouston Rockets7Kevin DurantPFBrooklyn Nets13James HardenPG/SGHouston Rockets13Paul GeorgeSGLos Angeles Clippers25Ben SimmonsPGPhiladelphia 76ers2Kawhi LeonardSG/SFLos Angeles Clippers21Joel EmbiidCPhiladelphia 76ers34Giannis AntetokounmpoPFMilwaukee Bucks30Stephen CurryPGGolden State Warriors11Klay ThompsonSGGolden State Warriors23Anthony DavisPFLos 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.