Table

Tailwind CSS and Alpine JS Table

Tables are a great way to display large amounts of data in a visually appealing format. They can be used to display information such as names, prices, and quantities.

Default table

A table with a header and body.

CustomerID Name Email Membership
2335 Alice Brown alice.brown@gmail.com Silver
2338 Bob Johnson johnson.bob@outlook.com Gold
2342 Sarah Adams s.adams@gmail.com Gold
HTML 
<div class="">
    <table class="">
        <thead class="">
            <tr>
                <th scope="col" class="">CustomerID</th>
                <th scope="col" class="">Name</th>
                <th scope="col" class="">Email</th>
                <th scope="col" class="">Membership</th>
            </tr>
        </thead>
        <tbody class="">
                <tr>
                    <td class="">2335</td>
                    <td class="">Alice Brown</td>
                    <td class="">alice.brown@gmail.com</td>
                    <td class="">Silver</td>
                </tr>
                <tr>
                    <td class="">2338</td>
                    <td class="">Bob Johnson</td>
                    <td class="">johnson.bob@outlook.com</td>
                    <td class="">Gold</td>
                </tr>
                <tr>
                    <td class="">2342</td>
                    <td class="">Sarah Adams</td>
                    <td class="">s.adams@gmail.com</td>
                    <td class="">Gold</td>
                </tr>
        </tbody>
    </table>
</div>

Table with action

A table with a header, body, and action column.

CustomerID Name Email Action
2335 Alice Brown alice.brown@gmail.com
2338 Bob Johnson johnson.bob@outlook.com
2342 Sarah Adams s.adams@gmail.com
HTML 
<div class="">
    <table class="">
        <thead class="">
            <tr>
                <th scope="col" class="">CustomerID</th>
                <th scope="col" class="">Name</th>
                <th scope="col" class="">Email</th>
                <th scope="col" class="">Membership</th>
            </tr>
        </thead>
        <tbody class="">
                <tr>
                    <td class="">2335</td>
                    <td class="">Alice Brown</td>
                    <td class="">alice.brown@gmail.com</td>
                    <td class=""><button type="button" class="">Edit</button></td>
                </tr>
                <tr>
                    <td class="">2338</td>
                    <td class="">Bob Johnson</td>
                    <td class="">johnson.bob@outlook.com</td>
                    <td class=""><button type="button" class="">Edit</button></td>
                </tr>
                <tr>
                    <td class="">2342</td>
                    <td class="">Sarah Adams</td>
                    <td class="">s.adams@gmail.com</td>
                    <td class=""><button type="button" class="">Edit</button></td>
                </tr>
        </tbody>
    </table>
</div>

Striped table

A table with alternating row colors. Also known as zebra striped table.

CustomerID Name Email Membership
2335 Alice Brown alice.brown@penguinui.com Silver
2338 Bob Johnson johnson.bob@penguinui.com Gold
2342 Sarah Adams s.adams@penguinui.com Gold
2345 Alex Martinez alex.martinez@penguinui.com Gold
2346 Ryan Thompson ryan.thompson@penguinui.com Silver
2349 Emily Rodriguez emily.rodriguez@penguinui.com Gold
HTML 
<div class="">
    <table class="">
        <thead class="">
            <tr>
                <th scope="col" class="">CustomerID</th>
                <th scope="col" class="">Name</th>
                <th scope="col" class="">Email</th>
                <th scope="col" class="">Membership</th>
            </tr>
        </thead>
        <tbody class="">
                <tr class="">
                    <td class="">2335</td>
                    <td class="">Alice Brown</td>
                    <td class="">alice.brown@penguinui.com</td>
                    <td class="">Silver</td>
                </tr>
                <tr class="">
                    <td class="">2338</td>
                    <td class="">Bob Johnson</td>
                    <td class="">johnson.bob@penguinui.com</td>
                    <td class="">Gold</td>
                </tr>
                <tr class="">
                    <td class="">2342</td>
                    <td class="">Sarah Adams</td>
                    <td class="">s.adams@penguinui.com</td>
                    <td class="">Gold</td>
                </tr>
                <tr class="">
                    <td class="">2345</td>
                    <td class="">Alex Martinez</td>
                    <td class="">alex.martinez@penguinui.com</td>
                    <td class="">Gold</td>
                </tr>
                <tr class="">
                    <td class="">2346</td>
                    <td class="">Ryan Thompson</td>
                    <td class="">ryan.thompson@penguinui.com</td>
                    <td class="">Silver</td>
                </tr>
                <tr class="">
                    <td class="">2349</td>
                    <td class="">Emily Rodriguez</td>
                    <td class="">emily.rodriguez@penguinui.com</td>
                    <td class="">Gold</td>
                </tr>
        </tbody>
    </table>
</div>

Users table

A table displaying user information with avatar, status indicator, and action.

