Przejdź do głównej treści
Frutjam logo Frutjam
v2.2.2
Theme

Table Component

CSS-only Tailwind CSS table with zebra striping, compact and default sizes, pinned columns, and row hover states. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

Komponenty tabeli organizują i wyświetlają uporządkowane dane w wierszach i kolumnach. Zbudowane z semantycznych elementów tabel HTML i stylów CSS Tailwind, tabele obsługują sortowanie, wiersze w paski, efekty najechania kursorem i responsywną obsługę przepełnienia. System tabel Frutjam jest dostępny z odpowiednimi powiązaniami nagłówków i bezproblemowo współpracuje ze frameworkami wizualizacji danych.

Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

Klasa Typ Opis
tableOpieraćStylizowana tabela HTML ze stałymi odstępami
table-zebraStylNaprzemienne kolory tła wiersza
table-zebra-rowsStylNaprzemienne tło wiersza tylko w wierszach głównych
table-zebra-colsStylNaprzemienne kolory tła kolumny
table-hoverStylPodświetla wiersze po najechaniu kursorem
table-pin-rowsModyfikatorPrzykleja wiersze nagłówka i stopki podczas przewijania
table-pin-colsModyfikatorPrzykleja pierwszą i ostatnią kolumnę podczas przewijania
table-xsRozmiarBardzo małe wypełnienie rzędu
table-smRozmiarWypełnienie małego rzędu
table-mdRozmiarDopełnienie średniego rzędu (domyślne)
table-lgRozmiarDuże wypełnienie rzędu
table-xlRozmiarBardzo duże wypełnienie rzędu

Tabela

Product Price Category
1 Smartphone $699 Electronics
2 Wireless Headphones $150 Accessories
3 Laptop $1200 Electronics 
 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
<div class="overflow-x-auto w-full">
  <table class="table">
    <!-- head -->
    <thead>
      <tr>
        <th></th>
        <th>Product</th>
        <th>Price</th>
        <th>Category</th>
      </tr>
    </thead>
    <tbody>
      <!-- row 1 -->
      <tr>
        <th>1</th>
        <td>Smartphone</td>
        <td>$699</td>
        <td>Electronics</td>
      </tr>
      <!-- row 2 -->
      <tr>
        <th>2</th>
        <td>Wireless Headphones</td>
        <td>$150</td>
        <td>Accessories</td>
      </tr>
      <!-- row 3 -->
      <tr>
        <th>3</th>
        <td>Laptop</td>
        <td>$1200</td>
        <td>Electronics</td>
      </tr>
    </tbody>
  </table>
</div>

 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
<div className="overflow-x-auto w-full">
  <table className="table">
    {/* head */}
    <thead>
      <tr>
        <th></th>
        <th>Product</th>
        <th>Price</th>
        <th>Category</th>
      </tr>
    </thead>
    <tbody>
      {/* row 1 */}
      <tr>
        <th>1</th>
        <td>Smartphone</td>
        <td>$699</td>
        <td>Electronics</td>
      </tr>
      {/* row 2 */}
      <tr>
        <th>2</th>
        <td>Wireless Headphones</td>
        <td>$150</td>
        <td>Accessories</td>
      </tr>
      {/* row 3 */}
      <tr>
        <th>3</th>
        <td>Laptop</td>
        <td>$1200</td>
        <td>Electronics</td>
      </tr>
    </tbody>
  </table>
</div>

Rozmiary stołów

Tabela bardzo mała (table-xs)

W poniższym przykładzie rozmiaru tabeli używamy table-xs (bardzo mały). Rozmiar tabeli można dostosować za pomocą klas narzędzi table-{size}, w tym table-xs, table-sm, table-md, table-lg i table-xl, które obejmują zarówno wyjątkowo kompaktowe układy, jak i bardziej przestronne, czytelne tabele.

