React UI

Components & Helper Functions for ReactJS and NodeJS

Table Of Content

• Getting Started
  • Installing
  • Properties
    • Global
    • Data Options
      • Data Columns
      • Data Rows

Getting Started

Installing

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

Properties

DataTable

| Property | Type | Required | Default | Description | |----------|-----------------------------|----------|---------|--------------------------------------------------------| | title | string | false | null | DataTable title | | data | 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 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.