@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.