react-booststrap-table example

npm install react-bootstrap-table --save
npm install bootstrap --save

import React from 'react';
import ReactDOM from 'react-dom';
import BootstrapTableTest from './bootstrap/BootstrapTableTest';
import './index.css';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<BootstrapTableTest />, document.getElementById('root'));

serviceWorker.unregister();

getSprintList rest service json example:

[{"sprintNo":"2","sprintBeginDate":"2019-04-15","sprintEndDate":"2019-04-15","active":"Y"},
{"sprintNo":"4","sprintBeginDate":"2019-04-15","sprintEndDate":"2019-04-15","active":"N"}]

 I used fetchings in the same class without separating to middleware layer, it is a simple example.

import React, { Component } from 'react'
import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';
import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
import '../../node_modules/react-bootstrap-table/dist/react-bootstrap-table.min.css';

class BootstrapTableTest extends Component {
    constructor(props) {
        super(props)
        this.state = {
            sprints: [],
            error: null
        }
    }   

    componentDidMount() {
        fetch(`http://localhost:8080/agile/getSprintList`, {
            method: "GET"
        })
        .then(response => {
            console.log('sprint componentDidMount', response)
            if(response.ok) {
                console.log('Successfully fetch sprintList')
                return response.json();
            } else {
                throw new Error('Cant fetch sprint list. Something went wrong.')
            }
        })
        .then(data => 
            this.setState({sprints: data})
        )
        .catch(err => this.setState({error: err}))
    }

    updateRow(row, cellName, cellValue) {
        const rowJson = JSON.stringify({
            sprintNo: row.sprintNo,
            sprintBeginDate: row.sprintBeginDate,
            sprintEndDate: row.sprintEndDate,
            active: row.active
        })
        console.log('sprint updateRow', rowJson)

        fetch(`http://localhost:8080/agile/updateSprint`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: rowJson
        })
       .then(response => {
            console.log('sprint updateRow', response)
            if (response.ok) {
               console.log('Successfully updated sprint')
            } else {
               throw new Error('Somthing happened wrong while updating sprint')
           }
       })
       .catch(err => this.setState({error: err}))
    }

    addRow(row) {
        const rowJson = JSON.stringify({
            sprintNo: row.sprintNo,
            sprintBeginDate: row.sprintBeginDate,
            sprintEndDate: row.sprintEndDate,
            active: row.active
        })
        console.log('sprint addRow', rowJson)

        fetch(`http://localhost:8080/agile/addSprint`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: rowJson
        })
        .then(response => {
            console.log('sprint addRow', response)
            if (response.ok) {
               console.log('Successfully added sprint')
            } else {
               throw new Error('Somthing happened wrong while adding sprint')
            }
        })
        .catch(err => this.setState({error: err}))
    }

    deleteRow(rowKeys) {
        fetch(`http://localhost:8080/agile/deleteSprint?sprintNo=${rowKeys}`, {
            method: 'POST',
            headers: {
               'Content-Type': 'application/json'
            },
        })
        .then(response => {
            console.log('sprint deleteRow', response)
            if (response.ok) {
                console.log('Successfully removed sprint', rowKeys)
            } else {
               throw new Error('Somthing happened wrong while deleting sprint')
            }
        })
        .catch(err => this.setState({error: err}))
    }

    numericValidator(value, row) {
        const nan = isNaN(parseInt(value, 10))
        if(nan) {
            return 'Enter numeric values.'
        }
        return true;
    }

    createCustomModalHeader(onClose, onSave) {
        const headerStyle = {
            fontWeight: 'bold',
            padding: '2px 2px',
            margin: '5px',
            fontSize: 'medium',
            textAlign: 'center',
            display: 'initial',
            backgroundColor: '#eeeeee'
        };
        return (
            <div className='modal-header' style={ headerStyle }>
                <h3>Add New Sprint</h3>
            </div>
        );
    }

    render() {
        if(this.state.error) {
            return <p>{this.state.error.message}</p>
        }

        const jobTypes = [ 'Y', 'N' ];

        const selectRow = {
            mode: 'checkbox',
            clickToSelect: true
        };

        const cellEditProp = {
            mode: 'click',
            blurToSave: true,
            afterSaveCell: this.updateRow
        };

        const options = {
            afterDeleteRow: this.deleteRow,
            afterInsertRow: this.addRow,
            deleteText: 'Delete',
            insertText: 'Insert',
            paginationSize: 1,
            prePage: 'Previous',
            nextPage: 'Next',
            firstPage: 'First Page',
            lastPage: 'Last Page',
            defaultSortName: 'sprintNo',
            defaultSortOrder: 'desc',
            insertModalHeader: this.createCustomModalHeader
        };

        return(
            <BootstrapTable data={this.state.sprints} 
                striped hover pagination search multiColumnSearch ignoreSinglePage 
                selectRow={ selectRow }
                cellEdit={ cellEditProp }
                options={ options }
                height='750' scrollTop={ 'Bottom' }
                deleteRow insertRow 
                exportCSV csvFileName='sprint.csv'
            >
                <TableHeaderColumn 
                    isKey dataField='sprintNo' dataAlign='right' dataSort={ true }
                    editable={ {validator: this.numericValidator} } >
                    Sprint Number
                </TableHeaderColumn>
                <TableHeaderColumn  
                    dataField='sprintBeginDate' 
                    editable={ { type: 'date' } }>
                    Sprint Begin Date
                </TableHeaderColumn>
                <TableHeaderColumn  
                    dataField='sprintEndDate' 
                    editable={ { type: 'date' } }>
                    Sprint End Date
                </TableHeaderColumn>
                <TableHeaderColumn  
                    dataField='active' 
                    editable={ { type: 'select', options: { values: jobTypes } } }>
                    Is Active
                </TableHeaderColumn>
            </BootstrapTable >
        )
    }

}
export default BootstrapTableTest