React Table It

Data table component with React

Demo

Installation

$ npm i @emp/reactable

or

$ yarn add @emp/reactable

Usage

import Table from '@empd/reactable';
import '@empd/reactable/lib/styles.css';

Props

| Props | Required | Description | Type | Default | | --------------------- | :------: | ----------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------: | | data | - | Data to load on table | [] | [] | | columns | - | Table column settings | array of objects Object contains some/ all properties below name: string or element (required) className: string attributes: Object of html attributes selector: string sortable: boolean unsearchable: boolean cell: element or function function passes current row data and returns element | [] | | emptyPlaceholder | - | Data to load on table | [] | [] | | dataLength | - | Specify length of all data when loading from server. Note: server props must true | [] | [] | | emptyPlaceholder | - | Placeholder when table is empty. | string | element | 'No data found' | | pageOptions | - | Data to load on table | array of numbers | [10, 30, 50] | | server | - | Set if pagination is handled by asynchronously | boolean | false | | customPagination | - | Render custom pagination | boolean | false | | paginationComponent | - | Custom pagination component | function | undefined | | paginationPosition | - | Position of pagination component | One of ['top', 'bottom', 'both', 'none'] | 'top' | | onPageChange | - | Custom page change function | function with params (offset, limit, searchValue) Note: server props must true | - | | onSort | - | Custom sort function | function with params (selector/key, ascending(boolean)) | undefined | | searchPlaceholder | - | Search box placeholder | string | 'Search' | | search | - | Set visibility of search box | boolean | true | | containerClass | - | CSS class for package component | string | '' | | tableClass | - | CSS class for table | string | '' | | headerClass | - | CSS class for table header | string | '' | | rowClass | - | CSS class for table row | string | '' | | header | - | Custom header component | element | null | | footer | - | Custom footer component | element | null |

Technology

Table It uses a number of open source projects to work properly:

• [ReactJS] - HTML enhanced for web apps!
• [Bootstrap] - great UI boilerplate for modern web apps
• [Storybook] - great UI docs

Development

Want to contribute? Great!

We use Webpack for fast developing. Make a change in your file and instantanously see your updates!

Open your favorite Terminal and run these commands.

Install dependenies: $ yarn

Start application:$ yarn start

Ensure the tests are stable with good coverage: $ yarn test

Ensure the test have good coverage: $ yarn test:coverage

(optional) Run storybook: $ yarn storybook

License

MIT