JSFiddle - React, Tailwind, and code Playground

by Steve Ayers

HTML

<script src="https://datatables.net/release-datatables/media/js/jquery.dataTables.min.js"></script>
<table id="table_id" border="1">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>etc</th>
        </tr>
        <tr>
            <th colspan="3">
                <button>Add Customer</button>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 4 Data 1</td>
            <td>Row 4 Data 2</td>
            <td>x</td>
        </tr>
        <tr>
            <td>Row 5 Data 1</td>
            <td>Row 5 Data 2</td>
            <td>a</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
            <td>y</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
            <td>c</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
            <td>z</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
            <td>d</td>
        </tr>
    </tbody>
</table>

CSS

@import url('http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/ui-lightness/jquery-ui.min.css');

JavaScript

$(function () {
    $('#table_id').dataTable({
                'bJQueryUI'       : true
            });
});