Effektiv Datavisning med ngx-datatable i Angular

I den moderne webudvikling er effektiv visning og manipulation af store datasæt afgørende for en god brugeroplevelse. Angular-udviklere søger konstant efter robuste og fleksible løsninger til at håndtere datatabeller, der kan tilbyde funktioner som sortering, søgning, paginering og tilpasningsmuligheder for rækker per side. Blandt de mange tilgængelige muligheder har ngx-datatable etableret sig som en førende løsning, især på grund af dens ydeevne og rigdom af funktioner.

Denne artikel vil dykke ned i, hvorfor ngx-datatable er et foretrukket valg for mange Angular-projekter, og hvordan du effektivt kan implementere og udnytte dens kraftfulde funktioner, med særligt fokus på kolonnefiltrering. Vi vil gennemgå installation, grundlæggende opsætning, og trin-for-trin instruktioner til at tilføje dynamisk søgning og filtrering til dine datatabeller.

Hvorfor Vælge ngx-datatable til Dine Angular Projekter?

Mange udviklere har oplevet frustration med datatabelbiblioteker, der ikke integreres problemfrit med Angulars reaktive natur. Problemer som tabte data efter sorteringsoperationer eller vanskeligheder med at opdatere tabellen dynamisk er almindelige. Dette var et problem, som mange stod overfor med andre populære biblioteker som datatables.net, hvor data ofte forsvandt efter interaktioner.

ngx-datatable skiller sig ud af flere årsager. For det første er det bygget specifikt til Angular, hvilket sikrer en mere problemfri integration og bedre ydeevne. For det andet tilbyder det en række essentielle funktioner 'ud af boksen', som er afgørende for en moderne datatabel:

• Sortering: Mulighed for at sortere data efter en eller flere kolonner.
• Søgning/Filtrering: Kraftfulde værktøjer til at finde specifikke data i store sæt.
• Paginering: Opdeling af store datasæt i mindre, håndterbare sider.
• Rækker per side: Brugerdefineret antal rækker, der vises pr. side.
• Rækkevalg: Mulighed for at vælge enkelte eller flere rækker.
• Kolonneomordning: Brugere kan trække og slippe kolonner for at omarrangere dem.
• Responsivitet: Tilpasser sig forskellige skærmstørrelser.

Udover funktionaliteten er ngx-datatable også et open source-projekt med et aktivt fællesskab og en god stjernebedømmelse på GitHub, hvilket indikerer dets popularitet og pålidelighed. Selvom det er designet med Material Design-rammeværket i tankerne, kan det med lidt tilpasning bruges med andre CSS-rammeværker som Bootstrap, selvom det kan kræve lidt ekstra stylingarbejde.

Installation og Grundlæggende Opsætning

At komme i gang med ngx-datatable er en ligetil proces. Følg disse trin for at integrere det i dit Angular-projekt:

Trin 1: Installer pakken

Åbn din terminal i dit Angular-projekts rodmappe og kør følgende kommando:

npm install @swimlane/ngx-datatable --save

Dette vil downloade og installere ngx-datatable-pakken og tilføje den til dine projektets afhængigheder i package.json filen. Du bør se en linje som "@swimlane/ngx-datatable": "^20.0.0" (versionsnummeret kan variere) under "dependencies".

Trin 2: Opdater din AppModule

For at Angular kan genkende og bruge ngx-datatable, skal du importere NgxDatatableModule i din app.module.ts fil. Tilføj det til import-array'et:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxDatatableModule } from '@swimlane/ngx-datatable'; // Tilføj denne linje

import { AppComponent } from './app.component';

