JSFiddle - React, Tailwind, and code Playground

by Dipak1991

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" width="100%">
    <thead>
        <tr>
            <th class="text-center w50"></th>
            <th class="text-center w50">
                <input type="checkbox" id="select-all-invoice">
            </th>
            <th>Order Number</th>
            <th>Customer Number</th>
            <th>Business Unit</th>
            <th>Transaction Date</th>
            <th>Order Row ID</th>
        </tr>
    </thead>
</table>

CSS

.text-center {
    text-align: center;
}

JavaScript

var dataSet = [
    [
        "<div class=\"text-center\"><i class=\"icon icon-plus\"></div>",
        "<div class=\"text-center\"><input data-order-id=\"Ord-10001\" type=\"checkbox\"></div>",
        "Order Number",
        "Customer Number",
        "ABC",
        "101",
        "12-05-2015",
        "250"],
    [
        "<div class=\"text-center\"><i class=\"icon icon-plus\"></div>",
        "<div class=\"text-center\"><input data-order-id=\"Ord-10001\" type=\"checkbox\"></div>",
        "Order Number",
        "Customer Number",
        "ABC",
        "101",
        "12-05-2015",
        "250"],
    [
        "<div class=\"text-center\"><i class=\"icon icon-plus\"></div>",
        "<div class=\"text-center\"><input data-order-id=\"Ord-10001\" type=\"checkbox\"></div>",
        "Order Number",
        "Customer Number",
        "ABC",
        "101",
        "12-05-2015",
        "250"],
    [
        "<div class=\"text-center\"><i class=\"icon icon-plus\"></div>",
        "<div class=\"text-center\"><input data-order-id=\"Ord-10001\" type=\"checkbox\"></div>",
        "Order Number",
        "Customer Number",
        "ABC",
        "101",
        "12-05-2015",
        "250"],
    [
        "<div class=\"text-center\"><i class=\"icon icon-plus\"></div>",
        "<div class=\"text-center\"><input data-order-id=\"Ord-10001\" type=\"checkbox\"></div>",
        "Order Number",
        "Customer Number",
        "ABC",
        "101",
        "12-05-2015",
        "250"],
    [
        "<div class=\"text-center\"><i class=\"icon icon-plus\"></div>",
        "<div class=\"text-center\"><input data-order-id=\"Ord-10001\" type=\"checkbox\"></div>",
        "Order Number",
        "Customer Number",
        "ABC",
        "101",
        "12-05-2015",
        "250"],
    [
        "<div class=\"text-center\"><i class=\"icon icon-plus\"></div>",
        "<div class=\"text-center\"><input data-order-id=\"Ord-10001\" type=\"checkbox\"></div>",
        "Order Number",
    ...