incremental-grid/index.html at master · rodu/incremental-grid · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Reactive Incremental Grid Demo</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/jumbotron-narrow.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>

      .panel-body {
        padding: 0;
      }
      .grid {
        width: 100%
      }
      .grid td {
        border: solid 1px #ddd;
        padding: 5px;
      }
      .grid-container {
        width: 100%;
        height: 200px;
        overflow: auto;
      }
    </style>

  </head>

  <body>

    <div class="container">
      <div class="header clearfix">
        <nav>
          <!-- <ul class="nav nav-pills pull-right">
            <li role="presentation" class="active"><a href="#">Home</a></li>
            <li role="presentation"><a href="#">About</a></li>
            <li role="presentation"><a href="#">Contact</a></li>
          </ul> -->
        </nav>
        <h1 class="text-muted">Reactive Incremental Grid</h1>
      </div>

      <h2>Pushing data to the DOM with RxJS</h2>
      <p class="lead">
        This data grid (a simple HTML table) is an example of using RxJS to push
        data incrementally as we scroll.
      </p>

      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Reactive Incremental Grid</h3>
        </div>
        <div class="panel-body">
          <div id="grid-container" class="grid-container">
            <table id="grid" class="grid"></table>
          </div>
        </div>
      </div>
      <h2>Description</h2>
      <p>
        In this example the data set is generated on the fly for a maximum of
        <i>N</i> records.
      </p>
      <p>While scrolling the table (grid) downward additional data are loaded in
        equal chunks each time we approach the bottom of the grid.
        With this approach we can consume large amounts of data as needed, loading
        them in chunks only if required while the user scrolls the grid.
      </p>
      <p>
        This was a nice exercise to learn the mechanism of pushing data to the DOM
        using RxJS versus pulling as we are normally used to do. I also
        needed this component for an other application in a different project, so
        I decided to develop something in isolation resulting in this little project.
      </p>
      <h2>Configuration</h2>
      <p>
        The data set can be configured to produce any number of rows, and for
        each row a set of cells with random data can be generated.
      </p>
      <p>
        The objective of this project was to understand the mechanism that can
        be used, and to provide an initial solution that can be built upon.
      </p>
      <p>
        In a more realistic scenario we would have such data coming from Ajax
        requests, or a different source. For an example of that kind of application
        you can look at <a href="https://rodu.github.io/quakemap">QuakeMap</a>, a real-time
        earthquake visualizer using RxJS and async data loading from a real API.
      </p>
    </div> <!-- /container -->

    <!-- <footer class="footer">
      <p>&copy; 2016 Company, Inc.</p>
    </footer> -->

    <script src="lib/rx.all.js"></script>
    <script src="lib/rx.dom.js"></script>
    <script src="app/incremental-grid.js"></script>

  </body>
</html>