Blame view

泰额版/Food Labeling Management Platform/src/components/ui/table.tsx 2.4 KB
884054fb   “wangming”   项目初始化
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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
  "use client";
  
  import * as React from "react";
  
  import { cn } from "./utils";
  
  function Table({ className, ...props }: React.ComponentProps<"table">) {
    return (
      <div
        data-slot="table-container"
        className="relative w-full overflow-x-auto"
      >
        <table
          data-slot="table"
          className={cn("w-full caption-bottom text-sm", className)}
          {...props}
        />
      </div>
    );
  }
  
  function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
    return (
      <thead
        data-slot="table-header"
        className={cn("[&_tr]:border-b", className)}
        {...props}
      />
    );
  }
  
  function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
    return (
      <tbody
        data-slot="table-body"
        className={cn("[&_tr:last-child]:border-0", className)}
        {...props}
      />
    );
  }
  
  function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
    return (
      <tfoot
        data-slot="table-footer"
        className={cn(
          "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
          className,
        )}
        {...props}
      />
    );
  }
  
  function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
    return (
      <tr
        data-slot="table-row"
        className={cn(
          "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
          className,
        )}
        {...props}
      />
    );
  }
  
  function TableHead({ className, ...props }: React.ComponentProps<"th">) {
    return (
      <th
        data-slot="table-head"
        className={cn(
          "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
          className,
        )}
        {...props}
      />
    );
  }
  
  function TableCell({ className, ...props }: React.ComponentProps<"td">) {
    return (
      <td
        data-slot="table-cell"
        className={cn(
          "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
          className,
        )}
        {...props}
      />
    );
  }
  
  function TableCaption({
    className,
    ...props
  }: React.ComponentProps<"caption">) {
    return (
      <caption
        data-slot="table-caption"
        className={cn("text-muted-foreground mt-4 text-sm", className)}
        {...props}
      />
    );
  }
  
  export {
    Table,
    TableHeader,
    TableBody,
    TableFooter,
    TableHead,
    TableRow,
    TableCell,
    TableCaption,
  };