Table

Display

Data table with pixel borders.

Import

import { PixelTable, PixelTableHeader, PixelTableBody, PixelTableRow, PixelTableHead, PixelTableCell } from "@/components/ui/pixel-table"

Usage

NameStatus
Item 1Active
Item 2Inactive

Component Source

Copy and paste the following code into your project at /src/components/ui/pixel-table.tsx

"use client";

import * as React from "react";
import { cn } from "@/lib/utils";

const PixelTable = React.forwardRef<
  HTMLTableElement,
  React.HTMLAttributes<HTMLTableElement>
>(({ className, ...props }, ref) => (
  <div className="w-full overflow-auto pixel-borders border-4 border-black dark:border-[#ff8c00]">
    <table
      ref={ref}
      className={cn("w-full caption-bottom text-sm", className)}
      {...props}
    />
  </div>
));
PixelTable.displayName = "PixelTable";

const PixelTableHeader = React.forwardRef<
  HTMLTableSectionElement,
  React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
  <thead
    ref={ref}
    className={cn("bg-[#ff8c00] text-white", className)}
    {...props}
  />
));
PixelTableHeader.displayName = "PixelTableHeader";

const PixelTableBody = React.forwardRef<
  HTMLTableSectionElement,
  React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
  <tbody
    ref={ref}
    className={cn("bg-white dark:bg-[#1a1a1a]", className)}
    {...props}
  />
));
PixelTableBody.displayName = "PixelTableBody";

const PixelTableFooter = React.forwardRef<
  HTMLTableSectionElement,
  React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
  <tfoot
    ref={ref}
    className={cn(

// ... (more code below)

Accessibility

This component is built with accessibility in mind, including proper ARIA attributes, keyboard navigation, and focus management.