# react-table-bootstrap

> Datatable desarrolado con bootstrap y react

Latest version **1.0.11** (published 2022-11-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-table-bootstrap
pnpm add react-table-bootstrap
yarn add react-table-bootstrap
bun add react-table-bootstrap
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.11 |
| Published | 2022-11-29 |
| First published | 2021-03-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 1 |
| Unpacked size | 329 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | carlosesthefanohm |
| Maintainers | carlosesthefanohm |

## Links

- npm: https://www.npmjs.com/package/react-table-bootstrap
- Repository: https://github.com/carlosesthefanohm/react-table-bootstrap
- Homepage: https://github.com/carlosesthefanohm/react-table-bootstrap#readme
- Issues: https://github.com/carlosesthefanohm/react-table-bootstrap/issues
- npm.io page: https://npm.io/package/react-table-bootstrap

## Dependencies (1)

- [react-paginate](https://npm.io/package/react-paginate.md) ^7.1.2

## Recent versions

- 1.0.11 (latest) — 2022-11-29
- 1.0.10 — 2022-11-29
- 1.0.9 — 2022-11-03
- 1.0.8 — 2022-11-03
- 1.0.7 — 2022-11-02
- 1.0.6 — 2021-06-28
- 1.0.4 — 2021-06-28
- 1.0.3 — 2021-03-25
- 1.0.2 — 2021-03-25
- 1.0.1 — 2021-03-25
- 1.0.0 — 2021-03-25

## README

# react-table-bootstrap

> Datatable desarrolado con bootstrap y react

[![NPM](https://img.shields.io/npm/v/react-table-bootstrap.svg)](https://www.npmjs.com/package/react-table-bootstrap) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save react-table-bootstrap
```

## Usage

```jsx
import React, { useState, useEffect } from 'react'
import ReactTableBootstrap from 'react-table-bootstrap'
import './index.scss'

const App = () => {
  const [body, setBody] = useState([])
  const [isProcessing, setIsProcessing] = useState(true)

  useEffect(() => {
    let b = []
    for (let j = 1; j < 100; j++) {
      b.push({
        id: j,
        name: 'Carlos' + j,
        balance: 10 * (j + 1),
        enabled: j % 2 === 0 ? 1 : 0,
        checked: 0,
        uno: 1,
        dos: 2,
        enabled_text: j % 2 === 0 ? 'ACTIVO' : 'INACTIVO'
      })
    }
    setBody(b)
    setIsProcessing(false)
  }, [])

  return <div className="container mt-4">
    <ReactTableBootstrap
      head={[

        [
          { name: 'id', text: 'ID', align: 'center' },
          { name: 'name', text: 'Nombres' },
          { name: 'balance', text: 'Salario', align: 'center' },
          {
            name: 'enabled', text: 'Estado', align: 'center', render: r => <strong className={'text-' + (parseInt(r.enabled) === 1 ? 'success' : 'danger')}>
              {parseInt(r.enabled) === 1 ? 'ACTIVO' : 'INACTIVO'}
            </strong>
          },
          {
            name: 'actions', text: 'Acciones', align: 'center',
            render: () => {
              return <>
                <button className='btn btn-primary btn-sm'>
                  Edit
                </button>
              </>
            }
          }
        ],
      ]}
      isProcessing={isProcessing}
      filterColumns={[{ name: 'id' }, { name: 'name' }]}
      rows={body}
    />
  </div>
}

export default App
```

```scss
@import 'bootstrap';
@import 'react-table-bootstrap/dist/index.scss'
```

## Versions
Node - 12.22.12

## License

MIT © [carlosesthefanohm](https://github.com/carlosesthefanohm)

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