Installation and basic usage

The column settings component has a peer dependency to dragula and ng2-dragula so in order to install and use this component we need to run:

npm install @angular-generic-table/column-settings dragula ng2-dragula --save

Include column settings module in your project, for example if you want to add it to your app module:

App Module

import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GenericTableModule } from '@angular-generic-table/core';
import { ColumnSettingsModule } from '@angular-generic-table/column-settings';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    GenericTableModule,
    ColumnSettingsModule 
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Let's use the ColumnSettingsComponent in our AppComponent by wrapping the table inside our <gt-column-settings>-element (we only need to alter the html).

App Component html

  <button class="btn-link" (click)="columnSettings.toggleColumnSettings()"> {{columnSettings.active ? 'Hide column settings':'Show column settings'}}</button>
  <gt-column-settings [genericTable]="myTable" #columnSettings [gtColumnItem]="gtColumnItem">
   <generic-table [gtSettings]="configObject.settings" [gtFields]="configObject.fields" [gtData]="configObject.data"></generic-table>
  </gt-column-settings>

Add styles

Make sure to add either the scss or precompiled css to you app ex.

@import "~@angular-generic-table/column-settings/scss/column-settings";

or include the css

<link type="texts/css" rel="stylesheet" href="./node_modules/@angular-generic-table/column-settings/css/column-settings.min.css">