Framework Creator Core Purpose
1 Next.js Vercel React-based SSR (Server-Side Rendering) & Static Site Generation
2 Vue 3 Evan You Progressive JavaScript Framework for building UIs
3 Svelte Rich Harris Compiles to minimal vanilla JavaScript for fast performance
4 Remix Ryan Florence, Michael Jackson React Framework focused on user experience and performance
5 Astro Fred K. Schott Builds fast websites using components from React, Vue, Svelte, etc.
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
<div class="overflow-x-auto w-full">
  <table class="table table-xs">
    <!-- head -->
    <thead>
      <tr>
        <th></th>
        <th>Framework</th>
        <th>Creator</th>
        <th>Core Purpose</th>
      </tr>
    </thead>
    <tbody>
      <!-- row 1 -->
      <tr>
        <th>1</th>
        <td>Next.js</td>
        <td>Vercel</td>
        <td>React-based SSR (Server-Side Rendering) & Static Site Generation</td>
      </tr>
      <!-- row 2 -->
      <tr>
        <th>2</th>
        <td>Vue 3</td>
        <td>Evan You</td>
        <td>Progressive JavaScript Framework for building UIs</td>
      </tr>
      <!-- row 3 -->
      <tr>
        <th>3</th>
        <td>Svelte</td>
        <td>Rich Harris</td>
        <td>Compiles to minimal vanilla JavaScript for fast performance</td>
      </tr>
      <!-- row 4 -->
      <tr>
        <th>4</th>
        <td>Remix</td>
        <td>Ryan Florence, Michael Jackson</td>
        <td>React Framework focused on user experience and performance</td>
      </tr>
      <!-- row 5 -->
      <tr>
        <th>5</th>
        <td>Astro</td>
        <td>Fred K. Schott</td>
        <td>Builds fast websites using components from React, Vue, Svelte, etc.</td>
      </tr>
    </tbody>
  </table>
</div>

Zebra stołowa (paski) rzędy

City Country Population
1 Tokyo Japan 37.4 million
2 New York USA 8.4 million
3 Paris France 2.1 million
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
<div class="overflow-x-auto w-full">
  <table class="table table-zebra">
    <!-- head -->
    <thead>
      <tr>
        <th></th>
        <th>City</th>
        <th>Country</th>
        <th>Population</th>
      </tr>
    </thead>
    <tbody>
      <!-- row 1 -->
      <tr>
        <th>1</th>
        <td>Tokyo</td>
        <td>Japan</td>
        <td>37.4 million</td>
      </tr>
      <!-- row 2 -->
      <tr>
        <th>2</th>
        <td>New York</td>
        <td>USA</td>
        <td>8.4 million</td>
      </tr>
      <!-- row 3 -->
      <tr>
        <th>3</th>
        <td>Paris</td>
        <td>France</td>
        <td>2.1 million</td>
      </tr>
    </tbody>
  </table>
</div>

Kolumny zebry stołowej (w paski).

City Country Population
1 Tokyo Japan 37.4 million
2 New York USA 8.4 million
3 Paris France 2.1 million
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
<div class="overflow-x-auto w-full">
  <table class="table table-zebra-cols">
    <!-- head -->
    <thead>
      <tr>
        <th></th>
        <th>City</th>
        <th>Country</th>
        <th>Population</th>
      </tr>
    </thead>
    <tbody>
      <!-- row 1 -->
      <tr>
        <th>1</th>
        <td>Tokyo</td>
        <td>Japan</td>
        <td>37.4 million</td>
      </tr>
      <!-- row 2 -->
      <tr>
        <th>2</th>
        <td>New York</td>
        <td>USA</td>
        <td>8.4 million</td>
      </tr>
      <!-- row 3 -->
      <tr>
        <th>3</th>
        <td>Paris</td>
        <td>France</td>
        <td>2.1 million</td>
      </tr>
    </tbody>
  </table>
</div>

Tabela podświetla wiersz po najechaniu kursorem

