# TUL TABLE

> Management of tul table.

<p align="center">
<img alt="tul logo" width="100px" src="https://tul.com.co/assets/Img/logo-tul.png">
</p>

<p align="center">

<img alt="npm" src="https://img.shields.io/npm/v/@tul/table">

<a href="https://soytul.slack.com/archives/DU3823EMQ">
  <img alt="slack logo"  src="https://badgen.net/badge/icon/slack/pink?icon=slack&label">
</a>

<img alt="npm" src="https://img.shields.io/npm/dw/@tul/table">

</p>

## Table of Contents

- [Install](#installation)
- [Usage](#usage)
  - [Emitters](#emitters)
  - [Inputs](#inputs)
  - [Outputs](#outputs)
  - [Models](#models)
    - [Enums](#enums)
    - [Interfaces](#interfaces)
- [Release History](#release-history)
- [Pizza Owner](#pizza-owner)

## Installation

```sh
npm i @tul/table --save
```

## Usage

### Html

```html
<lib-tul-tabler></lib-tul-tabler>
```

### Emitters

### Inputs

```ts
  @Input() title: string = '';
  @Input() columns: Array<Column> = [];
  @Input() data: Array<any> = [];
  @Input() table: TableList<any> | TableEntity<any>;
```

### Outputs

```ts
  @Output() executeOption = new EventEmitter<any>();

```

### Models

#### Enums

```ts
export enum TypeOption {
  EDIT = 'edit',
  DELETE = 'delete',
  DETAILS = 'details',
}

export enum TypeHeaderOptions {
  ADD = 'add',
  EXPORT = 'export',
  REFRESH = 'refresh',
}

export enum TypeTable {
  ENTITY = 'entity',
  LIST = 'list',
}

export enum TypeColumn {
  TEXT = 'text',
  NUMBER = 'number',
  DATE = 'date',
  CURRENCY = 'currency',
  SELECT = 'select',
}

export enum SubTypeDateColumn {
  DATE = 'DATE',
  DATETIME = 'DATETIME',
  MONTH = 'MONTH',
  YEAR = 'YEAR',
  TIME = 'TIME',
}
```

#### Interfaces

```ts
export interface SelectColumn extends Column {
  listValues: Array<{ text: string; value: string }>;
}

export interface DateColumn extends Column {
  subType: SubTypeDateColumn;
}

export interface Column {
  header: string;
  attribute: string;
  attributeFilter?: string;
  type?: TypeColumn;
  link?: string;
  safeNull?: string;
  sort?: boolean;
  filter?: boolean;
  filterActive?: boolean;
}
export interface Country {
  code: string;
  prefixNumber: string;
  digitsCellphone: number;
  currency: string;
  latitude: number;
  longitude: number;
}

interface Styles {
  header?: {
    th: { [key: string]: string };
  };
  body?: {
    td: { [key: string]: string };
  };
  options?: {
    td: { [key: string]: string };
    th: { [key: string]: string };
  };
}

export interface OptionsTable {
  id: string;
  type: TypeOption;
  url?: string | Function;
  disabled?: Observable<boolean> | boolean | Function;
}

export interface HeaderOptions {
  id: string;
  type: TypeHeaderOptions;
  url?: string | Function;
  disabled?: Observable<boolean> | boolean | Function;
}

interface Table {
  idTable: IdTable;
  options?: Array<OptionsTable>;
  optionsHeader?: Array<HeaderOptions>;
  styles?: Styles;
  title?: string;
  pageSizeOptions?: Array<number>;
  showPagination?: boolean;
  size?: number;
}

export interface TableEntity extends Table {
  // tslint:disable-next-line
  url?: string | Function;
  httpSubscribe?: any;
  // tslint:disable-next-line
  mapHttpSubscribe?: Function;
  readonly typeTable?: TypeTable.ENTITY;
}

export interface TableList extends Table {
  readonly typeTable?: TypeTable.LIST;
}
```

## Release History

- 0.1.0

  - Structure was created

## Pizza Owner

Andres Felipe Chia Avila