-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtemplate-149.html
369 lines (347 loc) · 30 KB
/
template-149.html
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
<link rel="stylesheet" href="./resources/styles/elf-template.css">
<h1 id="multi-table-feature">Multi-table feature</h1>
<p>Multiple grids can be created within a single page. They are independent from each other. A change made to one grid won't affect on the other grids. Sometimes, you want multiple instances of the same grid to make more room for displaying data. MultiTableManager is created to support such case. MultiTableManager will create multiple instances of the same grid and syncronize any column related change across all those instances. Each grid created by MultiTableManager will always have the same column configuration and the extensions. You can have different different row content on each grid. </p>
<blockquote>
<p>Note that MultiTableManager is just a helper class object. It is not a Grid extension which is tied to single grid instance. It can be viewed as another wrapper that manages multiple Grid instances. </p>
</blockquote>
<h2 id="support-features">Support features</h2>
<p>MultiTableManager is still in development and support only some basic features as listed below:</p>
<ul>
<li>Each table will have the same width and become inline-block element.</li>
<li>Each table will have the same number of rows and columns.</li>
<li>Column selection will be displayed on each table.</li>
<li>Column resizing will be applied on each table.</li>
<li>Column fitting will be applied on each table.</li>
<li>Column insertion, removal, and reordering will be applied on each table.</li>
<li>Row selection can be moved across multiple grids through keyboard navigation. Row selection can be only active for one grid at any time.</li>
</ul>
<h2 id="usage">Usage</h2>
<p>To use multi-table feature, you need to import <code>MultiTableManager</code>, a helper, from package. Then, initialize the helper by supplying Grid element. The element will be used as a primary table for creating another table. Lastly, initialize the Grid element by using <code>setGridConfig</code> method from the helper to specify configuration. </p>
<p>To adjust number of tables, use <code>setTableCount</code> method. </p>
<p>To get Grid element, use <code>getTable</code> method.</p>
<p>The basic setup process is shown in the example below:</p>
<pre><code class="language-js">import MultiTableManager from "@refinitiv-ui/efx-grid/utils";
var gridElement = document.getElementById("grid");
var mgr = new MultiTableManager(gridElement);
var configObj = {
/* grid configuration */
};
mgr.setGridConfig(configObj);
mgr.setTableCount(3); // Or any other number
</code></pre>
<h3 id="multi-table-example">Multi-table example</h3>
<code-sandbox hash="3a99f0e"><pre><code class="language-css">html hr {
margin: 5px;
}
efx-grid {
margin: 0 5px 5px;
vertical-align: top;
}
#h_scrollbar_host {
height: 400px;
}
</code></pre>
<pre><code class="language-html"><button id="table_btn1">Table Count 1</button>
<button id="table_btn2">Table Count 2</button>
<button id="table_btn3">Table Count 3</button>
<button id="table_btn4">Table Count 4</button>
<hr>
<div id="v_scrollbar_host">
<div id="h_scrollbar_host">
<efx-grid id="grid"></efx-grid>
</div>
</div>
</code></pre>
<pre><code class="language-javascript">import { halo } from './theme-loader.js'; // This line is only required for demo purpose. It is not relevant for your application.
await halo(); // This line is only required for demo purpose. It is not relevant for your application.
/* ---------------------------------- Note ----------------------------------
DataGenerator, Formatters and extensions are exposed to global scope
in the bundle file to make it easier to create live examples.
Importing formatters and extensions is still required in your application.
Please see the document for further information.
---------------------------------------------------------------------------*/
var fields = ["companyName", "market", "CF_LAST", "CF_NETCHNG", "industry"];
var records = DataGenerator.generateRecords(fields, { numRows: 5 });
var configObj = {
columns: [
{name: "Company", field: fields[0], width: 100},
{name: "Market", field: fields[1], width: 100},
{name: "Last", field: fields[2], width: 100}
],
staticDataRows: records,
extensions: [
new RowSelection(),
new ColumnSelection(),
new ColumnResizing(),
new ColumnFitter(),
new ColumnDragging()
]
};
var grid = document.getElementById("grid");
var mgr = new MultiTableManager(grid);
// You can place grids side by side by using the following commands
// var vScrollbarHost = document.getElementById("v_scrollbar_host");
// var hScrollbarHost = document.getElementById("h_scrollbar_host");
// MultiTableManager.synchronizeVScrollbar(vScrollbarHost, hScrollbarHost, grid);
mgr.setGridConfig(configObj);
mgr.setTableCount(3);
document.getElementById("table_btn1").addEventListener("click", function(e) {
mgr.setTableCount(1);
});
document.getElementById("table_btn2").addEventListener("click", function(e) {
mgr.setTableCount(2);
});
document.getElementById("table_btn3").addEventListener("click", function(e) {
mgr.setTableCount(3);
});
document.getElementById("table_btn4").addEventListener("click", function(e) {
mgr.setTableCount(4);
});
setInterval(function simulateDataUpdate() {
if(!grid.api) {
return;
}
var rowCount = mgr.getRowCount();
for(var i = 0; i < 4; ++i) {
var tbl = mgr.getTable(i);
if(!tbl) {
break;
}
for(var r = 0; r < rowCount; ++r) {
if(!DataGenerator.randInt(0, 4)) {
var record = DataGenerator.generateRecord(fields);
tbl.api.setRowData(r, record);
}
}
}
}, 500);
</code></pre>
</code-sandbox><h3 id="multi-table-wrap-mode-example">Multi-table: wrap mode example</h3>
<p>In wrap mode, a single table will be used as a primary table and wrapped by specified number of rows. After wrapping, multiple secondary tables will be created with specified number of rows to represent the rows from the primary table. The main difference between wrap mode and multi-table mode is that content rows, in wrap mode, of each table are based on a single primary table. Any change on a row from the primary table will also apply to corresponding row on one of the secondary tables, and vice versa. In multi-table mode, rows in one table are independent from rows in other tables. </p>
<p>To enable wrap mode, use <code>wrapTable</code> method with number of wrapping rows as its parameter. </p>
<p>To disable wrap mode, use <code>wrapTable</code> method with 0 as its parameter.</p>
<p>If you are in multi-table mode, <code>wrapTable</code> method will automatically remove any existing table and switch to wrap mode.</p>
<p>If you are in wrap mode, <code>setTableCount</code> method will automatically disable wrap-mode and switch to multi-table mode.</p>
<blockquote>
<p>Note that original table is still kept intact after the wrapping, even though it is hidden from view. <code>getTable(0)</code> will return the original table. </p>
</blockquote>
<code-sandbox hash="b85684e5"><pre><code class="language-css">html hr {
margin: 5px;
}
efx-grid {
margin: 0 5px 5px;
vertical-align: top;
}
#h_scrollbar_host {
height: 250px;
}
</code></pre>
<pre><code class="language-html"><button id="wrap_btn1">Wrap 3 rows</button>
<button id="wrap_btn2">Wrap 4 rows</button>
<button id="wrap_btn3">Wrap 5 rows</button>
<button id="wrap_btn4">Disable wrap mode</button>
<hr>
<button id="set_btn1">Set Data on the second table</button>
<button id="set_btn2">Set Data on the third table</button>
<button id="add_row_btn">Add row</button>
<button id="remove_row_btn">Remove row</button>
<hr>
<button id="add_col_btn">Add Column</button>
<button id="remove_col_btn">Remove Column</button>
<hr>
<div id="v_scrollbar_host">
<div id="h_scrollbar_host">
<efx-grid id="grid"></efx-grid>
</div>
</div>
</code></pre>
<pre><code class="language-javascript">import { halo } from './theme-loader.js'; // This line is only required for demo purpose. It is not relevant for your application.
await halo(); // This line is only required for demo purpose. It is not relevant for your application.
/* ---------------------------------- Note ----------------------------------
DataGenerator, Formatters and extensions are exposed to global scope
in the bundle file to make it easier to create live examples.
Importing formatters and extensions is still required in your application.
Please see the document for further information.
---------------------------------------------------------------------------*/
var fields = ["companyName", "market", "CF_LAST", "CF_NETCHNG", "industry"];
var records = DataGenerator.generateRecords(fields, { numRows: 10 });
var configObj = {
sorting: {
sortableColumns: true
},
defaultColumnOptions: {
minWidth: 24
},
columns: [
{name: fields[0], width: 100, field: fields[0]},
{name: fields[2], width: 100, field: fields[2], formatType: "number", colorText: true },
{name: fields[3], width: 100, field: fields[3], formatType: "percent", blinking: true }
],
staticDataRows: records,
extensions: [
new RowSelection(),
new ColumnSelection(),
new ColumnResizing(),
new ColumnFitter(),
new ColumnDragging()
]
};
var grid = document.getElementById("grid");
var mgr = new MultiTableManager(grid);
mgr.setGridConfig(configObj);
wrap_btn1.addEventListener("click", function() {
mgr.wrapTable(3);
});
wrap_btn2.addEventListener("click", function() {
mgr.wrapTable(4);
});
wrap_btn3.addEventListener("click", function() {
mgr.wrapTable(5);
});
wrap_btn4.addEventListener("click", function() {
mgr.wrapTable(0);
});
add_row_btn.addEventListener("click", function() {
mgr.insertRow({});
});
remove_row_btn.addEventListener("click", function() {
mgr.removeRow();
});
add_col_btn.addEventListener("click", function() {
mgr.insertColumn({field: "industry", width: 80});
});
remove_col_btn.addEventListener("click", function() {
mgr.removeColumn(mgr.getColumnCount() - 1);
});
set_btn1.addEventListener("click", function() {
randomlySetData(mgr.getTable(1));
});
set_btn2.addEventListener("click", function() {
randomlySetData(mgr.getTable(2));
});
setInterval(function simulateDataUpdate() {
var tblCount = mgr.getTableCount();
for(var i = 0; i < tblCount; ++i) {
if(Math.random() > 0.6) {
randomlySetData(mgr.getTable(i));
}
}
}, 500);
function randomlySetData(tbl) {
if(!tbl || !tbl.api) {
return;
}
var rowCount = mgr.getRowCount();
for(var i = 0; i < rowCount; ++i) {
if(Math.random() > 0.7) {
var rowDef = tbl.api.getRowDefinition(i);
if(rowDef) {
rowDef.setRowData(DataGenerator.generateRecord(fields));
}
}
}
}
</code></pre>
</code-sandbox><h2 id="positioning-grids-side-by-side-with-vertical-scrollbar-syncronization">Positioning grids side by side with vertical scrollbar syncronization</h2>
<p>You can display multiple grids side by side using CSS as shown in the above example. However, it does not work when you want to have a single vertical scrollbar for multiple grids. If normal native scrollbar is used, all rows in a grid have to be displayed and cannot be virtualized. Large number of rows in each grid can introduce performance problem. You can use Grid's scrollbars instead of native scrollbars to enable row virtualization and improve the performance. </p>
<p>To link multiple grids together and have only one single vertical scrollbar, use <code>MultiTableManager.synchronizeVScrollbar</code> method. The method requires two elements to host the scrollbars and array of Grid elements. The first element is for hosting Grid vertical scrollbar. The second element is for hosting native horizontal scrollbar and Grid elements. The vertical scrollbar requires separated host element because it has to be float over view and not moved when horizontal scrolling occurs. The setup for element structure is shown below:</p>
<pre><code class="language-html"><div id="v_scrollbar_host">
<div id="h_scrollbar_host">
<efx-grid></efx-grid>
<efx-grid></efx-grid>
</div>
</div>
</code></pre>
<p>The height for the grid can be specified on the vertical scrollbar host. If so, make sure that the height of horizontal scrollbar host is set to <code>100%</code>. The width of the grid can be set on the element itself or on every column of the grid.</p>
<h3 id="side-by-side-grids-example">Side by side Grids Example</h3>
<code-sandbox hash="c2a1bbb1"><pre><code class="language-css">efx-grid+efx-grid {
margin-left: 5px;
}
#v_scrollbar_host {
height: 300px;
}
#h_scrollbar_host {
height: 100%;
}
#grid_2 {
width: 500px;
}
</code></pre>
<pre><code class="language-html"><div id="v_scrollbar_host">
<div id="h_scrollbar_host">
<efx-grid id="grid_1"></efx-grid>
<efx-grid id="grid_2"></efx-grid>
</div>
</div>
<hr>
</code></pre>
<pre><code class="language-javascript">import { halo } from './theme-loader.js'; // This line is only required for demo purpose. It is not relevant for your application.
await halo(); // This line is only required for demo purpose. It is not relevant for your application.
/* ---------------------------------- Note ----------------------------------
DataGenerator, Formatters and extensions are exposed to global scope
in the bundle file to make it easier to create live examples.
Importing formatters and extensions is still required in your application.
Please see the document for further information.
---------------------------------------------------------------------------*/
var gen = DataGenerator;
var fields = ["companyName","percent", "number_2", "bid", "ask"];
var records1 = gen.generateRecords(fields, {seed: 1, rowCount: 20});
var records2 = gen.generateRecords(fields, {seed: 100, rowCount: 20});
var configObj1 = {
defaultColumnOptions: {
width: 100
},
sorting: {
initialSort: {
colIndex: 3,
sortOrder: "d"
}
},
columns: [
{name: fields[0], field: fields[0], width: 120},
{name: fields[1], field: fields[1]},
{name: fields[2], field: fields[2], colorText: true},
{name: "Bid", field: "bid"}
],
staticDataRows: records1
};
var configObj2 = {
sorting: {
initialSort: {
colIndex: 0,
sortOrder: "a"
}
},
columns: [
{name: "Ask", field: "ask"},
{name: fields[2], field: fields[2], colorText: true},
{name: fields[1], field: fields[1]},
{name: fields[0], field: fields[0]}
],
staticDataRows: records2
};
var grid1 = document.getElementById("grid_1");
var grid2 = document.getElementById("grid_2");
grid1.config = configObj1;
grid2.config = configObj2;
MultiTableManager.synchronizeVScrollbar(
document.getElementById("v_scrollbar_host"),
document.getElementById("h_scrollbar_host"),
[grid1, grid2]
);
</code></pre>
</code-sandbox><h2 style="margin-bottom:5px" id="api-refs">MultiTableManager API Reference</h2>
<div id="elf-api-container"><div id="main-template" class="elf-template"> <section><header> <h1 class="subsection-title"><span class="attribs"><span class="type-signature"></span></span>MultiTableManager<span class="signature">(gridElem)</span><span class="type-signature"></span></h1> </header><article> <h3 class="subsection-title" id="methods">Methods</h3>
<div class="item"> <div class="item-type">function</div> <h4 class="name" id=".synchronizeVScrollbar"><span class="type-signature"></span>synchronizeVScrollbar<span class="signature">(vScrollbarHost, hScrollbarHost, gridElems)</span><span class="type-signature"> → {Promise.<Array>}</span></h4> <h5>Parameters:</h5> <div class="params"> <div class="param"> <div class="name">vScrollbarHost</div> <div class="type"> <span class="param-type">Element</span> </div> <div class="description"> Host element for the vertical scrollbar. </div> </div> <div class="param"> <div class="name">hScrollbarHost</div> <div class="type"> <span class="param-type">Element</span> </div> <div class="description"> Host element for the horizontal scrollbar. This element must be a child of the vScrollbarHost element. </div> </div> <div class="param"> <div class="name">gridElems</div> <div class="type"> <span class="param-type">Array.<Element></span> </div> <div class="description"> Array of grid elements. The first element will be treated as primary grid. </div> </div> </div> <div class="details"> </div> <h5>Returns:</h5> <div class="sub-content"> <span class="param-type">Promise.<Array></span> </div> </div>
<div class="item"> <div class="item-type">function</div> <h4 class="name" id="dispose"><span class="type-signature"></span>dispose<span class="signature">()</span><span class="type-signature"></span></h4> <div class="details"> </div> </div>
<div class="item"> <div class="item-type">function</div> <h4 class="name" id="getColumnCount"><span class="type-signature"></span>getColumnCount<span class="signature">()</span><span class="type-signature"> → {number}</span></h4> <div class="details"> </div> <h5>Returns:</h5> <div class="sub-content"> <span class="param-type">number</span> </div> </div>
<div class="item"> <div class="item-type">function</div> <h4 class="name" id="getRowCount"><span class="type-signature"></span>getRowCount<span class="signature">()</span><span class="type-signature"> → {number}</span></h4> <div class="details"> </div> <h5>Returns:</h5> <div class="sub-content"> <span class="param-type">number</span> </div> </div>
<div class="item"> <div class="item-type">function</div> <h4 class="name" id="getTable"><span class="type-signature"></span>getTable<span class="signature">(at<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {Element}</span></h4> <h5>Parameters:</h5> <div class="params"> <div class="param"> <div class="name">at</div> <div class="type"> <span class="param-type">number</span> </div> <div class="attributes"> <optional> </div> </div> </div> <div class="details"> </div> <h5>Returns:</h5> <div class="sub-content"> <span class="param-type">Element</span> </div> </div>
<div class="item"> <div class="item-type">function</div> <h4 class="name" id="getTableCount"><span class="type-signature"></span>getTableCount<span class="signature">()</span><span class="type-signature"> → {number}</span></h4> <div class="details"> </div> <h5>Returns:</h5> <div class="sub-content"> <span class="param-type">number</span> </div> </div>
<div class="item"> <div class="item-type">function</div> <h4 class="name" id="insertColumn"><span class="type-signature"></span>insertColumn<span class="signature">(columnOption, idx<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4> <h5>Parameters:</h5> <div class="params"> <div class="param"> <div class="name">columnOption</div> <div class="type"> <span class="param-type">*</span> </div> <div class="attributes"> </div> <div class="description"> String will be treated as field, while object is treated as the column options </div> </div> <div class="param"> <div class="name">idx</div> <div class="type"> <span class="param-type">number</span> </div> <div class="attributes"> <optional> </div> </div> </div> <div class="details"> </div> </div>
<div class="item"> <div class="item-type">function</div> <h4 class="name" id="insertRow"><span class="type-signature"></span>insertRow<span class="signature">(rowOption<span class="signature-attributes">opt</span>, at<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4> <h5>Parameters:</h5> <div class="params"> <div class="param"> <div class="name">rowOption</div> <div class="type"> <span class="param-type">Object</span> </div> <div class="attributes"> <optional> </div> </div> <div class="param"> <div class="name">at</div> <div class="type"> <span class="param-type">number</span> </div> <div class="attributes"> <optional> </div> </div> </div> <div class="details"> </div> </div>
<div class="item"> <div class="item-type">function</div> <h4 class="name" id="removeColumn"><span class="type-signature"></span>removeColumn<span class="signature">(colRef)</span><span class="type-signature"></span></h4> <h5>Parameters:</h5> <div class="params"> <div class="param"> <div class="name">colRef</div> <div class="type"> <span class="param-type">*</span> </div> <div class="description"> Column reference </div> </div> </div> <div class="details"> </div> </div>
<div class="item"> <div class="item-type">function</div> <h4 class="name" id="removeRow"><span class="type-signature"></span>removeRow<span class="signature">(at<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4> <h5>Parameters:</h5> <div class="params"> <div class="param"> <div class="name">at</div> <div class="type"> <span class="param-type">number</span> </div> <div class="attributes"> <optional> </div> </div> </div> <div class="details"> </div> </div>
<div class="item"> <div class="item-type">function</div> <h4 class="name" id="setGridConfig"><span class="type-signature"></span>setGridConfig<span class="signature">(configObj<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4> <h5>Parameters:</h5> <div class="params"> <div class="param"> <div class="name">configObj</div> <div class="type"> <span class="param-type">Object</span> </div> <div class="attributes"> <optional> </div> </div> </div> <div class="details"> </div> </div>
<div class="item"> <div class="item-type">function</div> <h4 class="name" id="setTableCount"><span class="type-signature"></span>setTableCount<span class="signature">(num)</span><span class="type-signature"></span></h4> <h5>Parameters:</h5> <div class="params"> <div class="param"> <div class="name">num</div> <div class="type"> <span class="param-type">number</span> </div> <div class="description"> Number of tables. Number cannot be less than one. </div> </div> </div> <div class="details"> </div> </div>
<div class="item"> <div class="item-type">function</div> <h4 class="name" id="wrapTable"><span class="type-signature"></span>wrapTable<span class="signature">(rowCount)</span><span class="type-signature"></span></h4> <h5>Parameters:</h5> <div class="params"> <div class="param"> <div class="name">rowCount</div> <div class="type"> <span class="param-type">number</span> </div> <div class="description"> Number of row per table. Set number to zero to turn off wrap mode. </div> </div> </div> <div class="details"> </div> </div> </article></section></div></div>