// Data Display

Table

A responsive table component.

// Rendering preview…

// Install

npx shadcn@latest add @dakik/table

// Usage

1import { Table, TableHeader, TableBody, TableFooter } from "@/components/ui/table";
2
3<Table />

// Code

1"use client";
2
3import { ark } from "@ark-ui/react/factory";
4import type React from "react";
5import { cn } from "@/lib/utils";
6
7interface TableProps extends React.ComponentProps<typeof ark.table> {
8  /**
9   * Whether the table rows are hoverable.
10   *
11   * @default true
12   */
13  isHoverable?: boolean;
14  /**
15   * The variant of the table.
16   *
17   * @default "plain"
18   */
19  variant?: "plain" | "striped";
20}
21
22export const Table = (props: TableProps) => {
23  const { variant = "plain", isHoverable = true, className, ...rest } = props;
24
25  return (
26    <div className="relative w-full overflow-auto" data-slot="table-wrapper">
27      <ark.table
28        className={cn(

// Dependencies

@ark-ui/react