User ID Member Since Status Action
user avatar
Alice Brown alice.brown@gmail.com
2335 Nov 14, 2021 Active
user avatar
Bob Johnson johnson.bob@penguinui.com
2338 Aug 20, 2020 Active
user avatar
Ryan Thompson ryan.thompson@penguinui.com
2346 Feb 5, 2022 Canceled
user avatar
Emily Rodriguez emily.rodriguez@penguinui.com
2349 Jun 14, 2022 Active
user avatar
Alex Martinez alex.martinez@penguinui.com
2345 Sep 17, 2018 Active
HTML 
<div class="">
    <table class="">
        <thead class="">
            <tr>
                <th scope="col" class="">User</th>
                <th scope="col" class="">ID</th>
                <th scope="col" class="">Member Since</th>
                <th scope="col" class="">Status</th>
                <th scope="col" class="">Action</th>
            </tr>
        </thead>
        <tbody class="">
            <tr>
                <td class="">
                    <div class="">
                        <img class="" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="user avatar" />
                        <div class="">
                            <span class="">Alice Brown</span>
                            <span class="">alice.brown@gmail.com</span>
                        </div>
                    </div>
                </td>
                <td class="">2335</td>
                <td class="">Nov 14, 2021</td>
                <td class=""><span class="">Active</span></td>
                <td class=""><button type="button" class="">Edit</button></td>
            </tr>
            <tr>
                <td class="">
                    <div class="">
                        <img class="" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-1.webp" alt="user avatar" />
                        <div class="">
                            <span class="">Bob Johnson</span>
                            <span class="">johnson.bob@penguinui.com</span>
                        </div>
                    </div>
                </td>
                <td class="">2338</td>
                <td class="">Aug 20, 2020</td>
                <td class=""><span class="">Active</span></td>
                <td class=""><button type="button" class="">Edit</button></td>
            </tr>
            <tr>
                <td class="">
                    <div class="">
                        <img class="" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-2.webp" alt="user avatar" />
                        <div class="">
                            <span class="">Ryan Thompson</span>
                            <span class="">ryan.thompson@penguinui.com</span>
                        </div>
                    </div>
                </td>
                <td class="">2346</td>
                <td class="">Feb 5, 2022</td>
                <td class=""><span class="">Canceled</span></td>
                <td class=""><button type="button" class="">Edit</button></td>
            </tr>
            <tr>
                <td class="">
                    <div class="">
                        <img class="" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-4.webp" alt="user avatar" />
                        <div class="">
                            <span class="">Emily Rodriguez</span>
                            <span class="">emily.rodriguez@penguinui.com</span>
                        </div>
                    </div>
                </td>
                <td class="">2349</td>
                <td class="">Jun 14, 2022</td>
                <td class=""><span class="">Active</span></td>
                <td class=""><button type="button" class="">Edit</button></td>
            </tr>
            <tr>
                <td class="">
                    <div class="">
                        <img class="" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-7.webp" alt="user avatar" />
                        <div class="">
                            <span class="">Alex Martinez</span>
                            <span class="">alex.martinez@penguinui.com</span>
                        </div>
                    </div>
                </td>
                <td class="">2345</td>
                <td class="">Sep 17, 2018</td>
                <td class=""><span class="">Active</span></td>
                <td class=""><button type="button" class="">Edit</button></td>
            </tr>
        </tbody>
    </table>
</div>

Table with checkbox

Requires Alpine JS

A table featuring a checkbox for selecting individual or all rows.

CustomerID Name Email Action
2335 Alice Brown alice.brown@gmail.com
2338 Bob Johnson johnson.bob@outlook.com
2342 Sarah Adams s.adams@gmail.com
HTML 
<div class="">
    <table class="">
        <thead class="">
            <tr>
                <th scope="col" class="">
                    <label for="checkAll" class="">
                        <div class="">
                            <input type="checkbox" id="checkAll" class="" />
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
                            </svg>
                        </div>
                    </label>
                </th>
                <th scope="col" class="">CustomerID</th>
                <th scope="col" class="">Name</th>
                <th scope="col" class="">Email</th>
                <th scope="col" class="">Membership</th>
            </tr>
        </thead>
        <tbody class="">
            <tr>
                <td class="">
                    <label for="user2335" class="">
                        <div class="">
                            <input type="checkbox" id="user2335" class=""  />
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
                            </svg>
                        </div>
                    </label>
                </td>
                <td class="">2335</td>
                <td class="">Alice Brown</td>
                <td class="">alice.brown@gmail.com</td>
                <td class=""><button type="button" class="">Edit</button></td>
            </tr>
            <tr>
                <td class="">
                    <label for="user2338" class="">
                        <div class="">
                            <input type="checkbox" id="user2338" class=""  />
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
                            </svg>
                        </div>
                    </label>
                </td>
                <td class="">2338</td>
                <td class="">Bob Johnson</td>
                <td class="">johnson.bob@outlook.com</td>
                <td class=""><button type="button" class="">Edit</button></td>
            </tr>
            <tr>
                <td class="">
                    <label for="user2342" class="">
                        <div class="">
                            <input type="checkbox" id="user2342" class=""  />
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
                            </svg>
                        </div>
                    </label>
                </td>
                <td class="">2342</td>
                <td class="">Sarah Adams</td>
                <td class="">s.adams@gmail.com</td>
                <td class=""><button type="button" class="">Edit</button></td>
            </tr>
        </tbody>
    </table>
</div>

Data

List of all Alpine JS data used in this component.

Property Description
checkAll Boolean - Checks all the checkboxes

Keyboard Navigation

Key Action
Tab Next focusable element gets the focus
Space Focused item gets selected