61 lines
1.8 KiB
TypeScript
61 lines
1.8 KiB
TypeScript
import * as React from 'react';
|
|
import { clsx } from 'clsx';
|
|
|
|
export type DataTableProps = React.TableHTMLAttributes<HTMLElement>;
|
|
|
|
export function DataTable({ className, children, ...props }: DataTableProps) {
|
|
return (
|
|
<div className="w-full overflow-x-auto rounded-lg border border-[var(--bl-border)]">
|
|
<table
|
|
className={clsx(
|
|
'w-full border-collapse text-left text-sm text-[var(--bl-text-primary)]',
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</table>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export type DataTableHeaderProps = React.HTMLAttributes<HTMLElement>;
|
|
|
|
export function DataTableHeader({ className, ...props }: DataTableHeaderProps) {
|
|
return <thead className={clsx('bg-[var(--bl-surface-muted)]', className)} {...props} />;
|
|
}
|
|
|
|
export type DataTableBodyProps = React.HTMLAttributes<HTMLElement>;
|
|
|
|
export function DataTableBody({ className, ...props }: DataTableBodyProps) {
|
|
return <tbody className={clsx('divide-y divide-[var(--bl-border)]', className)} {...props} />;
|
|
}
|
|
|
|
export type DataTableRowProps = React.HTMLAttributes<HTMLElement>;
|
|
|
|
export function DataTableRow({ className, ...props }: DataTableRowProps) {
|
|
return (
|
|
<tr
|
|
className={clsx('transition-colors hover:bg-[var(--bl-surface-muted)]', className)}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export type DataTableHeadProps = React.ThHTMLAttributes<HTMLElement>;
|
|
|
|
export function DataTableHead({ className, ...props }: DataTableHeadProps) {
|
|
return (
|
|
<th
|
|
className={clsx('px-3 py-2 text-xs font-medium text-[var(--bl-text-secondary)]', className)}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export type DataTableCellProps = React.TdHTMLAttributes<HTMLElement>;
|
|
|
|
export function DataTableCell({ className, ...props }: DataTableCellProps) {
|
|
return <td className={clsx('px-3 py-2 align-middle', className)} {...props} />;
|
|
}
|