1import clsx from "clsx";
2import React from "react";
3import { twMerge } from "tailwind-merge";
4interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
5 className?: string;
6 children?: React.ReactNode;
7}
8export const Table = React.forwardRef<HTMLTableElement, TableProps>(
9 ({ className, children, ...props }, ref) => {
10 return (
11 <table
12 ref={ref}
13 className={
14 (twMerge(
15 clsx(
16 "w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400"
17 )
18 ),
19 className)
20 }
21 {...props}
22 >
23 {children}
24 </table>
25 );
26 }
27);
28
29Table.displayName = "Table";
30
31interface TheadProps extends React.HtmlHTMLAttributes<HTMLTableSectionElement> {
32 children?: React.ReactNode;
33 className?: string;
34}
35export const Thead: React.FC<TheadProps> = ({
36 className,
37 children,
38 ...props
39}) => {
40 return (
41 <thead
42 className={twMerge(
43 clsx(
44 "text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400",
45 className
46 )
47 )}
48 {...props}
49 >
50 {children}
51 </thead>
52 );
53};
54
55interface TabelBodyProps
56 extends React.HtmlHTMLAttributes<HTMLTableSectionElement> {
57 children?: React.ReactNode;
58 className?: string;
59}
60export const TabelBody: React.FC<TabelBodyProps> = ({
61 children,
62 className,
63 ...props
64}) => {
65 return (
66 <tbody className={twMerge(clsx(className))} {...props}>
67 {children}
68 </tbody>
69 );
70};
71
72interface TrProps extends React.HtmlHTMLAttributes<HTMLTableRowElement> {
73 children?: React.ReactNode;
74 className?: string;
75 scope?: string;
76}
77export const Tr: React.FC<TrProps> = ({ className, children, ...props }) => {
78 return (
79 <tr
80 className={twMerge(
81 clsx(
82 "bg-white border-b dark:bg-gray-800 dark:border-gray-700 border-gray-200",
83 className
84 )
85 )}
86 {...props}
87 >
88 {children}
89 </tr>
90 );
91};
92
93interface ThProps extends React.HtmlHTMLAttributes<HTMLTableCellElement> {
94 children?: React.ReactNode;
95 className?: string;
96 scope?: string;
97}
98
99export const Th: React.FC<ThProps> = ({
100 children,
101 className,
102 scope,
103 ...props
104}) => {
105 return (
106 <th
107 className={twMerge(clsx("px-6 py-3", className))}
108 scope={scope}
109 {...props}
110 >
111 {children}
112 </th>
113 );
114};
115
116export const Td: React.FC<React.HtmlHTMLAttributes<HTMLTableCellElement>> = ({
117 children,
118 className,
119 ...props
120}) => {
121 return (
122 <td className={twMerge(clsx(className))} {...props}>
123 {children}
124 </td>
125 );
126};
127