edge-components

Table: Zebra 

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

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