# react-pagination-table > A table component for React with pagination Latest version **2.0.2** (published 2018-04-07) · MIT license · 0 weekly downloads ## Install ```sh npm install react-pagination-table pnpm add react-pagination-table yarn add react-pagination-table bun add react-pagination-table ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned. ## Facts | | | |---|---| | Version | 2.0.2 | | Published | 2018-04-07 | | First published | 2016-08-23 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Node | >=6.2.2 | | Dependencies | 21 | | Unpacked size | 26.1 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 11 | | Author | addhome2001 | | Maintainers | addhome2001 | | Keywords | react, component, pagination, status, table, data | ## Links - npm: https://www.npmjs.com/package/react-pagination-table - Repository: https://github.com/addhome2001/react-pagination-table - Homepage: https://github.com/addhome2001/react-pagination-table.git#readme - Issues: https://github.com/addhome2001/react-pagination-table.git/issues - npm.io page: https://npm.io/package/react-pagination-table ## Dependencies (21) - [chai](https://npm.io/package/chai.md) ^3.5.0 - [snyk](https://npm.io/package/snyk.md) ^1.41.1 - [jsdom](https://npm.io/package/jsdom.md) ^9.4.2 - [react](https://npm.io/package/react.md) ^16.2.0 - [sinon](https://npm.io/package/sinon.md) ^1.17.5 - [enzyme](https://npm.io/package/enzyme.md) ^3.3.0 - [eslint](https://npm.io/package/eslint.md) ^3.14.1 - [webpack](https://npm.io/package/webpack.md) ^2.2.1 - [flow-bin](https://npm.io/package/flow-bin.md) ^0.41.0 - [react-dom](https://npm.io/package/react-dom.md) ^16.2.0 - [flow-typed](https://npm.io/package/flow-typed.md) ^2.0.0 - [prop-types](https://npm.io/package/prop-types.md) ^15.5.8 - [jsdom-global](https://npm.io/package/jsdom-global.md) ^2.0.0 - [eslint-plugin-react](https://npm.io/package/eslint-plugin-react.md) ^6.9.0 - [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) ^2.28.0 - [eslint-config-airbnb](https://npm.io/package/eslint-config-airbnb.md) ^14.0.0 - [eslint-plugin-import](https://npm.io/package/eslint-plugin-import.md) ^2.2.0 - [eslint-plugin-flowtype](https://npm.io/package/eslint-plugin-flowtype.md) ^2.30.3 - [eslint-plugin-jsx-a11y](https://npm.io/package/eslint-plugin-jsx-a11y.md) ^3.0.2 - [enzyme-adapter-react-16](https://npm.io/package/enzyme-adapter-react-16.md) ^1.1.1 - [react-pagination-status](https://npm.io/package/react-pagination-status.md) ^2.0.0 ## Alternatives - [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads - [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads - [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads - [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads - [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads ## Recent versions - 2.0.2 (latest) — 2018-04-07 - 2.0.1 — 2018-04-06 - 2.0.0 — 2018-04-06 - 1.2.0 — 2018-01-13 - 1.1.0 — 2017-06-07 - 1.0.5 — 2017-04-17 - 1.0.4 — 2017-03-19 - 1.0.3 — 2017-02-12 - 1.0.2 — 2016-08-25 - 1.0.0 — 2016-08-23 ## README # react-pagination-table [![Build Status](https://travis-ci.org/addhome2001/react-pagination-table.svg?branch=master)](https://travis-ci.org/addhome2001/react-pagination-table) [![Known Vulnerabilities](https://snyk.io/test/github/addhome2001/react-pagination-table/badge.svg)](https://snyk.io/test/github/addhome2001/react-pagination-table) > Table components for React with pagination ## Install ``` npm install --save react-pagination-table ``` ## Migration After the version `2.x`, the behavior of the `className` and `paginationClassName` props will be a little different. For a better way to architect your CSS, the className of the specific components will be more maintainable. > The [example](https://github.com/addhome2001/react-pagination-table/blob/master/example) or the [className](https://github.com/addhome2001/react-pagination-table#classname) section will be helpful to you. ## Usage >The module contains `two` components, includes ___TableSimple___、___TablePagination___ ### [Demo](https://addhome2001.github.io/react-pagination-table/) There is a data set. ````javascript const data = [ { size: ["L", "M"], phone: 1234567, gender: "Male", age: 20, name:"Ben" }, { size: ["L", "M", "XL"], phone: 1234567, gender: "Female", age: 22, name:"Ken" }, { size: ["L", "S"], phone: 1234567, gender: "Female", age: 23, name:"Jay" }, { size: ["M", "S"], phone: 1234567, gender: "Male", age: 26, name:"Chip" }, { size: ["XL", "XS"], phone: 1234567, gender: "Male", age: 23, name:"Lee" }, { size: ["L", "M", "S", "XS"], phone: 1234567, gender: "Female", age: 30, name:"Frank" }, { size: ["S", "L"], phone: 1234567, gender: "Male", age: 23, name:"CoCo" }, { size: ["L", "M", "S"], phone: 1234567, gender: "Female", age: 20, name:"Fake" }, { size: ["XS", "L"], phone: 1234567, gender: "Male", age: 26, name:"Dump" }, { size: ["L", "M", "S"], phone: 1234567, gender: "Female", age: 27, name:"Ocean" }, { size: ["S", "XL"], phone: 1234567, gender: "Male", age: 20, name:"Polo" }, { size: ["M", "XL"], phone: 1234567, gender: "Female", age: 21, name:"Queen" }, { size: ["L", "M"], phone: 1234567, gender: "Female", age: 20, name:"Bump" }, { size: ["L", "M", "S", "XL"], phone: 1234567, gender: "Male", age: 22, name:"Judy" }, { size: ["XL", "M"], phone: 1234567, gender: "Female", age: 24, name:"Ryan" }, { size: ["L", "S"], phone: 1234567, gender: "Female", age: 25, name:"Flow" }, { size: ["S", "M"], phone: 1234567, gender: "Female", age: 31, name:"Ray" }, { size: ["L", "M", "XS"], phone: 1234567, gender: "Male", age: 23, name:"Yen" }, { size: ["XL", "M", "S"], phone: 1234567, gender: "Male", age: 21, name:"Gray" }, { size: ["L", "M", "S"], phone: 1234567, gender: "Female", age: 22, name:"Tom" } ]; ```` ___TableSimple___ >Simple table component. ````javascript import { render } from 'react-dom'; import React from 'react'; import { TableSimple } from 'react-pagination-table'; //Table header const Header = ["Name", "Age", "Size", "Phone", "Gender" ]; const App = ({Header, data}) =>
```` ___TablePagination___ >Simple table with pagination. ````javascript import { render } from 'react-dom'; import React from 'react'; import { TablePagination } from 'react-pagination-table'; const Header = ["Name", "Age", "Size", "Phone", "Gender" ]; const App = ({Header, data}) =>
```` ## className The `react-pagination-table`(**className**) and `pagination-status`(**paginationClassName**) is the default className and **prefix**. You can pass custom name by the `className` and `paginationClassName` props. > In addition, setting the specific components to the differences styles and status by these **class** >- {**className**} the wrapper of the Component >- {**className**}__title >- {**className**}__sub-title >- {**className**}__header >- {**className**}__table(the `` tag) >- {**paginationClassName**} the wrapper of the Pagination >- {**paginationClassName**}__item(the `
  • ` tags) >- {**paginationClassName**}__btn(the page button) >- {**paginationClassName**}__btn--active(the activated page button) >- {**paginationClassName**}__btn--disable ## API ### ___TableSimple___ | Props | Description | Type | Default | |------------------|------------------------------------|---------------|--------------------------| | title | the title at left | String | `empty` | | subTitle | the subTitle at right | String | `empty` | | data | the items you want to render | Array | isRequired | | columns | the order of columns | String | isRequired | | headers | table's header | Array | isRequired | | arrayOption | `property`: specific which property is array.
    `index`: the index of the array, can be a ___number___ or ___all___
    `plus`: add character between items | Array[] | `empty` | | className | the TableSimple className | String | react-pagination-table | ### ___TablePagination___ >In addition to the above... | Props | Description | Type | Default | |------------------|------------------------------------|---------------|--------------------------| | totalCount | the length of the items | Number | isRequired | | perPageItemCount | the numbers of the items on per page | Number | isRequired | | nextPageText | the text of `nextPage` button | String | 下一頁 | | prePageText | the text of `previousPage` button | String | 上一頁 | | paginationClassName | the pagination className | String | pagination-status | | partialPageCount | the numbers of the page buttons | Number | 5 | ## Example ``` npm start ``` By default, the example is on the `8000` port after run the command above. Then you can access `localhost:8000` to see the demo. ## Test ``` npm test ``` ### Other useful component [react-pagination-status](https://www.npmjs.com/package/react-pagination-status) LICENSE ======= MIT --- _Source: https://npm.io/package/react-pagination-table · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._