Skip to main content
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.

Komponen tabel mengatur dan menampilkan data terstruktur dalam baris dan kolom. Dibuat dengan elemen tabel HTML semantik dan gaya Tailwind CSS, tabel mendukung pengurutan, baris bergaris, efek hover, dan penanganan luapan yang responsif. Sistem tabel Frutjam dapat diakses dengan asosiasi header yang tepat dan bekerja secara lancar dengan kerangka visualisasi data.

Hanya CSS, tidak diperlukan JavaScript. WCAG AA dapat diakses dan tidak memiliki kerangka kerja — bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

Kelas Jenis Keterangan
tableBasisTabel HTML bergaya dengan spasi yang konsisten
table-zebraGayaWarna latar belakang baris bergantian
table-zebra-rowsGayaLatar belakang baris bergantian hanya pada baris badan saja
table-zebra-colsGayaWarna latar belakang kolom bergantian
table-hoverGayaMenyorot baris saat mengarahkan kursor
table-pin-rowsPengubahMenempel baris header dan footer saat menggulir
table-pin-colsPengubahMenempel kolom pertama dan terakhir saat menggulir
table-xsUkuranBantalan baris ekstra kecil
table-smUkuranBantalan baris kecil
table-mdUkuranPadding baris sedang (default)
table-lgUkuranBantalan baris besar
table-xlUkuranBantalan baris ekstra besar

Meja

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>

Ukuran meja

Tabel ekstra kecil (tabel-xs)

Pada contoh ukuran tabel di bawah ini, kita menggunakan table-xs (ekstra kecil). Anda dapat menyesuaikan ukuran tabel menggunakan kelas utilitas table-{size}, termasuk table-xs, table-sm, table-md, table-lg, dan table-xl, yang berkisar dari tata letak ekstra ringkas hingga tabel yang lebih luas dan mudah dibaca.

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>

Baris tabel zebra (bergaris).

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>

Kolom tabel zebra (bergaris).

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>

Tabel menyoroti baris saat mengarahkan kursor

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>

Tabel dengan baris header yang melekat (disematkan).

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>

Tabel tetap (disematkan) kolom gulir horizontal

# 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>

Baris kolom yang disematkan pada tabel

# 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>

Tabel dengan pilihan Kotak Centang

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>