@gemcook/table
React Table Component.
Online Demo
Installation
npm install --save @gemcook/table
or
yarn add @gemcook/table
Usage
SCSS
@gemcook/table/lib/styles/index.scss
to your SCSS.
Import @import '~@gemcook/table/lib/styles/index';
Local Pagination
Use 'makeLocalActive' to generate active.
Remote Pagination
Example
Documentaion
Props
- There are six required items
- For Remote Pagination, there are 8 required items
Parameter | Type | Required | Default | Description |
---|---|---|---|---|
active | [any] | true | undefined | Data displayed in the table |
columns | ReactElement | true | undefined | Table columns |
current | number | true | undefined | Current page number |
totalCount | number | true | undefined | Maximum number of all data |
totalPages | number | true | undefined | Maximum number of pages (use pagination) |
updateCurrent | (current: number) => void | true | undefined | - |
loading | boolean | false (Required for remote pagination) | false | - |
disabled | boolean | false (Required for remote pagination) | false | Set 'pagination' to disabled |
sortState | {key: string, order: enum} | false | undefined | Enum: asc desc
|
updateSortState | (sortState: object) => void | flase | undefined | - |
pageSize | number | false | 10 | Number of rows in table |
updatePageSize | (current: number, pageSize: number) => void | false | undefined | - |
noDataMessage | string | false | 'Data does not exist' | - |
outline | boolean | false | true | Whether to display the outer frame |
showPagination | boolean | false | true | Whether to display pagination- |
paginationPosition | string | false | right | Position of placement of pagination |
showSizeChanger | boolean | false | false | - |
scrollTop | boolean | false | false | - |
Override Styles
$table__main-color: #fa6681 !default;
$table__link-color: #fa6681 !default;
$table__bg-color: white !default;
$table__sort-default-color: #808b97 !default;
$table__thead-border-color: #e9ecef !default;
$table__th-text-color: #7d7d7d !default;
$table__td-text-color: #7d7d7d !default;
$table__nodata-text-color: #404b69 !default;
API
pagination integration
Confirm the API of pagination from this link.
License
@gemcook/table is released under the MIT license.