Kaiko UI Kaiko UI

Table

Stable

Responsive table component with various styles, sizes, and pinning options using DaisyUI.

API Reference

Attribute Description Type Default
size Table size variant string "md"
zebra Applies alternating row background colours boolean False
pinRows Makes header rows sticky within a scrollable container boolean False
pinCols Makes the first column sticky within a scrollable container boolean False
container_class Extra CSS classes applied to the outer scrollable wrapper div string ""

c-table.row

Attribute Description Type Default
hover Applies a highlight on row hover boolean False

c-table.cell

Attribute Description Type Default
header Renders the cell as a <th> instead of <td> boolean False
first Marks this as the first cell in a row (used for sticky column styling) boolean False
trimmed Removes cell padding for compact inline content boolean False

c-table.column-header

Attribute Description Type Default
sortable Renders a sort toggle button inside the header cell boolean False
sorted Current sort direction for this column — asc, desc, or empty string ""
info Tooltip text shown in an info icon next to the header label string ""
hx HTMX attributes passed to the sort button for server-side sort requests string ""
first Marks this as the first header cell (used for sticky column styling) boolean False

c-table.selection-checkbox

Attribute Description Type Default
all When set, renders a "select all" checkbox in the header row string ""
value Row identifier value submitted with the checkbox for row selection string ""

size

xs sm md lg xl

Accessibility

Caption: add a <caption> element as the first child of the table to give it an accessible name. This is announced by screen readers when the user navigates to the table.

Scope: use scope="col" on <th> elements in the header row and scope="row" on row-header cells so assistive technology can associate cells with their headers.

Pinned columns: when using pinCols ensure the sticky column still has correct header association so keyboard and screen reader navigation across rows remains coherent.

Examples

Usage 


<c-table>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Job</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cy Ganderton</td>
      <td>Quality Control Specialist</td>
    </tr>
  </tbody>
</c-table>

Basic Table

# Name Job Favorite Color
1 Cy Ganderton Quality Control Specialist Blue
2 Hart Hagerty Desktop Support Technician Purple
3 Brice Swyre Tax Accountant Red 
<c-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>
    <!-- more rows... -->
  </tbody>
</c-table>

Zebra Stripes

# Name Job Favorite Color
1 Cy Ganderton Quality Control Specialist Blue
2 Hart Hagerty Desktop Support Technician Purple
3 Brice Swyre Tax Accountant Red 
<c-table zebra>
  ...
</c-table>

Sizes

xs

# Name Job
1 Cy Ganderton Quality Control Specialist
2 Hart Hagerty Desktop Support Technician

sm

# Name Job
1 Cy Ganderton Quality Control Specialist
2 Hart Hagerty Desktop Support Technician

lg

# Name Job
1 Cy Ganderton Quality Control Specialist
2 Hart Hagerty Desktop Support Technician 
<c-table size="xs">...</c-table>
<c-table size="sm">...</c-table>
<c-table size="lg">...</c-table>
<c-table size="xl">...</c-table>

Pinned Rows (Sticky Header)

# Name Job
1 Cy Ganderton Quality Control Specialist
2 Hart Hagerty Desktop Support Technician
3 Brice Swyre Tax Accountant
4 Yancy Tear Senior Sales Associate
5 Irene Collins VP Marketing
6 Mabel Rhodes Product Manager 
<div class="h-40 overflow-y-auto">
  <c-table pinRows>
    ...
  </c-table>
</div>