stucky/index.html at master · selbekk/stucky · 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
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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Testing page</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="dist/stucky.css" />
        <link rel="stylesheet" href="src/docs.css" />
    </head>
    <body>
        <div class="masthead">
            <div class="container center">
                <h1>Stucky</h1>
                <h2>Sticky table headers to the people!</h2>
                <div class="button-list">
                    <a class="button" href="https://raw.githubusercontent.com/selbekk/stucky/master/dist/stucky.min.js" download>
                        <i class="fa fa-arrow-circle-o-down"></i> Download
                    </a>
                    <a class="button" href="https://github.com/selbekk/stucky">
                        <i class="fa fa-github"></i> View on Github
                    </a>
                </div>

                <p class="stamp">(no jQuery required)</p>
            </div>
        </div>
        <div class="content">
            <div class="container grid">
                <div class="half">
                    <h2>Enjoy the stickyness in 1 - 2 - 3!</h2>
                    <p class="lead">
                        Sticky table headers is a feature you're expecting to
                        find on modern websites today. It eases consumption of
                        datasets by giving you the context you need right away.
                        Now you can get them on <strong>your</strong>
                        website in only a few seconds!
                    </p>
                </div>
                <div class="half">
                    <ol>
                        <li>
                            <h3>Install it </h3>
                            <pre><code>$ npm install stucky --save</code></pre>
                        </li>
                        <li>
                            <h3>Import it</h3>
                            <pre><code>import Stucky from 'stucky'</code></pre>
                        </li>
                        <li>
                            <h3>Initialize it</h3>
                            <pre><code>const $table = document.querySelector('#sticky-table')
new Stucky($table);</code></pre>
                        </li>
                    </ol>
                </div>
            </div>
        </div>

        <div class="content">
            <div class="container">
                <h2>Usage</h2>
                <p>
                    Using Stucky is as simple as we showed above, but you can
                    also specify a few options. This is done at initialization
                    time. Here's an annotated example:
                </p>

                <pre><code>import Stucky from 'stucky';

// Grab the table(s) you want to have sticky headers.
const $tables = [...document.querySelectorAll('table')];

// Shared options
const opts = {
    // If you have a fixed header, this px value will let you account for it
    topMargin: 0,
    // Remove the header this px value before the end of the table
    allowance: 100,
    // Space separated class names to apply to the table wrapper
    wrapperClasses: ''
};

// Initialize each of your tables, and you're done!
$tables.forEach($table => new Stucky($table));</code></pre>
            </div>
        </div>

        <div class="content">
            <div class="container">
                <h2>Here's a few examples</h2>
                <p>Sample data courtesy of <a href="https://randomuser.me/">randomuser.me</a>.</p>

                <table data-rows="5">
                    <caption>A table with headers</caption>
                    <thead>
                        <tr>
                            <th scope="col">Name</th>
                            <th scope="col">Address</th>
                            <th scope="col">E-mail</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>

                <table data-rows="10">
                    <caption>A wide table</caption>
                    <thead>
                        <tr>
                            <th scope="col">Name</th>
                            <th scope="col">Address</th>
                            <th scope="col">E-mail</th>
                            <th scope="col">Phone number</th>
                            <th scope="col">Username</th>
                            <th scope="col">Gender</th>
                            <th scope="col">Nationality</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>

                <table data-rows="10" data-columns="5" data-vertical="true">
                    <caption>Vertical headings</caption>
                    <tbody></tbody>
                </table>

                <table data-rows="20" data-vertical="true">
                    <caption>Vertical and horizontal headings</caption>
                    <thead>
                        <tr>
                            <th scope="col">Name</th>
                            <th scope="col">Address</th>
                            <th scope="col">E-mail</th>
                            <th scope="col">Phone number</th>
                            <th scope="col">Username</th>
                            <th scope="col">Gender</th>
                            <th scope="col">Nationality</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
        <script src="dist/docs.js"></script>
    </body>
</html>