# kbi-library

> A library of React components and other utilities for KBI developers.

Latest version **1.0.4** (published 2018-09-24) · ISC license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install kbi-library
pnpm add kbi-library
yarn add kbi-library
bun add kbi-library
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2018-09-24 |
| First published | 2018-09-19 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 37.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Daniel Kinsbursky |
| Maintainers | dkinsbursky |
| Keywords | Kinsbursky Brothers, Component Library |

## Links

- npm: https://www.npmjs.com/package/kbi-library
- npm.io page: https://npm.io/package/kbi-library

## Dependencies (2)

- [lodash.get](https://npm.io/package/lodash.get.md) ^4.4.2
- [lodash.sortby](https://npm.io/package/lodash.sortby.md) ^4.7.0

## Recent versions

- 1.0.4 (latest) — 2018-09-24
- 1.0.3 — 2018-09-19
- 1.0.2 — 2018-09-19
- 1.0.1 — 2018-09-19
- 1.0.0 — 2018-09-19

## README

## Description

Component for simple and fast integration of [Material UI](https://material-ui.com/demos/tables/) tables.

## USAGE

`npm install kbi-library`

`import { MuiTable} from 'kbi-library';`

## Table of Contents

- [Required Props](#required-props)
- [Optional Props](#optional-props)
- [Action Props](#action-props)

## Required Props

#### **Name: data** | **Default:** null | **Type:** array

A collection of objects, where each object represents a row of data in the table.

**Sample:**

```
data={[
  {first: 'Dan', mi: 'A', last: 'Kinsbursky'},
  {first: 'Trevor', last: 'Henderson'},
  {first: 'Chris', mi: 'J', last: 'Voss'}
]}
```

---

#### **Name: columns** | **Default:** null | **Type:** array

A collection of objects, where each object represents a column to be displayed in the table. The order of the collection array will dictate the order of the columns (left to right) in the table. Each object **requires** a `key` property, which references the data's key/value pair to be displayed in the column. Each object may as an **option** include a `display` property for greater customization of table header text; if no `display` property is used header text will default to the `key`.

**Sample:** `columns={[ {key: 'first', display: 'First Name'}, {key: 'last'} ]}`

| First Name | last       |
| ---------- | ---------- |
| Dan        | Kinsbursky |
| Trevor     | Henderson  |
| Chris      | Voss       |

---

## Optional Props

#### **Name: defaultSort** | **Default:** null | **Type:** object

An object that describes the column to be sorted by default and the direction of that sort. The object **requires** a `key` property, which references the column to be sorted by default. In addition, the object **requires** a `direction` property, which states whether sort should be ascending or descending; `direction` property takes only `'asc'` or `'desc'` as values.

**Sample:** `defaultSort={ {key: 'first', direction: 'asc'} }`

| First Name ^ | last       |
| ------------ | ---------- |
| Chris        | Voss       |
| Dan          | Kinsbursky |
| Trevor       | Henderson  |

---

#### **Name: showPagination** | **Default:** true | **Type:** boolean

A boolean that states whether the table should implement pagination. If property not passed, table will implement pagination by default.

**Sample:** `showPagination={false}`

---

#### **Name: paginationRows** | **Default:** 5 | **Type:** number

A number that states the amount of rows to display on initial table load when `showPagination` property implemented. If `showPagination` property is not implemented, `paginationRows` property will have no effect on table. If property not passed, table will implement 5 pagination rows by default.

**Sample:** `paginationRows={10}`

---

#### **Name: paginationOptions** | **Default:** [5, 10, 25] | **Type:** array

An array of numbers that states the selectable row options for pagination. If `showPagination` property is not implemented, `paginationOptions` property will have no effect on table. If property not passed, table will implement show [5, 10, 25] as selectable rows by default.

**Sample:** `paginationOptions={[10, 100, 500, 1000]}`

---

#### **Name: toolbarTitle** | **Default:** null | **Type:** object

An object that sets a table title and description in the top toolbar. The object **requires** a `main` property which references the primary headline to be displayed on the table. Each object may as an **option** include an `extra` property which references an additional text description underneath the primary headline.

**Sample:** `toolbarTitle={{ main: 'Contacts', extra: 'This table lists all system contacts.' }}`

---

## Action Props

#### **Name: toolbarActions** | **Default:** null | **Type:** array

A collection of objects, where each object represents an icon, to be displayed in table toolbar, with a clickable action to be written by developer. The object **requires** an `icon` property, which must contain the imported [Material UI Icon](https://material-ui.com/style/icons/) to be displayed. In addition, the object **requires** a `click` property, which must include an anonymous fat arrow function to be executed on the user's click. Finally, each object may as an **option** include a `tooltip` property, which will set a text tooltip describing action to be performed when user hovers cursor over icon.

**Sample:**

```
import { Call, Email } from '@material-ui/icons';

toolbarActions={[
  { icon: Call, click: () => alert('User clicked the call icon.'), tooltip: 'Click to Call' },
  { icon: Email, click: () => alert('User clicked the email icon.') }
]}
```

---

#### **Name: rowActions** | **Default:** null | **Type:** array

A collection of objects, where each object represents an icon, to be displayed in each table row, with a clickable action to be written by developer. The object **requires** an `icon` property, which must contain the imported [Material UI Icon](https://material-ui.com/style/icons/) to be displayed. In addition, the object **requires** a `click` property, which must include an anonymous fat arrow function to be executed on the user's click. The action function passes `row` object, which includes all data related to row clicked for use by developer. Finally, each object may as an **option** include a `tooltip` property, which will set a text tooltip describing action to be performed when user hovers cursor over icon.

**Sample:**

```
import { Visibility, Email } from '@material-ui/icons';

rowActions={[
  { icon: Visibility, click: (row) => console.log('See row info:', row), tooltip: 'Click to log row.' },
  { icon: Email, click: (row) => console.log('See row info:', row) }
]}
```

---

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