# react-table-with-pagination

> Table with pagination,search

Latest version **1.2.9** (published 2022-09-29) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-table-with-pagination
pnpm add react-table-with-pagination
yarn add react-table-with-pagination
bun add react-table-with-pagination
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.9 |
| Published | 2022-09-29 |
| First published | 2022-08-09 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 21 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Raja |
| Maintainers | raja-developer |

## Links

- npm: https://www.npmjs.com/package/react-table-with-pagination
- npm.io page: https://npm.io/package/react-table-with-pagination

## Recent versions

- 1.2.9 (latest) — 2022-09-29
- 1.2.8 — 2022-08-09
- 1.2.7 — 2022-08-09
- 1.2.6 — 2022-08-09
- 1.2.5 — 2022-08-09
- 1.2.4 — 2022-08-09
- 1.2.3 — 2022-08-09
- 1.2.2 — 2022-08-09
- 1.2.1 — 2022-08-09
- 1.2.0 — 2022-08-09
- 1.1.9 — 2022-08-09
- 1.1.8 — 2022-08-09
- 1.1.7 — 2022-08-09
- 1.1.6 — 2022-08-09
- 1.1.5 — 2022-08-09
- … 16 more at https://npm.io/package/react-table-with-pagination/versions

## README

# How to use
```sh
import DataTable from 'react-table-with-pagination'
```

## How to Declare 

```sh
<DataTable 
	tableClassName = "table tablesort table-responsive tablesearch-table table-bordered table-hover text-center"
	theadData={header} 
	tbodyData={data}
	rowsPerPage = {rowPaginationCount}
	parameter={showData} 
	customClassName={customClassName}
	textStyle={textStyle}
	searchData = {search}
	actionColumn = {actionColumn}
	pagination = "true"
/>
```
### Sample Input Data

```sh
  const [rowPaginationCount,setRowPaginationCount] = useState(5)

  const [search,setSearch] = useState('')

  const data = [
    {
      color: "red",
      value: "#f00"
    },
    {
      color: "green",
      value: "#0f0"
    },
    {
      color: "blue",
      value: "#00f"
    },
    {
      color: "cyan",
      value: "#0ff"
    },
    {
      color: "magenta",
      value: "#f0f"
    },
    {
      color: "yellow",
      value: "#ff0"
    },
    {
      color: "black",
      value: "#000"
    },
    {
      color: "green",
      value: "#0f0"
    },
    {
      color: "blue",
      value: "#00f"
    },
    {
      color: "cyan",
      value: "#0ff"
    },
    {
      color: "magenta",
      value: "#f0f"
    },
    {
      color: "yellow",
      value: "#ff0"
    },
    {
      color: "black",
      value: "#000"
    }
  ]

  const header = [
    'color',
    'value',
    'Action'
  ]

  const showData = [
      'color',
      'value'
  ]

  function customClassName(getData){
    if(getData.color === "red"){
      return "danger"
    }
  }

  const textStyle = {
      'color' : { textAlign : 'right', fontWeight:'700' },
  }

const actionColumn = (getData) => {
	return( 
	  <div>
	    <a onClick={(e)=>editData(getData)}>Edit</a>
	    <a onClick={(e)=>deleteData(getData)}>Delete</a>
	  </div>
	)
}

function editData(getData) {
console.log(getData)
}

function deleteData(getData) {
console.log(getData)
}
```

---
_Source: https://npm.io/package/react-table-with-pagination · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._