entity-material-table v0.0.11

Entity Material Table

"entity-material-table" is an Angular custom component that simplify table creation based on entity data, with pagination.

Installation

To install the library use:

npm install entity-material-table

Usage

To use the library in your project, follow these steps:

1. Import EntityMaterialTableModule module into your module:

import { EntityMaterialTableModule } from 'entity-material-table';

@NgModule({
  imports: [
    // ...
    EntityMaterialTableModule
  ],
  // ...
})
export class AppModule { }

2. In your component, use the entity-material-table component in your HTML template

<entity-material-table [options]="tableOptions" (selected)="onRowSelected($event)"></entity-material-table>

3. Define the table options in your component

import { EntityMatTableOptions } from 'entity-material-table';

@Component({
  // ...
})
export class YourComponent {
  tableOptions: EntityMatTableOptions<any> = {
    // Configura le opzioni della tabella qui
  };

  onRowSelected(row: any) {
    // Gestisci l'evento di selezione della riga qui
  }
}

EntityMatTableOptions

EntityMatTablePaginator

EntityMatTableAction

EntityMatTableExcelConfig

Component attributes

Example usage

See Test project to learn how use library with async or sync data. Here a small recap for async data usage

  /**
   * Function to construct an http call. This is the callback passed as a parameter to tableOptions in serverHttp.
   * If our server indicates the page size parameter with alias 'elementPerPage' then inside 'queryAliasParameter' we need to add aliasParameter page -> per_page
   * @param params
   */
  public buildHttpCall(params = {}) {
    return this.http.get('https://reqres.in/api/users', {
      params
    });
  }

After you define call http with httpClient, you can pass the returned observable to serverHttp. This is an example of tableOptions config

get httpTableOptionsConfig() {

  let queryParameters = new Map<string, any>;
  let queryParametersAlias = new Map<string, any>;

  queryParametersAlias.set('size', 'per_page');
  queryParametersAlias.set('page', 'page');

  //With serverHttp value, rows property doesn't need
  let tableOptions: EntityMatTableOptions<Element> = {
    queryParameters: queryParameters,
    serverHttp: this.buildHttpCall,
    showSelection: true,
    transcoder: this.transcoder,
    paginator: {
      show: true,
      size: [1, 2, 3],
      default: 1,
      queryParametersAlias
    },
    columns: [
      {
        property: 'id',
        label: 'Id'
      },
      {
        property: 'email',
        label: 'Email'
      },
      {
        property: 'first_name',
        label: 'Nome'
      },
      {
        property: 'last_name',
        label: 'Cognome'
      },
      {
        property: 'avatar',
        label: 'Avatar'
      }
    ]
  };

  return tableOptions;
}

Angular Theme CSS

To display Angular theme style you need to import stylesheet inside your application. Normally the style is added inside angular.json

   "styles": [
      ...,
      "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
   ]

Export excel

Excel export functionality need a templateRef to work, through the @ViewChild usage.

Define your HTML with button, icon or what do you want. The main purpose is call the function onExportExcel.

HTML

<div>
    <button (click)="entityMaterialTableComponent.onExportExcel()">Export csv</button>
</div>
<entity-material-table [options]="tableOptions" (onSelection)="onSelectionChange($event)"></entity-material-table>

TS

@ViewChild(EntityMaterialTableComponent) entityMaterialTableComponent: EntityMaterialTableComponent<Ex>;

Cell template

The Table renders cells as string value. You could pass a Pipe to transform the value for single cell. If you want to customize cell template, you must define a cellTemplate inside your code.

Pipe usage

config.columns = [
  {
    label: 'Id',
    property: 'objectId'
  },
  {
    label: 'Amount ($)',
    property: 'amount',
    pipe: {
      ref: new CurrencyPipe('en-US'),
      args: ['EUR']
    }
  }
];

Custom template

<entity-material-table [options]="tableOptions" (onSelection)="onSelectionChange($event)">
    <ng-template #cellTemplate let-element let-property="property">
        <div *ngIf="property != 'actions'">{{element[property]}}</div>
        <div *ngIf="property == 'actions'">
            <div>
                <button (click)="onDelete(element)">cancella</button>
            </div>
        </div>
    </ng-template>
</entity-material-table>

Demo App

For more example explore my demo app

Contact

If you like this library, or you find some defect/bug, you could contact me through my personal web site.

CONTACT ME

Contribute

If you wish to contribute to this library, please fork the repository and submit your pull requests. We welcome contributions from the community!

Licenza

Please make sure to customize this README with specific information about your library, including installation instructions, usage, and any other necessary documentation.