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 Bryant
SG
Los Angeles Lakers
1
Tracy McGrady
SG
Houston Rockets
23
Lebron James
PF
Los Angeles Lakers
3
Dwayne Wade
SG
Miami Heat
15
Vince Carter
SG
Atlanta Hawks
34
Charles Barkley
PF
N/A
15
Nikola Jokić
PF
Denver Nuggets
0
Russell Westbrook
PG
Houston Rockets
7
Kevin Durant
PF
Brooklyn Nets
13
James Harden
PG/SG
Houston Rockets
13
Paul George
SG
Los Angeles Clippers
25
Ben Simmons
PG
Philadelphia 76ers
2
Kawhi Leonard
SG/SF
Los Angeles Clippers
21
Joel Embiid
C
Philadelphia 76ers
34
Giannis Antetokounmpo
PF
Milwaukee Bucks
30
Stephen Curry
PG
Golden State Warriors
11
Klay Thompson
SG
Golden State Warriors
23
Anthony Davis
PF
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;

}

API - Inputs

InputTypeDefaultDescription
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.

Related articles:

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