FancyGrid Controllers

by FancyGrid Inc.

HTML

<script src="https://cdn.jsdelivr.net/npm/fancygrid/client/fancy.min.js"></script>

<div id="container" style=""></div>

CSS

.sign-minus {
  color: #adb2b5;
  font-size: 23px;
  margin-right: 7px !important;
  cursor: pointer;
  text-decoration: none;
}

.sign-minus:hover {
  text-decoration: none;
}

.sign-plus {
  color: #adb2b5;
  font-size: 23px;
  margin-left: 7px !important;
  cursor: pointer;
  text-decoration: none;
}

.sign-plus:hover {
  text-decoration: none;
}

.hour-value {
  position: relative;
  top: -3px;
}
/* Dropdown Button */
.dropbtn {
    background-color: #3498DB;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
    background-color: #2980B9;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

JavaScript

document.addEventListener("DOMContentLoaded", () => {


  var data = [{
      id: 1,
      name: 'Ted Smith',
      position: 'Java Developer',
      birthday: '06/22/1953',
      country: 'USA',
      hour: 52
    },
    {
      id: 2,
      name: 'Ed Johnson',
      position: 'C/C++ Developer',
      birthday: '09/12/1971',
      country: 'England',
      hour: 16
    },
    {
      id: 3,
      name: 'Sam Williams',
      position: 'Technical Analyst',
      birthday: '09/02/1973',
      country: 'USA',
      hour: 40
    },
    {
      id: 4,
      name: 'Alexander Brown',
      position: 'Project Manager',
      country: 'USA',
      birthday: '09/25/1991',
      hour: 33
    },
    {
      id: 5,
      name: 'Nicholas Miller',
      position: 'Senior Software Engineer',
      country: 'Canada',
      birthday: '08/24/1959',
      hour: 50
    },
    {
      id: 6,
      name: 'Andrew Thompson',
      position: 'Agile Project Manager',
      country: 'Germany',
      birthday: '08/18/1978',
      hour: 27
    },
    {
      id: 7,
      name: 'Ryan Walker',
      position: 'Application Support Engineer',
      country: 'England',
      birthday: '04/02/1981',
      hour: 40
    },
    {
      id: 8,
      name: 'John Scott',
      position: 'Flex Developer',
      country: 'USA',
      birthday: '02/14/1960',
      hour: 71
    },
    {
      id: 9,
      name: 'James Phillips',
      position: 'Senior C++/C# Developer',
      country: 'USA',
      birthday: '10/18/1991',
      hour: 58
    },
    {
      id: 10,
      name: 'Brian Edwards',
      position: 'UNIX/C++ Developer',
      country: 'USA',
      birthday: '04/16/1963',
      hour: 64
    },
    {
      id: 11,
      name: 'Jack Richardson',
      position: 'Ruby Developer',
      country: 'Germany',
      birthday: '11/20/1982',
      hour: 58
    },
    {
      id: 12,
      name: 'Alex Howard',
      position: 'CSS3/HTML5 Developer',
      country: 'USA',
      birthday: '07/22/1987',
     ...