İçeriğe atla
1.6k

Tablo

Faturalar, yönetici listeleri ve fiyat tabloları için anlamsal bir HTML tablosu — kenarlıklı satırlar, kalın başlıklar ve keskin bir neobrütalist gölge.

import {
  Table,
  TableBody,

Table, yerel HTML tablo öğelerini — <table>, <thead>, <tbody>, <th>, <td>, <caption> — altında herhangi bir primitif kütüphane olmadan stillendirir; Radix ve Base varyantları aynı dosyayı kullanır. Neobrütalist reçete: tablonun tamamını saran kalın bir kenarlık ve keskin bir gölge, başlık yazı tipinde başlık hücreleri ve 2px'lik satır ayırıcılar.

Şu durumlarda tercih edin:

  • Faturalar ve siparişler — toplam için bir TableFooter satırı içeren kalemler.
  • Yönetici listeleri — satır eylemleri açılır menüsüyle kullanıcılar, API anahtarları, abonelikler.
  • Fiyatlandırma ve karşılaştırma tabloları — anlamı sütun başlıklarının taşıdığı özellik matrisleri.

Kurulum

pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/table.json
npx shadcn@latest add https://neobrutalism.com/r/base/table.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/table.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/table.json

Aşağıdaki kodu kopyalayıp projenize yapıştırın.

components/ui/table.tsx
"use client"

import * as React from "react"

import { cn } from "@/lib/utils"

function Table({ className, ...props }: React.ComponentProps<"table">) {
  return (
    <div
      data-slot="table-container"
      className="relative w-full overflow-x-auto rounded border-2 shadow-md"
    >
      <table
        data-slot="table"
        className={cn("w-full caption-bottom text-sm", className)}
        {...props}
      />
    </div>
  )
}

function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
  return (
    <thead
      data-slot="table-header"
      className={cn("[&_tr]:border-b-2", className)}
      {...props}
    />
  )
}

function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
  return (
    <tbody
      data-slot="table-body"
      className={cn("[&_tr:last-child]:border-0", className)}
      {...props}
    />
  )
}

function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
  return (
    <tfoot
      data-slot="table-footer"
      className={cn(
        "border-t-2 bg-muted/50 font-medium [&>tr]:last:border-b-0",
        className
      )}
      {...props}
    />
  )
}

function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
  return (
    <tr
      data-slot="table-row"
      className={cn(
        "border-b-2 transition-colors hover:bg-accent has-aria-expanded:bg-accent data-[state=selected]:bg-accent",
        className
      )}
      {...props}
    />
  )
}

function TableHead({ className, ...props }: React.ComponentProps<"th">) {
  return (
    <th
      data-slot="table-head"
      className={cn(
        "h-10 bg-muted px-2 text-left align-middle font-head font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
        className
      )}
      {...props}
    />
  )
}

function TableCell({ className, ...props }: React.ComponentProps<"td">) {
  return (
    <td
      data-slot="table-cell"
      className={cn(
        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
        className
      )}
      {...props}
    />
  )
}

function TableCaption({
  className,
  ...props
}: React.ComponentProps<"caption">) {
  return (
    <caption
      data-slot="table-caption"
      className={cn("mt-4 text-sm text-muted-foreground", className)}
      {...props}
    />
  )
}

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

İçe aktarma yollarını proje yapılandırmanıza göre güncelleyin.

Kullanım

import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
<Table>
  <TableCaption>A list of your recent invoices.</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead className="w-[100px]">Invoice</TableHead>
      <TableHead>Status</TableHead>
      <TableHead>Method</TableHead>
      <TableHead className="text-right">Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell className="font-medium">INV001</TableCell>
      <TableCell>Paid</TableCell>
      <TableCell>Credit Card</TableCell>
      <TableCell className="text-right">$250.00</TableCell>
    </TableRow>
  </TableBody>
</Table>

Kompozisyon

Bir Table oluşturmak için aşağıdaki kompozisyonu kullanın:

Table
├── TableCaption
├── TableHeader
│   └── TableRow
│       ├── TableHead
│       ├── TableHead
│       ├── TableHead
│       └── TableHead
├── TableBody
│   ├── TableRow
│   │   ├── TableCell
│   │   ├── TableCell
│   │   ├── TableCell
│   │   └── TableCell
│   └── TableRow
│       ├── TableCell
│       ├── TableCell
│       ├── TableCell
│       └── TableCell
└── TableFooter

Örnekler

Tablo Altbilgisi

Tabloya bir altbilgi eklemek için <TableFooter /> bileşenini kullanın.

import {
  Table,
  TableBody,

Eylemler

Bir <DropdownMenu /> bileşeni kullanarak her satır için eylemleri gösteren bir tablo.

import { MoreHorizontalIcon } from "lucide-react"

import { Button } from "@/components/ui/button"

Data Table

Daha karmaşık veri tabloları oluşturmak için <Table /> bileşenini kullanabilirsiniz. Sıralama, filtreleme ve sayfalama içeren tablolar oluşturmak için onu @tanstack/react-table ile birleştirin.

Daha fazla bilgi için Data Table belgelerine bakın.

Ayrıca Tasks demosunda bir veri tablosu örneğini de görebilirsiniz.

RTL

Neobrutalism'de RTL desteğini etkinleştirmek için RTL yapılandırma kılavuzuna bakın.

"use client"

import * as React from "react"

Erişilebilirlik

Yerel tablo öğelerini işlemek; tablo duyurusunu, satır/sütun gezinmesini ve başlık ilişkilendirmesini hiçbir ARIA kurulumu olmadan ekran okuyuculara kazandırır. Her tabloyu TableCaption ile adlandırın ve TableHead'i yalnızca gerçek başlık hücreleri için kullanın. Kaydırma kabı odaklanabilir değildir; bu yüzden yalnızca klavye kullananlar taşan bir tabloyu kaydıramaz — geniş tablolar olasıysa, bileşenin sizdeki kopyasında kapsayıcı div'e tabIndex={0}, role="region" ve bir aria-label ekleyin.