UNPKG

2 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <title>{NAME} v{VERSION} - Grouped Headers Demo</title>
5 <!-- @import partials/style.html -->
6</head>
7<body>
8<h1>{NAME} v{VERSION}</h1>
9<h2>Grouped headers demo</h2>
10<p>
11 With grouped and/or multi-line headers, to place the filters row at desired
12 location, it is important to pay attention to the following configuration
13 properties:
14</p>
15<ul>
16 <li>
17 <code>filters_row_index</code> to set the position of the filters'
18 row
19 </li>
20 <li>
21 <code>headers_row_index</code> to specify the position of the
22 headers row - especially when the sort feature is enabled
23 </li>
24</ul>
25<p>
26 and equally inportant, specify the index of the row from which the filtering
27 process should start ie:
28 <code>var tf = new TableFilter('myTableId', myConfig, 3);</code>
29</p>
30
31<!-- @import partials/pre.html -->
32
33<!-- @import partials/table-with-grouped-headers.html -->
34
35<!-- @import partials/tablefilter-script.html -->
36<script data-config>
37var tfConfig = {
38 base_path: '../dist/tablefilter/',
39 btn: true,
40 col_0: 'multiple',
41 col_1: 'select',
42 col_2: 'checklist',
43 col_types: [
44 'string', 'string', 'number',
45 'number', 'number', 'number',
46 'number', 'number', 'number'
47 ],
48 filters_row_index: 3,
49 headers_row_index: 2,
50 state: {
51 types: ['local_storage'],
52 filters: true,
53 page_number: true,
54 sort: true
55 },
56 highlight_keywords: true,
57 alternate_rows: true,
58 rows_counter: true,
59 btn_reset: true,
60 status_bar: true,
61 paging: {
62 length: 15
63 },
64 enable_empty_option: true,
65 enable_non_empty_option: true,
66 enable_default_theme: true,
67
68 extensions: [{ name: 'sort' }]
69};
70
71var tf = new TableFilter('grouped-headers', tfConfig, 3);
72tf.init();
73
74</script>
75
76<!-- @import partials/pre-inline-script.html -->
77</body>
78</html>