Cell Selection

39 of 123
Cell selection will allow you to select individual cells by clicking or to select multiple cells by clicking and dragging. To deselect the cells, press the "esc" key.
Result Full HTML CSS JS
Edit Download

Full Code

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid Demo</title>
  <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
  <style>
    zing-grid[loading] {
      height: 261px;
    }
  </style>
</head>

<body class="zg-body">
  <zing-grid selector>
    <zg-colgroup>
      <zg-column index="name" header="Name"></zg-column>
      <zg-column index="num" header="Phone #"></zg-column>
    </zg-colgroup>
    <zg-data data='[{"name": "Michael Smith", "num": "626-538-7713"}, {"name": "James Johnson", "num": "408-612-9244"}, {"name": "Maria Hernandez", "num": "626-184-8190"}, {"name": "David Jenkins", "num": "419-278-1001"}]'></zg-data>
  </zing-grid>
  <script></script>
</body>

</html>
<!DOCTYPE html>
<html>
	<head>
    <meta charset="utf-8">
    <title>ZingGrid Demo</title>
		<script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
	</head>
	<body class="zg-body">
		<zing-grid selector>
		  <zg-colgroup>
		    <zg-column index="name" header="Name"></zg-column>
		    <zg-column index="num" header="Phone #"></zg-column>
		  </zg-colgroup>
		  <zg-data data='[{"name": "Michael Smith", "num": "626-538-7713"}, {"name": "James Johnson", "num": "408-612-9244"}, {"name": "Maria Hernandez", "num": "626-184-8190"}, {"name": "David Jenkins", "num": "419-278-1001"}]'></zg-data>
		</zing-grid>
	</body>
</html>

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

Demo Gallery