@teamhive/ngx-table v1.5.0

@teamhive/ngx-table

A simple template and configuration driven table framework for Angular 5+.

DEMO: https://teamhive.github.io/ngx-table

Contribution Guidelines

Changelog

Installation

npm i @teamhive/ngx-table --save

Usage

This is the most basic implementation of ngx-table.

my.module.ts

import { NgxTableModule } from '@teamhive/ngx-table';

@NgModule({
  imports: [
    ...,
    NgxTableModule
  ]
})

sample-data.interface.ts

export interface TableData {
  name: string;
  bio: string;
  age: number;
  active: boolean;
  location: string;
}

basic-table.component.ts

import { Component } from '@angular/core';
import { TableConfiguration } from '@teamhive/ngx-table';

@Component({
  selector: 'app-basic-table',
  templateUrl: 'basic-table.component.html',
  styleUrls: ['basic-table.component.scss']
})
export class BasicTableComponent {

  readonly tableConfig: TableConfiguration<TableData> = {
    tableId: 'basicTable',
    columns: ['name', 'bio', 'age', 'active'],
    definitions: {
      bio: {
        columnSize: 3
      }
    }
  };

  readonly data: TableData[] = [{
    active: true,
    age: 30,
    bio: 'Lorem ipsum dolor sit amet...',
    name: 'Scott',
    location: 'USA'
  }, {
    active: false,
    age: 25,
    bio: 'Duis aute irure dolor in reprehenderit...',
    name: 'Bart',
    location: 'JPN'
  };
}

basic-table.component.html

<hive-ngx-table [configuration]="tableConfig" [items]="data">
    <ng-container *ngFor="let columnId of tableConfig.columns">
        <ng-template let-item [header]="columnId">
            <h3>{{ columnId }}</h3>
        </ng-template>

        <ng-template let-item [column]="columnId">
          <span>{{ item.data[columnId] }}</span>
      </ng-template>
    </ng-container>
</hive-ngx-table>

Inputs and Configuration

Directives and Inputs

CSS Variables

More Examples

See the Demo for more configuration, and styling options.