Skip to content
This repository has been archived by the owner on Jan 30, 2022. It is now read-only.

TeamMaestro/ngx-table

Repository files navigation

@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

Inputs Description
items the data to display in the table
configuration The configuration (TableConfiguration) used to define the table. The tableId and columns properties are required.
- tableId allows for multiple tables in the same view.
- columns defines the properties of the data - passed to items input - to show
This object can be extended to provide any implementation specific data to the header and row cells.
header A directive indicating a header template for a column. The value must match a column within the columns array of the table configuration.
let-item provides the variable item: HeaderCellContext to the ng-template
column A directive indicating a data cell template for a row. The template will be applied in every row of the data. The value must match a column within the columns array of the table configuration.
let-item provides the variable item: RowCellContext to the ng-template

CSS Variables

Variable Description Default
--ngx-table-border-radius The border radius of the outermost edges of the table 0
--ngx-table-border-width The width of all borders in the table 1px
--ngx-table-border-color The color of all borders in the table #cccccc
--ngx-table-border-style The style of all borders in the table solid
--ngx-table-border The base setting for all borders in the table var(--ngx-table-border-width) var(--ngx-table-border-style) var(--ngx-table-border-color)
--ngx-table-outer-border The border for the outside edge of the table var(--ngx-table-border)
--ngx-header-border The border for the bottom edge of the header var(--ngx-table-border)
--ngx-column-border The border for the columns of the table var(--ngx-table-border)
--ngx-row-border The border for the rows of the table var(--ngx-table-border)
--ngx-table-background-color The default color for all backgrounds white
--ngx-table-header-background-color The background color of the table header var(--ngx-table-background-color)
--ngx-table-odd-row-background-color The background color of the odd rows var(--ngx-table-background-color)
--ngx-table-even-row-background-color The background color of the even rows var(--ngx-table-background-color)
--ngx-table-color The text color of the table currentColor
--ngx-table-header-color The text color of the headers var(--ngx-table-color)
--ngx-table-body-color The text color of the body var(--ngx-table-color)
--ngx-table-odd-row-color The text color of the even rows var(--ngx-table-body-color)
--ngx-table-even-row-color The text color of the odd rows var(--ngx-table-body-color)
--ngx-table-row-height The height of the rows of the table auto
--ngx-table-cell-align-items The flex align-items value for a cell center
--ngx-table-cell-justify-content The flex justify-content value for a cell center
--ngx-table-cell-padding The padding value for the cell 0
--ngx-table-header-pointer-events The pointer events for the header. Set to none if you want to prevent interaction initial
--ngx-table-content-pointer-events The pointer events for the table body. Set to none if you want to prevent interaction initial

More Examples

See the Demo for more configuration, and styling options.