JSFiddle - React, Tailwind, and code Playground

by Haze32

HTML

<br><br><br>

<section id="additionalOfferingsSection" class="additional_offerings card flex-col display_hidde">
  <h2 class="heading">Additional Offerings </h2>
<div class="tabs-container">

      <div class="filter-wrap filter-closed">
        <div class="filter-icon">
          Date Range
        </div>
        <div class="date-range-filter">
          <label for="startDate">From:</label>
          <input type="date" id="startDate">
          <label for="endDate">To:</label>
          <input type="date" id="endDate">
          <button id="filterBtn">Filter</button>
          <button id="resetBtn">Reset</button>
          <span id="rowCount"></span>
        </div>
      </div>
    </div>
  <div class="additional_offerings_details_content flex-row flex-wrap">


    



    <div class="ao-table-container" data-aoModal-id="aoModal">
      <table class="ao-data-table">
        <thead>
          <tr>
            <th class="sortable" data-sort-type="string">Issuer Name</th>
            <th class="sortable" data-sort-type="date">
              Announced Date
            </th>
            <th>D&amp;C Matter Description</th>
            <th>D&amp;C Company Description</th>
            <th>Marketing Description</th>
            <th class="sortable" data-sort-type="string">Matter Code</th>
            <th class="sortable" data-sort-type="string">Security Type</th>
            <th class="sortable" data-sort-type="string">Offering Type</th>
            <th class="sortable" data-sort-type="string">Managers</th>
            <th>D&amp;C Team Description</th>
            <th class="sortable" data-sort-type="number">Copy #</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Mauris turpis nunc blandit et</td>
            <td>4/9/2020</td>
            <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas vestibulum mollis diam. Suspendisse feugiat. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Curabitur...

CSS

.flex-wrap {
    flex-wrap: wrap;
}
.flex-row {
    display: flex;
    flex-direction: row;
}
 
 
 
 
 
 /*************************
Additional Offerings css
*************************/
.ao-table-container::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

.ao-table-container::-webkit-scrollbar-thumb {
  background: #140be3;
  border: 0px none #ffffff;
  border-radius: 0 6px 6px 0;
}
.ao-table-container::-webkit-scrollbar-thumb:horizontal{
  border-radius: 0 0 6px 6px;
}

.ao-table-container::-webkit-scrollbar-track:vertical {
    border-radius: 0px 6px 6px 0px;
}

.ao-table-container::-webkit-scrollbar-thumb:hover {
  background: #140be3;
}

.ao-table-container::-webkit-scrollbar-track {
  background: #eee;
  border: 0px solid #ffffff;
  border-radius: 0 6px 6px 0;
}

.ao-table-container::-webkit-scrollbar-track:horizontal {
    border-radius: 0px 0px 6px 6px;
}

.ao-noBorder{
  border:none !important;
  box-shadow:none !important;
}



.tabs-container {
    position: relative;
    margin-right: 15px;
}
.filter-icon {
    cursor: pointer;
    padding: 7px 10px;
    border: 1px solid #eee;
    border-radius: 6px 6px 0 0;
    border-bottom: none;
    background: #fff;
    display: inline-block;
    margin-bottom: 1px;
    z-index: 1;
    position: absolute;
    right: 0;
    top: -34px;
}
.filter-icon:after {
    content: "";
    width: 100%;
    height: 10px;
    background: #fff;
    border-right: 1px solid #eee;
    position: absolute;
    right: -1px;
    top: 31px;
}


.filter-wrap {   
   position: absolute;
    right: 0;
    bottom: -60px;
    z-index: 1; /* Ensure it appears above other content */
}


.date-range-filter {
    border: 1px solid #eee;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    padding: 10px 10px 15px 10px;
    width: 620px;
    }






.ao-table-container {
  overflow-x: auto;
  margin-bottom: 13px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  box-shadow: rgb(0 0 0 / 12%) 0px 1px 2px, rgb(0 0 0 / 24%) 0px 1px...

JavaScript

$(document).ready(function() {
  ////////////
  //// Open the modal
  function openAoModal(key, fullText) {
    var aoModal = document.querySelector('.aoModal');
    var aoModalContent = aoModal.querySelector('.aoModal-content');
    var aoModalKeyElement = document.getElementById('aoModalKey');
    var fullTextElement = document.getElementById('ao-fullText');

    aoModalKeyElement.innerText = key;
    fullTextElement.innerText = fullText;

    aoModal.classList.add('ao-show');
    aoModalContent.classList.add('ao-show');
  }

  ////////////
  //// Close the modal
  function closeAoModal() {
    var aoModal = document.querySelector('.aoModal');
    var aoModalContent = aoModal.querySelector('.aoModal-content');
    var aoModalKeyElement = document.getElementById('aoModalKey');
    var fullTextElement = document.getElementById('ao-fullText');

    aoModalKeyElement.innerText = '';
    fullTextElement.innerText = '';

    aoModal.classList.remove('ao-show');
    aoModalContent.classList.remove('ao-show');
  }

  ////////////
  //// Add a 'View More' link to cells with long text 
  function addReadMore(table, key, cell) {
    if (cell.innerText.length > 100) {
      // store the full text in a data attribute
      cell.setAttribute('data-full-text', cell.innerText);

      var shortText = cell.innerText.substring(0, 97) + '... ';
      var readMore = document.createElement('a');
      readMore.href = '#';
      readMore.innerText = 'View More';
      readMore.onclick = function() {
        openAoModal(key, cell.getAttribute('data-full-text'));
        return false;
      };

      cell.innerHTML = shortText;
      cell.appendChild(readMore);
    }
  }

  ////////////
  //// handle 'View More' links and modal interactions
  function initializeTableContainer(container) {
    var table = container.querySelector('.ao-data-table');
    var headers = table.querySelectorAll('th');
    table.querySelectorAll('tbody tr').forEach(function(row) {
     ...