• Components
  • Table

Table

Name Job Favorite Color
1 Cy Ganderton Quality Control Specialist Blue
2 Hart Hagerty Desktop Support Technician Purple
3 Brice Swyre Tax Accountant Red 
@jrmc.table()
  @slot('header')
    <tr>
      <th></th>
      <th>Name</th>
      <th>Job</th>
      <th>Favorite Color</th>
    </tr>
  @end
  @slot('body')
    <!-- row 1 -->
    <tr class="hover">
      <th>1</th>
      <td>Cy Ganderton</td>
      <td>Quality Control Specialist</td>
      <td>Blue</td>
    </tr>
    <!-- row 2 -->
    <tr class="hover">
      <th>2</th>
      <td>Hart Hagerty</td>
      <td>Desktop Support Technician</td>
      <td>Purple</td>
    </tr>
    <!-- row 3 -->
    <tr class="hover">
      <th>3</th>
      <td>Brice Swyre</td>
      <td>Tax Accountant</td>
      <td>Red</td>
    </tr>
  @end
@end
<div class="overflow-x-auto">
  <table class="table table-md">      <thead>    <tr>
      <th></th>
      <th>Name</th>
      <th>Job</th>
      <th>Favorite Color</th>
    </tr></thead>      <tbody>    <!-- row 1 -->
    <tr class="hover">
      <th>1</th>
      <td>Cy Ganderton</td>
      <td>Quality Control Specialist</td>
      <td>Blue</td>
    </tr>
    <!-- row 2 -->
    <tr class="hover">
      <th>2</th>
      <td>Hart Hagerty</td>
      <td>Desktop Support Technician</td>
      <td>Purple</td>
    </tr>
    <!-- row 3 -->
    <tr class="hover">
      <th>3</th>
      <td>Brice Swyre</td>
      <td>Tax Accountant</td>
      <td>Red</td>
    </tr></tbody>    
  </table>
</div>

Table zebra

Name Job Favorite Color
1 Cy Ganderton Quality Control Specialist Blue
2 Hart Hagerty Desktop Support Technician Purple
3 Brice Swyre Tax Accountant Red
4 Cy Ganderton Quality Control Specialist Blue
5 Hart Hagerty Desktop Support Technician Purple
6 Brice Swyre Tax Accountant Red 
@jrmc.table({ class: 'table-zebra' })
  @slot('header')
    <tr>
      <th></th>
      <th>Name</th>
      <th>Job</th>
      <th>Favorite Color</th>
    </tr>
  @end
  @slot('body')
    <!-- row 1 -->
    <tr>
      <th>1</th>
      <td>Cy Ganderton</td>
      <td>Quality Control Specialist</td>
      <td>Blue</td>
    </tr>
    <!-- row 2 -->
    <tr>
      <th>2</th>
      <td>Hart Hagerty</td>
      <td>Desktop Support Technician</td>
      <td>Purple</td>
    </tr>
    <!-- row 3 -->
    <tr>
      <th>3</th>
      <td>Brice Swyre</td>
      <td>Tax Accountant</td>
      <td>Red</td>
    </tr>
    <!-- row 4 -->
    <tr>
      <th>4</th>
      <td>Cy Ganderton</td>
      <td>Quality Control Specialist</td>
      <td>Blue</td>
    </tr>
    <!-- row 5 -->
    <tr>
      <th>5</th>
      <td>Hart Hagerty</td>
      <td>Desktop Support Technician</td>
      <td>Purple</td>
    </tr>
    <!-- row 6 -->
    <tr>
      <th>6</th>
      <td>Brice Swyre</td>
      <td>Tax Accountant</td>
      <td>Red</td>
    </tr>
  @end
@end
<div class="overflow-x-auto">
  <table class="table table-zebra table-md">      <thead>    <tr>
      <th></th>
      <th>Name</th>
      <th>Job</th>
      <th>Favorite Color</th>
    </tr></thead>      <tbody>    <!-- row 1 -->
    <tr>
      <th>1</th>
      <td>Cy Ganderton</td>
      <td>Quality Control Specialist</td>
      <td>Blue</td>
    </tr>
    <!-- row 2 -->
    <tr>
      <th>2</th>
      <td>Hart Hagerty</td>
      <td>Desktop Support Technician</td>
      <td>Purple</td>
    </tr>
    <!-- row 3 -->
    <tr>
      <th>3</th>
      <td>Brice Swyre</td>
      <td>Tax Accountant</td>
      <td>Red</td>
    </tr>
    <!-- row 4 -->
    <tr>
      <th>4</th>
      <td>Cy Ganderton</td>
      <td>Quality Control Specialist</td>
      <td>Blue</td>
    </tr>
    <!-- row 5 -->
    <tr>
      <th>5</th>
      <td>Hart Hagerty</td>
      <td>Desktop Support Technician</td>
      <td>Purple</td>
    </tr>
    <!-- row 6 -->
    <tr>
      <th>6</th>
      <td>Brice Swyre</td>
      <td>Tax Accountant</td>
      <td>Red</td>
    </tr></tbody>    
  </table>
</div>

Table with visual elements

Name Job Favorite Color
Avatar Tailwind CSS Component
Hart Hagerty
United States
 Zemlak, Daniel and Leannon
Desktop Support Technician 		Purple
Avatar Tailwind CSS Component
Brice Swyre
China
 Carroll Group
Tax Accountant 		Red
Avatar Tailwind CSS Component
Marjy Ferencz
Russia
 Rowe-Schoen
Office Assistant I 		Crimson
Avatar Tailwind CSS Component
Yancy Tear
Brazil
 Wyman-Ledner
