Check out BugBytes overview of labb
UI

Search

Search features are coming soon!

Table

<c-lb.table /> Markdown

Table component for Django: render data tables with sorting and styling. Built with django-cotton, Tailwind CSS, and daisyUI 5.

Basic Table

# Name Job Favorite Color
1 Cy Ganderton Quality Control Specialist Blue
2 Hart Hagerty Desktop Support Technician Purple 
<div class="overflow-x-auto bg-base-100 rounded-lg shadow p-4 border border-base-200">
    <c-lb.table>
        <thead>
            <tr>
                <th>#</th>
                <th>Name</th>
                <th>Job</th>
                <th>Favorite Color</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>1</th>
                <td>Cy Ganderton</td>
                <td>Quality Control Specialist</td>
                <td>Blue</td>
            </tr>
            <tr>
                <th>2</th>
                <td>Hart Hagerty</td>
                <td>Desktop Support Technician</td>
                <td>Purple</td>
            </tr>
        </tbody>
    </c-lb.table>
</div>

Zebra Table

# Name Job Favorite Color
1 Cy Ganderton Quality Control Specialist Blue
2 Hart Hagerty Desktop Support Technician Purple 
<div class="overflow-x-auto bg-base-100 rounded-lg shadow p-4 border border-base-200">
    <c-lb.table zebra>
        <thead>
            <tr>
                <th>#</th>
                <th>Name</th>
                <th>Job</th>
                <th>Favorite Color</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>1</th>
                <td>Cy Ganderton</td>
                <td>Quality Control Specialist</td>
                <td>Blue</td>
            </tr>
            <tr>
                <th>2</th>
                <td>Hart Hagerty</td>
                <td>Desktop Support Technician</td>
                <td>Purple</td>
            </tr>
        </tbody>
    </c-lb.table>
</div>

Pinned Rows and Columns

# Name Job Favorite Color Department Salary Location
1 Cy Ganderton Quality Control Specialist Blue Engineering $75,000 New York
2 Hart Hagerty Desktop Support Technician Purple IT Support $55,000 Chicago
3 Brice Swyre Tax Accountant Red Finance $65,000 Los Angeles
4 Marjy Ferencz Office Assistant I Green Administration $45,000 Houston
5 Yancy Tear Community Outreach Specialist Yellow Marketing $60,000 Phoenix
6 Irma Vasilik Editor Orange Content $70,000 Philadelphia
7 Meghann Durtnal Staff Accountant IV Pink Finance $80,000 San Antonio
8 Sammy Seston Accountant I Indigo Finance $50,000 San Diego
9 Lesya Tinham Safety Technician IV Teal Operations $55,000 Dallas
10 Zaneta Tewkesbury VP Marketing Gray Marketing $120,000 San Jose 
<div class="h-64 max-w-100 mx-auto bg-base-100 rounded-lg shadow p-4 overflow-auto border border-base-200">
    <c-lb.table pinRows pinCols size="sm">
        <thead>
            <tr>
                <th>#</th>
                <th>Name</th>
                <th>Job</th>
                <th>Favorite Color</th>
                <th>Department</th>
                <th>Salary</th>
                <th>Location</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>1</th>
                <td>Cy Ganderton</td>
                <td>Quality Control Specialist</td>
                <td>Blue</td>
                <td>Engineering</td>
                <td>$75,000</td>
                <td>New York</td>
            </tr>
            <tr>
                <th>2</th>
                <td>Hart Hagerty</td>
                <td>Desktop Support Technician</td>
                <td>Purple</td>
                <td>IT Support</td>
                <td>$55,000</td>
                <td>Chicago</td>
            </tr>
            <tr>
                <th>3</th>
                <td>Brice Swyre</td>
                <td>Tax Accountant</td>
                <td>Red</td>
                <td>Finance</td>
                <td>$65,000</td>
                <td>Los Angeles</td>
            </tr>
            <tr>
                <th>4</th>
                <td>Marjy Ferencz</td>
                <td>Office Assistant I</td>
                <td>Green</td>
                <td>Administration</td>
                <td>$45,000</td>
                <td>Houston</td>
            </tr>
            <tr>
                <th>5</th>
                <td>Yancy Tear</td>
                <td>Community Outreach Specialist</td>
                <td>Yellow</td>
                <td>Marketing</td>
                <td>$60,000</td>
                <td>Phoenix</td>
            </tr>
            <tr>
                <th>6</th>
                <td>Irma Vasilik</td>
                <td>Editor</td>
                <td>Orange</td>
                <td>Content</td>
                <td>$70,000</td>
                <td>Philadelphia</td>
            </tr>
            <tr>
                <th>7</th>
                <td>Meghann Durtnal</td>
                <td>Staff Accountant IV</td>
                <td>Pink</td>
                <td>Finance</td>
                <td>$80,000</td>
                <td>San Antonio</td>
            </tr>
            <tr>
                <th>8</th>
                <td>Sammy Seston</td>
                <td>Accountant I</td>
                <td>Indigo</td>
                <td>Finance</td>
                <td>$50,000</td>
                <td>San Diego</td>
            </tr>
            <tr>
                <th>9</th>
                <td>Lesya Tinham</td>
                <td>Safety Technician IV</td>
                <td>Teal</td>
                <td>Operations</td>
                <td>$55,000</td>
                <td>Dallas</td>
            </tr>
            <tr>
                <th>10</th>
                <td>Zaneta Tewkesbury</td>
                <td>VP Marketing</td>
                <td>Gray</td>
                <td>Marketing</td>
                <td>$120,000</td>
                <td>San Jose</td>
            </tr>
        </tbody>
    </c-lb.table>
</div>

Table Sizes

Small Table

# Name Job
1 Cy Ganderton Quality Control

Large Table

# Name Job
1 Cy Ganderton Quality Control Specialist 
<div class="space-y-6">
  <div>
    <h4 class="text-sm font-medium mb-2">Small Table</h4>
    <div class="overflow-x-auto bg-base-100 rounded-lg shadow p-4 border border-base-200">
        <c-lb.table size="sm">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Name</th>
                    <th>Job</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>1</th>
                    <td>Cy Ganderton</td>
                    <td>Quality Control</td>
                </tr>
            </tbody>
        </c-lb.table>
    </div>
  </div>

  <div>
    <h4 class="text-sm font-medium mb-2">Large Table</h4>
    <div class="overflow-x-auto bg-base-100 rounded-lg shadow p-4 border border-base-200">
        <c-lb.table size="lg">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Name</th>
                    <th>Job</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>1</th>
                    <td>Cy Ganderton</td>
                    <td>Quality Control Specialist</td>
                </tr>
            </tbody>
        </c-lb.table>
    </div>
  </div>
</div>

API Reference

c-lb.table

Property Type Default Required Description
class string - No Additional CSS classes to apply
size
xs sm md lg xl
md No Table size
zebra boolean False No Enable zebra striping
pinRows boolean False No Pin thead/tfoot rows
pinCols boolean False No Pin th columns
Slot Name Description
default Table content using standard HTML table elements (thead, tbody, tr, th, td)
Prev Stat
Next Text Rotate