npm package: @janiking/data-table
Description: Data Table Web Component
Author: janiking
Latest version: 1.0.7

# Data Table

Data table web component with multiple features

## Install

To install:

    yarn @janiking/data-table
    cd data-table
    yarn

## Development

To view the tests page, run:

    yarn start

View the tests in a browser at http://localhost:8200

Typically tests and turned on and off to isolate epxeriements by using teh skip and only properties.

To see changes within the FMS application, following the [npm link](https://docs.npmjs.com/cli/v9/commands/npm-link) docs:

From the js-data-table folder use the command to create a global symlink:

    npm link

Next, from the jk-gink directory, link to it using:

    npm link @janiking/data-table

Finally, make a change to the data-table. Run the command:

    yarn qb

(Short for quick build) this builds the package. jk-gink will detect the changes and automatically refresh.

## Deployment

Create a branch and publish it. Send the link to Mike for approval and merging.

## Usage

Create a `data-table` element, passing in at least a _schema_ and _rows_.

_Data Table has not been tested using markup. It should work, but the schema and rows will need to be passed in dynamically._

### Simple Example

```
const schema = {
    columns: [
        {key: 'name', label: 'Name'},
        {key: 'age', label: 'Age'},
        {key: 'height', label: 'Height'}
    ]
};

const data = [
    {
        id: 1,
        name: 'Moke',
        age: 20,
        height: 6.1,
    }, {
        id: 2,
        name: 'Joke',
        age: 10,
        height: 4.5,
    }, {
        id: 3,
        name: 'Doke',
        age: 40,
        height: 5.9,
    }
];

dom('data-table', {
    schema: schema,
    rows: data,
}, parentNode);
```

## Data

Data is an array of objects, of which each object represents a row. Each object should be a key-value pair; the key is the property, and the value is what will be displayed in the table.

## Schema

The Schema can have several properties:

-   **sort**: The property in the columns of which the table will be initially sorted.
-   **desc**: The initial sort default to asecending. If `desc = true`, it will default to descending.
-   **width**: The width of that column. Can be an interger (pixels) or a string (to use percentages).
-   **columns**: An array of objects which represents the columns. Each object s a key-value pair; the `key` property should map to a property in a data object. The `label` is what displays in the table header. Columns can also contain an additional property:
-   **columns.component**: An object that represents a widget that will make that column of cells editable.
-   **columns.component.type**: The type of widget that will appear in the cell. Note for all but `link`, a `peerDependency` of [@janiking/form](https://github.com/jani-king-international/form).

### Component Types

#### `link`

The cell will render as a link. An additonal property should be used, `url` of which the value should map to a property in the data object.

#### `ui-input`

When the cell is clicked, an input will show.

An additional property of `subtype` can be used for other input types. Defaults to text. (Note, this is untested).

An additonal property of `format` can also be used to format the input and HTML cell display. The following formats are currently supported: `currency`, `integer`, and `percentage`.

#### `ui-dropdown`

The cell will render as a dropdown. The property in the data will be the value of the dropdown. An additonal property, `options` should be used, which is an array of objects that represents the dropdown options.

#### `ui-checkbox`

The cell will render as a checkbox. The property in the data will be the value of the checkbox; `true` for checked, `false` for unchecked.

#### Change Event

When using any component (other than `link`), and the component is changed, the Data Table will emit a `change` event. The event will be a DOM HTMLClick event, and the `event.value` will be the changed data item (representing that row).

## Data Table Attributes

-   **scrollable**: This attribute will render a static header, while the table body can scroll (both horizontally and vertically). _NOTE: Not yet tested on Windows. While it will work, the scrollbar may cause alignment issues_.
-   **clickable**: When using this attribute, each row and header cell will be clickable, and have a hover state. It will emit custom events, `header-click` and `row-click`.
-   **selectable**: This attribute allows for a single-selection of rows. If used with `sortable`, the selction is maintained. A `change` event will be emitted, with the value of the item/row id. The item and the row will also be in the event.
-   **extsort**: If true, sorting will not rerender the items, only emit a `sort` event. This data should be sent to the sever for new rows. Then pass in the new `rows` and `extsort`.

```
datatable.extsort = {
    field: 'name',
    dir: 'asc'
};

If a column has `unsortable:true`, that column will not be sortable.

 ## Styling

 Data Table uses CSS custom vars, so it is a simple matter of overwriting them, copying from the included stylesheet. Else, it would be a simple matter of overwriting the existing styles and making use of attribute selectors.

```