open-index/open-npm huggingface dataset:
npm package: @omm_test/irecomponents
Description: IRE Component Library.
Latest version: 1.8.0

# IRE Components

IRE Component Library.

#### Developing new features before publishing

`npm run link` from root folder and run `npm watch` from root. The `link` script is a work around to deal with https://reactjs.org/warnings/invalid-hook-call-warning.html. Then you can open a new terminal window and run `npm link '@omm_test/irecomponents'` from the root of whatever project you want to see your new feature in.

#### Bitbucket pipeline

This project is currently set to automatically run tests and chromatic on each commit to `master`. You should add `[skip ci]` to small `master` commits like readme changes that do not warrant testing.

## Available Scripts

In the project directory, you can run:

#### `npm test`

Run jest tests.

#### `npm rollup`

Compile build for npm publish. Will run eslint and prettier before the build. 

#### `npm storybook`

Run Storybook to see what components are available and how to configure them.

#### `npx chromatic`

Run visual tests - https://www.chromatic.com/builds?appId=61b2172484eaca003adb8d19

#### `npm watch`

Checks for changes inside `/src` and recompiles. Used for developing new features locally.

## Useful npm commands

#### `npm publish`

Publish latest version to npm.

#### `npm version major`

Bump major version (x.0.0).

#### `npm version minor`

Bump minor version (0.x.0).

#### `npm version patch`

Bump patch version (0.0.x).

#### `npm unpublish @omm_test/irecomponents@x.x.x`

Remove specific version from npm.
npm package: @ommaralquisi/ng-x-table
Description: * `npm install --save ngx-table` * Import `NgxTableModule` into module * import import `ITableConfig`, `IColumns`, `ISorting`, `IFiltering` into the component
Author: Ommar Alquisi
Latest version: 0.0.3

# Ngx-TABLE
## Installation 
* `npm install --save ngx-table`
* Import `NgxTableModule` into module
* import import `ITableConfig`, `IColumns`, `ISorting`, `IFiltering` into the component


## Usage 
### Usage  without with template 
```html
<ngx-table	
    [tableData]="data" 
    [columns]="columns"
    [config]="config" 
    (tableChange)="tableChange($event)">
</ngx-table>
```
* `[tableData]` accept an array of data 
* `[columns]` accept an array of `IColumns` JSONs.
* `IColumns` interface has the following property.
	* `title: string`  title of the table column.
	* `name: string` the property name to display.
	* `sorting: boolean` whether the column should be sortable or not.
	* `sort: string` (optional) initial column sorting ‘asc’ or ‘desc’.
	* `filter: boolen` (optional) display filter on top the column.
	* `pipe: string` (optional) accept a pipe to be applied the column data.
* `[config]`  accept a  config JSON Object of type `ITableConfig`
* `ITableConfig` interface had the following propertied 
	*  `total: number` total length of the data.
	* `itemPerPage: number` (10, 25, 50,  or 100) how many item should the table display.
	*  `currentPage: number`  the current page the table displaying.
* `(tableChange)` accept a function with `ITableConfig` parameter. It will fires when the table changes, such changes are: 
	* Column sorting.
	* Column filtering.
	* Page changed.
	* Number of item per page changes.

 
 


### Usage with template
You can pass a template to ngx-table directive which will render the cells of the table  
```html
<ngx-table 
    [tableData]="data" 
    [columns]="columns" 
    [config]="config" 
    (tableChange)="tableChange($event)">
        <ng-template #rows let-item="dataRow" let-i="index">
            <td>{{item.id }}</td>
            <td>{{item.name }}</td>
            <td>{{item.email }}</td>
            <td>{{item.age}}</td>
            <td 
                style='cursor: pointer;' 
                title="open console to see message" 
                (click)="component.logMe(item.phone)">{{item.phone}}
            </td>
            <td>
                <a href="https://en.wikipedia.org/wiki/{{item.city}}">
                    {{item.city}}
                </a>
            </td>
            <td>{{item.rank}}</td>
            <td>{{item.donation | currency}}</td>
        </ng-template>
</ngx-table>
```