https://github.com/dchan3/react-everafter

Customizable React Pagination Component
https://github.com/dchan3/react-everafter

paginate pagination pagination-component pagination-components pagination-generator pagination-library paginator react react-component

Last synced: 3 months ago
JSON representation

Customizable React Pagination Component

• Host: GitHub
• URL: https://github.com/dchan3/react-everafter
• Owner: dchan3
• License: mit
• Created: 2019-01-07T07:35:10.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-03T19:40:12.000Z (over 2 years ago)
• Last Synced: 2025-02-10T08:18:37.554Z (3 months ago)
• Topics: paginate, pagination, pagination-component, pagination-components, pagination-generator, pagination-library, paginator, react, react-component
• Language: JavaScript
• Size: 861 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# react-everafter

[![NPM version](https://img.shields.io/npm/v/react-everafter.svg?style=flat)](https://www.npmjs.com/package/react-everafter)

![npm](https://img.shields.io/npm/dt/react-everafter.svg)

[![Build Status](https://travis-ci.org/dchan3/react-everafter.svg?branch=master)](https://travis-ci.org/dchan3/react-everafter)

[![Codacy Badge](https://api.codacy.com/project/badge/Grade/453fef0486e84ef1b3d6e5ce57120446)](https://www.codacy.com/app/dchan3/react-everafter?utm_source=github.com&utm_medium=referral&utm_content=dchan3/react-everafter&utm_campaign=Badge_Grade)

## Introduction

This package aims to make pagination generation easier to customize.

## Installation

`npm i react-everafter -S`

## Components

### `EverAfter.Paginator`

-   `items`: `Array`. Items to be paginated, preferably objects.

-   `wrapper`: `React.Component`. Container for items. Should use attributes of objects in `items`.

-   `perPage`: `Number`. Number of items per page.

-   `useListElement`: `Boolean`. True if items are to be put in `ul` list items. Value defaults to `false`.

-   `activeTabColor`: `String`. CSS background-color value of tabs when active.

-   `truncate`: `Boolean`. Value defaults to `false`.

-   `maxPageTabs`: `Number`. Maximum number of page tabs to display. Defaults to `5`.

-   `maxPages`: `Number`. Maximum number of pages to render. Defaults to `null`.

### `EverAfter.TablePaginator`

Paginated Table. Properties are the same as those of `EverAfter.Paginator`, except `useListElement`. Additional properties are listed.

-   `columns`: `Array`. Must contain objects with keys `headerText` and `display`. `headerText` dictates the text in the column header. `display` is a `Function` that takes `item` as sole parameter. Dictates how the item is rendered in the column.

-   `enumerate`: `Boolean`. Numbers items if set to `true`. Defaults to `false`.

## Example Usage

```Javascript

import React, { Component } from 'react';

import EverAfter from 'react-everafter';

var items = [{n: 1}, {n: 2}, {n: 3}, {n: 4}, {n: 5}];

class MyItemContainer extends Component {

  render() {

    return 
{this.prop.item.n}

  }

}


class MyList extends Component {

  render() {

    return 

  }

}

```