kbi-library v1.0.4

Description

Component for simple and fast integration of Material UI tables.

USAGE

npm install kbi-library

import { MuiTable} from 'kbi-library';

Table of Contents

• Required Props
• Optional 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'} ]}

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'} }

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 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 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) }
]}