Static-table NPM

StaticTable

A Simple Library to use to create tables to be used as components.

Features

Dynamic Data Allocation
Lightweight
No third party Dependency
Custom properties like - Fixed Header,Table Cell Value alignments, etc

Getting started

Install static-table using npm.

npm install static-table

Import static-table module from the node modules

import { StaticTableModule  } from 'static-table';

Add the imported module to the imports

imports: [    
    StaticTableModule
    ]

Use the Following Selector for the Table

<static-table [columns]="columns" [data]="data" tableId='firstTable'></static-table>

tableId is used to keep the ease to customize multiple implemented tables for the css. (encapsulating all the styling for a specific table under the id, styling multiple tables together) Note: columns and data takes the object in the form of array as follows -

columns = ['Column_Name1','Column_Name2','Column_Name3', ... ,'Column_NameN'];

data = [
   ['Column_Value1','Column_Value2','Column_Value3', ... ,'Column_ValueN'],
   ['Column_Value1','Column_Value2','Column_Value3', ... ,'Column_ValueN'],
   ['Column_Value1','Column_Value2','Column_Value3', ... ,'Column_ValueN'],
   ['Column_Value1','Column_Value2','Column_Value3', ... ,'Column_ValueN'],
  ];

For Fixed Header, enable the attribute as follows -

<static-table [columns]="columns" [data]="data" [fixedHeader]="true"></static-table>

The fixedHeader is disabled by default.Only enable if the fixed header is required.

For Alignment of the Data inside of the table

<static-table tableId='firstTable' [columns]="columns" [data]="data" [fixedHeader]=true contentAlign="left" headerAlign='center'></static-table>

contentAlign Will align the Data of the data texts to - left/center/right. Default the value is left if no customization is provided.

headerAlign Will align the Data of the header texts to - left/center/right. Default the value is left if no customization is provided.

For Custom Stylings, customization of the design, The following classes can be used to target the table.

  
  #tableId (the id provded in the selector)
  
  .static-table-container

Examples

Examples will be hosted soon.

Limitations

Currently the plugin only supports passing the data with a specific format. Further versions would include option to configure the format which the module should use. Stylings are not included for the table so as to keep/provide freedom to the users to customise as the require.