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
Last updated 10 months ago by csejtei .
Original npm · Tarball · package.json
$ cnpm install react-composite-table 
SYNC missed versions from official npm registry.

Build Status Coverage Status

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:

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'

Current Tags

  • 1.1.0                                ...           latest (10 months ago)

16 Versions

  • 1.1.0                                ...           10 months ago
  • 1.0.14                                ...           a year ago
  • 1.0.13                                ...           a year ago
  • 1.0.12                                ...           a year ago
  • 1.0.11                                ...           a year ago
  • 1.0.10                                ...           a year ago
  • 1.0.9                                ...           a year ago
  • 1.0.8                                ...           a year ago
  • 1.0.7                                ...           a year ago
  • 1.0.6                                ...           a year ago
  • 1.0.5                                ...           a year ago
  • 1.0.4                                ...           a year ago
  • 1.0.3                                ...           a year ago
  • 1.0.2                                ...           a year ago
  • 1.0.1                                ...           a year ago
  • 1.0.0                                ...           a year ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 2
Last Day 0
Last Week 2
Last Month 17
Dependencies (10)

Copyright 2014 - 2016 © taobao.org |