City Country Population
1 Tokyo Japan 37.4 million
2 New York USA 8.4 million
3 Paris France 2.1 million
3 Paris France 2.1 million
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
<div class="overflow-x-auto w-full">
  <table class="table table-hover">
    <!-- head -->
    <thead>
      <tr>
        <th></th>
        <th>City</th>
        <th>Country</th>
        <th>Population</th>
      </tr>
    </thead>
    <tbody>
      <!-- row 1 -->
      <tr>
        <th>1</th>
        <td>Tokyo</td>
        <td>Japan</td>
        <td>37.4 million</td>
      </tr>
      <!-- row 2 -->
      <tr>
        <th>2</th>
        <td>New York</td>
        <td>USA</td>
        <td>8.4 million</td>
      </tr>
      <!-- row 3 -->
      <tr>
        <th>3</th>
        <td>Paris</td>
        <td>France</td>
        <td>2.1 million</td>
      </tr>
            <tr>
        <th>3</th>
        <td>Paris</td>
        <td>France</td>
        <td>2.1 million</td>
      </tr>
    </tbody>
  </table>
</div>

Tabela z przyklejonymi (przypiętymi) wierszami nagłówka

A
Apple
Apricot
Avocado
B
Banana
Blackberry
Blueberry
C
Cherry
Coconut
Cranberry
D
Date
Dragon Fruit
G
Grape
Guava
K
Kiwi
M
Mango
Melon
O
Orange
P
Papaya
Pineapple
Pomegranate
S
Strawberry
W
Watermelon
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
<div class="h-96 overflow-x-auto">
  <table class="table table-pin-rows">
    <thead>
      <tr><th>A</th></tr>
    </thead>
    <tbody>
      <tr><td>Apple</td></tr>
      <tr><td>Apricot</td></tr>
      <tr><td>Avocado</td></tr>
    </tbody>

    <thead>
      <tr><th>B</th></tr>
    </thead>
    <tbody>
      <tr><td>Banana</td></tr>
      <tr><td>Blackberry</td></tr>
      <tr><td>Blueberry</td></tr>
    </tbody>

    <thead>
      <tr><th>C</th></tr>
    </thead>
    <tbody>
      <tr><td>Cherry</td></tr>
      <tr><td>Coconut</td></tr>
      <tr><td>Cranberry</td></tr>
    </tbody>

    <thead>
      <tr><th>D</th></tr>
    </thead>
    <tbody>
      <tr><td>Date</td></tr>
      <tr><td>Dragon Fruit</td></tr>
    </tbody>

    <thead>
      <tr><th>G</th></tr>
    </thead>
    <tbody>
      <tr><td>Grape</td></tr>
      <tr><td>Guava</td></tr>
    </tbody>

    <thead>
      <tr><th>K</th></tr>
    </thead>
    <tbody>
      <tr><td>Kiwi</td></tr>
    </tbody>

    <thead>
      <tr><th>M</th></tr>
    </thead>
    <tbody>
      <tr><td>Mango</td></tr>
      <tr><td>Melon</td></tr>
    </tbody>

    <thead>
      <tr><th>O</th></tr>
    </thead>
    <tbody>
      <tr><td>Orange</td></tr>
    </tbody>

    <thead>
      <tr><th>P</th></tr>
    </thead>
    <tbody>
      <tr><td>Papaya</td></tr>
      <tr><td>Pineapple</td></tr>
      <tr><td>Pomegranate</td></tr>
    </tbody>

    <thead>
      <tr><th>S</th></tr>
    </thead>
    <tbody>
      <tr><td>Strawberry</td></tr>
    </tbody>

    <thead>
      <tr><th>W</th></tr>
    </thead>
    <tbody>
      <tr><td>Watermelon</td></tr>
    </tbody>
  </table>
</div>

Kolumny stałe (przypięte) przewijane w poziomie

