Responsive Grid

by stitot

HTML

<script src="https://cdn.jsdelivr.net/npm/@highcharts/grid-lite/grid-lite.js"></script>

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

CSS

@import url("https://cdn.jsdelivr.net/npm/@highcharts/grid-lite/css/grid.css");

body {
  margin: 0;
}

p {
  padding: 20px;
}

/*
Uses container queries, so works both on element and window resize.
Important to notice that we don't care about this CSS. It's for the page
as a whole, not for the actual Grid. Breakpoints below could be different
then the one defined in JS. It's not our domain, just as dark mode for container.
*/

#wrapper {
  container-name: wrapper;
  container-type: inline-size;
}

#container {
  height: 400px;
  margin: 50px auto;
  max-width: 800px;
}

@container wrapper (width < 800px) {
  #container {
    margin: 50px;
    max-width: none;
  }
}

@container wrapper (width < 500px) {
  #container {
    height: auto;
    margin: 50px 0;
  }
}

/*
Our recommendation should be to use themes to style Grid at various breakpoints,
for containment and consistency. Could also be placed inside the container queries above
but then they start to mix page and Grid logic. Not best practice, IMO.

Also: Our recommendation should be to use API for showing/hiding columns and formatting instead of messing around with CSS for that.
*/
.theme-mobile {
  --hcg-border-radius: 0;
  --hcg-border-width: 0;
  --hcg-row-border-width: 1px;
}

JavaScript

const data = {
  firstName: ["Liam", "Emma", "Noah", "Olivia", "Elijah", "Ava", "James", "Sophia", "William", "Isabella", "Benjamin", "Mia", "Lucas", "Charlotte", "Henry", "Amelia", "Ethan", "Harper", "Michael", "Evelyn"],
  lastName: ["Smith", "Johnson", "Williams", "Brown", "Jones", "Garcia", "Miller", "Davis", "Rodriguez", "Martinez", "Hernandez", "Lopez", "Gonzalez", "Wilson", "Anderson", "Thomas", "Taylor", "Moore", "Jackson", "Martin"],
  email: [
    "[email protected]",
    "[email protected]",
    "[email protected]",
    "[email protected]",
    "[email protected]",
    "[email protected]",
    "[email protected]",
    "[email protected]",
    "[email protected]",
    "[email protected]",
    "[email protected]",
    "[email protected]",
    "[email protected]",
    "[email protected]",
    "[email protected]",
    "[email protected]",
    "[email protected]",
    "[email protected]",
    "[email protected]",
    "[email protected]",
  ],
  mobile: [
    "213-555-0123",
    "312-555-0456",
    "713-555-0789",
    "602-555-1011",
    "858-555-1213",
    "949-555-1415",
    "718-555-1617",
    "305-555-1819",
    "408-555-2021",
    "303-555-2223",
    "702-555-2425",
    "415-555-2627",
    "214-555-2829",
    "206-555-3031",
    "704-555-3233",
    "407-555-3435",
    "801-555-3637",
    "412-555-3839",
    "612-555-4041",
    "907-555-4243",
  ],
  street: [
    "123 Main St",
    "456 Oak Ave",
    "789 Pine Rd",
    "321 Maple Dr",
    "654 Cedar Ln",
    "987 Elm St",
    "159 Washington Blvd",
    "753 Sunset Blvd",
    "852 Hilltop Rd",
    "951 2nd St",
    "147 River Rd",
    "369 Birch Blvd",
    "258 Spruce Ct",
    "741 Aspen Way",
    "963 Sycamore St",
    "1470 Magnolia Dr",
    "153 Willow Ln",
    "177 Redwood...