Community Outreach Specialist 		Indigo
Name Job Favorite Color 
@jrmc.table({ full: true })
  @slot('header')
    <tr>
      <th>
        <label>
          <input type="checkbox" class="checkbox" />
        </label>
      </th>
      <th>Name</th>
      <th>Job</th>
      <th>Favorite Color</th>
      <th></th>
    </tr>
  @end
  @slot('footer')
    <tr>
      <th></th>
      <th>Name</th>
      <th>Job</th>
      <th>Favorite Color</th>
      <th></th>
    </tr>
  @end
  @slot('body')
    <!-- row 1 -->
    <tr>
      <th>
        <label>
          <input type="checkbox" class="checkbox" />
        </label>
      </th>
      <td>
        <div class="flex items-center space-x-3">
          <div class="avatar">
            <div class="mask mask-squircle w-12 h-12">
              <img src="https://daisyui.com/tailwind-css-component-profile-2@56w.png" alt="Avatar Tailwind CSS Component" />
            </div>
          </div>
          <div>
            <div class="font-bold">Hart Hagerty</div>
            <div class="text-sm opacity-50">United States</div>
          </div>
        </div>
      </td>
      <td>
        Zemlak, Daniel and Leannon
        <br>
        <span class="badge badge-ghost badge-sm">Desktop Support Technician</span>
      </td>
      <td>Purple</td>
      <th>
        <button class="btn btn-ghost btn-xs">details</button>
      </th>
    </tr>
    <!-- row 2 -->
    <tr>
      <th>
        <label>
          <input type="checkbox" class="checkbox" />
        </label>
      </th>
      <td>
        <div class="flex items-center space-x-3">
          <div class="avatar">
            <div class="mask mask-squircle w-12 h-12">
              <img src="https://daisyui.com/tailwind-css-component-profile-3@56w.png" alt="Avatar Tailwind CSS Component" />
            </div>
          </div>
          <div>
            <div class="font-bold">Brice Swyre</div>
            <div class="text-sm opacity-50">China</div>
          </div>
        </div>
      </td>
      <td>
        Carroll Group
        <br>
        <span class="badge badge-ghost badge-sm">Tax Accountant</span>
      </td>
      <td>Red</td>
      <th>
        <button class="btn btn-ghost btn-xs">details</button>
      </th>
    </tr>
    <!-- row 3 -->
    <tr>
      <th>
        <label>
          <input type="checkbox" class="checkbox" />
        </label>
      </th>
      <td>
        <div class="flex items-center space-x-3">
          <div class="avatar">
            <div class="mask mask-squircle w-12 h-12">
              <img src="https://daisyui.com/tailwind-css-component-profile-4@56w.png" alt="Avatar Tailwind CSS Component" />
            </div>
          </div>
          <div>
            <div class="font-bold">Marjy Ferencz</div>
            <div class="text-sm opacity-50">Russia</div>
          </div>
        </div>
      </td>
      <td>
        Rowe-Schoen
        <br>
        <span class="badge badge-ghost badge-sm">Office Assistant I</span>
      </td>
      <td>Crimson</td>
      <th>
        <button class="btn btn-ghost btn-xs">details</button>
      </th>
    </tr>
    <!-- row 4 -->
    <tr>
      <th>
        <label>
          <input type="checkbox" class="checkbox" />
        </label>
      </th>
      <td>
        <div class="flex items-center space-x-3">
          <div class="avatar">
            <div class="mask mask-squircle w-12 h-12">
              <img src="https://daisyui.com/tailwind-css-component-profile-5@56w.png" alt="Avatar Tailwind CSS Component" />
            </div>
          </div>
          <div>
            <div class="font-bold">Yancy Tear</div>
            <div class="text-sm opacity-50">Brazil</div>
          </div>
        </div>
      </td>
      <td>
        Wyman-Ledner
        <br>
        <span class="badge badge-ghost badge-sm">Community Outreach Specialist</span>
      </td>
      <td>Indigo</td>
      <th>
        <button class="btn btn-ghost btn-xs">details</button>
      </th>
    </tr>
  @end
