ngu-mx-table

<h1 align="center">ngu-mx-table</h1> <p align="center"><i>ngu-mx-table</i> is a simple table to show the data in the matrix or grid format along with the form components.</p>

Usage no npm install needed!

<script type="module">
  import nguMxTable from 'https://cdn.skypack.dev/ngu-mx-table';
</script>

README

ngu-mx-table

ngu-mx-table is a simple table to show the data in the matrix or grid format along with the form components.


Installation

install library from npm

npm i ngu-mx-table

How to use

  1. Import the 'NguMatrixTableModule' in the app.module.ts
import { NguMatrixTableModule } from 'ngu-mx-table';
  1. Add to NgModule import section
@NgModule({
    declarations: [],
    imports: [NguMatrixTableModule],
    providers: [],
    bootstrap: []
})
export class AppModule { }
  1. Use the ngu-mx-table in the html or templat where ever required.
 <ngu-mx-table>
    <ngu-mx-th [headers]="headers"></ngu-mx-th>
    <ngu-mx-tr [data]="dataList" *ngFor="let row of dataList">
      <ngu-mx-td *ngFor="let data of row.values">
       // your component goes here
      </ngu-mx-td>
    </ngu-mx-tr>
  </ngu-mx-table>

Components and attributes

Compoenet Attributes Comments
ngu-mx-table Its the table contains the child components
ngu-mx-th headers Its the table header component and pass array od string which will the table header labels
ngu-mx-tr data Its the table row like traditional tr of the table
ngu-mx-td Its the table data and in the body we can set any html component and render