WinTable

A Win2k-styled table with a navy header row, white body rows, and row separators.

When to use

Use WinTable for structured data display — grades, scores, lists of records.

When not to use

Do not use WinTable for layout purposes. Use WinGrid or CSS flexbox instead.

Installation

Install the package:

npm install win2k-ui

Then import the component:

import { WinTable } from 'win2k-ui'

Make sure you have Tailwind CSS v4 set up, then add this to your root CSS file:

@import "tailwindcss";
@import "win2k-ui/styles.css";

No other dependencies required. The components ship with zero third-party UI dependencies — just Tailwind CSS 4 and React.

Preview

Interactive examples showing various states and configurations. Click “Show Code” to view the source for each variation.

Simple 3-column table

Process	PID	Memory
winlogon.exe	324	2,456 KB
services.exe	452	3,128 KB
explorer.exe	1688	8,944 KB
svchost.exe	892	4,216 KB

Table with long content (overflow scroll)

File Name	Path	Size
systemconfig.ini	C:\Windows\System32\config\systemconfig.ini	128 KB
userprofile.dat	C:\Documents and Settings\Administrator\userprofile.dat	2.4 MB
drivers.sys	C:\Windows\System32\drivers\drivers.sys	456 KB
winlogon.exe	C:\Windows\System32\winlogon.exe	612 KB

Props

All available props for the WinTable component.

Prop	Type	Default	Description
`headers`	`string[]`	`—`	Column header labels.
`rows`	`ReactNode[][]`	`—`	2D array of cell content.
`className`	`string`	`''`	Additional CSS classes.

Usage

Example showing the component in a typical context:

import { WinTable } from 'win2k-ui'

export function Example() {
  return (
    <WinTable
      headers={["Name", "Score", "Status"]}
      rows={[
        ["Alice", "95", "Passed"],
        ["Bob", "72", "Passed"],
        ["Charlie", "45", "Failed"],
      ]}
    />
  )
  }

Notes

WinTable uses inline styles for `border-bottom: 1px solid #d4d0c8` on body rows to achieve the classic grid line look. The component is wrapped in an `overflow-x-auto` div for responsive horizontal scrolling on small viewports. Header cells use the raised bevel border to match the Win2k aesthetic.