@end
<div class="overflow-x-auto w-full">
  <table class="table table-md w-max">      <thead>    <tr>
      <th>
        <label>
          <input type="checkbox" class="checkbox" />
        </label>
      </th>
      <th>Name</th>
      <th>Job</th>
      <th>Favorite Color</th>
      <th></th>
    </tr></thead>      <tbody>    <!-- row 1 -->
    <tr>
      <th>
        <label>
          <input type="checkbox" class="checkbox" />
        </label>
      </th>
      <td>
        <div class="flex items-center space-x-3">
          <div class="avatar">
            <div class="mask mask-squircle w-12 h-12">
              <img src="https://daisyui.com/tailwind-css-component-profile-2@56w.png" alt="Avatar Tailwind CSS Component" />
            </div>
          </div>
          <div>
            <div class="font-bold">Hart Hagerty</div>
            <div class="text-sm opacity-50">United States</div>
          </div>
        </div>
      </td>
      <td>
        Zemlak, Daniel and Leannon
        <br>
        <span class="badge badge-ghost badge-sm">Desktop Support Technician</span>
      </td>
      <td>Purple</td>
      <th>
        <button class="btn btn-ghost btn-xs">details</button>
      </th>
    </tr>
    <!-- row 2 -->
    <tr>
      <th>
        <label>
          <input type="checkbox" class="checkbox" />
        </label>
      </th>
      <td>
        <div class="flex items-center space-x-3">
          <div class="avatar">
            <div class="mask mask-squircle w-12 h-12">
              <img src="https://daisyui.com/tailwind-css-component-profile-3@56w.png" alt="Avatar Tailwind CSS Component" />
            </div>
          </div>
          <div>
            <div class="font-bold">Brice Swyre</div>
            <div class="text-sm opacity-50">China</div>
          </div>
        </div>
      </td>
      <td>
        Carroll Group
        <br>
        <span class="badge badge-ghost badge-sm">Tax Accountant</span>
      </td>
      <td>Red</td>
      <th>
        <button class="btn btn-ghost btn-xs">details</button>
      </th>
    </tr>
    <!-- row 3 -->
    <tr>
      <th>
        <label>
          <input type="checkbox" class="checkbox" />
        </label>
      </th>
      <td>
        <div class="flex items-center space-x-3">
          <div class="avatar">
            <div class="mask mask-squircle w-12 h-12">
              <img src="https://daisyui.com/tailwind-css-component-profile-4@56w.png" alt="Avatar Tailwind CSS Component" />
            </div>
          </div>
          <div>
            <div class="font-bold">Marjy Ferencz</div>
            <div class="text-sm opacity-50">Russia</div>
          </div>
        </div>
      </td>
      <td>
        Rowe-Schoen
        <br>
        <span class="badge badge-ghost badge-sm">Office Assistant I</span>
      </td>
      <td>Crimson</td>
      <th>
        <button class="btn btn-ghost btn-xs">details</button>
      </th>
    </tr>
    <!-- row 4 -->
    <tr>
      <th>
        <label>
          <input type="checkbox" class="checkbox" />
        </label>
      </th>
      <td>
        <div class="flex items-center space-x-3">
          <div class="avatar">
            <div class="mask mask-squircle w-12 h-12">
              <img src="https://daisyui.com/tailwind-css-component-profile-5@56w.png" alt="Avatar Tailwind CSS Component" />
            </div>
          </div>
          <div>
            <div class="font-bold">Yancy Tear</div>
            <div class="text-sm opacity-50">Brazil</div>
          </div>
        </div>
      </td>
      <td>
        Wyman-Ledner
        <br>
        <span class="badge badge-ghost badge-sm">Community Outreach Specialist</span>
      </td>
      <td>Indigo</td>
      <th>
        <button class="btn btn-ghost btn-xs">details</button>
      </th>
    </tr></tbody>      <tfoot>    <tr>
      <th></th>
      <th>Name</th>
      <th>Job</th>
      <th>Favorite Color</th>
      <th></th>
    </tr></tfoot>    
  </table>
</div>

Table xs

Name Job Favorite Color
1 Cy Ganderton Quality Control Specialist Blue
2 Hart Hagerty Desktop Support Technician Purple
3 Brice Swyre Tax Accountant Red
4 Cy Ganderton Quality Control Specialist Blue
5 Hart Hagerty Desktop Support Technician Purple
6 Brice Swyre Tax Accountant Red 
@jrmc.table({ size: 'xs' })
  @slot('header')
    <tr>
      <th></th>
      <th>Name</th>
      <th>Job</th>
      <th>Favorite Color</th>
    </tr>
  @end
  @slot('body')
    <!-- row 1 -->
    <tr>
      <th>1</th>
      <td>Cy Ganderton</td>
      <td>Quality Control Specialist</td>
      <td>Blue</td>
    </tr>
    <!-- row 2 -->
    <tr class="active">
      <th>2</th>
      <td>Hart Hagerty</td>
      <td>Desktop Support Technician</td>
      <td>Purple</td>
    </tr>
    <!-- row 3 -->
    <tr>
      <th>3</th>
      <td>Brice Swyre</td>
      <td>Tax Accountant</td>
      <td>Red</td>
    </tr>
    <!-- row 4 -->
    <tr>
      <th>4</th>
      <td>Cy Ganderton</td>
      <td>Quality Control Specialist</td>
      <td>Blue</td>
    </tr>
    <!-- row 5 -->
    <tr>
      <th>5</th>
      <td>Hart Hagerty</td>
      <td>Desktop Support Technician</td>
      <td>Purple</td>
    </tr>
    <!-- row 6 -->
    <tr>
      <th>6</th>
      <td>Brice Swyre</td>
      <td>Tax Accountant</td>
      <td>Red</td>
    </tr>
  @end
@end
<div class="overflow-x-auto">
  <table class="table table-xs">      <thead>    <tr>
      <th></th>
      <th>Name</th>
      <th>Job</th>
      <th>Favorite Color</th>
    </tr></thead>      <tbody>    <!-- row 1 -->
    <tr>
      <th>1</th>
      <td>Cy Ganderton</td>
      <td>Quality Control Specialist</td>
      <td>Blue</td>
    </tr>
    <!-- row 2 -->
    <tr class="active">
      <th>2</th>
      <td>Hart Hagerty</td>
      <td>Desktop Support Technician</td>
      <td>Purple</td>
    </tr>
    <!-- row 3 -->
    <tr>
      <th>3</th>
      <td>Brice Swyre</td>
      <td>Tax Accountant</td>
      <td>Red</td>
    </tr>
    <!-- row 4 -->
    <tr>
      <th>4</th>
      <td>Cy Ganderton</td>
      <td>Quality Control Specialist</td>
      <td>Blue</td>
    </tr>
    <!-- row 5 -->
    <tr>
      <th>5</th>
      <td>Hart Hagerty</td>
      <td>Desktop Support Technician</td>
      <td>Purple</td>
    </tr>
    <!-- row 6 -->
    <tr>
      <th>6</th>
      <td>Brice Swyre</td>
      <td>Tax Accountant</td>
      <td>Red</td>
    </tr></tbody>    
  </table>
</div>

Table sm

