UI Library Samples
10 |11 | Miscellaneous implementations of the same or similar functionality with 12 | different JavaScript UI libraries 13 |
14 |Rendering Large Datasets With…
15 |
16 | From this blog post by Ben Nadel,
17 | rendering and highlighting cells in a large <table>, with
18 | the original Angular example, an updated React example and additional
19 | implementations in Mithril and Riot.
20 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/large-datasets/angular.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 11 | Rendering Large Datasets With AngularJS 12 |
13 | 14 | 33 | 34 || 37 | {{ row.id }} 38 | | 39 |43 | {{ item.value }} 44 | | 45 |
|---|
168 |
169 |
170 |
171 |
--------------------------------------------------------------------------------
/large-datasets/demo.css:
--------------------------------------------------------------------------------
1 | form {
2 | margin-bottom: 15px ;
3 | }
4 |
5 | td.hidden {
6 | color: #ccc;
7 | }
8 |
9 | table.filtered td.item {
10 | background-color: #FFFFBF;
11 | }
12 |
13 | table.filtered td.item.hidden {
14 | background-color: transparent;
15 | }
16 |
--------------------------------------------------------------------------------
/large-datasets/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
40 |
50 |
51 |
--------------------------------------------------------------------------------
/large-datasets/mithril.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 41 | UI Library Samples → 42 | Rendering Large Datasets With … 43 | Angular | 44 | React | 45 | Riot | 46 | Mithril 47 |
48 | 49 |Rendering Large Datasets With Mithril
11 | 12 | 13 | 14 | 15 | 98 | 99 |
100 |
101 |
102 |
103 |
--------------------------------------------------------------------------------
/large-datasets/react.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Rendering Large Datasets With React
11 | 12 | 13 | 14 | 15 | 113 | 114 |
115 |
116 |
117 |
118 |
--------------------------------------------------------------------------------
/large-datasets/riot.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Rendering Large Datasets With Riot
11 | 12 |
100 |
101 |
102 |
103 |
--------------------------------------------------------------------------------
/large-datasets/shared.js:
--------------------------------------------------------------------------------
1 | // I generate a grid of items with the given dimensions. The grid is
2 | // represented as a two dimensional grid, of sorts. Each row has an object
3 | // that has an items collection.
4 | function generateGrid( rowCount, columnCount ) {
5 | var valuePoints = [
6 | "Daenerys", "Jon", "Sansa", "Arya", "Stannis", "Gregor", "Tyrion",
7 | "Theon", "Joffrey", "Ramsay", "Cersei", "Bran", "Margaery",
8 | "Melisandre", "Daario", "Jamie", "Eddard", "Myrcella", "Robb",
9 | "Jorah", "Petyr", "Tommen", "Sandor", "Oberyn", "Drogo", "Ygritte"
10 | ];
11 | var valueIndex = 0;
12 | var grid = [];
13 |
14 | for ( var r = 0 ; r < rowCount ; r++ ) {
15 | var row = {
16 | id: r,
17 | items: []
18 | };
19 | for ( var c = 0 ; c < columnCount ; c++ ) {
20 | row.items.push({
21 | id: ( r + "-" + c ),
22 | value: valuePoints[ valueIndex ],
23 | isHiddenByFilter: false
24 | });
25 | if ( ++valueIndex >= valuePoints.length ) {
26 | valueIndex = 0;
27 | }
28 | }
29 | grid.push( row );
30 | }
31 |
32 | return( grid );
33 | }
34 |
35 | function getVisibileCount(filter, grid) {
36 | var count = 0;
37 | for ( var r = 0, rowCount = grid.length ; r < rowCount ; r++ ) {
38 | var row = grid[ r ];
39 | for ( var c = 0, columnCount = row.items.length ; c < columnCount ; c++ ) {
40 | var item = row.items[ c ];
41 | var isHidden = ( filter && ( item.value.indexOf( filter ) === -1 ) );
42 | if ( ! isHidden ) {
43 | count++;
44 | }
45 | }
46 | }
47 | return count;
48 | }
49 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: octicons-anchor;
3 | src: url(data:font/woff;charset=utf-8;base64,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) format('woff');
4 | }
5 |
6 | body {
7 | -webkit-text-size-adjust: 100%;
8 | -ms-text-size-adjust: 100%;
9 | text-size-adjust: 100%;
10 | color: #333;
11 | font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
12 | font-size: 16px;
13 | line-height: 1.6;
14 | word-wrap: break-word;
15 | padding: 1em;
16 | }
17 |
18 | a {
19 | background-color: transparent;
20 | }
21 |
22 | a:active,
23 | a:hover {
24 | outline: 0;
25 | }
26 |
27 | strong {
28 | font-weight: bold;
29 | }
30 |
31 | h1 {
32 | font-size: 2em;
33 | margin: 0.67em 0;
34 | }
35 |
36 | img {
37 | border: 0;
38 | }
39 |
40 | hr {
41 | box-sizing: content-box;
42 | height: 0;
43 | }
44 |
45 | pre {
46 | overflow: auto;
47 | }
48 |
49 | code,
50 | kbd,
51 | pre {
52 | font-family: monospace, monospace;
53 | font-size: 1em;
54 | }
55 |
56 | input {
57 | color: inherit;
58 | font: inherit;
59 | margin: 0;
60 | }
61 |
62 | html input[disabled] {
63 | cursor: default;
64 | }
65 |
66 | input {
67 | line-height: normal;
68 | }
69 |
70 | input[type="checkbox"] {
71 | box-sizing: border-box;
72 | padding: 0;
73 | }
74 |
75 | table {
76 | border-collapse: collapse;
77 | border-spacing: 0;
78 | }
79 |
80 | td,
81 | th {
82 | padding: 0;
83 | }
84 |
85 | * {
86 | box-sizing: border-box;
87 | }
88 |
89 | input {
90 | font: 13px/1.4 Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
91 | }
92 |
93 | a {
94 | color: #4078c0;
95 | text-decoration: none;
96 | }
97 |
98 | a:hover,
99 | a:active {
100 | text-decoration: underline;
101 | }
102 |
103 | hr {
104 | height: 0;
105 | margin: 15px 0;
106 | overflow: hidden;
107 | background: transparent;
108 | border: 0;
109 | border-bottom: 1px solid #ddd;
110 | }
111 |
112 | hr:before {
113 | display: table;
114 | content: "";
115 | }
116 |
117 | hr:after {
118 | display: table;
119 | clear: both;
120 | content: "";
121 | }
122 |
123 | h1,
124 | h2,
125 | h3,
126 | h4,
127 | h5,
128 | h6 {
129 | margin-top: 15px;
130 | margin-bottom: 15px;
131 | line-height: 1.1;
132 | }
133 |
134 | h1 {
135 | font-size: 30px;
136 | }
137 | h1:first-child {
138 | margin-top: 0;
139 | }
140 |
141 | h2 {
142 | font-size: 21px;
143 | }
144 |
145 | h3 {
146 | font-size: 16px;
147 | }
148 |
149 | h4 {
150 | font-size: 14px;
151 | }
152 |
153 | h5 {
154 | font-size: 12px;
155 | }
156 |
157 | h6 {
158 | font-size: 11px;
159 | }
160 |
161 | blockquote {
162 | margin: 0;
163 | }
164 |
165 | ul,
166 | ol {
167 | padding: 0;
168 | margin-top: 0;
169 | margin-bottom: 0;
170 | }
171 |
172 | ol ol,
173 | ul ol {
174 | list-style-type: lower-roman;
175 | }
176 |
177 | ul ul ol,
178 | ul ol ol,
179 | ol ul ol,
180 | ol ol ol {
181 | list-style-type: lower-alpha;
182 | }
183 |
184 | dd {
185 | margin-left: 0;
186 | }
187 |
188 | code {
189 | font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
190 | font-size: 12px;
191 | }
192 |
193 | pre {
194 | margin-top: 0;
195 | margin-bottom: 0;
196 | font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace;
197 | }
198 |
199 | .octicon {
200 | font: normal normal normal 16px/1 octicons-anchor;
201 | display: inline-block;
202 | text-decoration: none;
203 | text-rendering: auto;
204 | -webkit-font-smoothing: antialiased;
205 | -moz-osx-font-smoothing: grayscale;
206 | -webkit-user-select: none;
207 | -moz-user-select: none;
208 | -ms-user-select: none;
209 | user-select: none;
210 | }
211 |
212 | .octicon-link:before {
213 | content: '\f05c';
214 | }
215 |
216 | .markdown-body>*:first-child {
217 | margin-top: 0 !important;
218 | }
219 |
220 | .markdown-body>*:last-child {
221 | margin-bottom: 0 !important;
222 | }
223 |
224 | a:not([href]) {
225 | cursor: pointer;
226 | text-decoration: none;
227 | }
228 |
229 | .anchor {
230 | position: absolute;
231 | top: 0;
232 | left: 0;
233 | display: block;
234 | padding-right: 6px;
235 | padding-left: 30px;
236 | margin-left: -30px;
237 | }
238 |
239 | .anchor:focus {
240 | outline: none;
241 | }
242 |
243 | h1,
244 | h2,
245 | h3,
246 | h4,
247 | h5,
248 | h6 {
249 | position: relative;
250 | margin-top: 1em;
251 | margin-bottom: 16px;
252 | font-weight: bold;
253 | line-height: 1.4;
254 | }
255 |
256 | h1 .octicon-link,
257 | h2 .octicon-link,
258 | h3 .octicon-link,
259 | h4 .octicon-link,
260 | h5 .octicon-link,
261 | h6 .octicon-link {
262 | display: none;
263 | color: #000;
264 | vertical-align: middle;
265 | }
266 |
267 | h1:hover .anchor,
268 | h2:hover .anchor,
269 | h3:hover .anchor,
270 | h4:hover .anchor,
271 | h5:hover .anchor,
272 | h6:hover .anchor {
273 | padding-left: 8px;
274 | margin-left: -30px;
275 | text-decoration: none;
276 | }
277 |
278 | h1:hover .anchor .octicon-link,
279 | h2:hover .anchor .octicon-link,
280 | h3:hover .anchor .octicon-link,
281 | h4:hover .anchor .octicon-link,
282 | h5:hover .anchor .octicon-link,
283 | h6:hover .anchor .octicon-link {
284 | display: inline-block;
285 | }
286 |
287 | h1 {
288 | padding-bottom: 0.3em;
289 | font-size: 2.25em;
290 | line-height: 1.2;
291 | border-bottom: 1px solid #eee;
292 | }
293 |
294 | h1 .anchor {
295 | line-height: 1;
296 | }
297 |
298 | h2 {
299 | padding-bottom: 0.3em;
300 | font-size: 1.75em;
301 | line-height: 1.225;
302 | border-bottom: 1px solid #eee;
303 | }
304 |
305 | h2 .anchor {
306 | line-height: 1;
307 | }
308 |
309 | h3 {
310 | font-size: 1.5em;
311 | line-height: 1.43;
312 | }
313 |
314 | h3 .anchor {
315 | line-height: 1.2;
316 | }
317 |
318 | h4 {
319 | font-size: 1.25em;
320 | }
321 |
322 | h4 .anchor {
323 | line-height: 1.2;
324 | }
325 |
326 | h5 {
327 | font-size: 1em;
328 | }
329 |
330 | h5 .anchor {
331 | line-height: 1.1;
332 | }
333 |
334 | h6 {
335 | font-size: 1em;
336 | color: #777;
337 | }
338 |
339 | h6 .anchor {
340 | line-height: 1.1;
341 | }
342 |
343 | p,
344 | blockquote,
345 | ul,
346 | ol,
347 | dl,
348 | table,
349 | pre {
350 | margin-top: 0;
351 | margin-bottom: 16px;
352 | }
353 |
354 | hr {
355 | height: 4px;
356 | padding: 0;
357 | margin: 16px 0;
358 | background-color: #e7e7e7;
359 | border: 0 none;
360 | }
361 |
362 | ul,
363 | ol {
364 | padding-left: 2em;
365 | }
366 |
367 | ul ul,
368 | ul ol,
369 | ol ol,
370 | ol ul {
371 | margin-top: 0;
372 | margin-bottom: 0;
373 | }
374 |
375 | li>p {
376 | margin-top: 16px;
377 | }
378 |
379 | dl {
380 | padding: 0;
381 | }
382 |
383 | dl dt {
384 | padding: 0;
385 | margin-top: 16px;
386 | font-size: 1em;
387 | font-style: italic;
388 | font-weight: bold;
389 | }
390 |
391 | dl dd {
392 | padding: 0 16px;
393 | margin-bottom: 16px;
394 | }
395 |
396 | blockquote {
397 | padding: 0 15px;
398 | color: #777;
399 | border-left: 4px solid #ddd;
400 | }
401 |
402 | blockquote>:first-child {
403 | margin-top: 0;
404 | }
405 |
406 | blockquote>:last-child {
407 | margin-bottom: 0;
408 | }
409 |
410 | table {
411 | display: block;
412 | width: 100%;
413 | overflow: auto;
414 | word-break: normal;
415 | word-break: keep-all;
416 | }
417 |
418 | table th {
419 | font-weight: bold;
420 | }
421 |
422 | table th,
423 | table td {
424 | padding: 6px 13px;
425 | border: 1px solid #ddd;
426 | }
427 |
428 | table tr {
429 | background-color: #fff;
430 | border-top: 1px solid #ccc;
431 | }
432 |
433 | table tr:nth-child(2n) {
434 | background-color: #f8f8f8;
435 | }
436 |
437 | img {
438 | max-width: 100%;
439 | box-sizing: border-box;
440 | }
441 |
442 | code {
443 | padding: 0;
444 | padding-top: 0.2em;
445 | padding-bottom: 0.2em;
446 | margin: 0;
447 | font-size: 85%;
448 | background-color: rgba(0,0,0,0.04);
449 | border-radius: 3px;
450 | }
451 |
452 | code:before,
453 | code:after {
454 | letter-spacing: -0.2em;
455 | content: "\00a0";
456 | }
457 |
458 | pre>code {
459 | padding: 0;
460 | margin: 0;
461 | font-size: 100%;
462 | word-break: normal;
463 | white-space: pre;
464 | background: transparent;
465 | border: 0;
466 | }
467 |
468 | .highlight {
469 | margin-bottom: 16px;
470 | }
471 |
472 | .highlight pre,
473 | pre {
474 | padding: 16px;
475 | overflow: auto;
476 | font-size: 85%;
477 | line-height: 1.45;
478 | background-color: #f7f7f7;
479 | border-radius: 3px;
480 | }
481 |
482 | .highlight pre {
483 | margin-bottom: 0;
484 | word-break: normal;
485 | }
486 |
487 | pre {
488 | word-wrap: normal;
489 | }
490 |
491 | pre code {
492 | display: inline;
493 | max-width: initial;
494 | padding: 0;
495 | margin: 0;
496 | overflow: initial;
497 | line-height: inherit;
498 | word-wrap: normal;
499 | background-color: transparent;
500 | border: 0;
501 | }
502 |
503 | pre code:before,
504 | pre code:after {
505 | content: normal;
506 | }
507 |
508 | kbd {
509 | display: inline-block;
510 | padding: 3px 5px;
511 | font-size: 11px;
512 | line-height: 10px;
513 | color: #555;
514 | vertical-align: middle;
515 | background-color: #fcfcfc;
516 | border: solid 1px #ccc;
517 | border-bottom-color: #bbb;
518 | border-radius: 3px;
519 | box-shadow: inset 0 -1px 0 #bbb;
520 | }
521 |
522 | kbd {
523 | display: inline-block;
524 | padding: 3px 5px;
525 | font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace;
526 | line-height: 10px;
527 | color: #555;
528 | vertical-align: middle;
529 | background-color: #fcfcfc;
530 | border: solid 1px #ccc;
531 | border-bottom-color: #bbb;
532 | border-radius: 3px;
533 | box-shadow: inset 0 -1px 0 #bbb;
534 | }
535 |
536 | .task-list-item {
537 | list-style-type: none;
538 | }
539 |
540 | .task-list-item+.task-list-item {
541 | margin-top: 3px;
542 | }
543 |
544 | .task-list-item input {
545 | margin: 0 0.35em 0.25em -1.6em;
546 | vertical-align: middle;
547 | }
548 |
549 | :checked+.radio-label {
550 | z-index: 1;
551 | position: relative;
552 | border-color: #4078c0;
553 | }
554 |
--------------------------------------------------------------------------------