JSFiddle - React, Tailwind, and code Playground

by Fabio D'Elia

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.3/css/fixedHeader.bootstrap4.min.css">
<body>

<div class="container-fluid">
    <table id="NcidTable" class="table table-bordered table-striped display table-sm table-hoverr">
        <thead>
        <tr>
            <th name="Id">Id</th>
            <th name="SomeNumber">Number</th>
            <th name="ProductName">ProductName</th>
            <th name="ProductFamilyName">ProductFamilyName</th>
            <th name="ABigNumber">ABigNumber</th>
            <th name="DefaultFirmware">DefaultFirmware</th>
            <th name="Status">StatusId</th>
            <th name="AnotherNumber">AnotherNumber</th>
            <th name="Description">Description</th>
            <th name="AnotherDescription">AnotherDescription</th>
            <th name="ProductCategory">ProductCategory</th>
            <th name="Transportation">Transportation</th>
            <th name="StatusDate">StatusDate</th>
            <th name="SomeString123">SomeString123</th>
            <th name="SomeText123">SomeText123</th>
            <th name="Abcd">Abcd</th>
        </tr>
        <tr id="filterRow">
            <th name="Id"></th>
            <th name="SomeNumber"></th>
            <th name="ProductName"></th>
            <th name="ProductFamilyName"></th>
            <th name="ABigNumber"></th>
            <th name="DefaultFirmware"></th>
            <th name="Status"></th>
            <th name="AnotherNumber"></th>
            <th name="Description"></th>
            <th name="AnotherDescription"></th>
            <th name="ProductCategory"></th>
            <th name="Transportation"></th>
            <th name="StatusDate"></th>
            <th name="SomeString123"></th>
            <th name="SomeText123"></th>
     ...

CSS

/*
        Prettify the table.
        Removing this css doesn't change the outcome on dataTables fixedHeader.
        */

        /* Tables , mostly fixes from migration to bootstrap 4 */


        table.dataTable {
            border-spacing: 0;
        }

        .table thead th {
            border: 1px solid #ddd;
            border-left: 0;
        }
        .table-bordered > thead > tr > td, .table-bordered > thead > tr > th {
            border-bottom-width: 2px;
        }

        .table-bordered {
            border-top: 0;
        }