JSFiddle - React, Tailwind, and code Playground

by Daniel Brose

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/bootstrap-table.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/bootstrap-table.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/locale/bootstrap-table-nl-NL.min.js"></script>
<table data-toggle="table" data-show-footer="true">
    <thead>
        <tr>
            <th data-field="foo" data-footer-formatter="countFormatter">Dummy</th>
            <th data-field="foo2">Dummy</th>
            <th data-field="foo3">Dummy</th>
       </tr>
    </thead>
    <tbody>
        <tr>
            <td>Dummy data</td>
            <td>Dummy data</td>
            <td>Dummy data</td>
        </tr>
        <tr>
            <td>Dummy data</td>
            <td>Dummy data</td>
            <td>Dummy data</td>
        </tr>
        <tr>
            <td>Dummy data</td>
            <td>Dummy data</td>
            <td>Dummy data</td>
        </tr>
        <tr>
            <td>Dummy data</td>
            <td>Dummy data</td>
            <td>Dummy data</td>
        </tr>
    </tbody>
</table>

JavaScript

// Bootstrap Table, footer-fomatter example, orig for https://github.com/wenzhixin/bootstrap-table/issues/1689

function countFormatter(data) {
    return data.length;
}