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 (
fetchInfo={{ dataTotalSize: this.props.datatableData.total }}
data={this.props.datatableData.items}
remote
options={options}
pagination
insertRow
cellEdit={cellEdit}
>
Nickname
Name
Email

);
}
}

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