Angular5html5table NPM

#readme

angular5html5table

Angular light weight Table. * Check the HowTo section below.

Features

Supports basic angular and html.
Supports multiple platforms
The value automatically updates intable as changes in your code.
Emits an event after every required click and change to your parent component code.
Nice devs behind it. 🤓

* Check the Updates section below.

* Check the Hints section below.

Updates

Visibility of a column at run time using "visible":boolean property in object of headerRowsArray.
Use paginator to show some or more no of rows in the table.
Move Extreme Left option in filter to move a column to extreme left.
Move Extreme Right option in filter to move a column to extreme right.
Realign the table to its original move.
Remove columns dynamically at user end by clicking Hide column from the menu.
Readd columns shown in chips above the table.
Multiple type of filters to check contains, start from, end from and many more.

* Check the NewUpdates section below.

NewUpdates

Title property in column header and label on row.
Background color feature of a column.
Background color feature a header.
Background color feature of a cell.
Background color feature of a row.
Text color feature of a column.
Text color feature a header.
Text color feature of a cell.

FREEZE UPDATE

Freeze columns to the left allows you to freeze a column while scrolling others.

HowTo

Important

Must use enableProdMode() in main.ts of your project. Must import css for @angular/material in style.css

I promise that it's very easy to use:

install using npm i angular5html5table

* Check the Usage section below.

Usage

Call it from the html of the file in which you want to show the table , like

<angular-table rowData="rowData" headerRowsArray="headerRowsArray" leftColumnType="leftColumnType" tableNameFromParent="'Table_Name'" defaultSelectedRow="'selectRowNoByDefault'" idOfTable="'tableId'" (onSelectedRows)="onRowSelection($event.value)" (onColumnClicked)="onColumnClicked($event.value)" (onRowValueChange)="onValueChanged($event.value)"

>

For further help

* Check the Help section below.

Hints

Each headerRowsArray's Object must have a columnName field which is displayed on header.
Each headerRowsArray's Object must have a modelId field which will be helping in binding with tbody element.
Each headerRowsArray's Object must have a width field which will set the default width of the table header column.
By default every field is of label type.
To enable sorting feature use sort:true in headerRowsArray's Object.
Can have a date field using type:"date" and editable:"true" in headerRowsArray's Object.
Can have a time field using type:"time" and editable:"true" in headerRowsArray's Object.
Can have a number field using type:"number" and editable:"true" in headerRowsArray's Object.
Can have a select type field using type:"select" and editable:"true" and values:"JSON Array with a displayProperty which is to be displayed in select options" and displayId:"displayProperty" in headerRowsArray's Object.
Can have a checkbox field using type:"checkbox" and editable:"true" in headerRowsArray's Object.
To set minimum date of Today use setMinDate:true in headerRowsArray's Object.
To set maximum date of Today use setMaxDate:true in headerRowsArray's Object.