Customize column settings component

Inputs

Attribute	Type	Usage
genericTable	table instance	used for linking column settings component to table
gtHeaderClasses	string	used for adding classes to column settings header element. By default the following classes are added: px-3 pt-3 pb-2 table-bordered border-left-0 border-right-0 border-bottom-0 alert-info	(OPTIONAL)
gtWrapperClasses	string	used for adding classes to column settings header element. By default the following classes are added: px-3 pb-3 table-bordered border-left-0 border-right-0 border-top-0 alert-info	(OPTIONAL)
overlay	boolean	display overlay on top of the table, default value is true	(OPTIONAL)
gtColumnItem	TemplateRef	override default item element, more info below	(OPTIONAL)
gtTexts	object	use to override default texts, more info below	(OPTIONAL)

Available texts:

Key	Description	Default
title	Title text for the component	Columns
help	Help text displayed under the title	Double click to toggle visibility, drag and drop to reorder.

Usage

Custom template for gtColumnItem

  <!-- custom template for gtColumnItem -->
  <ng-template #gtColumnItem let-column>
   <span class="badge badge-default">{{column.columnOrder + 1}}</span>
   <span (dblclick)="columnSettings.toggleColumnVisibility(column)" class="badge" [ngClass]="{'badge-success':column.visible !== false, 'badge-danger':column.visible === false}">{{configObject.fields | gtProperty:column.objectKey:'name'}}</span>
  </ng-template>

  <!-- button with function for toggling column settings visibility -->
  <button class="btn-link" (click)="columnSettings.toggleColumnSettings()"> {{columnSettings.active ? 'Hide column settings':'Show column settings'}}</button>

  <!-- generic table wrapped by gt-column-settings -->
  <gt-column-settings [genericTable]="myTable" #columnSettings [gtColumnItem]="gtColumnItem">
   <generic-table [gtSettings]="configObject.settings" [gtFields]="configObject.fields" [gtData]="configObject.data"></generic-table>
  </gt-column-settings>