UNPKG

1.79 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <title>{NAME} v{VERSION} - Columns Visibility Extension Demo</title>
5 <!-- @import partials/style.html -->
6 <link rel="stylesheet" type="text/css" href="../dist/tablefilter/style/colsVisibility.css">
7</head>
8<body>
9<h1>{NAME} v{VERSION}</h1>
10<h2>Columns visibility extension demo</h2>
11<p>
12 This demo features the columns visibility extension.
13</p>
14
15<p>
16<button onclick="javascript:
17 tf.extension('colsVisibility').hideCol(0);">Hide Column 0</button>
18<button onclick="javascript:
19 tf.extension('colsVisibility').showCol(0);">Show Column 0</button>
20<button onclick="javascript:
21 tf.extension('colsVisibility').toggleCol(2);">Toggle Column 2</button>
22</p>
23<!-- @import partials/pre.html -->
24<!-- @import partials/countries-by-continent.html -->
25
26<!-- @import partials/tablefilter-script.html -->
27<script data-config>
28var tfConfig = {
29 base_path: '../dist/tablefilter/',
30 col_types: [
31 'number', 'string', 'string',
32 'formatted-number', 'formatted-number', 'string'
33 ],
34 paging: true,
35 state: {
36 types: ['cookie'],
37 filters: true,
38 columns_visibility: true
39 },
40 alternate_rows: true,
41 rows_counter: true,
42 btn_reset: {
43 text: 'Clear'
44 },
45 status_bar: true,
46 col_1: 'select',
47 col_2: 'select',
48
49 /* columns visibility and sort extension */
50 extensions:[
51 {
52 name: 'colsVisibility',
53 at_start: [3, 5],
54 text: 'Columns: ',
55 enable_tick_all: true
56 }, {
57 name: 'sort'
58 }
59 ]
60};
61
62var tf = new TableFilter('demo', tfConfig);
63tf.init();
64</script>
65<!-- @import partials/pre-inline-script.html -->
66</body>
67</html>