Web Components Library

Table Responsive with Dropdown Switcher

No notes defined.

  • Handle: @table-responsive
  • Preview:
  • Filesystem Path: components/02-components/table-responsive/table-responsive.hbs 
<table class="mx-auto mb-24 bg-white shadow-md table-auto room-comparison switcher mt-18">
    <thead class="bg-gray-300">
        <tr>
            <th>
                Room Type
            </th>
            <th class="compare">
                Beds
            </th>
            <th class="compare">
                Room size
            </th>
            <th class="compare">
                <span title="Maximum occupancy including children">
                    Guests
                </span>
            </th>
            <th class="compare">
                Fireplace
            </th>
            <th class="hidden sm:table-cell"></th>
            <th class="table-cell select sm:hidden">
                <label>
                    Compare
                    <div class="relative">
                        <select id="select_compare" class="form-field-styling">
                            <option value="room-beds" selected="selected">
                                Beds
                            </option>
                            <option value="room-size">
                                Room Size
                            </option>
                            <option value="room-occupancy">
                                Occupancy
                            </option>
                            <option value="room-fireplace">
                                Fireplace
                            </option>
                        </select>
                        <div class="absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 pointer-events-none">
                            <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path>
                            </svg>
                        </div>
                    </div>
                </label>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="room-type links">
                <a class="leading-relaxed text-teal-500 hover:text-teal-700" href="">
                    Standard Room: 2 Queen Beds
                </a>
            </td>
            <td class="compare room-beds active">
                2 Queen
                <br />
            </td>
            <td class="compare room-size">
                <span class="imperial">
                    300 sq ft
                </span>
                <span class="hidden metric">
                    28 m
                    <sup>
                        2
                    </sup>
                </span>
            </td>
            <td class="compare room-occupancy">
                4
            </td>
            <td class="compare room-fireplace">
                -
            </td>
            <td class="hidden room-button sm:table-cell">
                <a href="">
                    View
                </a>
            </td>
        </tr>
        <tr>
            <td class="room-type links">
                <a class="leading-relaxed text-teal-500 hover:text-teal-700" href="">
                    Deluxe Room: Two Queen Beds
                </a>
            </td>
            <td class="compare room-beds active">
                2 Queen
                <br />
            </td>
            <td class="compare room-size">
                <span class="imperial">
                    368 sq ft
                </span>
                <span class="hidden metric">
                    34.2 m
                    <sup>
                        2
                    </sup>
                </span>
            </td>
            <td class="compare room-occupancy">
                4
            </td>
            <td class="compare room-fireplace">
                -
            </td>
            <td class="hidden room-button sm:table-cell">
                <a href="">
                    View
                </a>
            </td>
        </tr>
        <tr>
            <td class="room-type links">
                <a class="leading-relaxed text-teal-500 hover:text-teal-700" href="">
                    Standard Room: One Queen Bed
                </a>
            </td>
            <td class="compare room-beds active">
                1 Queen
                <br />
            </td>
            <td class="compare room-size">
                <span class="imperial">
                    188 sq ft
                </span>
                <span class="hidden metric">
                    17.5 m
                    <sup>
                        2
                    </sup>
                </span>
            </td>
            <td class="compare room-occupancy">
                2
            </td>
            <td class="compare room-fireplace">
                -
            </td>
            <td class="hidden room-button sm:table-cell">
                <a href="">
                    View
                </a>
            </td>
        </tr>
    </tbody>
</table>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  • Content: 
    $(document).ready(function() {

    // Room comparison table
    $('#select_compare').change(function() {
        $('.compare').removeClass("active");
        $('.' + $(this).val()).addClass("active");
    });

});

// var table = document.querySelector()
// var dropdownElement = document.querySelector("#select_compare");
// // var activeElements = document.querySelectorAll('.')
//
// dropdownElement.addEventListener("change", function (event) {
//     onElementChange() // Pass data from the event `evt` here, as needed
// });
//
// function onElementChange() {
//     // Your handler method here
//     console.log(event)
// }


// Room size toggle
// when clicking on '.room-size span', toggle class of 'hidden'
const roomSize = document.querySelectorAll('.room-size');

function toggleRoomSize(event) {
    const spans = this.querySelectorAll('span');
    spans.forEach(span => span.classList.toggle('hidden'));
}