Name Job Favorite Color
1 Cy Ganderton Quality Control Specialist Blue
2 Hart Hagerty Desktop Support Technician Purple
3 Brice Swyre Tax Accountant Red
4 Cy Ganderton Quality Control Specialist Blue
5 Hart Hagerty Desktop Support Technician Purple
6 Brice Swyre Tax Accountant Red 
@jrmc.table({ size: 'sm' })
  @slot('header')
    <tr>
      <th></th>
      <th>Name</th>
      <th>Job</th>
      <th>Favorite Color</th>
    </tr>
  @end
  @slot('body')
    <!-- row 1 -->
    <tr>
      <th>1</th>
      <td>Cy Ganderton</td>
      <td>Quality Control Specialist</td>
      <td>Blue</td>
    </tr>
    <!-- row 2 -->
    <tr class="active">
      <th>2</th>
      <td>Hart Hagerty</td>
      <td>Desktop Support Technician</td>
      <td>Purple</td>
    </tr>
    <!-- row 3 -->
    <tr>
      <th>3</th>
      <td>Brice Swyre</td>
      <td>Tax Accountant</td>
      <td>Red</td>
    </tr>
    <!-- row 4 -->
    <tr>
      <th>4</th>
      <td>Cy Ganderton</td>
      <td>Quality Control Specialist</td>
      <td>Blue</td>
    </tr>
    <!-- row 5 -->
    <tr>
      <th>5</th>
      <td>Hart Hagerty</td>
      <td>Desktop Support Technician</td>
      <td>Purple</td>
    </tr>
    <!-- row 6 -->
    <tr>
      <th>6</th>
      <td>Brice Swyre</td>
      <td>Tax Accountant</td>
      <td>Red</td>
    </tr>
  @end
@end
<div class="overflow-x-auto">
  <table class="table table-sm">      <thead>    <tr>
      <th></th>
      <th>Name</th>
      <th>Job</th>
      <th>Favorite Color</th>
    </tr></thead>      <tbody>    <!-- row 1 -->
    <tr>
      <th>1</th>
      <td>Cy Ganderton</td>
      <td>Quality Control Specialist</td>
      <td>Blue</td>
    </tr>
    <!-- row 2 -->
    <tr class="active">
      <th>2</th>
      <td>Hart Hagerty</td>
      <td>Desktop Support Technician</td>
      <td>Purple</td>
    </tr>
    <!-- row 3 -->
    <tr>
      <th>3</th>
      <td>Brice Swyre</td>
      <td>Tax Accountant</td>
      <td>Red</td>
    </tr>
    <!-- row 4 -->
    <tr>
      <th>4</th>
      <td>Cy Ganderton</td>
      <td>Quality Control Specialist</td>
      <td>Blue</td>
    </tr>
    <!-- row 5 -->
    <tr>
      <th>5</th>
      <td>Hart Hagerty</td>
      <td>Desktop Support Technician</td>
      <td>Purple</td>
    </tr>
    <!-- row 6 -->
    <tr>
      <th>6</th>
      <td>Brice Swyre</td>
      <td>Tax Accountant</td>
      <td>Red</td>
    </tr></tbody>    
  </table>
</div>

Table lg

Name Job Favorite Color
1 Cy Ganderton Quality Control Specialist Blue
2 Hart Hagerty Desktop Support Technician Purple
3 Brice Swyre Tax Accountant Red
4 Cy Ganderton Quality Control Specialist Blue
5 Hart Hagerty Desktop Support Technician Purple
6 Brice Swyre Tax Accountant Red 
@jrmc.table({ size: 'lg' })
  @slot('header')
    <tr>
      <th></th>
      <th>Name</th>
      <th>Job</th>
      <th>Favorite Color</th>
    </tr>
  @end
  @slot('body')
    <!-- row 1 -->
    <tr>
      <th>1</th>
      <td>Cy Ganderton</td>
      <td>Quality Control Specialist</td>
      <td>Blue</td>
    </tr>
    <!-- row 2 -->
    <tr class="active">
      <th>2</th>
      <td>Hart Hagerty</td>
      <td>Desktop Support Technician</td>
      <td>Purple</td>
    </tr>
    <!-- row 3 -->
    <tr>
      <th>3</th>
      <td>Brice Swyre</td>
      <td>Tax Accountant</td>
      <td>Red</td>
    </tr>
    <!-- row 4 -->
    <tr>
      <th>4</th>
      <td>Cy Ganderton</td>
      <td>Quality Control Specialist</td>
      <td>Blue</td>
    </tr>
    <!-- row 5 -->
    <tr>
      <th>5</th>
      <td>Hart Hagerty</td>
      <td>Desktop Support Technician</td>
      <td>Purple</td>
    </tr>
    <!-- row 6 -->
    <tr>
      <th>6</th>
      <td>Brice Swyre</td>
      <td>Tax Accountant</td>
      <td>Red</td>
    </tr>
  @end
@end
<div class="overflow-x-auto">
  <table class="table table-lg">      <thead>    <tr>
      <th></th>
      <th>Name</th>
      <th>Job</th>
      <th>Favorite Color</th>
    </tr></thead>      <tbody>    <!-- row 1 -->
    <tr>
      <th>1</th>
      <td>Cy Ganderton</td>
      <td>Quality Control Specialist</td>
      <td>Blue</td>
    </tr>
    <!-- row 2 -->
    <tr class="active">
      <th>2</th>
      <td>Hart Hagerty</td>
      <td>Desktop Support Technician</td>
      <td>Purple</td>
    </tr>
    <!-- row 3 -->
    <tr>
      <th>3</th>
      <td>Brice Swyre</td>
      <td>Tax Accountant</td>
      <td>Red</td>
    </tr>
    <!-- row 4 -->
    <tr>
      <th>4</th>
      <td>Cy Ganderton</td>
      <td>Quality Control Specialist</td>
      <td>Blue</td>
    </tr>
    <!-- row 5 -->
    <tr>
      <th>5</th>
      <td>Hart Hagerty</td>
      <td>Desktop Support Technician</td>
      <td>Purple</td>
    </tr>
    <!-- row 6 -->
    <tr>
      <th>6</th>
      <td>Brice Swyre</td>
      <td>Tax Accountant</td>
      <td>Red</td>
    </tr></tbody>    
  </table>
