@gemcook/table

---

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
@gemcook/table
Minified + gzip package size for @gemcook/table in KB

Readme

@gemcook/table


npm version

React Table Component.

Online Demo

Installation

npm install --save @gemcook/table

or

yarn add @gemcook/table

Usage

SCSS

Import @gemcook/table/lib/styles/index.scss to your SCSS.

@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.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.