# angualr-table

> the package is made on top of angular materil with more feature like--1.Show and Hide column names 2.Filter based on individual column

Latest version **0.0.3** (published 2020-03-03) · 0 weekly downloads

## Install

```sh
npm install angualr-table
pnpm add angualr-table
yarn add angualr-table
bun add angualr-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.3 |
| Published | 2020-03-03 |
| First published | 2020-02-27 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 421.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | jittu7777 |

## Links

- npm: https://www.npmjs.com/package/angualr-table
- npm.io page: https://npm.io/package/angualr-table

## Dependencies (1)

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

## Recent versions

- 0.0.3 (latest) — 2020-03-03
- 0.0.2 — 2020-02-27
- 0.0.1 — 2020-02-27

## README

# AngualrTable

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.14.

## Code scaffolding

Run `ng generate component component-name --project angualrTable` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project angualrTable`.
> Note: Don't forget to add `--project angualrTable` or else it will be added to the default project in your `angular.json` file. 

## Build

Run `ng build angualrTable` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build angualrTable`, go to the dist folder `cd dist/angualr-table` and run `npm publish`.

## Running unit tests

Run `ng test angualrTable` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).


## Usage

1.Import the AngualrTableModule from the 'angualr-table' in app.module.ts.

  import {AngualrTableModule } from 'angualr-table';

2.Add the imported module inside the import in app.module.ts

    imports: [
        ....
        AngualrTableModule,
      ],

3.Now use the below code in hmtl use to use the table

    <app-table-list *ngIf="table" [tableColumnName]="tableColumnName" [displayedColumns]="displayedColumns" [dataList]="users" [editable]="true"></app-table-list> 

tableColumnName -- Filed Name to be displyed in the table for the key in objects.

    tableColumnName = {'name' : 'Name',
      'age' : 'Age',
      'subtitle' : 'Subtitle',
      'team':'Team'

    };

displayedColumns -- keys which showed as cloumn

    displayedColumns = [   
    'name',
    'age', 
    'subtitle',
    'team'
    ];

users -- The list of objects.

    users=[
      {
        "name": "Chetan",
        "age": "10",
        "subtitle": "NINTEDANIB ESYLATE",
        "team":"Skylander"
      },
      {
        "name": "Jitendra Patel",
        "age": "10",
        "subtitle": "NINTEDANIB ESYLATE",
        "team":"HackTheCode"
      },
      {
        "name": "Amit ",
        "age": "17",
        "subtitle": "NINTEDANIB ESYLATE",
        "team":"Skylander"
      },
      {
        "name": "Atis",
        "age": "12",
        "subtitle": "NINTEDANIB ESYLATE",
        "team":"HackTheCode"
      },
      {
        "name": "Rajdeep",
        "age": "14",
        "subtitle": "NINTEDANIB ESYLATE",
        "team":"HackerGroup"
      }
    ]


## Pre-Requestive

Please insatall the angular materil using the below command

    ng add @angular/material

Please install the bootstarp/jquery with the below command and add them to the scrips and styles as in angular.json

    npm install bootstrap

Add the below code in the angular.json

    "styles": [
              .....
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
            ],

    "scripts": [
              .....
              "./node_modules/jquery/dist/jquery.js",
              "./node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]
          },

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