</div>

Table pinned rows

A
Ant-Man
Aquaman
Asterix
The Atom
The Avengers
B
Batgirl
Batman
Batwoman
Black Canary
Black Panther
C
Captain America
Captain Marvel
Catwoman
Conan the Barbarian
D
Daredevil
The Defenders
Doc Savage
Doctor Strange
E
Elektra
F
Fantastic Four
G
Ghost Rider
Green Arrow
Green Lantern
Guardians of the Galaxy
H
Hawkeye
Hellboy
Incredible Hulk
I
Iron Fist
Iron Man
M
Marvelman
R
Robin
The Rocketeer
S
The Shadow
Spider-Man
Sub-Mariner
Supergirl
Superman
T
Teenage Mutant Ninja Turtles
Thor
W
The Wasp
Watchmen
Wolverine
Wonder Woman
X
X-Men
Z
Zatanna
Zatara
 
@jrmc.table({ pinRows: true, height: 96 })
  <thead>
    <tr>
      <th>A</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Ant-Man</td></tr>
    <tr><td>Aquaman</td></tr>
    <tr><td>Asterix</td></tr>
    <tr><td>The Atom</td></tr>
    <tr><td>The Avengers</td></tr>
  </tbody>
  <thead>
    <tr>
      <th>B</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Batgirl</td></tr>
    <tr><td>Batman</td></tr>
    <tr><td>Batwoman</td></tr>
    <tr><td>Black Canary</td></tr>
    <tr><td>Black Panther</td></tr>
  </tbody>
  <thead>
    <tr>
      <th>C</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Captain America</td></tr>
    <tr><td>Captain Marvel</td></tr>
    <tr><td>Catwoman</td></tr>
    <tr><td>Conan the Barbarian</td></tr>
  </tbody>
  <thead>
    <tr>
      <th>D</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Daredevil</td></tr>
    <tr><td>The Defenders</td></tr>
    <tr><td>Doc Savage</td></tr>
    <tr><td>Doctor Strange</td></tr>
  </tbody>
  <thead>
    <tr>
      <th>E</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Elektra</td></tr>
  </tbody>
  <thead>
    <tr>
      <th>F</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Fantastic Four</td></tr>
  </tbody>
  <thead>
    <tr>
      <th>G</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Ghost Rider</td></tr>
    <tr><td>Green Arrow</td></tr>
    <tr><td>Green Lantern</td></tr>
    <tr><td>Guardians of the Galaxy</td></tr>
  </tbody>
  <thead>
    <tr>
      <th>H</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Hawkeye</td></tr>
    <tr><td>Hellboy</td></tr>
    <tr><td>Incredible Hulk</td></tr>
  </tbody>
  <thead>
    <tr>
      <th>I</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Iron Fist</td></tr>
    <tr><td>Iron Man</td></tr>
  </tbody>
  <thead>
    <tr>
      <th>M</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Marvelman</td></tr>
  </tbody>
  <thead>
    <tr>
      <th>R</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Robin</td></tr>
    <tr><td>The Rocketeer</td></tr>
  </tbody>
  <thead>
    <tr>
      <th>S</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>The Shadow</td></tr>
    <tr><td>Spider-Man</td></tr>
    <tr><td>Sub-Mariner</td></tr>
    <tr><td>Supergirl</td></tr>
    <tr><td>Superman</td></tr>
  </tbody>
  <thead>
    <tr>
      <th>T</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Teenage Mutant Ninja Turtles</td></tr>
    <tr><td>Thor</td></tr>
  </tbody>
  <thead>
    <tr>
      <th>W</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>The Wasp</td></tr>
    <tr><td>Watchmen</td></tr>
    <tr><td>Wolverine</td></tr>
    <tr><td>Wonder Woman</td></tr>
  </tbody>
  <thead>
    <tr>
      <th>X</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>X-Men</td></tr>
  </tbody>
  <thead>
    <tr>
      <th>Z</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Zatanna</td></tr>
    <tr><td>Zatara</td></tr>
  </tbody>
