zebflow 0.11.14

Reactive web automation platform — pipelines, templates, and real-time collaboration in a single binary.
Documentation 
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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

import { cx } from "zeb/react";

/**
 * Table — shadcn/ui's table primitives, on Zebflow's engine.
 *
 * Upstream tidies border edges with descendant selectors this engine doesn't
 * compile: `TableHeader`'s `[&_tr]:border-b` is redundant here anyway since
 * `TableRow` already carries its own `border-b`; `TableBody`'s
 * `[&_tr:last-child]:border-0` and `TableFooter`'s `[&>tr]:last:border-b-0`
 * are dropped, so the last row of a body or footer keeps its bottom border —
 * pass `className="border-b-0"` to that row yourself if you want it gone.
 * `TableHead`/`TableCell`'s checkbox-column nudge (`[&:has(…)]`,
 * `[&>[role=checkbox]]:…`) is dropped the same way.
 */

export function Table({ className, children, ...rest }) {
  return (
    <div data-slot="table-container" className="relative w-full overflow-x-auto">
      <table data-slot="table" className={cx("w-full caption-bottom text-sm", className)} {...rest}>
        {children}
      </table>
    </div>
  );
}

export function TableHeader({ className, children, ...rest }) {
  return (
    <thead data-slot="table-header" className={cx(className)} {...rest}>
      {children}
    </thead>
  );
}

export function TableBody({ className, children, ...rest }) {
  return (
    <tbody data-slot="table-body" className={cx(className)} {...rest}>
      {children}
    </tbody>
  );
}

export function TableFooter({ className, children, ...rest }) {
  return (
    <tfoot data-slot="table-footer" className={cx("border-t bg-muted/50 font-medium", className)} {...rest}>
      {children}
    </tfoot>
  );
}

export function TableRow({ className, children, ...rest }) {
  return (
    <tr
      data-slot="table-row"
      className={cx("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className)}
      {...rest}
    >
      {children}
    </tr>
  );
}

export function TableHead({ className, children, ...rest }) {
  return (
    <th
      data-slot="table-head"
      className={cx("h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground", className)}
      {...rest}
    >
      {children}
    </th>
  );
}

export function TableCell({ className, children, ...rest }) {
  return (
    <td data-slot="table-cell" className={cx("p-2 align-middle whitespace-nowrap", className)} {...rest}>
      {children}
    </td>
  );
}

export function TableCaption({ className, children, ...rest }) {
  return (
    <caption data-slot="table-caption" className={cx("mt-4 text-sm text-muted-foreground", className)} {...rest}>
      {children}
    </caption>
  );
}

export default Table;