# react-composite-table

> [![Build Status](https://travis-ci.org/davidcsejtei/react-composite-table.svg?branch=master)](https://travis-ci.org/davidcsejtei/react-composite-table) [![Coverage Status](https://coveralls.io/repos/github/davidcsejtei/react-composite-table/badge.svg?bran

Latest version **1.1.0** (published 2018-11-30) · 0 weekly downloads

## Install

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

## 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.1.0 |
| Published | 2018-11-30 |
| First published | 2018-05-03 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 10 |
| Unpacked size | 1.7 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Dávid Csejtei |
| Maintainers | csejtei |

## Links

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

## Dependencies (10)

- [react](https://npm.io/package/react.md) ^16.3.0
- [lodash](https://npm.io/package/lodash.md) ^4.17.5
- [moment](https://npm.io/package/moment.md) ^2.20.1
- [node-sass](https://npm.io/package/node-sass.md) ^4.10.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.2.0
- [sfcookies](https://npm.io/package/sfcookies.md) ^1.0.2
- [react-tippy](https://npm.io/package/react-tippy.md) ^1.2.2
- [react-select](https://npm.io/package/react-select.md) ^1.2.1
- [react-bootstrap](https://npm.io/package/react-bootstrap.md) ^0.32.1
- [react-datepicker](https://npm.io/package/react-datepicker.md) ^1.2.1

## Recent versions

- 1.1.0 (latest) — 2018-11-30
- 1.0.14 — 2018-09-11
- 1.0.13 — 2018-09-04
- 1.0.12 — 2018-08-28
- 1.0.11 — 2018-08-27
- 1.0.10 — 2018-08-02
- 1.0.9 — 2018-07-30
- 1.0.8 — 2018-07-26
- 1.0.7 — 2018-07-22
- 1.0.6 — 2018-07-22
- 1.0.5 — 2018-07-22
- 1.0.4 — 2018-07-22
- 1.0.3 — 2018-06-25
- 1.0.2 — 2018-06-01
- 1.0.1 — 2018-05-03
- … 1 more at https://npm.io/package/react-composite-table/versions

## README

[![Build Status](https://travis-ci.org/davidcsejtei/react-composite-table.svg?branch=master)](https://travis-ci.org/davidcsejtei/react-composite-table) [![Coverage Status](https://coveralls.io/repos/github/davidcsejtei/react-composite-table/badge.svg?branch=master)](https://coveralls.io/github/davidcsejtei/react-composite-table?branch=master)

# How to use React Composite Table

The package gives you a general table component for ReactJS projects.

Table uses async actions to filter, order and edit table data.

## Define a table

Let's create your first table (eg.: UserTable for list and edit users).

These are the steps:
- define your table columns with an array
- collect your table data
- call your table with previously defined columns and collected data

Rules:
- You need to define your update action for each editable field separately

## Example (UserTable)

If you have the following data (e.g.: list of users) for the table:

```
[
    0: {
           id: 9,
           username: "testadmin",
           email: "admin@example.net",
           name: "Test Admin",
           roles: {
               "SUPER_ADMIN",
               "MANAGER"
           }
    }
    1: {
           id: 13,
           username: "firsteditor",
           email: "editor@example.net",
           name: "First Editor",
           roles: {
               "EDITOR"
           }
    }
]

```

And want to show ID, username and name attributes in the table:

```javascript
import Table2 from 'react-composite-table';

// You have to write all of your actions and add to the as a props
import { updateUserNameField, deleteRow } from '../actions/index';

class UserTable extends Component {

    render() {
        if(this.props.allUsers) {
            const columns = [
                {
                    label: 'ID',
                    name: 'Id',
                    value: 'Id',
                    filterable: true,
                    filterType: 'text',
                    filterableProperty: 'Id',
                    editable: false,
                    sortable: true,
                    sortableProperty: 'Id'
                },
                {
                    label: 'Username',
                    name: 'username',
                    value: 'username',
                    filterable: true,
                    filterType: 'text',
                    filterableProperty: 'username',
                    editable: false,
                    sortable: true,
                    sortableProperty: 'username'
                },
                {
                    label: 'Name',
                    name: 'name',
                    value: 'name',
                    filterable: true,
                    filterType: 'text',
                    filterableProperty: 'name',
                    editable: true,
                    updateFunction: this.props.updateUserNameField,
                    sortable: true,
                    sortableProperty: 'name'
                }
            ];

            return (
                <Table2
                    data={this.props.allUsers}
                    columns={columns}
                    onDeleteRow={this.props.deleteRow}
                />
            );
        } else {
            return (
                <span className="icon-spinner icon-spinner-large"></span>
            );
        }
    }
}

export default connect(null, {updateUserNameField, deleteRow})(UserTable);
```

# For package developers

## Steps:
- Clone github repository to your local computer
- Go to the library folder and run 'npm run build' to make a build and watch modification
- Open your project and include the library with 'npm link react-composite-table'

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