Table

Component

Preview

Preview solid

Usage

import {
Table,
TableBody,
TableCaption,
TableCell,
TableFooter,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table"

export function TableDemo() {
return (
  <Table>
    <TableCaption>A list of your recent invoices.</TableCaption>
    <TableHeader>
      <TableRow>
        <TableHead class="w-[100px]">Invoice</TableHead>
        <TableHead>Status</TableHead>
        <TableHead>Method</TableHead>
        <TableHead class="text-right">Amount</TableHead>
      </TableRow>
    </TableHeader>
    <TableBody>
      <TableRow>
        <TableCell class="font-medium">INV001</TableCell>
        <TableCell>Paid</TableCell>
        <TableCell>Credit Card</TableCell>
        <TableCell class="text-right">$250.00</TableCell>
      </TableRow>
      <TableRow>
        <TableCell class="font-medium">INV002</TableCell>
        <TableCell>Pending</TableCell>
        <TableCell>PayPal</TableCell>
        <TableCell class="text-right">$150.00</TableCell>
      </TableRow>
      <TableRow>
        <TableCell class="font-medium">INV003</TableCell>
        <TableCell>Paid</TableCell>
        <TableCell>Bank Transfer</TableCell>
        <TableCell class="text-right">$350.00</TableCell>
      </TableRow>
    </TableBody>
    <TableFooter>
      <TableRow>
        <TableCell colSpan={3}>Total</TableCell>
        <TableCell class="text-right">$750.00</TableCell>
      </TableRow>
    </TableFooter>
  </Table>
)
}

Installation

CLI

npm

npx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/s/table.json

pnpm

pnpm dlx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/s/table.json

bun

bunx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/s/table.json

Manual

components/ui/table.tsx

import { type ComponentProps, splitProps } from "solid-js"
import { cn } from "@/lib/utils"

const Table = (props: ComponentProps<"table">) => {
  const [local, rest] = splitProps(props, ["class"])
  return (
    <div class={cn("relative w-full overflow-auto", local.class)}>
      <table
        class={cn("w-full caption-bottom text-sm", local.class)}
        {...rest}
      />
    </div>
  )
}

const TableHeader = (props: ComponentProps<"thead">) => {
  const [local, rest] = splitProps(props, ["class"])
  return (
    <thead
      class={cn("[&_tr]:border-b", local.class)}
      {...rest}
    />
  )
}

const TableBody = (props: ComponentProps<"tbody">) => {
  const [local, rest] = splitProps(props, ["class"])
  return (
    <tbody
      class={cn("[&_tr:last-child]:border-0", local.class)}
      {...rest}
    />
  )
}

const TableFooter = (props: ComponentProps<"tfoot">) => {
  const [local, rest] = splitProps(props, ["class"])
  return (
    <tfoot
      class={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", local.class)}
      {...rest}
    />
  )
}

const TableRow = (props: ComponentProps<"tr">) => {
  const [local, rest] = splitProps(props, ["class"])
  return (
    <tr
      class={cn(
        "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
        local.class,
      )}
      {...rest}
    />
  )
}

const TableHead = (props: ComponentProps<"th">) => {
  const [local, rest] = splitProps(props, ["class"])
  return (
    <th
      class={cn(
        "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
        local.class,
      )}
      {...rest}
    />
  )
}

const TableCell = (props: ComponentProps<"td">) => {
  const [local, rest] = splitProps(props, ["class"])
  return (
    <td
      class={cn(
        "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
        local.class,
      )}
      {...rest}
    />
  )
}

const TableCaption = (props: ComponentProps<"caption">) => {
  const [local, rest] = splitProps(props, ["class"])
  return (
    <caption
      class={cn("mt-4 text-sm text-muted-foreground", local.class)}
      {...rest}
    />
  )
}

export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow }

API Reference

Table

The main table container component.

Prop	Type	Default	Description
class	string	-	Additional CSS classes

TableHeader

The table header container.

Prop	Type	Default	Description
class	string	-	Additional CSS classes

TableBody

The table body container.

Prop	Type	Default	Description
class	string	-	Additional CSS classes

TableFooter

The table footer container.

Prop	Type	Default	Description
class	string	-	Additional CSS classes

TableRow

A table row component.

Prop	Type	Default	Description
class	string	-	Additional CSS classes

TableHead

A table header cell component.

Prop	Type	Default	Description
class	string	-	Additional CSS classes

TableCell

A table cell component.

Prop	Type	Default	Description
class	string	-	Additional CSS classes

TableCaption

A table caption component.

Prop	Type	Default	Description
class	string	-	Additional CSS classes