npm package: @pjediny/react-responsive-datatable
Description: React responsive datatable
Author: Pavol Jediny
Latest version: 0.0.4

# React responsive datatable
Komponenta vykreslujuca responzivnu datatable. Tento balicek vychadza z [react-bootstrap-table](http://allenfang.github.io/react-bootstrap-table/index.html)

## Instalacia ##

	npm i @pjediny/react-responsive-datatable

## Example ##
**Component**

    import React, { Component } from 'react';
	import PropTypes from 'prop-types';
	import { fetchData, insertUser, editUser } from '../../actions/userDatatable';
	import { withRemote, BootstrapTable, TableHeaderColumn } from '@pjediny/react-responsive-datatable';
	
	class UserDatatable extends Component {
	    render() {
	        const options = Object.assign({}, this.props.remoteOptions, {
	            // ...
	        });
	        const cellEdit = Object.assign({}, this.props.cellEditOptions, {
	            mode: 'click'
	        });
	        return (
	            <BootstrapTable
	                fetchInfo={{ dataTotalSize: this.props.datatableData.total }}
	                data={this.props.datatableData.items}
	                remote
	                options={options}
	                pagination
	                insertRow
	                cellEdit={cellEdit}
	            >
	                <TableHeaderColumn key="nickName" dataField='nickName' isKey responsiveWidth="xs">Nickname</TableHeaderColumn>
	                <TableHeaderColumn key="name" dataField='name' responsiveWidth="lg">Name</TableHeaderColumn>
	                <TableHeaderColumn key="email" dataField='email' responsiveWidth="lg">Email</TableHeaderColumn>
	            </BootstrapTable>
	        );
	    }
	}
	
	UserDatatable.propTypes = {
	    datatableData: PropTypes.shape({
	        items: PropTypes.array.isRequired,
	        total: PropTypes.number.isRequired
	    }),
	    remoteOptions: PropTypes.object.isRequired,
	    cellEditOptions: PropTypes.object,
	};
	
	export default withRemote(UserDatatable, 'userDatatable', fetchData, insertUser, editUser);


----------


**Redux**
*userDatatable.js*

    import { createReducer } from './../utils/redux.js';
	import initState from './initState.js';
	import userDatatableTypes from './../types/userDatatable';
	
	const userDatatableReducer = createReducer(initState.userDatatable, {
	    [userDatatableTypes.SUCCESS]: (state, payload) => {
	        return Object.assign({}, state, {
	            data: payload,
	            retrieving: false
	        });
	    },
	    [userDatatableTypes.REQUEST]: state => {
	        return Object.assign({}, state, {
	            retrieving: true,
	        });
	    },
	    [userDatatableTypes.INSERT_SUCCESS]: state => {
	        return Object.assign({}, state, {
	            retrieving: false,
	        });
	    },
	    [userDatatableTypes.EDIT_SUCCESS]: state => {
	        return Object.assign({}, state, {
	            retrieving: false,
	        });
	    }
	});
	
	export default userDatatableReducer;
*index.js*

    import { combineReducers } from 'redux';
    import { routerReducer } from 'react-router-redux';
    import userDatatableReducer from './userDatatable.js';
	
	const rootReducer = combineReducers({
	  userDatatable: userDatatableReducer
	});
	
	export default rootReducer;


----------


**Action**

    import userDatatableTypes from '../types/userDatatable';
    
    export function userDatatableRequest() {
        return {
            type: userDatatableTypes.REQUEST
        };
    }
    
    export function userDatatableSuccess(data) {
        return {
            type: userDatatableTypes.SUCCESS,
            payload: data
        };
    }
    
    export function userDatatableInsertSuccess() {
        return {
            type: userDatatableTypes.INSERT_SUCCESS
        };
    }
    
    export function userDatatableEditSuccess() {
        return {
            type: userDatatableTypes.EDIT_SUCCESS
        };
    }
    
    export function fetchData(limit, skip) {
        return function (dispatch) {
            dispatch(userDatatableRequest());
            return fetch(`http://localhost:3000/user/?limit=${limit}&skip=${skip}`, {
                    method: 'get',
                    headers: {
                        "Content-Type": "application/json"
                    }
                }).then((res) => {
                    return res.json();
                })
                .then((data) => {
                    dispatch(userDatatableSuccess(data.payload));
                })
                .catch((err) => {
                    console.error(err);
                });
        }
    }
    
    export function insertUser(userData) {
        return function (dispatch) {
            dispatch(userDatatableRequest());
            return fetch('http://localhost:3000/user/', {
                method: 'post',
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify(userData)
            }).then((res) => {
                dispatch(userDatatableInsertSuccess());
            }).catch((err) => {
                console.error(err);
            });
        };
    }
    
    export function editUser(origUserData, key, value) {
        return function (dispatch) {
            dispatch(userDatatableRequest());
            let newValue = {};
            newValue[key] = value;
            let userData = Object.assign({}, origUserData, newValue);
            return fetch(`http://localhost:3000/user/${origUserData.nickName}`, {
                method: 'put',
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify(userData)
            }).then((res) => {
                dispatch(userDatatableEditSuccess());
            }).catch((err) => {
                console.error(err);
            });
        };
    }

## API ##
**TableHeaderColumn**

 - *props* z [TableHeaderColumn](http://allenfang.github.io/react-bootstrap-table/docs.html#propsOnTableHeaderColumn)
 - *responsiveWidth* udava minimalnu sirku, pri ktorej sa bude stlpec zobrazovat (defaultne podla Bootstrap grid systemu ['xs', 'sm', 'md', 'lg'])


----------
**BootstrapTable**

 - *props* z [BootstrapTable](http://allenfang.github.io/react-bootstrap-table/docs.html#propsOnBootstrapTable)
 - *bootstrapGridWidth* objekt siriek, podla ktorych sa skryva/zobrazuje stlpec
    bootstrapGridWidth={{
    	                    'xs': 0,
    	                    'sm': 100,
    	                    'md': 200,
    	                    'lg': 1000
    	                }}

## License

MIT