# ngu-mx-table

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

Latest version **0.0.4** (published 2020-08-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngu-mx-table
pnpm add ngu-mx-table
yarn add ngu-mx-table
bun add ngu-mx-table
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2020-08-14 |
| First published | 2020-06-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 99.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Uttesh Kumar T.H. |
| Maintainers | uttesh |
| Keywords | grid table, matrix table, angular simple table |

## Links

- npm: https://www.npmjs.com/package/ngu-mx-table
- Repository: https://github.com/uttesh/ngu-mx-table
- Homepage: https://github.com/uttesh/ngu-mx-table#readme
- Issues: https://github.com/uttesh/ngu-mx-table/issues
- npm.io page: https://npm.io/package/ngu-mx-table

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.0.0

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 0.0.4 (latest) — 2020-08-14
- 0.0.3 — 2020-06-28
- 0.0.2 — 2020-06-28
- 0.0.1 — 2020-06-28

## README

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

<p align="center"><a href="#uttesh"><img src="https://github.com/uttesh/ngu-mx-table/blob/master/images/matrix_table.png" width="100%"/></a><a href="#uttesh"><img src="https://github.com/uttesh/ngu-mx-table/blob/master/images/dropShadow.png" width="100%"/></a></p><br/>

## 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';

```
2. Add to NgModule import section
```
@NgModule({
	declarations: [],
	imports: [NguMatrixTableModule],
	providers: [],
	bootstrap: []
})
export class AppModule { }
```
3. 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 |

---
_Source: https://npm.io/package/ngu-mx-table · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._