roomSize.forEach(roomSize => roomSize.addEventListener('click', toggleRoomSize))
  • URL: /components/raw/table-responsive/table-responsive.js
  • Filesystem Path: components/02-components/table-responsive/table-responsive.js
  • Size: 1 KB
  • Content: 
    table {
    .compare {
        @apply text-center;
    }
}

.room-size span {
    @apply cursor-pointer border-b border-gray-500 border-dotted hover:border-solid;
}

.room-button a {
    @apply px-4 py-3 bg-teal-500 hover:bg-teal-700 text-white text-sm uppercase;
}

.form-field-styling {
  @apply block appearance-none w-full border border-gray-400 rounded-none bg-white text-gray-700 py-3 px-4 pr-8 leading-tight;
}

.switcher {
    .compare {
        display: none;
        &.active {
            display: table-cell;
        }
    }

    @screen sm {
        .compare {
        display: table-cell;
        }
        .select {
        display: none;
        }
    }

}
  • URL: /components/raw/table-responsive/table-responsive.pcss
  • Filesystem Path: components/02-components/table-responsive/table-responsive.pcss
  • Size: 672 Bytes 
<table
  class="mx-auto mb-24 bg-white shadow-md table-auto room-comparison switcher mt-18"
>
  <thead class="bg-gray-300">
    <tr>
      <th>
        Room Type
      </th>
      <th class="compare">
        Beds
      </th>
      <th class="compare">
        Room size
      </th>
      <th class="compare">
        <span title="Maximum occupancy including children">
          Guests
        </span>
      </th>
      <th class="compare">
        Fireplace
      </th>
      <th class="hidden sm:table-cell"></th>
      <th class="table-cell select sm:hidden">
        <label>
          Compare
          <div class="relative">
            <select id="select_compare" class="form-field-styling">
              <option value="room-beds" selected="selected">
                Beds
              </option>
              <option value="room-size">
                Room Size
              </option>
              <option value="room-occupancy">
                Occupancy
              </option>
              <option value="room-fireplace">
                Fireplace
              </option>
            </select>
            <div
              class="absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 pointer-events-none"
            >
              <svg
                class="w-4 h-4 fill-current"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20"
              >
                <path
                  d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
                ></path>
              </svg>
            </div>
          </div>
        </label>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="room-type links">
        <a
          class="leading-relaxed text-teal-500 hover:text-teal-700"
          href=""
        >
          Standard Room: 2 Queen Beds
        </a>
      </td>
      <td class="compare room-beds active">
        2 Queen
        <br />
      </td>
      <td class="compare room-size">
        <span class="imperial">
          300 sq ft
        </span>
        <span class="hidden metric">
          28 m
          <sup>
            2
          </sup>
        </span>
      </td>
      <td class="compare room-occupancy">
        4
      </td>
      <td class="compare room-fireplace">
        -
      </td>
      <td class="hidden room-button sm:table-cell">
        <a
          href=""
        >
          View
        </a>
      </td>
    </tr>
    <tr>
      <td class="room-type links">
        <a
          class="leading-relaxed text-teal-500 hover:text-teal-700"
          href=""
        >
          Deluxe Room: Two Queen Beds
        </a>
      </td>
      <td class="compare room-beds active">
        2 Queen
        <br />
      </td>
      <td class="compare room-size">
        <span class="imperial">
          368 sq ft
        </span>
        <span class="hidden metric">
          34.2 m
          <sup>
            2
          </sup>
        </span>
      </td>
      <td class="compare room-occupancy">
        4
      </td>
      <td class="compare room-fireplace">
        -
      </td>
      <td class="hidden room-button sm:table-cell">
        <a
          href=""
        >
          View
        </a>
      </td>
    </tr>
    <tr>
      <td class="room-type links">
        <a
          class="leading-relaxed text-teal-500 hover:text-teal-700"
          href=""
        >
          Standard Room: One Queen Bed
        </a>
      </td>
      <td class="compare room-beds active">
        1 Queen
        <br />
      </td>
      <td class="compare room-size">
        <span class="imperial">
          188 sq ft
        </span>
        <span class="hidden metric">
          17.5 m
          <sup>
            2
          </sup>
        </span>
      </td>
      <td class="compare room-occupancy">
        2
      </td>
      <td class="compare room-fireplace">
        -
      </td>
      <td class="hidden room-button sm:table-cell">
        <a
          href=""
        >
          View
        </a>
      </td>
    </tr>
  </tbody>
</table>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 
/* No context defined. */