Customization

Getting Started Customization

By using NgxPanemuTable, you'll need to customize its behavior to match with your app such as Date and DateTime format, how to display error to user, localisation, etc. Most of the default behaviors are provided by PanemuTableService. To override them, create a service extends PanemuTableService. For example:

import { formatDate } from '@angular/common';
import { inject, Inject, Injectable, LOCALE_ID } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { CellFormatter, DefaultColumnOptions, LabelTranslation, PanemuTableService, TableOptions } from 'ngx-panemu-table';
import { MessageDialogComponent } from '../example/message-dialog/message-dialog.component';
import { MessageDialogObject } from '../example/message-dialog/message-dialog.model';

@Injectable({providedIn: 'root'})
export class CustomPanemuTableService extends PanemuTableService {
  
  labelTranslation: LabelTranslation;
  dialog = inject(MatDialog)

  constructor(@Inject(LOCALE_ID) locale: string) { 
    super(locale)
    
    this.labelTranslation = super.getLabelTranslation();
    this.labelTranslation.searcForValueInColumn = 'Filter "{par0}" on column:';
    this.labelTranslation.validationError.required = 'Please specify value for this field.';
  }

  override getLabelTranslation()  {
    return this.labelTranslation;
  }

  override getDateCellFormatter(): CellFormatter {
    return (val) => {
      return formatDate(val, 'd MMM yyyy', this.locale) || ''
    }
  }

  override getColumnOptions(): Required<DefaultColumnOptions> {
    const options = super.getColumnOptions();
    options.sortable = false;
    return options;
  }

  override handleError(err: any): void {
    const msg = (typeof err == 'string') ? err : err?.message ?? JSON.stringify(err);
    const dialogData : MessageDialogObject = {
      content: msg,
      type:'error',
      yesLabel: 'Ok',
      title: 'Error'
    }
    const dialogRef = this.dialog.open(MessageDialogComponent, {
      data: dialogData,
      position: { top: '50px' }
    });
  }

}

Override methods you want to customize. Then use that class in global provider setting.

app.config.ts

export const appConfig: ApplicationConfig = {
  providers: [
    ...
    { provide: PanemuTableService, useClass: CustomPanemuTableService },
    ...
  ],

};

If you also use inline-editing, you'll also need to create a BaseEditingController extends PanemuTableEditingController. You'll want to override at least 3 methods:

showValidationError: you can display a dialog or snackbar showing the validation error here.
canReload: if user cancel editing, ask for confirmation here.
canDelete: ask for confirmation if user really want to delete a data.

For more advanced scenario, you can specify custom cell editor. For example, instead of using select component for ColumType.MAP column, you want to use a typeahead. For this purpose PanemuTableEditingController.initCellEditorRenderer() is provided for you to override.

Fell free to reach out to us if you're unsure how to make it works to your liking.