DataTables

DataTables Examples

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>

<div class="page-wrapper">
    <!-- Sidebar -->
    <nav id="sidebarNav" class="page-sidebar">

        <div class="sidebar-content">
            <button type="button" id="btnSidebarNavClose" class="navbar-btn sidebar-nav-button">
                <i class="fas fa-arrow-left"></i>
            </button>
            
            
            <div class="sidebar-content-pane">
            <ol>
            <li>Menu 1</li>
            <li>Menu 2</li>
            <li>Menu 3</li>
            </ol>
            </div>

      </div>
    </nav>
    
    <div id="sidebarNavOpen" class="sidebar-open-container closed">
        <button type="button" id="btnSidebarNavOpen" class="navbar-btn sidebar-nav-button">
            <i class="fas fa-arrow-right"></i>
        </button>
    </div>
    
    <div class="page-main">
    
        <div class="page-content container-fluid">
    <div>
    <div class="section-container">
    
      <table id="example" width="100%">
        <thead>
            <tr>
                <th>Seq.</th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
 
        <tbody>
            <tr>
                <td>2</td>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
  ...

CSS

/********* Sidebar *********/
.page-sidebar {
    position: relative;
    min-width: 250px;
    max-width: 250px;
    min-height: 100%;
    transition: 0.4s;
    transform-origin: bottom left;
}

    .page-sidebar.closed {
        margin-left: -250px;
    }


.sidebar-content {
    position: absolute;
    top: 0;
    z-index: 50;
    min-height: 100%;
    width: 100%;
    background: #fff;
}

.sidebar-content-pane {
    margin-top: 90px;
}

.sidebar-nav-button {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 32px;
    cursor: pointer;
    transition: all 0.4s;
    background: #f5f5f5;
    color: #666;
}

.sidebar-open-container {
    position: relative;
    width: 32px;
    transition: all 0.4s;
}

    .sidebar-open-container.closed {
        display: none;
    }
    .sidebar-open-container .sidebar-nav-button
    {
        width: 100%;
    }


/********* End Sidebar *********/
  /********* Page Content *********/
.page-content {
    height:100%;
}

.section-container {
    background-color: #fff;
    padding: 15px;
    margin-bottom: 32px;
}

.page-wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
    perspective: 1500px;
}

.page-main {
    width: 100%;
    min-height: 100vh;
    transition: all 0.15s;
    overflow: hidden;
}

  /********* End Page Content *********/

JavaScript

//#region sidebar
    $("#btnSidebarNavOpen").on('click', function () {
        $("#sidebarNav").removeClass("closed");
        $("#sidebarNavOpen").addClass("closed");
        $("#sidebarNavOpen").css('margin-left', '0px');
    });

    $("#btnSidebarNavClose").on('click', function () {
        $("#sidebarNav").addClass("closed");
        $("#sidebarNavOpen").removeClass("closed");
    });
  //#endregion

    //#region resize observer
      // ResizeObserver to ensure header column widths are adjusted when the containing div resizes.
    // Not supported on IE
    var observer = window.ResizeObserver ? new ResizeObserver(function (entries) {
        entries.forEach(function (entry) {
            $(entry.target).DataTable().columns.adjust();
        });
    }) : null;

    // Function to add a datatable to the ResizeObserver entries array
    resizeHandler = function ($table) {
        if (observer)
            observer.observe($table[0]);
    };
    
//#endregion

$('#example').DataTable({
		"scrollX": true
})  

// Datatable headers do not resize correctly when closing the SidebarNav
// Initiate additional resize handling
resizeHandler($('#example'));