Skip to main content
Frutjam logo Frutjam
v2.1.1
Theme

Table Component

A semantic, accessible data table component built with native HTML and Tailwind CSS. Display structured data with striped rows, sticky headers, and compact sizing options. Supports horizontal scrolling, hover states, and sorting patterns for professional, responsive data presentation.

Table components organize and display structured data in rows and columns. Built with semantic HTML table elements and Tailwind CSS styling, tables support sorting, striped rows, hover effects, and responsive overflow handling. The Frutjam table system is accessible with proper header associations and works seamlessly with data visualization frameworks.

Class Type Description
tableBaseStyled HTML table with consistent spacing
table-zebraStyleAlternating row background colors
table-zebra-rowsStyleAlternating row background on tbody rows only
table-zebra-colsStyleAlternating column background colors
table-hoverStyleHighlights rows on hover
table-pin-rowsModifierSticks header and footer rows while scrolling
table-pin-colsModifierSticks first and last columns while scrolling
table-xsSizeExtra small row padding
table-smSizeSmall row padding
table-mdSizeMedium row padding (default)
table-lgSizeLarge row padding
table-xlSizeExtra large row padding

Table

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>

Table sizes

Table extra small (table-xs)

In the table size example below, we use table-xs (extra small). You can adjust the table size using the table-{size} utility classes, including table-xs, table-sm, table-md, table-lg, and table-xl, which range from extra-compact layouts to more spacious, readable tables.

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>

Table zebra (striped) rows

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>

Table zebra (striped) columns

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>

Table highlights row on hover

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>

Table with sticky (pinned) header rows

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>

Table fixed (pinned) columns horizontal scroll

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

Table pinned columns rows

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

Table with Checkbox selection

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>