@arolariu/components
Version:
🎨 60+ beautiful, accessible React components built on Radix UI. TypeScript-first, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
67 lines (66 loc) • 2.53 kB
JavaScript
"use client";
import { jsx } from "react/jsx-runtime";
import "react";
import { cn } from "../../lib/utils.js";
function Table({ className, ...props }) {
return /*#__PURE__*/ jsx("div", {
"data-slot": "table-container",
className: "relative w-full overflow-x-auto",
children: /*#__PURE__*/ jsx("table", {
"data-slot": "table",
className: cn("w-full caption-bottom text-sm", className),
...props
})
});
}
function TableHeader({ className, ...props }) {
return /*#__PURE__*/ jsx("thead", {
"data-slot": "table-header",
className: cn("[&_tr]:border-b", className),
...props
});
}
function TableBody({ className, ...props }) {
return /*#__PURE__*/ jsx("tbody", {
"data-slot": "table-body",
className: cn("[&_tr:last-child]:border-0", className),
...props
});
}
function TableFooter({ className, ...props }) {
return /*#__PURE__*/ jsx("tfoot", {
"data-slot": "table-footer",
className: cn("bg-neutral-100/50 border-t font-medium [&>tr]:last:border-b-0 dark:bg-neutral-800/50", className),
...props
});
}
function TableRow({ className, ...props }) {
return /*#__PURE__*/ jsx("tr", {
"data-slot": "table-row",
className: cn("hover:bg-neutral-100/50 data-[state=selected]:bg-neutral-100 border-b transition-colors dark:hover:bg-neutral-800/50 dark:data-[state=selected]:bg-neutral-800", className),
...props
});
}
function TableHead({ className, ...props }) {
return /*#__PURE__*/ jsx("th", {
"data-slot": "table-head",
className: cn("text-neutral-950 h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] dark:text-neutral-50", className),
...props
});
}
function TableCell({ className, ...props }) {
return /*#__PURE__*/ jsx("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 }) {
return /*#__PURE__*/ jsx("caption", {
"data-slot": "table-caption",
className: cn("text-neutral-500 mt-4 text-sm dark:text-neutral-400", className),
...props
});
}
export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };
//# sourceMappingURL=table.js.map