# Framework Type Maintained By Learning Curve First Release Popularity Rank
1 React Library Meta Medium 2013 Very High 1
2 Angular Framework Google High 2016 High 2
3 Vue Framework Open Source Low 2014 High 3
4 Svelte Compiler Open Source Low 2016 Medium 4
5 Next.js Framework Vercel Medium 2016 Very High 5
6 Nuxt Framework Open Source Medium 2016 Medium 6
7 SolidJS Library Open Source Medium 2020 Growing 7
8 Ember Framework Open Source High 2011 Low 8
9 Backbone Library Open Source Medium 2010 Low 9
10 Alpine.js Library Open Source Very Low 2019 Medium 10
11 Preact Library Open Source Low 2015 Medium 11
12 Lit Library Google Low 2018 Growing 12
13 Meteor Framework Open Source Medium 2012 Low 13
14 Aurelia Framework Open Source Medium 2016 Low 14
15 Qwik Framework Builder.io Medium 2022 Growing 15
16 Fresh Framework Deno Low 2022 Growing 16
17 Remix Framework Shopify Medium 2021 High 17
18 Astro Framework Open Source Low 2021 High 18
19 Marko Framework eBay Medium 2014 Low 19
20 Inferno Library Open Source Medium 2016 Low 20
# Framework Type Maintained By Learning Curve First Release Popularity Rank
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
<div class="overflow-x-auto w-96">
    <table class="table table-xs table-pin-cols">
        <thead>
            <tr>
                <th>#</th>
                <td>Framework</td>
                <td>Type</td>
                <td>Maintained By</td>
                <td>Learning Curve</td>
                <td>First Release</td>
                <td>Popularity</td>
                <th>Rank</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>1</th>
                <td>React</td>
                <td>Library</td>
                <td>Meta</td>
                <td>Medium</td>
                <td>2013</td>
                <td>Very High</td>
                <th>1</th>
            </tr>
            <tr>
                <th>2</th>
                <td>Angular</td>
                <td>Framework</td>
                <td>Google</td>
                <td>High</td>
                <td>2016</td>
                <td>High</td>
                <th>2</th>
            </tr>
            <tr>
                <th>3</th>
                <td>Vue</td>
                <td>Framework</td>
                <td>Open Source</td>
                <td>Low</td>
                <td>2014</td>
                <td>High</td>
                <th>3</th>
            </tr>
            <tr>
                <th>4</th>
                <td>Svelte</td>
                <td>Compiler</td>
                <td>Open Source</td>
                <td>Low</td>
                <td>2016</td>
                <td>Medium</td>
                <th>4</th>
            </tr>
            <tr>
                <th>5</th>
                <td>Next.js</td>
                <td>Framework</td>
                <td>Vercel</td>
                <td>Medium</td>
                <td>2016</td>
                <td>Very High</td>
                <th>5</th>
            </tr>
            <tr>
                <th>6</th>
                <td>Nuxt</td>
                <td>Framework</td>
                <td>Open Source</td>
                <td>Medium</td>
                <td>2016</td>
                <td>Medium</td>
                <th>6</th>
            </tr>
            <tr>
                <th>7</th>
                <td>SolidJS</td>
                <td>Library</td>
                <td>Open Source</td>
                <td>Medium</td>
                <td>2020</td>
                <td>Growing</td>
                <th>7</th>
            </tr>
            <tr>
                <th>8</th>
                <td>Ember</td>
                <td>Framework</td>
                <td>Open Source</td>
                <td>High</td>
                <td>2011</td>
                <td>Low</td>
                <th>8</th>
            </tr>
            <tr>
                <th>9</th>
                <td>Backbone</td>
                <td>Library</td>
                <td>Open Source</td>
                <td>Medium</td>
                <td>2010</td>
                <td>Low</td>
                <th>9</th>
            </tr>
            <tr>
                <th>10</th>
                <td>Alpine.js</td>
                <td>Library</td>
                <td>Open Source</td>
                <td>Very Low</td>
                <td>2019</td>
                <td>Medium</td>
                <th>10</th>
            </tr>
            <tr>
                <th>11</th>
                <td>Preact</td>
                <td>Library</td>
                <td>Open Source</td>
                <td>Low</td>
                <td>2015</td>
                <td>Medium</td>
                <th>11</th>
            </tr>
            <tr>
                <th>12</th>
                <td>Lit</td>
                <td>Library</td>
                <td>Google</td>
                <td>Low</td>
                <td>2018</td>
                <td>Growing</td>
                <th>12</th>
            </tr>
            <tr>
                <th>13</th>
                <td>Meteor</td>
                <td>Framework</td>
                <td>Open Source</td>
                <td>Medium</td>
                <td>2012</td>
                <td>Low</td>
                <th>13</th>
            </tr>
            <tr>
                <th>14</th>
                <td>Aurelia</td>
                <td>Framework</td>
                <td>Open Source</td>
                <td>Medium</td>
                <td>2016</td>
                <td>Low</td>
                <th>14</th>
            </tr>
            <tr>
                <th>15</th>
                <td>Qwik</td>
                <td>Framework</td>
                <td>Builder.io</td>
                <td>Medium</td>
                <td>2022</td>
                <td>Growing</td>
                <th>15</th>
            </tr>
            <tr>
                <th>16</th>
                <td>Fresh</td>
                <td>Framework</td>
                <td>Deno</td>
                <td>Low</td>
                <td>2022</td>
                <td>Growing</td>
                <th>16</th>
            </tr>
            <tr>
                <th>17</th>
                <td>Remix</td>
                <td>Framework</td>
                <td>Shopify</td>
                <td>Medium</td>
                <td>2021</td>
                <td>High</td>
                <th>17</th>
            </tr>
            <tr>
                <th>18</th>
                <td>Astro</td>
                <td>Framework</td>
                <td>Open Source</td>
                <td>Low</td>
                <td>2021</td>
                <td>High</td>
                <th>18</th>
            </tr>
            <tr>
                <th>19</th>
                <td>Marko</td>
                <td>Framework</td>
                <td>eBay</td>
                <td>Medium</td>
                <td>2014</td>
                <td>Low</td>
                <th>19</th>
            </tr>
            <tr>
                <th>20</th>
                <td>Inferno</td>
                <td>Library</td>
                <td>Open Source</td>
                <td>Medium</td>
                <td>2016</td>
                <td>Low</td>
                <th>20</th>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>#</th>
                <td>Framework</td>
                <td>Type</td>
                <td>Maintained By</td>
                <td>Learning Curve</td>
                <td>First Release</td>
                <td>Popularity</td>
                <th>Rank</th>
            </tr>
        </tfoot>
    </table>
