tinybigtable.js/example.html at master · Jezternz/tinybigtable.js · 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
<!DOCTYPE html>
<html>
	<head>
		<script src="tinybigtable.js"></script>
		<style>
			body{font-family: verdana;text-align:center;margin:0;padding:0;}
			h1{font-size:18px;}
			/* Example 1*/
			.mytable { width:800px; height: 400px; background: #eee; margin: 0 auto;}
			.mytable .tbt-head{background:#ddd;}
			.mytable .tbt .tbt-cell input{min-width:140px;height:40px;text-align:center;background:transparent;border:none;box-sizing:border-box;}
			/* Example 2*/
			.mytable2 { width:100%; height: 400px; background: #eee;box-sizing:border-box;}
			.mytable2 .tbt-head{background:#ddd;}
			.mytable2 .tbt .tbt-cell{text-align:center;background:transparent;}
		</style>
		<script>
			window.onload = () =>
			{
				// Example 1
				window.mytable = TinyBigTable.create({
					parent: ".mytable",
					tableSize: { colCount : 50, rowCount: 100*1000 },

					// cellGroupPreRenderer() - this method should return each cells data (this data will be fed to cellRenderer when it is appropriate)
					// xStart, xEnd, yStart, yEnd is the area that is visible (or buffered), updateGroupData is a callback that should be called to trigger rendering
					cellGroupPreRenderer: ({ xStart, xEnd, yStart, yEnd }, updateGroupData) =>
					{
						console.log(`->${JSON.stringify({ xStart, xEnd, yStart, yEnd })}`);
						const obj = {};

						// Immediately call updateGroupData() with the header values, and "loading=1" for all other cells
						if(yStart===0)
						{
							obj[0] = {};
							for(let x=xStart;x<=xEnd;x++)
								obj[0][x] = { loading: 1, text: `${x}-${y}_head` };
							yStart++;
						}
						for(y=yStart;y<yEnd;y++)
							for(let x=xStart;x<=xEnd;x++)
							{
								if(!obj[y])obj[y] = {};
								obj[y][x] = { loading: 1, text: "" };
							}
						updateGroupData(obj);

						// Also wait 100ms then update them with propper values (100ms to simulate an ajax update)
						for(let y=yStart;y<yEnd;y++)
							for(let x=xStart;x<=xEnd;x++)
							{
								obj[y][x] = { loading: 0, text: `${x}-${y}` };
							}
						setTimeout(() => updateGroupData(obj), 100);
					},

					// cellRenderer() - how to render the contents of each cell
					cellRenderer: ({ x, y }, cellData, rowData) =>
						`<input type="text" ${cellData.loading?'disabled':''} value="${cellData.text}" />`
				});


				// Example 2
				// window.mytable = TinyBigTable.create({
				// 	parent: ".mytable2",
				// 	tableSize: { colCount : 50, rowCount: 100*1000 },

				// 	// cellGroupPreRenderer() - this method should return each cells data (this data will be fed to cellRenderer when it is appropriate)
				// 	// xStart, xEnd, yStart, yEnd is the area that is visible (or buffered), updateGroupData is a callback that should be called to trigger rendering
				// 	cellGroupPreRenderer: ({ xStart, xEnd, yStart, yEnd }, updateGroupData) =>
				// 	{
				// 		const obj = [[]];

				// 		// Immediately call updateGroupData() with the header values, and "loading=1" for all other cells
				// 		if(yStart===0)
				// 		{
				// 			for(let x=xStart;x<=xEnd;x++)
				// 				obj[0][x] = { loading: 0, text: `head-${x}`, rX: 150, rY:200 };
				// 			yStart++;
				// 		}
				// 		for(y=yStart;y<=yEnd;y++)
				// 			for(let x=xStart;x<=xEnd;x++)
				// 			{
				// 				if(!obj[y])obj[y] = [];
				// 				obj[y][x] = { loading: 1, text: "", rX: 150, rY:200 };
				// 			}
				// 		updateGroupData(obj);

				// 		// Also wait 100ms then update them with propper values (100ms to simulate an ajax update)
				// 		for(let y=yStart;y<=yEnd;y++)
				// 			for(let x=xStart;x<=xEnd;x++)
				// 			{
				// 				obj[y][x] = { loading: 0, text: `x:${x} y:${y}`, rX: 150+Math.floor(Math.random()*150), rY: 100+Math.floor(Math.random()*100) };
				// 			}
				// 		setTimeout(() => updateGroupData(obj), 100);
				// 	},

				// 	// cellRenderer() - how to render the contents of each cell
				// 	cellRenderer: ({ x, y }, cellData, rowData) =>
				// 		`<div style="width:${cellData.rX}px;height:${cellData.rY}px;">${cellData.text}</div>`
				// });
			}
		</script>
	</head>
	<body>
		<h1>Example 1 - Fixed cell sizes (1,000 x 100,000)</h1>
		<div class="mytable"></div>
		<h1>Example 2 - Random cell sizes (1,000 x 100,000)</h1>
		<div class="mytable2"></div>
	</body>
</html>