DocsComponentsTable

Table

A responsive table and its parts.

7 files

<pb-ui.table>
  <pb-ui.table-caption>A list of your recent invoices.</pb-ui.table-caption>
  <pb-ui.table-header>
    <pb-ui.table-row>
      <pb-ui.table-head>Invoice</pb-ui.table-head>
      <pb-ui.table-head>Status</pb-ui.table-head>
      <pb-ui.table-head>Method</pb-ui.table-head>
      <pb-ui.table-head class="text-right">Amount</pb-ui.table-head>
    </pb-ui.table-row>
  </pb-ui.table-header>
  <pb-ui.table-body>
    @for(invoice in invoices)
    <pb-ui.table-row>
      <pb-ui.table-cell class="font-medium">{{ invoice.id }}</pb-ui.table-cell>
      <pb-ui.table-cell>{{ invoice.status }}</pb-ui.table-cell>
      <pb-ui.table-cell>{{ invoice.method }}</pb-ui.table-cell>
      <pb-ui.table-cell class="text-right">{{ invoice.amount }}</pb-ui.table-cell>
    </pb-ui.table-row>
    @endfor
  </pb-ui.table-body>
</pb-ui.table>

Installation

pyblade-ui add table

Copy these files into your project

components/ui/table.html

<div data-slot="table-container" class="relative w-full overflow-x-auto">
  <table data-slot="table" {{ attributes.cn("w-full caption-bottom text-sm") }}>{{ slot }}</table>
</div>

components/ui/table_header.html

<thead data-slot="table-header" {{ attributes.cn("[&_tr]:border-b") }}>{{ slot }}</thead>

components/ui/table_body.html

<tbody data-slot="table-body" {{ attributes.cn("[&_tr:last-child]:border-0") }}>{{ slot }}</tbody>

components/ui/table_row.html

<tr data-slot="table-row" {{ attributes.cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted") }}>{{ slot }}</tr>

components/ui/table_head.html

<th data-slot="table-head" {{ attributes.cn("h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0") }}>{{ slot }}</th>

components/ui/table_cell.html

<td data-slot="table-cell" {{ attributes.cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0") }}>{{ slot }}</td>

components/ui/table_caption.html

<caption data-slot="table-caption" {{ attributes.cn("mt-4 text-sm text-muted-foreground") }}>{{ slot }}</caption>

Update the path to fit your project
The components folder is the one set in pyblade.toml.

Usage

The tags <pb-ui.table> <pb-ui.table-header> <pb-ui.table-body> <pb-ui.table-row> <pb-ui.table-head> <pb-ui.table-cell> <pb-ui.table-caption> are available in all your templates.

<pb-ui.table>
  <pb-ui.table-header><pb-ui.table-row><pb-ui.table-head>Name</pb-ui.table-head></pb-ui.table-row></pb-ui.table-header>
  <pb-ui.table-body>
    @for(user in users)
    <pb-ui.table-row><pb-ui.table-cell>{{ user.name }}</pb-ui.table-cell></pb-ui.table-row>
    @endfor
  </pb-ui.table-body>
</pb-ui.table>

‹ Date picker Data table ›