# react-table-strap

> A simple react table

Latest version **0.0.9** (published 2021-06-29) · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.9 |
| Published | 2021-06-29 |
| First published | 2021-06-02 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 226.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | mmustafau |
| Keywords | react, table, simple, bootstrap, server, client |

## Links

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

## Dependencies (3)

- [jquery](https://npm.io/package/jquery.md) ^3.5.1
- [react-bootstrap](https://npm.io/package/react-bootstrap.md) 1.0.1
- [@fortawesome/fontawesome-free](https://npm.io/package/@fortawesome/fontawesome-free.md) ^5.15.3

## 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

- 0.0.9 (latest) — 2021-06-29
- 0.0.8 — 2021-06-14
- 0.0.7 — 2021-06-08
- 0.0.6 — 2021-06-07
- 0.0.5 — 2021-06-07
- 0.0.4 — 2021-06-04
- 0.0.3 — 2021-06-04
- 0.0.2 — 2021-06-02
- 0.0.1 — 2021-06-02

## README

# react-table-strap

## Install
# npm
```bash
npm install react-table-strap
```

## Dependencies
It is highly recommended to use below package as a dependency. 
Some functionality may not work  if they are not used

- bootstrap
- react-bootstrap
- @fortawesome/fontawesome-free
- jquery
- react
- react-dom

## ScreenShot
![](.images/table.png)


## Usage

```js
import TableStrap from 'react-table-strap';
 ...
// if remote pagination
state = {
    paginationOptions: {
        page: 1,
        sizePerPage: 10,
        totalSize: undefined,
    },
}
    
...

const data =[
    {
        id: 1,
        firstName: {first:"Sonni", second:" Baldo"},
        lastName: "Gabotti",
        email: "sgabotti0@wsj.com",
        userName: "sgabotti0",
        gender: "Female",
        status: 0,
        dateOfBbirth: "10/14/1950",
        ipAddress: "251.237.126.210",
        type: 1,
        _userId: 1,
        _createdDate: "09/07/2016",
        _updatedDate: "05/31/2013"
    },
    {
        id: 2,
        firstName: {first:"Abie", second:"Yenn"},
        lastName: "Cowperthwaite",
        email: "acowperthwaite1@storify.com",
        userName: "acowperthwaite1",
        gender: "Male",
        status: 1,
        dateOfBbirth: "12/31/1998",
        ipAddress: "239.176.5.218",
        type: 1,
        _userId: 2,
        _createdDate: "03/18/2014",
        _updatedDate: "08/17/2016"
    }]
    
    const columns= [
            {
                dataField: "firstName",
                text: "User Name",
                formatter: (cell, row, rowIndex) => {
                    return <div className={"text-danger"}>{row.firstName.first + " " + row.lastName}</div>
                },
                filter: i18n.t('filtrele'),
                sort:true
            }, {
                dataField: "firstName.second",
                text: "Second Name",
                classes: 'align-middle text-right',
                style:{fontSize:"12px"},
                sort:true,
                collapsable:true //colomn collapse and hidden, it can be seen in popover
            }, {
                dataField: "email",
                text: "Email",
                hidden: !this.state.isEmailShown
            }, {
                dataField: "dateOfBbirth",
                text: "Date Of Birth",
            filter:true,
            dropDownFilter:[
                i18n.t('2000'),
                i18n.t('2001'),
                i18n.t('2002'),
                i18n.t('2003')],
            }
        ];

handleSelection = (row) => {
    this.setState({...this.state, selectedTableRow: row}); //row[0] if radioButton(isMulti={false}), row if checkbox(isMulti={true})
}


//if any extra info needed depends on a button
    const expandRow = {
        renderer: row => {
            return <Row className={"text-success d-inline-block "}>
               Some extra info which will be shown in overlay popup
            </Row>
        }
    
    }
...

//no remote pagiantion
<TableStrap data={data} columns={columns} keyField={"id"}
            isSelectable={true}
            isMulti={true}  //multiselection - checkbox
            filter
            isMultiFilter={true} //filter by any column
            selectRowOnClick={true} // if true you can select row as click on it. if false you should click on radio/checkbox
            rowStyle={{backgroundColor:"red"}}
            bodyClasses={"table-body-small"}
            headerClasses={"table-header "}
            noDataIndication={"No data found"}
            expandRow={expandRow}
/>

//if remote pagiantion
<TableStrap data={data} columns={columns} keyField={"id"}
            isSelectable={true}
            isMulti={true} 
            filter
            isMultiFilter={true} //filter by any column
            selectedRows={this.handleSelection}
            expandRow={expandRow}
            rowStyle={{backgroundColor:"red"}}
            bodyClasses={"table-body-small"}
            headerClasses={"table-header"}
            noDataIndication={"No data found"}
            selectRowOnClick={true} // if true you can select row by clicking on row. if false you should click on radio/checkbox
            remote  
            paginationOptions={this.state.paginationOptions}
            onTableChange={(paginationOpt, search) => this.onTableChange(paginationOpt, search)}
            
/>

...
```

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