# @ialopezg/react-ui

> Components & Helper Functions for ReactJS and NodeJS

Latest version **1.0.0** (published 2023-04-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install @ialopezg/react-ui
pnpm add @ialopezg/react-ui
yarn add @ialopezg/react-ui
bun add @ialopezg/react-ui
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2023-04-25 |
| First published | 2023-04-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 182.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | yes |
| GitHub stars | 0 |
| Author | Isidro A. Lopez G. |
| Maintainers | ialopezg |

## Links

- npm: https://www.npmjs.com/package/@ialopezg/react-ui
- Repository: https://github.com/ialopezg/react-ui
- Homepage: https://ialopezg.github.io/react-ui/
- Issues: https://github.com/ialopezg/react-ui/issues
- npm.io page: https://npm.io/package/@ialopezg/react-ui

## Recent versions

- 1.0.0 (latest) — 2023-04-25
- 1.1.0 — 2023-04-21

## README

# React UI

> Components & Helper Functions for ReactJS and NodeJS

[![Coverage Status](https://coveralls.io/repos/github/ialopezg/react-ui/badge.svg?branch=main)](https://coveralls.io/github/ialopezg/react-ui?branch=main)

## Table Of Content
- [**Getting Started**](#getting-started)
  - [**Installing**](#installing)
  - [**Properties**](#properties)
    - [**Global**](#datatable)
    - [**Data Options**](#dataoptions)
        - [**Data Columns**](#datacolumns)
        - [**Data Rows**](#datarows)

## Getting Started
### Installing

```sh
$ npm install --save @ialopez/react-ui
```

### Properties
#### DataTable

| Property | Type                        | Required | Default | Description                                            |
|----------|-----------------------------|----------|---------|--------------------------------------------------------|
| title    | string                      | false    | null    | DataTable title                                        |
| data     | [DataOptions](#dataoptions) | true     |         | Data options. Contains the column and row collections. |


##### Data

| Property | Type        | Required | Default | Description                                                              |
|----------|-------------|----------|---------|--------------------------------------------------------------------------|
| columns  | DataColumns | true     | []      | An array of [DataColumns](#) objects that defines the DataTable columns. |
| rows     | DataRows    | true     | []      | An array of [DataRows](#) objects that defines the DataTable columns.    |

#### Columns

Represents an array of DataColumn objects of a DataTable component.

| Property   |   Type   | Required |    Default    | Description                                                                                               |
|:-----------|:--------:|:--------:|:-------------:|:----------------------------------------------------------------------------------------------------------|
| id         |  string  |   true   |               | Column ID (`must be unique`).                                                                             |
| label      |  string  |   true   |               | Column label.                                                                                             |
| size       |  string  |  false   |               | Column size (between 1px and 15px).                                                                       |
| editable   | boolean  |  false   |     false     | Whether column value is editable.                                                                         |
| type       |  string  |  false   |    string     | Column content type. Possible values: `boolean`, `text`, `number`, `date`, `datetime`, `time`.            |
| component  |  string  |  false   |               | Component when row value is editable (`input`, `textarea`, `select`, etc.).                               |
| format     |  string  |  false   | locale format | Column date format when type is date. Required only when column type is `date`.                           |
| options    |  Option  |  false   |      []       | An array of [Option](#option) objects for select components. Required only when component type is select. |
| required   | boolean  |  false   |     false     | Whether column content is required.                                                                       |
| validation | Function |  false   |               | A callable function to validate column data values.                                                       |

#### Rows

Represents an array of DataRow objects of a DataTable component.

| Property   |   Type   | Required |    Default    | Description               |
|:-----------|:--------:|:--------:|:-------------:|:--------------------------|
| id         |  string  |   true   |               | Row ID.                   |

> **Note**: All other values will be cast as key pair object according the column definition.


### Contributors

* **[Isidro A. Lopez G.](https://github.com/ialopezg)**

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