JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.7.0/bootstrap-table.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.7.0/bootstrap-table.min.js"></script>
<script src="http://issues.wenzhixin.net.cn/bootstrap-table/assets/bootstrap-table/src/extensions/flatJSON/bootstrap-table-flatJSON.js"></script>
<div class="container">
    
    <!-- Table # 1 -->

    <h4 class="page-header">Pagination Example <small>with custom locales</small></h4>
    
    <table id="table-1"></table>
    
</div>

JavaScript

// sprintf is dependency function taken from bootstrap-table.js source code
var sprintf = function (str) {
    var args = arguments,
        flag = true,
        i = 1;

    str = str.replace(/%s/g, function () {
        var arg = args[i++];
        if (typeof arg === 'undefined') {
            flag = false;
            return '';
        }
        return arg;
    });
    return flag ? str : '';
};

// Sample data
var data1 = [];

for(var i = 0; i < 25; i++){
    data1.push({
        id: i,
        col1: i + 1,
        col2: (i + 1) * 5
    });
}

// The Table and settings
var $table1 = $('#table-1').bootstrapTable({
    columns: [
        { field: 'state', checkbox: true },
        { field: 'id', title: 'ID' },
        { field: 'col1', title: 'Column 1' },
        { field: 'col2', title: 'Column 2' }
    ],
    data: data1,
    
    pagination: true,
    
    formatShowingRows: function (pageFrom, pageTo, totalRows) {
        return sprintf('Showssing %s to %s of %s products', pageFrom, pageTo, totalRows);
    },
    
});