@end
<div class="overflow-x-auto h-96">
  <table class="table table-md table-pin-rows">      <thead>
    <tr>
      <th>A</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Ant-Man</td></tr>
    <tr><td>Aquaman</td></tr>
    <tr><td>Asterix</td></tr>
    <tr><td>The Atom</td></tr>
    <tr><td>The Avengers</td></tr>
  </tbody>
  <thead>
    <tr>
      <th>B</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Batgirl</td></tr>
    <tr><td>Batman</td></tr>
    <tr><td>Batwoman</td></tr>
    <tr><td>Black Canary</td></tr>
    <tr><td>Black Panther</td></tr>
  </tbody>
  <thead>
    <tr>
      <th>C</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Captain America</td></tr>
    <tr><td>Captain Marvel</td></tr>
    <tr><td>Catwoman</td></tr>
    <tr><td>Conan the Barbarian</td></tr>
  </tbody>
  <thead>
    <tr>
      <th>D</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Daredevil</td></tr>
    <tr><td>The Defenders</td></tr>
    <tr><td>Doc Savage</td></tr>
    <tr><td>Doctor Strange</td></tr>
  </tbody>
  <thead>
    <tr>
      <th>E</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Elektra</td></tr>
  </tbody>
  <thead>
    <tr>
      <th>F</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Fantastic Four</td></tr>
  </tbody>
  <thead>
    <tr>
      <th>G</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Ghost Rider</td></tr>
    <tr><td>Green Arrow</td></tr>
    <tr><td>Green Lantern</td></tr>
    <tr><td>Guardians of the Galaxy</td></tr>
  </tbody>
  <thead>
    <tr>
      <th>H</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Hawkeye</td></tr>
    <tr><td>Hellboy</td></tr>
    <tr><td>Incredible Hulk</td></tr>
  </tbody>
  <thead>
    <tr>
      <th>I</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Iron Fist</td></tr>
    <tr><td>Iron Man</td></tr>
  </tbody>
  <thead>
    <tr>
      <th>M</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Marvelman</td></tr>
  </tbody>
  <thead>
    <tr>
      <th>R</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Robin</td></tr>
    <tr><td>The Rocketeer</td></tr>
  </tbody>
  <thead>
    <tr>
      <th>S</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>The Shadow</td></tr>
    <tr><td>Spider-Man</td></tr>
    <tr><td>Sub-Mariner</td></tr>
    <tr><td>Supergirl</td></tr>
    <tr><td>Superman</td></tr>
  </tbody>
  <thead>
    <tr>
      <th>T</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Teenage Mutant Ninja Turtles</td></tr>
    <tr><td>Thor</td></tr>
  </tbody>
  <thead>
    <tr>
      <th>W</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>The Wasp</td></tr>
    <tr><td>Watchmen</td></tr>
    <tr><td>Wolverine</td></tr>
    <tr><td>Wonder Woman</td></tr>
  </tbody>
  <thead>
    <tr>
      <th>X</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>X-Men</td></tr>
  </tbody>
  <thead>
    <tr>
      <th>Z</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Zatanna</td></tr>
    <tr><td>Zatara</td></tr>
  </tbody>
  </table>
</div>

Table pinned cols