</div>

Tabela przypięta wiersze kolumn

# Framework Type Maintained By Learning Curve First Release Popularity Rank
1 React Library Meta Medium 2013 Very High 1
2 Angular Framework Google High 2016 High 2
3 Vue Framework Open Source Low 2014 High 3
4 Svelte Compiler Open Source Low 2016 Medium 4
5 Next.js Framework Vercel Medium 2016 Very High 5
6 Nuxt Framework Open Source Medium 2016 Medium 6
7 SolidJS Library Open Source Medium 2020 Growing 7
8 Ember Framework Open Source High 2011 Low 8
9 Backbone Library Open Source Medium 2010 Low 9
10 Alpine.js Library Open Source Very Low 2019 Medium 10
11 Preact Library Open Source Low 2015 Medium 11
12 Lit Library Google Low 2018 Growing 12
13 Meteor Framework Open Source Medium 2012 Low 13
14 Aurelia Framework Open Source Medium 2016 Low 14
15 Qwik Framework Builder.io Medium 2022 Growing 15
16 Fresh Framework Deno Low 2022 Growing 16
17 Remix Framework Shopify Medium 2021 High 17
18 Astro Framework Open Source Low 2021 High 18
19 Marko Framework eBay Medium 2014 Low 19
20 Inferno Library Open Source Medium 2016 Low 20
# Framework Type Maintained By Learning Curve First Release Popularity Rank
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
<div class="overflow-x-auto h-96 w-96">
    <table class="table table-xs table-pin-rows table-pin-cols">
        <thead>
            <tr>
                <th>#</th>
                <td>Framework</td>
                <td>Type</td>
                <td>Maintained By</td>
                <td>Learning Curve</td>
                <td>First Release</td>
                <td>Popularity</td>
                <th>Rank</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>1</th>
                <td>React</td>
                <td>Library</td>
                <td>Meta</td>
                <td>Medium</td>
                <td>2013</td>
                <td>Very High</td>
                <th>1</th>
            </tr>
            <tr>
                <th>2</th>
                <td>Angular</td>
                <td>Framework</td>
                <td>Google</td>
                <td>High</td>
                <td>2016</td>
                <td>High</td>
                <th>2</th>
            </tr>
            <tr>
                <th>3</th>
                <td>Vue</td>
                <td>Framework</td>
                <td>Open Source</td>
                <td>Low</td>
                <td>2014</td>
                <td>High</td>
                <th>3</th>
            </tr>
            <tr>
                <th>4</th>
                <td>Svelte</td>
                <td>Compiler</td>
                <td>Open Source</td>
                <td>Low</td>
                <td>2016</td>
                <td>Medium</td>
                <th>4</th>
            </tr>
            <tr>
                <th>5</th>
                <td>Next.js</td>
                <td>Framework</td>
                <td>Vercel</td>
                <td>Medium</td>
                <td>2016</td>
                <td>Very High</td>
                <th>5</th>
            </tr>
            <tr>
                <th>6</th>
                <td>Nuxt</td>
                <td>Framework</td>
                <td>Open Source</td>
                <td>Medium</td>
                <td>2016</td>
                <td>Medium</td>
                <th>6</th>
            </tr>
            <tr>
                <th>7</th>
                <td>SolidJS</td>
                <td>Library</td>
                <td>Open Source</td>
                <td>Medium</td>
                <td>2020</td>
                <td>Growing</td>
                <th>7</th>
            </tr>
            <tr>
                <th>8</th>
                <td>Ember</td>
                <td>Framework</td>
                <td>Open Source</td>
                <td>High</td>
                <td>2011</td>
                <td>Low</td>
                <th>8</th>
            </tr>
            <tr>
                <th>9</th>
                <td>Backbone</td>
                <td>Library</td>
                <td>Open Source</td>
                <td>Medium</td>
                <td>2010</td>
                <td>Low</td>
                <th>9</th>
            </tr>
            <tr>
                <th>10</th>
                <td>Alpine.js</td>
                <td>Library</td>
                <td>Open Source</td>
                <td>Very Low</td>
                <td>2019</td>
                <td>Medium</td>
                <th>10</th>
            </tr>
            <tr>
                <th>11</th>
                <td>Preact</td>
                <td>Library</td>
                <td>Open Source</td>
                <td>Low</td>
                <td>2015</td>
                <td>Medium</td>
                <th>11</th>
            </tr>
            <tr>
                <th>12</th>
                <td>Lit</td>
                <td>Library</td>
                <td>Google</td>
                <td>Low</td>
                <td>2018</td>
                <td>Growing</td>
                <th>12</th>
            </tr>
            <tr>
                <th>13</th>
                <td>Meteor</td>
                <td>Framework</td>
                <td>Open Source</td>
                <td>Medium</td>
                <td>2012</td>
                <td>Low</td>
                <th>13</th>
            </tr>
            <tr>
                <th>14</th>
                <td>Aurelia</td>
                <td>Framework</td>
                <td>Open Source</td>
                <td>Medium</td>
                <td>2016</td>
                <td>Low</td>
                <th>14</th>
            </tr>
            <tr>
                <th>15</th>
                <td>Qwik</td>
                <td>Framework</td>
                <td>Builder.io</td>
                <td>Medium</td>
                <td>2022</td>
                <td>Growing</td>
                <th>15</th>
            </tr>
            <tr>
                <th>16</th>
                <td>Fresh</td>
                <td>Framework</td>
                <td>Deno</td>
                <td>Low</td>
                <td>2022</td>
                <td>Growing</td>
                <th>16</th>
            </tr>
            <tr>
                <th>17</th>
                <td>Remix</td>
                <td>Framework</td>
                <td>Shopify</td>
                <td>Medium</td>
                <td>2021</td>
                <td>High</td>
                <th>17</th>
            </tr>
            <tr>
                <th>18</th>
                <td>Astro</td>
                <td>Framework</td>
                <td>Open Source</td>
                <td>Low</td>
                <td>2021</td>
                <td>High</td>
                <th>18</th>
            </tr>
            <tr>
                <th>19</th>
                <td>Marko</td>
                <td>Framework</td>
                <td>eBay</td>
                <td>Medium</td>
                <td>2014</td>
                <td>Low</td>
                <th>19</th>
            </tr>
            <tr>
                <th>20</th>
                <td>Inferno</td>
                <td>Library</td>
                <td>Open Source</td>
                <td>Medium</td>
                <td>2016</td>
                <td>Low</td>
                <th>20</th>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>#</th>
                <td>Framework</td>
                <td>Type</td>
                <td>Maintained By</td>
                <td>Learning Curve</td>
                <td>First Release</td>
                <td>Popularity</td>
                <th>Rank</th>
            </tr>
        </tfoot>
    </table>
