edge-components

Table: Pinned Cols 

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

Table

Doc : daisyui table

Table can be used to show a list of data in a table format.

Class name Type
table Component For <table> element
table-zebra Modifier For the active tab
active Modifier For <tr> to highlight current row
hover Modifier For <tr> to highlight current row on hover
table-pin-rows Modifier For <table> to make all the rows inside <thead> and <tfoot> sticky
table-pin-cols Modifier For <table> to make all the <th> columns sticky
table-xs Responsive Extra small size
table-sm Responsive Small size
table-md Responsive Normal size
table-lg Responsive Large size