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.