diff --git a/packages/react-bootstrap-table2-example/examples/bootstrap4/pagination.js b/packages/react-bootstrap-table2-example/examples/bootstrap4/pagination.js
new file mode 100644
index 0000000..2f80814
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/bootstrap4/pagination.js
@@ -0,0 +1,45 @@
+/* eslint react/prefer-stateless-function: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory from 'react-bootstrap-table2-paginator';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(87);
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory from 'react-bootstrap-table2-paginator';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+
+`;
+
+export default () => (
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/bootstrap4/row-selection.js b/packages/react-bootstrap-table2-example/examples/bootstrap4/row-selection.js
new file mode 100644
index 0000000..d2465dd
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/bootstrap4/row-selection.js
@@ -0,0 +1,58 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const selectRow = {
+ mode: 'radio',
+ clickToSelect: true
+};
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const selectRow = {
+ mode: 'radio',
+ clickToSelect: true
+};
+
+
+`;
+
+export default () => (
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/bootstrap4/sort.js b/packages/react-bootstrap-table2-example/examples/bootstrap4/sort.js
new file mode 100644
index 0000000..443e667
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/bootstrap4/sort.js
@@ -0,0 +1,70 @@
+/* eslint react/prefer-stateless-function: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID',
+ sort: true
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ sort: true
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ sort: true
+}];
+
+const defaultSorted = [{
+ dataField: 'name',
+ order: 'desc'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID',
+ sort: true
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ sort: true
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ sort: true
+}];
+
+const defaultSorted = [{
+ dataField: 'name',
+ order: 'desc'
+}];
+
+
+`;
+
+
+export default class extends React.PureComponent {
+ render() {
+ return (
+
+
+ { sourceCode }
+
+ );
+ }
+}
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index 5b7b68b..eff1ee0 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -4,6 +4,7 @@ import { storiesOf } from '@storybook/react';
// welcome
import Welcome from 'examples/welcome';
+
// basic
import BasicTable from 'examples/basic';
import BorderlessTable from 'examples/basic/borderless-table';
@@ -13,6 +14,11 @@ import CustomizedIdClassesTable from 'examples/basic/customized-id-classes';
import CaptionTable from 'examples/basic/caption-table';
import LargeTable from 'examples/basic/large-table';
+// bootstrap 4
+import Bootstrap4DefaultSortTable from 'examples/bootstrap4/sort';
+import Bootstrap4RowSelectionTable from 'examples/bootstrap4/row-selection';
+import Bootstrap4PaginationTable from 'examples/bootstrap4/pagination';
+
// work on columns
import NestedDataTable from 'examples/columns/nested-data-table';
import ColumnFormatTable from 'examples/columns/column-format-table';
@@ -180,8 +186,9 @@ storiesOf('Basic Table', module)
storiesOf('Bootstrap 4', module)
.addDecorator(bootstrapStyle(BOOTSTRAP_VERSION.FOUR))
- .add('Basic Table', () => )
- .add('Basic Pagination Table', () => );
+ .add('Sort table with bootstrap 4', () => )
+ .add('Row selection table with bootstrap 4', () => )
+ .add('Pagination table with bootstrap 4', () => );
storiesOf('Work on Columns', module)
.addDecorator(bootstrapStyle())