Update pager styling to bootstrap 4/font awesome 5. Version 3

Author: jslatts

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tabletable",
-  "version": "2.2.1",
+  "version": "3.0.0",
   "description": "A simple and extremely flexible table component written in React.",
   "main": "dist/Container.js",
   "scripts": {

src/Container.jsx

@@ -3,7 +3,7 @@
 'use strict';
 
 import React from 'react';
-import Immutable from 'immutable';
+import * as Immutable from 'immutable';
 import ClassNames from 'classnames';
 import Autobind from 'autobind-decorator';
 

src/Pager.jsx

@@ -38,21 +38,20 @@ export default class TabletablePager extends React.Component<Props> {
     }
 
     return (
-      <div className='btn-toolbar text-center' role='toolbar' style={{marginTop: '20px', marginBottom: '20px'}} >
-        <div className='btn-group pull-left' role='group'>
-          <button className='btn btn-white btn-sm' onClick={this.firstPageChange}><i className='fa fa-step-backward'></i> First</button>
+      <div className='row btn-toolbar my-3' role='toolbar'>
+        <div className='col-3' role='group'>
+          <button className='btn btn-white btn-sm' onClick={this.firstPageChange}><i className='far fa-step-backward'></i> First</button>
         </div>
-        <div className='btn-group pull-right' role='group'>
-          <button className='btn btn-white primary btn-sm' onClick={this.lastPageChange}><i className='fa fa-step-forward'></i> Last</button>
+        <div className='col-6 text-center' role='group'> 
+          <button className='btn btn-white primary btn-sm' onClick={this.previousPageChange}><i className='far fa-chevron-left'></i> Prev</button>
+          <div className='mx-3' style={{display: 'inline-block'}}> 
+            {options}
+          </div>
+          <button className='btn btn-white primary btn-sm' onClick={this.nextPageChange}><i className='far fa-chevron-right'></i> Next</button>
         </div>
-        <div className='btn-group' role='group' style={{float:'none'}}>
-          <button className='btn btn-white primary btn-sm' onClick={this.previousPageChange}><i className='fa fa-chevron-left'></i> Prev</button>
-        </div>
-        <div className='btn-group' role='group' style={{float:'none'}}>
-          {options}
-        </div>
-        <div className='btn-group' role='group' style={{float:'none'}}>
-          <button className='btn btn-white primary btn-sm' onClick={this.nextPageChange}><i className='fa fa-chevron-right'></i> Next</button>
+
+        <div className='col-3 text-right' role='group'>
+          <button className='btn btn-white primary btn-sm' onClick={this.lastPageChange}><i className='far fa-step-forward'></i> Last</button>
         </div>
       </div>
     )

test/index.js

@@ -26947,50 +26947,46 @@ var TabletablePager = (0, _autobindDecorator2.default)(_class = (_temp = _class2
 
       return _react2.default.createElement(
         'div',
-        { className: 'btn-toolbar text-center', role: 'toolbar', style: { marginTop: '20px', marginBottom: '20px' } },
+        { className: 'row btn-toolbar my-3', role: 'toolbar' },
         _react2.default.createElement(
           'div',
-          { className: 'btn-group pull-left', role: 'group' },
+          { className: 'col-3', role: 'group' },
           _react2.default.createElement(
             'button',
             { className: 'btn btn-white btn-sm', onClick: this.firstPageChange },
-            _react2.default.createElement('i', { className: 'fa fa-step-backward' }),
+            _react2.default.createElement('i', { className: 'far fa-step-backward' }),
             ' First'
           )
         ),
         _react2.default.createElement(
           'div',
-          { className: 'btn-group pull-right', role: 'group' },
-          _react2.default.createElement(
-            'button',
-            { className: 'btn btn-white primary btn-sm', onClick: this.lastPageChange },
-            _react2.default.createElement('i', { className: 'fa fa-step-forward' }),
-            ' Last'
-          )
-        ),
-        _react2.default.createElement(
-          'div',
-          { className: 'btn-group', role: 'group', style: { float: 'none' } },
+          { className: 'col-6 text-center', role: 'group' },
           _react2.default.createElement(
             'button',
             { className: 'btn btn-white primary btn-sm', onClick: this.previousPageChange },
-            _react2.default.createElement('i', { className: 'fa fa-chevron-left' }),
+            _react2.default.createElement('i', { className: 'far fa-chevron-left' }),
             ' Prev'
+          ),
+          _react2.default.createElement(
+            'div',
+            { className: 'mx-3', style: { display: 'inline-block' } },
+            options
+          ),
+          _react2.default.createElement(
+            'button',
+            { className: 'btn btn-white primary btn-sm', onClick: this.nextPageChange },
+            _react2.default.createElement('i', { className: 'far fa-chevron-right' }),
+            ' Next'
           )
         ),
         _react2.default.createElement(
           'div',
-          { className: 'btn-group', role: 'group', style: { float: 'none' } },
-          options
-        ),
-        _react2.default.createElement(
-          'div',
-          { className: 'btn-group', role: 'group', style: { float: 'none' } },
+          { className: 'col-3 text-right', role: 'group' },
           _react2.default.createElement(
             'button',
-            { className: 'btn btn-white primary btn-sm', onClick: this.nextPageChange },
-            _react2.default.createElement('i', { className: 'fa fa-chevron-right' }),
-            ' Next'
+            { className: 'btn btn-white primary btn-sm', onClick: this.lastPageChange },
+            _react2.default.createElement('i', { className: 'far fa-step-forward' }),
+            ' Last'
           )
         )
       );