Name Job company location Last Login Favorite Color
1 Cy Ganderton Quality Control Specialist Littel, Schaden and Vandervort Canada 12/16/2020 Blue 1
2 Hart Hagerty Desktop Support Technician Zemlak, Daniel and Leannon United States 12/5/2020 Purple 2
3 Brice Swyre Tax Accountant Carroll Group China 8/15/2020 Red 3
4 Marjy Ferencz Office Assistant I Rowe-Schoen Russia 3/25/2021 Crimson 4
5 Yancy Tear Community Outreach Specialist Wyman-Ledner Brazil 5/22/2020 Indigo 5
6 Irma Vasilik Editor Wiza, Bins and Emard Venezuela 12/8/2020 Purple 6
7 Meghann Durtnal Staff Accountant IV Schuster-Schimmel Philippines 2/17/2021 Yellow 7
8 Sammy Seston Accountant I O'Hara, Welch and Keebler Indonesia 5/23/2020 Crimson 8
9 Lesya Tinham Safety Technician IV Turner-Kuhlman Philippines 2/21/2021 Maroon 9
10 Zaneta Tewkesbury VP Marketing Sauer LLC Chad 6/23/2020 Green 10
11 Andy Tipple Librarian Hilpert Group Poland 7/9/2020 Indigo 11
12 Sophi Biles Recruiting Manager Gutmann Inc Indonesia 2/12/2021 Maroon 12
13 Florida Garces Web Developer IV Gaylord, Pacocha and Baumbach Poland 5/31/2020 Purple 13
14 Maribeth Popping Analyst Programmer Deckow-Pouros Portugal 4/27/2021 Aquamarine 14
15 Moritz Dryburgh Dental Hygienist Schiller, Cole and Hackett Sri Lanka 8/8/2020 Crimson 15
16 Reid Semiras Teacher Sporer, Sipes and Rogahn Poland 7/30/2020 Green 16
17 Alec Lethby Teacher Reichel, Glover and Hamill China 2/28/2021 Khaki 17
18 Aland Wilber Quality Control Specialist Kshlerin, Rogahn and Swaniawski Czech Republic 9/29/2020 Purple 18
19 Teddie Duerden Staff Accountant III Pouros, Ullrich and Windler France 10/27/2020 Aquamarine 19
20 Lorelei Blackstone Data Coordinator Witting, Kutch and Greenfelder Kazakhstan 6/3/2020 Red 20
Name Job company location Last Login Favorite Color 
<div class="w-96">
@jrmc.table({ pinCols: true, pinRows: true, height: 96, class: 'table-xs' })
  <thead>
    <tr>
      <th></th>
      <td>Name</td>
      <td>Job</td>
      <td>company</td>
      <td>location</td>
      <td>Last Login</td>
      <td>Favorite Color</td>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Cy Ganderton</td>
      <td>Quality Control Specialist</td>
      <td>Littel, Schaden and Vandervort</td>
      <td>Canada</td>
      <td>12/16/2020</td>
      <td>Blue</td>
      <th>1</th>
    </tr>
    <tr>
      <th>2</th>
      <td>Hart Hagerty</td>
      <td>Desktop Support Technician</td>
      <td>Zemlak, Daniel and Leannon</td>
      <td>United States</td>
      <td>12/5/2020</td>
      <td>Purple</td>
      <th>2</th>
    </tr>
    <tr>
      <th>3</th>
      <td>Brice Swyre</td>
      <td>Tax Accountant</td>
      <td>Carroll Group</td>
      <td>China</td>
      <td>8/15/2020</td>
      <td>Red</td>
      <th>3</th>
    </tr>
    <tr>
      <th>4</th>
      <td>Marjy Ferencz</td>
      <td>Office Assistant I</td>
      <td>Rowe-Schoen</td>
      <td>Russia</td>
      <td>3/25/2021</td>
      <td>Crimson</td>
      <th>4</th>
    </tr>
    <tr>
      <th>5</th>
      <td>Yancy Tear</td>
      <td>Community Outreach Specialist</td>
      <td>Wyman-Ledner</td>
      <td>Brazil</td>
      <td>5/22/2020</td>
      <td>Indigo</td>
      <th>5</th>
    </tr>
    <tr>
      <th>6</th>
      <td>Irma Vasilik</td>
      <td>Editor</td>
      <td>Wiza, Bins and Emard</td>
      <td>Venezuela</td>
      <td>12/8/2020</td>
      <td>Purple</td>
      <th>6</th>
    </tr>
    <tr>
      <th>7</th>
      <td>Meghann Durtnal</td>
      <td>Staff Accountant IV</td>
      <td>Schuster-Schimmel</td>
      <td>Philippines</td>
      <td>2/17/2021</td>
      <td>Yellow</td>
      <th>7</th>
    </tr>
    <tr>
      <th>8</th>
      <td>Sammy Seston</td>
      <td>Accountant I</td>
      <td>O'Hara, Welch and Keebler</td>
      <td>Indonesia</td>
      <td>5/23/2020</td>
      <td>Crimson</td>
      <th>8</th>
    </tr>
    <tr>
      <th>9</th>
      <td>Lesya Tinham</td>
      <td>Safety Technician IV</td>
      <td>Turner-Kuhlman</td>
      <td>Philippines</td>
      <td>2/21/2021</td>
      <td>Maroon</td>
      <th>9</th>
    </tr>
    <tr>
      <th>10</th>
      <td>Zaneta Tewkesbury</td>
      <td>VP Marketing</td>
      <td>Sauer LLC</td>
      <td>Chad</td>
      <td>6/23/2020</td>
      <td>Green</td>
      <th>10</th>
    </tr>
    <tr>
      <th>11</th>
      <td>Andy Tipple</td>
      <td>Librarian</td>
      <td>Hilpert Group</td>
      <td>Poland</td>
      <td>7/9/2020</td>
      <td>Indigo</td>
      <th>11</th>
    </tr>
    <tr>
      <th>12</th>
      <td>Sophi Biles</td>
      <td>Recruiting Manager</td>
      <td>Gutmann Inc</td>
      <td>Indonesia</td>
      <td>2/12/2021</td>
      <td>Maroon</td>
      <th>12</th>
    </tr>
    <tr>
      <th>13</th>
      <td>Florida Garces</td>
      <td>Web Developer IV</td>
      <td>Gaylord, Pacocha and Baumbach</td>
      <td>Poland</td>
      <td>5/31/2020</td>
      <td>Purple</td>
      <th>13</th>
    </tr>
    <tr>
      <th>14</th>
      <td>Maribeth Popping</td>
      <td>Analyst Programmer</td>
      <td>Deckow-Pouros</td>
      <td>Portugal</td>
      <td>4/27/2021</td>
      <td>Aquamarine</td>
      <th>14</th>
    </tr>
    <tr>
      <th>15</th>
      <td>Moritz Dryburgh</td>
      <td>Dental Hygienist</td>
      <td>Schiller, Cole and Hackett</td>
      <td>Sri Lanka</td>
      <td>8/8/2020</td>
      <td>Crimson</td>
      <th>15</th>
    </tr>
    <tr>
      <th>16</th>
      <td>Reid Semiras</td>
      <td>Teacher</td>
      <td>Sporer, Sipes and Rogahn</td>
      <td>Poland</td>
      <td>7/30/2020</td>
      <td>Green</td>
      <th>16</th>
    </tr>
    <tr>
      <th>17</th>
      <td>Alec Lethby</td>
      <td>Teacher</td>
      <td>Reichel, Glover and Hamill</td>
      <td>China</td>
      <td>2/28/2021</td>
      <td>Khaki</td>
      <th>17</th>
    </tr>
    <tr>
      <th>18</th>
      <td>Aland Wilber</td>
      <td>Quality Control Specialist</td>
      <td>Kshlerin, Rogahn and Swaniawski</td>
      <td>Czech Republic</td>
      <td>9/29/2020</td>
      <td>Purple</td>
      <th>18</th>
    </tr>
    <tr>
      <th>19</th>
      <td>Teddie Duerden</td>
      <td>Staff Accountant III</td>
      <td>Pouros, Ullrich and Windler</td>
      <td>France</td>
      <td>10/27/2020</td>
      <td>Aquamarine</td>
      <th>19</th>
    </tr>
    <tr>
      <th>20</th>
      <td>Lorelei Blackstone</td>
      <td>Data Coordinator</td>
      <td>Witting, Kutch and Greenfelder</td>
      <td>Kazakhstan</td>
      <td>6/3/2020</td>
      <td>Red</td>
      <th>20</th>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th></th>
      <td>Name</td>
      <td>Job</td>
      <td>company</td>
      <td>location</td>
      <td>Last Login</td>
      <td>Favorite Color</td>
      <th></th>
    </tr>
  </tfoot>
