Phlex Components
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<div>
  <div class="relative w-full overflow-auto">
    <table class="w-full caption-bottom text-sm"><caption class="mt-4 text-sm text-muted-foreground">Employees at Acme inc.</caption>
      <thead class="[&_tr]:border-b">
        <tr class="border-b transition-colors hover:bg-muted hover:bg-opacity-50 data-[state=selected]:bg-muted">
          <th class="h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]">Name</th>
          <th class="h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]">Email</th>
          <th class="h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]">Status</th>
          <th class="h-10 px-2 align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] text-right">Role</th>
        </tr>
      </thead>
      <tbody class="[&_tr:last-child]:border-0">
        <tr class="border-b transition-colors hover:bg-muted hover:bg-opacity-50 data-[state=selected]:bg-muted">
          <td class="p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] font-medium">INV-0001</td>
          <td class="p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]">Active</td>
          <td class="p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]">Credit Card</td>
          <td class="p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] text-right">100</td>
        </tr>
        <tr class="border-b transition-colors hover:bg-muted hover:bg-opacity-50 data-[state=selected]:bg-muted">
          <td class="p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] font-medium">INV-0002</td>
          <td class="p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]">Active</td>
          <td class="p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]">Bank Transfer</td>
          <td class="p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] text-right">230</td>
        </tr>
        <tr class="border-b transition-colors hover:bg-muted hover:bg-opacity-50 data-[state=selected]:bg-muted">
          <td class="p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] font-medium">INV-0003</td>
          <td class="p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]">Pending</td>
          <td class="p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]">PayPal</td>
          <td class="p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] text-right">350</td>
        </tr>
        <tr class="border-b transition-colors hover:bg-muted hover:bg-opacity-50 data-[state=selected]:bg-muted">
          <td class="p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] font-medium">INV-0004</td>
          <td class="p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]">Inactive</td>
          <td class="p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]">Credit Card</td>
          <td class="p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] text-right">10</td>
        </tr>
      </tbody>
      <tfoot class="border-t bg-muted bg-opacity-50 font-medium[& amp;>tr]:last:border-b-0">
        <tr class="border-b transition-colors hover:bg-muted hover:bg-opacity-50 data-[state=selected]:bg-muted">
          <th class="h-10 px-2 text-left align-middle text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] font-medium" colspan="3">Total</th>
          <th class="h-10 px-2 align-middle text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] font-medium text-right">780</th>
        </tr>
      </tfoot>
    </table>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
render(TestView.new) do
  Table do
    TableCaption { "Employees at Acme inc." }
    TableHeader do
      TableRow do
        TableHead { "Name" }
        TableHead { "Email" }
        TableHead { "Status" }
        TableHead(class: "text-right") { "Role" }
      end
    end
    TableBody do
      [
        {identifier: "INV-0001", status: "Active", method: "Credit Card", amount: 100},
        {identifier: "INV-0002", status: "Active", method: "Bank Transfer", amount: 230},
        {identifier: "INV-0003", status: "Pending", method: "PayPal", amount: 350},
        {identifier: "INV-0004", status: "Inactive", method: "Credit Card", amount: 10}
      ].each do |invoice|
        TableRow do
          TableCell(class: "font-medium") { invoice[:identifier] }
          TableCell { invoice[:status] }
          TableCell { invoice[:method] }
          TableCell(class: "text-right") { invoice[:amount] }
        end
      end
    end
    TableFooter do
      TableRow do
        TableHead(class: "font-medium", colspan: 3) { "Total" }
        TableHead(class: "font-medium text-right") { "780" }
      end
    end
  end
end

Default TablePreview

No params configured.