React responsive datatable

Komponenta vykreslujuca responzivnu datatable. Tento balicek vychadza z react-bootstrap-table

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
• responsiveWidth udava minimalnu sirku, pri ktorej sa bude stlpec zobrazovat (defaultne podla Bootstrap grid systemu ['xs', 'sm', 'md', 'lg'])

BootstrapTable

• props z BootstrapTable
• bootstrapGridWidth objekt siriek, podla ktorych sa skryva/zobrazuje stlpec bootstrapGridWidth={{ 'xs': 0, 'sm': 100, 'md': 200, 'lg': 1000 }}

License

MIT