@end
</div>
<div class="w-96"><div class="overflow-x-auto h-96">
  <table class="table table-xs table-md table-pin-rows table-pin-cols">      <thead>
    <tr>
      <th></th>
      <td>Name</td>
      <td>Job</td>
      <td>company</td>
      <td>location</td>
      <td>Last Login</td>
      <td>Favorite Color</td>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Cy Ganderton</td>
      <td>Quality Control Specialist</td>
      <td>Littel, Schaden and Vandervort</td>
      <td>Canada</td>
      <td>12/16/2020</td>
      <td>Blue</td>
      <th>1</th>
    </tr>
    <tr>
      <th>2</th>
      <td>Hart Hagerty</td>
      <td>Desktop Support Technician</td>
      <td>Zemlak, Daniel and Leannon</td>
      <td>United States</td>
      <td>12/5/2020</td>
      <td>Purple</td>
      <th>2</th>
    </tr>
    <tr>
      <th>3</th>
      <td>Brice Swyre</td>
      <td>Tax Accountant</td>
      <td>Carroll Group</td>
      <td>China</td>
      <td>8/15/2020</td>
      <td>Red</td>
      <th>3</th>
    </tr>
    <tr>
      <th>4</th>
      <td>Marjy Ferencz</td>
      <td>Office Assistant I</td>
      <td>Rowe-Schoen</td>
      <td>Russia</td>
      <td>3/25/2021</td>
      <td>Crimson</td>
      <th>4</th>
    </tr>
    <tr>
      <th>5</th>
      <td>Yancy Tear</td>
      <td>Community Outreach Specialist</td>
      <td>Wyman-Ledner</td>
      <td>Brazil</td>
      <td>5/22/2020</td>
      <td>Indigo</td>
      <th>5</th>
    </tr>
    <tr>
      <th>6</th>
      <td>Irma Vasilik</td>
      <td>Editor</td>
      <td>Wiza, Bins and Emard</td>
      <td>Venezuela</td>
      <td>12/8/2020</td>
      <td>Purple</td>
      <th>6</th>
    </tr>
    <tr>
      <th>7</th>
      <td>Meghann Durtnal</td>
      <td>Staff Accountant IV</td>
      <td>Schuster-Schimmel</td>
      <td>Philippines</td>
      <td>2/17/2021</td>
      <td>Yellow</td>
      <th>7</th>
    </tr>
    <tr>
      <th>8</th>
      <td>Sammy Seston</td>
      <td>Accountant I</td>
      <td>O'Hara, Welch and Keebler</td>
      <td>Indonesia</td>
      <td>5/23/2020</td>
      <td>Crimson</td>
      <th>8</th>
    </tr>
    <tr>
      <th>9</th>
      <td>Lesya Tinham</td>
      <td>Safety Technician IV</td>
      <td>Turner-Kuhlman</td>
      <td>Philippines</td>
      <td>2/21/2021</td>
      <td>Maroon</td>
      <th>9</th>
    </tr>
    <tr>
      <th>10</th>
      <td>Zaneta Tewkesbury</td>
      <td>VP Marketing</td>
      <td>Sauer LLC</td>
      <td>Chad</td>
      <td>6/23/2020</td>
      <td>Green</td>
      <th>10</th>
    </tr>
    <tr>
      <th>11</th>
      <td>Andy Tipple</td>
      <td>Librarian</td>
      <td>Hilpert Group</td>
      <td>Poland</td>
      <td>7/9/2020</td>
      <td>Indigo</td>
      <th>11</th>
    </tr>
    <tr>
      <th>12</th>
      <td>Sophi Biles</td>
      <td>Recruiting Manager</td>
      <td>Gutmann Inc</td>
      <td>Indonesia</td>
      <td>2/12/2021</td>
      <td>Maroon</td>
      <th>12</th>
    </tr>
    <tr>
      <th>13</th>
      <td>Florida Garces</td>
      <td>Web Developer IV</td>
      <td>Gaylord, Pacocha and Baumbach</td>
      <td>Poland</td>
      <td>5/31/2020</td>
      <td>Purple</td>
      <th>13</th>
    </tr>
    <tr>
      <th>14</th>
      <td>Maribeth Popping</td>
      <td>Analyst Programmer</td>
      <td>Deckow-Pouros</td>
      <td>Portugal</td>
      <td>4/27/2021</td>
      <td>Aquamarine</td>
      <th>14</th>
    </tr>
    <tr>
      <th>15</th>
      <td>Moritz Dryburgh</td>
      <td>Dental Hygienist</td>
      <td>Schiller, Cole and Hackett</td>
      <td>Sri Lanka</td>
      <td>8/8/2020</td>
      <td>Crimson</td>
      <th>15</th>
    </tr>
    <tr>
      <th>16</th>
      <td>Reid Semiras</td>
      <td>Teacher</td>
      <td>Sporer, Sipes and Rogahn</td>
      <td>Poland</td>
      <td>7/30/2020</td>
      <td>Green</td>
      <th>16</th>
    </tr>
    <tr>
      <th>17</th>
      <td>Alec Lethby</td>
      <td>Teacher</td>
      <td>Reichel, Glover and Hamill</td>
      <td>China</td>
      <td>2/28/2021</td>
      <td>Khaki</td>
      <th>17</th>
    </tr>
    <tr>
      <th>18</th>
      <td>Aland Wilber</td>
      <td>Quality Control Specialist</td>
      <td>Kshlerin, Rogahn and Swaniawski</td>
      <td>Czech Republic</td>
      <td>9/29/2020</td>
      <td>Purple</td>
      <th>18</th>
    </tr>
    <tr>
      <th>19</th>
      <td>Teddie Duerden</td>
      <td>Staff Accountant III</td>
      <td>Pouros, Ullrich and Windler</td>
      <td>France</td>
      <td>10/27/2020</td>
      <td>Aquamarine</td>
      <th>19</th>
    </tr>
    <tr>
      <th>20</th>
      <td>Lorelei Blackstone</td>
      <td>Data Coordinator</td>
      <td>Witting, Kutch and Greenfelder</td>
      <td>Kazakhstan</td>
      <td>6/3/2020</td>
      <td>Red</td>
      <th>20</th>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th></th>
      <td>Name</td>
      <td>Job</td>
      <td>company</td>
      <td>location</td>
      <td>Last Login</td>
      <td>Favorite Color</td>
      <th></th>
    </tr>
  </tfoot>
  </table>
</div>
</div>