@czkoudy/pagination-table

React functional component for turning ordinary tables into Pagination Data Tables

🦸 Looking for contributors

I am looking for contributors who can move this project further.
I would like to work with someone to learn more about Javascript and Typescript, React
and how to work closely with a team.

⚙️Install

npm install --save @czkoudy/pagination-table

📓Usage

import PaginationTable from '@czkoudy/pagination-table';

const data = [{ id: 5 }, { id: 6 }];
const header = [{ label: 'ID' }];
const body = [{ key: 'id' }];

return <PaginationTable data={data} header={header} body={body} />;

🗳️4.3.0-beta Release

🔧Breaking Changes

• rename sortable to sort in options object

🔥Improvements

• 🆕 - stayOnPage in options to stay on the same page after data refresh
• 🆕 - slowly moving to TypeScript
• 🆕 - table now can have title - options.tableTitle

Changes in 3.7.0

[Fix] - selection has been redone [New] - Added option to select all on a page [New] - Search input is aligned to the right

const options = {
  //rest of options
  selection: {
      key: '_id',
      buttons: [
        {
          component: Button,
          props: {
            onClick: handleOnButtonClick,
            label: 'Delete Selected',
          },
        },
      ],
    },
}

Changes in 3.6.1

[New] - body option useWholeObject - this will return whole object to set function rather than single field - key and function fields are required

Changes from 3.3.0

[Fix] - sorting was ignoring casing [New] - show page length menu

const options = {
    lengthChange:  true, //default false
    lengthMenu:  Array[] // default [5, 10, 15, 20],
}

const options = {
    selection: {
      buttons: [ // Array of object for buttons to be visible
        {
          label: "",
          onClickFunction: () => function() // function will receive an array of keys defined in selection.key
          className: "", // className for button
        }
      ]
    }
}

New option in sortable settings

excludeColumns: Array[] // default [], array of indexes of columns to exclude

Changes from 3.2.5

[New] - debug option in options object, default: false

[Fix] - added fields to search objects

• colums - array of column indexes to be included in search, default string "all"

Changes from 3.2.0

• now exports PaginationTable as well as usePaginationTable hook

Breaking changes from 3.0.1

• PaginationTable now uses hooks

• onRowClick moved to options object

Additional changes from 3.0.1

• support for row selection

Breaking changes in 2.0.0

Now there is options object passed in rather then individual properties.

search

default: false

// Adding CSS class for input field

search: {
    className: ""
}

sortable

default: false

sortable: {
    column: Integer // index of default column order
  direction: String // 'asc' or 'des'
}

info

default: false

emptyRows

default: false

perPage

default: 10

pagination

default: null

className

default: ""

CSS class for the whole table

All constants are arrays with objects.

API

PaginationTable props

| Name | Type | Required | Default | | ------- | ------- | -------- | --------- | | data | Array[] | Yes | - | | header | Array[] | Yes | - | | body | Array[] | Yes | - | | options | Array[] | No | see below |

options props

| Name | Type | Required | Default | Description | | ------------------------- | ----------------- | -------- | ------------ | -------------------------------------------------- | --- | | perPage | Int | No | 10 | | emptyRows | Boolean | No | false | | lengthChange | Boolean | No | false | | lengthMenu | Array[] | No | [5,10,15,20] | | info | Boolean | No | true | | search | Boolean or Object | No | false | | search.columns | Array or String | No | "all" | Array of indexes of columns to search within | | search.className | String | No | false | ClassName for search input | | sort | Boolean or Object | No | false | | sort.column | Int | No | 0 | Index of default column to sort by | | sort.direction | String | No | "asc" | "asc" or "desc" | | sort.excludeColumns | Array | No | [] | Array of columns indesx to exclude sorting for | | onRowClick | Object | No | {} | | onRowClick.function | Function | No | {} | function to be actioned on click on row | | onRowClick.key | String | No | "id" | Key to be passed to function | v | | onRowClick.excludeColumns | Array | No | null | Array of columns indesx to exclude from onRowClick | | loading | Object | No | {} | | loading.component | React.Component | No | null | | loading.text | String | No | "Loading" | | debug | Boolean | No | false | Logging to console progress of PaginationTable |

header props

| Name | Type | Required | Default | Description | | ----- | ------- | -------- | ------- | ----------- | | label | Int | No | 10 | | width | Boolean | No | false |

header props

| Name | Type | Required | Default | Description | | ----- | ------ | -------- | ------- | ----------------------- | | label | String | Yes | - | | width | String | No | - | String with pixel width |

body props

| Name | Type | Required | Default | Description | | --------- | --------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------- | | key | String | Yes | - | | date | String | No | - | this is using format() from date-fns module. See more at date-fns | | function | Function | No | - | referencing function which will have key as its argument | | component | Component | No | - | will wrap the key in the Component | | useDot | Boolean | No | True | allows to dive into objects with dot notation | | component | Component | No | - | will wrap the key in the Component | | component | Component | No | - | will wrap the key in the Component |

License

MIT © czkoudy