Demos Back to Docs

Accessible Keyboard Navigation

46 of 124
All of our grids respond directly to keypresses made by a user. Start by pressing the tab key to enter into a grid. Pressing tab will navigate a user between the grid's core features, starting with the header and working from left to right and top to bottom.
Result Full HTML CSS JS
Edit Download

Full Code

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid: Docs Getting Started</title>
  <!--Script Reference[1]-->
  <script nonce="undefined" src="https://cdn.zinggrid.com/dev/zinggrid-dev.min.js"></script>
  <style>
    .zg-body {
      background-color: #fff;
    }

    zing-grid {
      --zg-icon-color: #003749;
    }

    zg-cell {
      color: black;
    }

    zg-head {
      --zg-icon-init-fill: #000000;
    }

    zg-body zg-row:nth-child(odd) {
      background-color: #e3ecf6;
    }

    zg-control-bar {
      --zg-icon-color: #003749;
    }

    zing-grid[loading] {
      height: 698px;
    }
  </style>
</head>

<body class="zg-body">
  <!--Grid Component Placement[2]-->
  <zing-grid caption="Our Favorite Characters" sort search pager editor-controls page-size="10" page-size-options="5,10" data='[
        {
          "name": "Philip J. Fry",
          "show": "Futurama",
          "origin": "Earth"
        },
        {
          "name": "Rick Sanchez",
          "show": "Rick and Morty",
          "origin": "C-137"
        },
        {
          "name": "Turanga Leela",
          "show": "Futurama",
          "origin": "Earth"
        },
        {
          "name": "Mr. Meeseeks",
          "show": "Rick and Morty",
          "origin": "C-137"
        },
        {
          "name": "Morty Smith",
          "show": "Rick and Morty",
          "origin": "C-137"
        },
        {
          "name": "Bender Bending Rodriguez",
          "show": "Futurama",
          "origin": "Earth"
        },
        {
          "name": "Amy Wong",
          "show": "Futurama",
          "origin": "Earth"
        },
        {
          "name": "Bird Person",
          "show": "Rick and Morty",
          "origin": "C-137"
        },
        {
          "name": "Doctor John Zoidberg",
          "show": "Futurama",
          "origin": "Decapod 10"
        },
        {
          "name": "Summer Smith",
          "show": "Rick and Morty",
          "origin": "C-137"
        },
        {
          "name": "Lord Nibbler",
          "show": "Futurama",
          "origin": "Earth"
        }
      ]'>
  </zing-grid>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // window:load event for Javascript to run after HTML
    // because this Javascript is injected into the document head
    window.addEventListener('load', () => {
      // content after DOM load
    });
  </script>
</body>

</html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ZingGrid: Docs Getting Started</title>
    <!--Script Reference[1]-->
    <script src="https://cdn.zinggrid.com/dev/zinggrid-dev.min.js"></script>
  </head>
  <body class="zg-body">
    <!--Grid Component Placement[2]-->
    <zing-grid 
      caption="Our Favorite Characters"
      sort
      search
      pager
      editor-controls
      page-size="10"
      page-size-options="5,10"
      data='[
        {
          "name": "Philip J. Fry",
          "show": "Futurama",
          "origin": "Earth"
        },
        {
          "name": "Rick Sanchez",
          "show": "Rick and Morty",
          "origin": "C-137"
        },
        {
          "name": "Turanga Leela",
          "show": "Futurama",
          "origin": "Earth"
        },
        {
          "name": "Mr. Meeseeks",
          "show": "Rick and Morty",
          "origin": "C-137"
        },
        {
          "name": "Morty Smith",
          "show": "Rick and Morty",
          "origin": "C-137"
        },
        {
          "name": "Bender Bending Rodriguez",
          "show": "Futurama",
          "origin": "Earth"
        },
        {
          "name": "Amy Wong",
          "show": "Futurama",
          "origin": "Earth"
        },
        {
          "name": "Bird Person",
          "show": "Rick and Morty",
          "origin": "C-137"
        },
        {
          "name": "Doctor John Zoidberg",
          "show": "Futurama",
          "origin": "Decapod 10"
        },
        {
          "name": "Summer Smith",
          "show": "Rick and Morty",
          "origin": "C-137"
        },
        {
          "name": "Lord Nibbler",
          "show": "Futurama",
          "origin": "Earth"
        }
      ]'>
    </zing-grid>
  </body>
</html>
.zg-body {
  background-color: #fff;
}

zing-grid {
    --zg-icon-color: #003749;
}

zg-cell {
  color: black;
}

zg-head {
  --zg-icon-init-fill: #000000;
}

zg-body zg-row:nth-child(odd) {
  background-color: #e3ecf6;
}

zg-control-bar {
  --zg-icon-color: #003749;
}
// window:load event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
  // content after DOM load
});

Related Docs

Interested in this demo? Modify it to your needs in ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!

Edit in Studio

Related Docs

Demo Gallery