@NgModule({
 declarations: [
 AppComponent
 ],
 imports: [
 BrowserModule,
 NgxDatatableModule // Tilføj denne linje
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

Trin 3: Importer tema-stilarter

ngx-datatable leveres med tre indbyggede temaer: Material, Dark og Bootstrap. Du skal importere mindst ét af disse temaer for at tabellen kan se korrekt ud. Du har to primære måder at gøre dette på:

Metode i: Importer via style.scss (eller style.css)

Tilføj følgende linjer til din globale stylesheet-fil (f.eks. src/styles.scss):

/* styles.scss */
@import '~@swimlane/ngx-datatable/index.css';
@import '~@swimlane/ngx-datatable/themes/material.scss'; // Vælg dit foretrukne tema
@import '~@swimlane/ngx-datatable/themes/dark.scss';
@import '~@swimlane/ngx-datatable/themes/bootstrap.scss';
@import '~@swimlane/ngx-datatable/assets/icons.css'; // For ikoner som sorteringspile

Metode ii: Tilføj temaer til angular.json

En alternativ metode er at tilføje stierne til temaerne direkte i din angular.json fil under "styles" array'et:

"styles": [
 "src/styles.scss",
 "./node_modules/@swimlane/ngx-datatable/index.css",
 "./node_modules/@swimlane/ngx-datatable/themes/material.scss",
 "./node_modules/@swimlane/ngx-datatable/themes/dark.scss",
 "./node_modules/@swimlane/ngx-datatable/themes/bootstrap.scss",
 "./node_modules/@swimlane/ngx-datatable/assets/icons.css"
],

Vælg den metode, der passer bedst til dit projekt. For de fleste er import via style.scss ofte mere fleksibel.

Implementering af en Grundlæggende Datatabel

Efter installationen kan du nu oprette din datatabel i din komponent. Lad os tage udgangspunkt i app.component.html og app.component.ts for demonstrationen.

HTML-skabelon (app.component.html)

Her er et eksempel på en grundlæggende ngx-datatable-struktur:

<input class="input-lg" type='text' style='padding:8px;margin:15px auto;width:30%;' placeholder='Type to filter the Store Name...' (keyup)='updateFilterStoreName($event)' />
<ngx-datatable
 class="material"
 [rows]="stores"
 [columnMode]="'force'"
 [headerHeight]="50"
 [footerHeight]="50"
 [limit]="20"
 [reorderable]="reorderable"
 [scrollbarH]="true"
 [rowHeight]="'auto'"
 [selected]="selected"
 [selectionType]="'checkbox'"
 (activate)="onActivate($event)"
 (select)='onSelect($event)'>

 <ngx-datatable-column
 [width]="30"
 [sortable]="false"
 [canAutoResize]="false"
 [draggable]="false"
 [resizeable]="false"
 [headerCheckboxable]="true"
 [checkboxable]="true">
 </ngx-datatable-column>

 <ngx-datatable-column name="storeName">
 <ng-template let-value="value" ngx-datatable-cell-template>
 {{value}}
 </ng-template>
 </ngx-datatable-column>

 <ngx-datatable-column name="storeDesc">
 <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
 {{value}}
 </ng-template>
 </ngx-datatable-column>

 <ngx-datatable-column name="storeUrl">
 <ng-template let-value="value" ngx-datatable-cell-template>
 {{value}}
 </ng-template>
 </ngx-datatable-column>

 <ngx-datatable-column name="storeId" [width]="10" value="Edit">
 <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
 <a [routerLink]="['/stores/add-new-store',value]">
 <i class="fa fa-edit"></i>
 </a>
 </ng-template>
 </ngx-datatable-column>

 <ngx-datatable-column name="storeId" [width]="10">
 <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
 <a style="cursor: pointer;" (click)="onStoreDelete(value)"><i class="fa fa-trash-o"></i></a>
 </ng-template>
 </ngx-datatable-column>
</ngx-datatable>

TypeScript-komponent (app.component.ts)

I din komponent skal du definere de data, der skal vises, og de metoder, der håndterer tabelinteraktioner:

import { Component, OnInit } from '@angular/core';

interface Store {
 storeName: string;
 storeDesc: string;
 storeUrl: string;
 storeId: number;
}

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
 stores: Store[] = [];
 cacheStores: Store[] = []; // Bruges til filtrering
 selected = [];
 reorderable = true;

 ngOnInit() {
 // Dummy data til demonstration. I et rigtigt projekt ville dette komme fra en API.
 this.stores = [
 { storeId: 1, storeName: 'Tech Gadget Store', storeDesc: 'Elektronik og gadgets', storeUrl: 'https://techgadget.com' },
 { storeId: 2, storeName: 'Bookworm Haven', storeDesc: 'Bøger og litteratur', storeUrl: 'https://bookhaven.dk' },
 { storeId: 3, storeName: 'Fashion Forward', storeDesc: 'Tøj og accessories', storeUrl: 'https://fashionforward.net' },
 { storeId: 4, storeName: 'Home & Decor', storeDesc: 'Boligindretning', storeUrl: 'https://homedecor.com' },
 { storeId: 5, storeName: 'Gourmet Delights', storeDesc: 'Mad og delikatesser', storeUrl: 'https://gourmetdelights.eu' },
 { storeId: 6, storeName: 'Outdoor Adventures', storeDesc: 'Udstyr til friluftsliv', storeUrl: 'https://outdooradventures.org' }
 ];
 this.cacheStores = [...this.stores]; // Kopier original data til cache
 }

 onSelect({ selected }) {
 console.log('Valgt række:', selected, this.selected);
 if (selected && selected.length > 0) {
 console.log('Valgt storeId:', selected[0].storeId);
 }
 }

 onActivate(event) {
 console.log('Aktiveringshændelse:', event);
 }

 onStoreDelete(storeId: number) {
 console.log('Slet butik med ID:', storeId);
 // Implementer sletningslogik her, f.eks. at fjerne fra 'stores' array og opdatere cache.
 this.stores = this.stores.filter(s => s.storeId !== storeId);
 this.cacheStores = [...this.stores]; // Opdater cache efter sletning
 }

 // Denne metode håndterer filtrering af 'storeName'
 updateFilterStoreName(event: any) {
 const val = event.target.value.toLowerCase();

 // Filtrer vores cachede array for at undgå tab af data
 const temp = this.cacheStores.filter(function (d) {
 return d.storeName.toLowerCase().indexOf(val) !== -1 || !val;
 });

 // Opdater den synlige 'stores' array
 this.stores = temp;
 }
}

Forklaring af Attributter og Formål

Lad os gennemgå nogle af de vigtige attributter, der bruges i HTML-skabelonen:

• [rows]="stores": Dette er kernen i din tabel. Det binder datakilden (this.stores array'et) til tabellen. Hver post i dette array repræsenterer en række i tabellen.
• [columnMode]="'force'": Sørger for, at kolonner udfylder den tilgængelige bredde jævnt, og forhindrer dem i at blive for smalle eller brede.
• [headerHeight]="50" og [footerHeight]="50": Sætter faste højder for tabeloverskriften og sidefoden (hvor paginering typisk vises).
• [limit]="20": Aktiverer paginering og sætter standardantallet af rækker per side til 20.
• [reorderable]="reorderable": Gør det muligt for brugere at omarrangere kolonner ved at trække og slippe dem.
• [scrollbarH]="true": Viser en horisontal scrollbar, hvis indholdet overstiger tabelbredden, hvilket er nyttigt for tabeller med mange kolonner.
• [rowHeight]="'auto'": Justerer rækkehøjden dynamisk baseret på indholdet.
• [selected]="selected" og [selectionType]="'checkbox'": Aktiverer rækkevalg. selectionType='checkbox' tilføjer en afkrydsningsboks til hver række.
• (select)='onSelect($event)': En output-event, der udløses, når en række vælges eller fravælges. Den giver adgang til de valgte rækkeobjekter.
• (activate)="onActivate($event)": En output-event, der udløses, når en række aktiveres (f.eks. ved klik).

For individuelle kolonner bruges <ngx-datatable-column>. name="storeName" binder kolonnen til storeName-egenskaben i dine dataobjekter. Brugen af <ng-template ngx-datatable-cell-template> giver dig fuld kontrol over, hvordan hver celles indhold gengives, hvilket er utroligt fleksibelt for at vise komplekse data eller handlinger (som redigering og sletning).

Avanceret Kolonnefiltrering

Den mest efterspurgte funktion i en datatabel er ofte muligheden for at filtrere data. ngx-datatable gør dette relativt nemt med en kombination af en input-boks og en TypeScript-metode. I eksemplet ovenfor fokuserer vi på at filtrere efter storeName.

Filtreringslogik i updateFilterStoreName

Se på updateFilterStoreName-metoden i app.component.ts:

updateFilterStoreName(event: any) {
 const val = event.target.value.toLowerCase();

 // Filtrer vores cachede array for at undgå tab af data
 const temp = this.cacheStores.filter(function (d) {
 return d.storeName.toLowerCase().indexOf(val) !== -1 || !val;
 });

 // Opdater den synlige 'stores' array
 this.stores = temp;
}

Lad os nedbryde denne logik:

1. const val = event.target.value.toLowerCase();: Denne linje henter den aktuelle værdi fra input-feltet (det teksten, brugeren har indtastet) og konverterer den til små bogstaver. Dette sikrer, at filtreringen er case-insensitiv, hvilket giver en bedre brugeroplevelse.
2. const temp = this.cacheStores.filter(...): Dette er kernen i filtreringen. I stedet for at filtrere direkte på this.stores-arrayet (som er det, der vises i UI'en), filtrerer vi på this.cacheStores. this.cacheStores er en kopi af den originale, ufiltrerede datamængde. Dette er en bedste praksis, fordi det sikrer, at du altid har adgang til alle dine originale data, selv efter flere filtreringsoperationer. Hvis du filtrerede this.stores direkte, ville du miste de rækker, der blev filtreret fra, og du ville ikke kunne gendanne dem uden at genindlæse alle data.
3. return d.storeName.toLowerCase().indexOf(val) !== -1 || !val;: Dette er filtreringsbetingelsen.
   • d.storeName.toLowerCase().indexOf(val) !== -1: Tjekker om den indtastede filterværdi (val) findes som en substring i butiksnavnet (d.storeName), efter at begge er konverteret til små bogstaver. Hvis indexOf returnerer -1, betyder det, at substringen ikke blev fundet. Hvis den returnerer noget andet (0 eller et positivt tal), betyder det, at den blev fundet.
   • || !val: Denne del af betingelsen er vigtig. Hvis val er tom (dvs. brugeren har slettet alt i input-feltet), vil !val være sandt, og alle rækker fra cacheStores vil blive inkluderet i temp-arrayet. Dette nulstiller effektivt filtreringen og viser alle originale data igen.
4. this.stores = temp;: Til sidst tildeles det filtrerede temp-array til this.stores. Da this.stores er bundet til [rows]-attributten i <ngx-datatable>, vil tabellen automatisk opdatere sig selv for at vise de filtrerede resultater.

Andre Nyttige Funktioner og Overvejelser

Udover filtrering og de grundlæggende attributter er der andre funktioner, der er værd at bemærke:

Rækkevalg

Som vist i eksemplet, håndteres rækkevalg via (select)-eventen. Når en række vælges (f.eks. ved at klikke på afkrydsningsboksen), vil onSelect-metoden blive kaldt. Det selected-array, der sendes med eventen, indeholder de fulde dataobjekter for de valgte rækker. Dette giver dig mulighed for at udføre handlinger på de valgte data, såsom masseopdateringer eller sletninger.

Tilpassede Celler (ng-template)

Evnen til at definere tilpassede celleskabeloner er en af ngx-datatables største styrker. Med <ng-template let-value="value" ngx-datatable-cell-template> får du adgang til cellens værdi (value) og i nogle tilfælde hele rækkeobjektet (row). Dette er især nyttigt for:

• At formatere data (f.eks. datoer, valutaer).
• At vise ikoner baseret på data.
• At tilføje handlinger (som 'Rediger' eller 'Slet' knapper) direkte i tabellen, som vist med routerLink og (click) i eksemplet.

Ydeevne med Store Datasæt

ngx-datatable er designet med ydeevne i tankerne. Det bruger virtual scrolling, hvilket betyder, at det kun gengiver de rækker, der er synlige i viewport'en. Dette er afgørende for tabeller med tusindvis eller endda hundredtusindvis af rækker, da det forhindrer browseren i at blive overbelastet og holder brugergrænsefladen responsiv.

Styling og Tematilpasning

Selvom ngx-datatable kommer med indbyggede temaer (Material, Dark, Bootstrap), kan du yderligere tilpasse udseendet med din egen CSS. Da det er et almindeligt HTML-element i din Angular-applikation, kan du overskrive dets standardstilarter ved at målrette de relevante CSS-klasser. Husk dog at overveje Angulars View Encapsulation, hvis du styler fra en komponent-specifik stylesheet.

Ofte Stillede Spørgsmål (FAQ)

Her er svar på nogle almindelige spørgsmål vedrørende ngx-datatable:

Q: Hvordan implementerer jeg sortering på flere kolonner?

A: ngx-datatable understøtter multi-kolonne sortering ud af boksen. Du kan aktivere det ved at klikke på kolonneoverskrifter, mens du holder Shift-tasten nede. Du kan også programmatisk styre sorteringsrækkefølgen ved at manipulere [sorts] input-attributten.

Q: Kan jeg tilføje en global søgefunktion, der søger i alle kolonner?

A: Ja, det kan du. Du skal justere filtreringslogikken i din updateFilter-metode. I stedet for kun at tjekke én egenskab (f.eks. storeName), skal du iterere over alle relevante egenskaber i dit dataobjekt og tjekke, om filterværdien findes i nogen af dem. Husk at konvertere alle værdier til små bogstaver for case-insensitiv søgning.

Q: Hvordan håndterer jeg data fra en API?

A: I stedet for at definere dummy data i ngOnInit, ville du foretage et HTTP-kald til din backend-API for at hente data. Når data er modtaget, tildeles de til this.stores og this.cacheStores. Husk at håndtere asynkrone operationer med Angulars HttpClient og Observables.

Q: Hvordan sletter eller redigerer jeg en række?

A: Som vist i eksemplet, kan du tilføje handlinger direkte i en kolonne ved hjælp af <ng-template>. Du kan tilføje knapper eller links, der udløser metoder i din komponent (f.eks. onStoreDelete(value)). Disse metoder kan derefter udføre de nødvendige operationer (f.eks. kalde en slet-API) og opdatere this.stores-arrayet for at afspejle ændringerne.

Q: Er ngx-datatable responsiv?

A: Ja, ngx-datatable er designet til at være responsiv. Ved at bruge attributter som [columnMode]="'force'" eller [columnMode]="'standard'" samt [scrollbarH]="true", kan du styre, hvordan kolonner opfører sig på forskellige skærmstørrelser. For mere avancerede responsive behov kan du bruge CSS media queries til at tilpasse styling yderligere.

Q: Hvordan opdaterer jeg tabellen, når data ændres?

A: ngx-datatable reagerer automatisk på ændringer i det array, der er bundet til [rows]-attributten. Hvis du tilføjer, sletter eller ændrer elementer i dit this.stores-array, vil tabellen opdatere sig selv for at afspejle disse ændringer. Det er dog vigtigt at sikre, at du opretter en ny reference til arrayet (f.eks. this.stores = [...newArray]; eller this.stores = newArray.slice();) hvis du manipulerer arrayet direkte, for at Angulars change detection kan opfange ændringerne effektivt.

Konklusion

ngx-datatable er en kraftfuld og fleksibel løsning for Angular-udviklere, der har brug for at vise og manipulere data i tabulær form. Med sin omfattende liste af funktioner, herunder avanceret filtrering, sortering og paginering, samt dens fokus på ydeevne med virtual scrolling, giver den en robust platform til at bygge dynamiske og brugervenlige datatabeller.

Ved at følge de trin, der er beskrevet i denne artikel, kan du hurtigt integrere ngx-datatable i dine egne projekter og begynde at udnytte dets fulde potentiale. Husk at den nøgle til en effektiv filtreringsløsning ligger i at bevare en cache af dine originale data, så du altid kan nulstille filtreringen og genoprette den fulde datamængde. God fornøjelse med kodningen!

Hvis du vil læse andre artikler, der ligner Effektiv Datavisning med ngx-datatable i Angular, kan du besøge kategorien Teknologi.