edge-components

Table: With Visual Elements 

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

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