</div>

Tabela z wyborem pola wyboru

Project Category Primary Tech
Landing Page Redesign
Production
 Frontend UI / UX Tailwind CSS
Auth API Service
Backend
 API Authentication Node.js
E-commerce Dashboard
Internal Tool
 Full Stack Admin Panel Next.js
CI Pipeline
Infrastructure
 DevOps Automation GitHub Actions
Project Category Primary Tech
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
<div class="overflow-x-auto w-full">
  <table class="table">
    <!-- head -->
    <thead>
      <tr>
        <th>
          <label>
            <input type="checkbox" class="checkbox">
          </label>
        </th>
        <th>Project</th>
        <th>Category</th>
        <th>Primary Tech</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <!-- row 1 -->
      <tr>
        <th>
          <label>
            <input type="checkbox" class="checkbox">
          </label>
        </th>
        <td>
          <div>
            <div class="font-bold">Landing Page Redesign</div>
            <div class="text-sm opacity-50">Production</div>
          </div>
        </td>
        <td>
          Frontend
          
          <span class="badge badge-soft badge-sm">UI / UX</span>
        </td>
        <td>Tailwind CSS</td>
        <th>
          <button class="btn btn-primary btn-xs">details</button>
        </th>
      </tr>

      <!-- row 2 -->
      <tr>
        <th>
          <label>
            <input type="checkbox" class="checkbox">
          </label>
        </th>
        <td>
          <div>
            <div class="font-bold">Auth API Service</div>
            <div class="text-sm opacity-50">Backend</div>
          </div>
        </td>
        <td>
          API
          
          <span class="badge badge-soft badge-sm">Authentication</span>
        </td>
        <td>Node.js</td>
        <th>
          <button class="btn btn-primary btn-xs">details</button>
        </th>
      </tr>

      <!-- row 3 -->
      <tr>
        <th>
          <label>
            <input type="checkbox" class="checkbox">
          </label>
        </th>
        <td>
          <div>
            <div class="font-bold">E-commerce Dashboard</div>
            <div class="text-sm opacity-50">Internal Tool</div>
          </div>
        </td>
        <td>
          Full Stack
          
          <span class="badge badge-soft badge-sm">Admin Panel</span>
        </td>
        <td>Next.js</td>
        <th>
          <button class="btn btn-primary btn-xs">details</button>
        </th>
      </tr>

      <!-- row 4 -->
      <tr>
        <th>
          <label>
            <input type="checkbox" class="checkbox">
          </label>
        </th>
        <td>
          <div>
            <div class="font-bold">CI Pipeline</div>
            <div class="text-sm opacity-50">Infrastructure</div>
          </div>
        </td>
        <td>
          DevOps
          
          <span class="badge badge-soft badge-sm">Automation</span>
        </td>
        <td>GitHub Actions</td>
        <th>
          <button class="btn btn-primary btn-xs">details</button>
        </th>
      </tr>
    </tbody>

    <!-- foot -->
    <tfoot>
      <tr>
        <th></th>
        <th>Project</th>
        <th>Category</th>
        <th>Primary Tech</th>
        <th></th>
      </tr>
    </tfoot>
  </table>
</div>