uifolio 0.5.4 → 0.6.0

package/README.md

@@ -54,15 +54,38 @@ Colors go through **Tailwind CSS 4 tokens**: the CLI writes
 into the project's global CSS (the one with `@import 'tailwindcss'`). The
 components therefore keep `bg-primary`, `border-primary/50`, `ring-primary/40`:
 no hard-coded colors. `--color` changes `--primary` in the theme and `--radius`
-adds `--radius` to it. When no global Tailwind CSS is found, the file is written
-at the root and the import to add is printed.
-
-At the end, the CLI prints the detected npm dependencies, for example:
+adds `--radius` to it. The CSS that imports Tailwind is detected wherever it
+lives (`src/index.css`, `src/styles/globals.css`, `app/globals.css`…).
+
+Tailwind CSS 4 is required: without it, no utility class exists and the
+components render unstyled. When the target project does not have it (or no CSS
+imports it yet), `add` sets it up before wiring the theme:
+
+1. installs `tailwindcss` (+ `@tailwindcss/vite`) with the package manager of the
+   project's lockfile (`npm`, `pnpm`, `yarn` or `bun`);
+2. creates the CSS entry (`src/index.css`, or `app/globals.css`) with
+   `@import 'tailwindcss';`, or prepends the import to the existing one;
+3. imports that CSS in the app entry (`src/main.tsx`, `app/layout.tsx`…);
+4. adds the `tailwindcss()` plugin to `vite.config.*`.
+
+The installation is skipped by `--dry-run` (the steps are printed instead).
+If the install fails (offline, read-only…), the theme is still written and the
+exact steps to run manually are printed.
+
+`add` also installs the npm packages the copied files import (`clsx`,
+`tailwind-merge`, `lucide-react`, `hls.js`…), with the same package manager and
+as runtime dependencies (`dependencies`, not `devDependencies`). Only the ones
+missing from the manifest are installed, `--dry-run` prints the command without
+running it, and a project without `package.json` simply gets the command to run
+itself:
 
 ```bash
 npm install clsx tailwind-merge lucide-react hls.js
 ```
 
+Tailwind is handled the same way, as a dev dependency (see above), so it is not
+part of that list.
+
 ### Preview parity
 
 The docs preview and the installed component render identically because the page
@@ -90,7 +113,7 @@ only marks the installation as complete when that is relevant.
 | ResizablePanels | `src/components/ui/resizable.tsx` | horizontal/vertical groups, handles, min-size, keyboard |
 | OtpInput | `src/components/ui/otp-input.tsx` | 4 fields, paste, rotate + success check |
 | ColorPicker | `src/components/ui/color-picker.tsx` | advanced panel, saturation/lightness, hue, alpha, eyedropper, RGB channels, presets, HEX/RGB/HSL/RGBA |
-| Table | `src/components/ui/table.tsx` | typed data table, uniform `px-4` cells and a wider gap before Actions, selection and row actions |
+| Table | `src/components/ui/table.tsx` | shadcn-style typed table, uniform `px-4` cells and a wider gap before Actions, select-all checkbox, row actions |
 
 Copyable helpers (the CLI follows them automatically): `src/lib/utils.ts`,
 `src/lib/video.ts`, `src/lib/vtt.ts`, `src/lib/date.ts`, `src/lib/uploader.ts`, `src/lib/color.ts`,

package/cli/uifolio.mjs

@@ -31,6 +31,7 @@
  *   node cli/uifolio.mjs add video-player --alias "#lib" --dry-run
  */
 
+import { execFileSync } from 'node:child_process'
 import { existsSync, mkdirSync, readdirSync, readFileSync, statSync, writeFileSync } from 'node:fs'
 import { basename, dirname, join, relative, resolve } from 'node:path'
 import { createInterface } from 'node:readline/promises'
@@ -52,8 +53,32 @@ const GLOBAL_CSS_CANDIDATES = [
   'src/index.css',
   'src/app.css',
   'src/globals.css',
+  'src/styles/globals.css',
+  'src/styles/index.css',
+  'src/main.css',
+  'src/style.css',
+  'app/globals.css',
 ]
 
+/** Folders never scanned when looking for the project's stylesheets. */
+const IGNORED_DIRS = new Set([
+  'node_modules',
+  'dist',
+  'build',
+  'out',
+  'coverage',
+  'public',
+  '.git',
+  '.next',
+  '.vite',
+  '.turbo',
+])
+
+const MAX_SCAN_DEPTH = 6
+
+/** A Tailwind CSS 4 entrypoint: `@import 'tailwindcss';` or `@tailwind base;`. */
+const TAILWIND_ENTRY = /@import\s+['"]tailwindcss(?:[^'"]*)['"]|@tailwind\s+base/
+
 /* -------------------------------------------------------------------------- */
 /* Utilitaires                                                                */
 /* -------------------------------------------------------------------------- */
@@ -67,6 +92,10 @@ function ok(message) {
   console.log(`\x1b[32m✓\x1b[0m ${message}`)
 }
 
+function warn(message) {
+  console.log(`\x1b[33m!\x1b[0m ${message}`)
+}
+
 function info(message) {
   console.log(`  ${message}`)
 }
@@ -389,19 +418,276 @@ ${darkTokens.join('\n')}
 `
 }
 
-/** CSS global du projet (celui qui importe Tailwind), sinon null. */
+/** Every stylesheet of the project, outside the build/ignored folders. */
+function listCssFiles(cwd) {
+  const found = []
+  const walk = (dir, depth) => {
+    if (depth > MAX_SCAN_DEPTH) return
+    let entries
+    try {
+      entries = readdirSync(dir, { withFileTypes: true })
+    } catch {
+      return
+    }
+    for (const entry of entries) {
+      const full = join(dir, entry.name)
+      if (entry.isDirectory()) {
+        if (entry.name.startsWith('.') || IGNORED_DIRS.has(entry.name)) continue
+        walk(full, depth + 1)
+      } else if (/\.css$/i.test(entry.name)) {
+        found.push(full)
+      }
+    }
+  }
+  walk(resolve(cwd), 0)
+  return found.sort()
+}
+
+/**
+ * CSS global du projet: celui qui importe Tailwind en priorité, quel que soit
+ * son chemin (src/index.css, src/styles/globals.css, app/globals.css…).
+ */
 function findGlobalCss(cwd) {
-  for (const candidate of GLOBAL_CSS_CANDIDATES) {
-    const file = join(cwd, candidate)
-    if (!existsSync(file)) continue
-    const source = readFileSync(file, 'utf8')
-    if (/@import\s+['"]tailwindcss|@tailwind\b/.test(source)) return file
+  const known = GLOBAL_CSS_CANDIDATES.map((candidate) => join(resolve(cwd), candidate))
+  const candidates = [...new Set([...known, ...listCssFiles(cwd)])].filter((file) =>
+    existsSync(file),
+  )
+  const withTailwind = candidates.find((file) => TAILWIND_ENTRY.test(readFileSync(file, 'utf8')))
+  return withTailwind ?? candidates[0] ?? null
+}
+
+/** A dependency of the target project's manifest? */
+function hasDependency(cwd, name) {
+  const file = join(cwd, 'package.json')
+  if (!existsSync(file)) return false
+  try {
+    const manifest = JSON.parse(readFileSync(file, 'utf8'))
+    return ['dependencies', 'devDependencies', 'peerDependencies'].some((key) =>
+      Boolean(manifest[key]?.[name]),
+    )
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Tailwind must be installed *and* imported by a CSS file: writing the tokens
+ * is not enough, without Tailwind the classes (bg-primary, fixed…) do not exist.
+ */
+function tailwindStatus(cwd, globalCss) {
+  const hasTailwind = hasDependency(cwd, 'tailwindcss')
+  const hasEntry =
+    Boolean(globalCss) &&
+    existsSync(globalCss) &&
+    TAILWIND_ENTRY.test(readFileSync(globalCss, 'utf8'))
+  return { hasDependency: hasTailwind, hasEntry }
+}
+
+/** Package manager of the target project, from its lockfile. */
+function packageManager(cwd, dev = true) {
+  const flag = dev ? ['-D'] : []
+  if (existsSync(join(cwd, 'pnpm-lock.yaml'))) return { command: 'pnpm', args: ['add', ...flag] }
+  if (existsSync(join(cwd, 'yarn.lock'))) return { command: 'yarn', args: ['add', ...flag] }
+  if (existsSync(join(cwd, 'bun.lockb')) || existsSync(join(cwd, 'bun.lock'))) {
+    return { command: 'bun', args: ['add', ...(dev ? ['-d'] : [])] }
   }
-  for (const candidate of GLOBAL_CSS_CANDIDATES) {
-    const file = join(cwd, candidate)
-    if (existsSync(file)) return file
+  return { command: 'npm', args: ['install', ...flag] }
+}
+
+/**
+ * The components import npm packages (clsx, lucide-react, hls.js…): install the
+ * ones missing from the manifest so the copied files compile right away.
+ */
+function installDependencies({ cwd, deps, dryRun }) {
+  const missing = [...deps].filter((dep) => !hasDependency(cwd, dep)).sort()
+  const manager = packageManager(cwd, false)
+  const command = [manager.command, ...manager.args, ...missing].join(' ')
+  if (missing.length === 0) return { missing, command }
+
+  if (dryRun) {
+    info(`[dry-run] ${command}`)
+    return { missing, command }
   }
-  return null
+  // Not a JS project: nothing to install into, print the command instead.
+  if (!existsSync(join(cwd, 'package.json'))) return { missing, command }
+
+  info(`Installing the npm dependencies: ${command}`)
+  try {
+    execFileSync(manager.command, [...manager.args, ...missing], {
+      cwd,
+      stdio: 'inherit',
+      shell: process.platform === 'win32',
+    })
+  } catch {
+    warn('The automatic install failed: run the command above yourself.')
+    return { missing, command }
+  }
+  ok(`Installed: ${missing.join(', ')}`)
+  return { missing: [], command }
+}
+
+const VITE_CONFIGS = [
+  'vite.config.ts',
+  'vite.config.js',
+  'vite.config.mjs',
+  'vite.config.mts',
+  'vite.config.cjs',
+  'vite.config.cts',
+]
+
+/** Modules that load the global CSS in a Vite/React project. */
+const ENTRY_MODULES = [
+  'src/main.tsx',
+  'src/main.jsx',
+  'src/main.ts',
+  'src/main.js',
+  'src/index.tsx',
+  'src/index.jsx',
+  'app/layout.tsx',
+  'app/layout.jsx',
+]
+
+function findFirst(cwd, names) {
+  return names.map((name) => join(cwd, name)).find((file) => existsSync(file)) ?? null
+}
+
+/** Adds `import tailwindcss from '@tailwindcss/vite'` and `tailwindcss()`. */
+function wireViteConfig(source) {
+  if (source.includes('@tailwindcss/vite')) return source
+  const plugins = /plugins\s*:\s*\[/.exec(source)
+  if (!plugins) return null
+  const at = plugins.index + plugins[0].length
+  const next = `${source.slice(0, at)}tailwindcss(), ${source.slice(at)}`
+  const lines = next.split('\n')
+  const lastImport = lines.reduce((last, line, index) => (/^\s*import\s/.test(line) ? index : last), -1)
+  const importLine = "import tailwindcss from '@tailwindcss/vite'"
+  if (lastImport === -1) return `${importLine}\n${next}`
+  lines.splice(lastImport + 1, 0, importLine)
+  return lines.join('\n')
+}
+
+/** Creates the Tailwind entrypoint when the project has no stylesheet at all. */
+function defaultCssPath(cwd) {
+  if (existsSync(join(cwd, 'src'))) return join(cwd, 'src', 'index.css')
+  if (existsSync(join(cwd, 'app'))) return join(cwd, 'app', 'globals.css')
+  return join(cwd, 'index.css')
+}
+
+/**
+ * Installs Tailwind CSS 4 and wires it (CSS entry, entry module, Vite plugin)
+ * when the target project does not have it. Without Tailwind no utility class
+ * exists, so the components would render unstyled.
+ */
+function setupTailwind({ cwd, globalCss, dryRun }) {
+  // Not a JS project (or nothing to install into): keep the manual instructions.
+  if (!existsSync(join(cwd, 'package.json'))) {
+    return { globalCss, reason: 'no-package' }
+  }
+
+  const usesVite = Boolean(findFirst(cwd, VITE_CONFIGS)) || hasDependency(cwd, 'vite')
+  const manager = packageManager(cwd)
+  const packages = usesVite ? ['tailwindcss', '@tailwindcss/vite'] : ['tailwindcss']
+  const command = [manager.command, ...manager.args, ...packages].join(' ')
+
+  if (!hasDependency(cwd, 'tailwindcss')) {
+    if (dryRun) info(`[dry-run] ${command}`)
+    else info(`Tailwind CSS missing, installing it: ${command}`)
+  }
+  if (!dryRun && !hasDependency(cwd, 'tailwindcss')) {
+    try {
+      execFileSync(manager.command, [...manager.args, ...packages], {
+        cwd,
+        stdio: 'inherit',
+        shell: process.platform === 'win32',
+      })
+      ok('Tailwind CSS installed')
+    } catch {
+      warn('The automatic install failed.')
+      return { globalCss, reason: 'install-failed' }
+    }
+  }
+
+  // 1. A stylesheet that imports Tailwind.
+  let cssFile = globalCss
+  if (!cssFile) {
+    cssFile = defaultCssPath(cwd)
+    if (dryRun) {
+      info(`[dry-run] create ${relative(cwd, cssFile)} with "@import 'tailwindcss';"`)
+    } else {
+      mkdirSync(dirname(cssFile), { recursive: true })
+      writeFileSync(cssFile, "@import 'tailwindcss';\n", 'utf8')
+      ok(`Tailwind entry created: ${relative(cwd, cssFile)}`)
+    }
+  } else if (!TAILWIND_ENTRY.test(readFileSync(cssFile, 'utf8'))) {
+    if (dryRun) {
+      info(`[dry-run] add "@import 'tailwindcss';" to ${relative(cwd, cssFile)}`)
+    } else {
+      const source = readFileSync(cssFile, 'utf8')
+      writeFileSync(cssFile, `@import 'tailwindcss';\n\n${source}`, 'utf8')
+      ok(`Tailwind imported in ${relative(cwd, cssFile)}`)
+    }
+  }
+
+  // 2. That stylesheet must be loaded by the app entry.
+  const entryModule = findFirst(cwd, ENTRY_MODULES)
+  const loadsCss = Boolean(entryModule) && readFileSync(entryModule, 'utf8').includes(basename(cssFile))
+  if (entryModule && !loadsCss) {
+    if (dryRun) {
+      info(`[dry-run] import ${basename(cssFile)} in ${relative(cwd, entryModule)}`)
+    } else {
+      const specifier = relative(dirname(entryModule), cssFile).replace(/\\/g, '/')
+      const source = readFileSync(entryModule, 'utf8')
+      writeFileSync(
+        entryModule,
+        `import '${specifier.startsWith('.') ? '' : './'}${specifier}'\n${source}`,
+        'utf8',
+      )
+      ok(`CSS imported in ${relative(cwd, entryModule)}`)
+    }
+  }
+
+  // 3. Vite only runs Tailwind through its plugin.
+  if (usesVite) {
+    const config = findFirst(cwd, VITE_CONFIGS)
+    if (!config) {
+      warn('No vite.config.* found: add tailwindcss() to your Vite plugins.')
+    } else {
+      const source = readFileSync(config, 'utf8')
+      const updated = wireViteConfig(source)
+      if (updated === null) {
+        warn(`Add the tailwindcss() plugin in ${relative(cwd, config)} (no "plugins: [" found).`)
+      } else if (updated !== source && dryRun) {
+        info(`[dry-run] add tailwindcss() to ${relative(cwd, config)}`)
+      } else if (updated !== source) {
+        writeFileSync(config, updated, 'utf8')
+        ok(`tailwindcss() plugin added to ${relative(cwd, config)}`)
+      }
+    }
+  } else {
+    info('Tailwind 4 also needs @tailwindcss/postcss in your PostCSS config.')
+  }
+
+  return { globalCss: cssFile, reason: dryRun ? 'dry-run' : 'ready' }
+}
+
+/** Actionable steps instead of a silent unstyled page. */
+function reportMissingTailwind({ cwd, globalCss, themeFile, status }) {
+  const cssLabel = globalCss ? relative(cwd, globalCss) : 'your global CSS'
+  const specifier = globalCss
+    ? `./${relative(dirname(globalCss), themeFile).replace(/\\/g, '/')}`
+    : `./${THEME_FILE}`
+  console.log('')
+  if (!status.hasDependency) {
+    const manager = packageManager(cwd)
+    warn('Tailwind CSS is not installed in this project: the components will render unstyled.')
+    info([manager.command, ...manager.args, 'tailwindcss', '@tailwindcss/vite'].join(' '))
+    info(`Then add "@import 'tailwindcss';" at the top of ${cssLabel}`)
+    info('and tailwindcss() to the Vite plugins (plugins: [react(), tailwindcss()]).')
+  } else {
+    warn(`Tailwind CSS is installed but ${cssLabel} does not import it yet.`)
+    info(`Add "@import 'tailwindcss';" at the top of ${cssLabel}.`)
+  }
+  info(`Then "@import '${specifier}';", or re-run "uifolio add" to wire it automatically.`)
 }
 
 /** Adds `@import './uifolio-theme.css';` right after the Tailwind import. */
@@ -430,7 +716,16 @@ function existingRadius(file) {
 }
 
 function writeTheme({ cwd, accent, radius, dryRun }) {
-  const globalCss = findGlobalCss(cwd)
+  let globalCss = findGlobalCss(cwd)
+
+  // Install + wire Tailwind first: the tokens alone style nothing.
+  if (!tailwindStatus(cwd, globalCss).hasEntry) {
+    console.log('')
+    info('Tailwind CSS is not set up in this project: configuring it.')
+    globalCss = setupTailwind({ cwd, globalCss, dryRun }).globalCss
+  }
+
+  const status = tailwindStatus(cwd, globalCss)
   const themeFile = globalCss
     ? join(dirname(globalCss), THEME_FILE)
     : join(cwd, THEME_FILE)
@@ -450,15 +745,19 @@ function writeTheme({ cwd, accent, radius, dryRun }) {
   ok(`Tailwind theme written to ${label}`)
   info(`--primary: ${finalAccent}${finalRadius === undefined ? '' : ` · --radius: ${finalRadius}px`}`)
 
-  if (globalCss) {
-    const source = readFileSync(globalCss, 'utf8')
-    const specifier = `./${basename(themeFile)}`
-    const updated = wireThemeImport(source, specifier)
-    if (updated !== source) writeFileSync(globalCss, updated, 'utf8')
-    info(`imported in ${relative(cwd, globalCss)} — no hard-coded colors in the components`)
-  } else {
-    info(`Add "@import './${THEME_FILE}';", at the top of your global CSS (the Tailwind one).`)
+  // The tokens only matter once Tailwind actually generates the utilities:
+  // without a `@import 'tailwindcss'`, wiring the theme would look installed
+  // and still render an unstyled page.
+  if (!status.hasEntry) {
+    reportMissingTailwind({ cwd, globalCss, themeFile, status })
+    return
   }
+
+  const source = readFileSync(globalCss, 'utf8')
+  const specifier = `./${basename(themeFile)}`
+  const updated = wireThemeImport(source, specifier)
+  if (updated !== source) writeFileSync(globalCss, updated, 'utf8')
+  info(`imported in ${relative(cwd, globalCss)} — no hard-coded colors in the components`)
 }
 
 /* -------------------------------------------------------------------------- */
@@ -982,7 +1281,10 @@ async function commandAdd({ positional, flags }) {
       info(`${skipped.length} file(s) already present, skipped: ${skipped.join(', ')} (use --force to overwrite)`)
     }
 
-    // 3. Tokens Tailwind : les classes bg-primary & co fonctionnent partout.
+    // 3. npm dependencies imported by the copied files.
+    const dependencies = installDependencies({ cwd, deps, dryRun })
+
+    // 4. Tokens Tailwind : les classes bg-primary & co fonctionnent partout.
     writeTheme({ cwd, accent, radius, dryRun })
 
     // 4. Component usage, after installation.
@@ -1006,12 +1308,12 @@ async function commandAdd({ positional, flags }) {
       })
     }
 
-    if (written.size > 0 || dryRun) {
+    if (targetAlias !== '@') {
+      info(`Remember to align the ${targetAlias} alias in your tsconfig/vite (instead of @/).`)
+    }
+    if (dependencies.missing.length > 0 && !dryRun && written.size > 0) {
       console.log('\n  Detected npm dependencies:')
-      info(`npm install ${[...deps].sort().join(' ')}`)
-      if (targetAlias !== '@') {
-        info(`Remember to align the ${targetAlias} alias in your tsconfig/vite (instead of @/).`)
-      }
+      info(dependencies.command)
       console.log('')
     }
   } finally {
@@ -1050,7 +1352,12 @@ only. Files go to src/components/ui (override with --dir) and the page imports
 them through the alias (@/components/ui/...). The page also gets a working
 example, with the data and props each component needs, so it shows immediately.
 Colors go through a Tailwind CSS 4 theme (uifolio-theme.css, @theme), so classes
-like bg-primary and text-muted-foreground stay in the code.
+like bg-primary and text-muted-foreground stay in the code. When Tailwind is
+missing, "add" installs it (with your lockfile's package manager), creates the
+CSS entry, imports it in the app entry and adds the tailwindcss() Vite plugin;
+without Tailwind no utility class exists and the components render unstyled.
+The npm packages the components import (clsx, lucide-react, hls.js…) are
+installed too, as runtime dependencies, when the manifest lacks them.
 
 Examples:
   node cli/uifolio.mjs add video-player calendar otp --cwd ../my-project

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uifolio",
-  "version": "0.5.4",
+  "version": "0.6.0",
   "description": "CLI that copies React components (calendar, video/audio players, OTP, editor, upload) and their helpers into your project, with Tailwind CSS 4 tokens.",
   "type": "module",
   "license": "MIT",

package/src/components/ui/table.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import type { ReactNode } from 'react'
+import { useEffect, useRef, type ReactNode } from 'react'
 import { cn } from '@/lib/utils'
 import { useControllableValue } from '@/lib/use-controllable'
 
@@ -8,7 +8,7 @@ export interface TableColumn<T> {
   /** Stable identifier, also used as the React key of the column. */
   key: string
   header: ReactNode
-  cell: (row: T) => ReactNode
+  cell: (row: T, index: number) => ReactNode
   /** Applied to the header and body cells: width, nowrap… */
   className?: string
   align?: 'left' | 'center' | 'right'
@@ -36,9 +36,10 @@ function alignClass(align: TableColumn<unknown>['align']): string {
 }
 
 /**
- * Data table with a shadcn-like API: typed columns, optional selection and a
- * dedicated actions column. Every cell on the left shares the same `px-4`
- * padding; the actions column keeps a wider `pl-10` gap with the last column.
+ * Data table with a shadcn-like API: typed columns, an optional select-all
+ * checkbox, and a dedicated actions column. Every cell on the left shares the
+ * same `px-4` padding; the actions column keeps a wider `pl-10` gap with the
+ * last column.
  */
 export function Table<T>({
   columns,
@@ -59,6 +60,17 @@ export function Table<T>({
     defaultSelectedKeys,
     onSelectionChange,
   )
+  const selectAllRef = useRef<HTMLInputElement>(null)
+
+  const keys = rows.map((row) => String(rowKey(row)))
+  const allSelected = keys.length > 0 && keys.every((key) => selection.includes(key))
+  const someSelected = keys.some((key) => selection.includes(key))
+
+  useEffect(() => {
+    if (selectAllRef.current) {
+      selectAllRef.current.indeterminate = someSelected && !allSelected
+    }
+  }, [someSelected, allSelected])
 
   const toggle = (key: string, checked: boolean) => {
     setSelection((current) =>
@@ -70,13 +82,29 @@ export function Table<T>({
     )
   }
 
-  const columnsCount = columns.length + (actions ? 1 : 0)
+  const toggleAll = (checked: boolean) => {
+    setSelection(checked ? keys : [])
+  }
+
+  const columnsCount = columns.length + (selectable ? 1 : 0) + (actions ? 1 : 0)
 
   return (
     <div className={cn('w-full overflow-x-auto rounded-sm border bg-card', className)}>
       <table className="w-full min-w-[860px] border-collapse text-left text-xs">
         <thead>
           <tr className="border-b bg-muted/50">
+            {selectable && (
+              <th scope="col" className="w-10 px-4 py-3.5">
+                <input
+                  ref={selectAllRef}
+                  type="checkbox"
+                  checked={allSelected}
+                  onChange={(event) => toggleAll(event.target.checked)}
+                  aria-label="Select all rows"
+                  className="size-4 cursor-pointer rounded-sm border-border accent-primary"
+                />
+              </th>
+            )}
             {columns.map((column) => (
               <th
                 key={column.key}
@@ -108,7 +136,7 @@ export function Table<T>({
               </td>
             </tr>
           ) : (
-            rows.map((row) => {
+            rows.map((row, rowIndex) => {
               const key = String(rowKey(row))
               const selected = selection.includes(key)
 
@@ -122,7 +150,19 @@ export function Table<T>({
                     selected ? 'bg-primary/5' : 'hover:bg-muted/30',
                   )}
                 >
-                  {columns.map((column, index) => (
+                  {selectable && (
+                    <td className="w-10 px-4 py-3.5 align-middle">
+                      <input
+                        type="checkbox"
+                        checked={selected}
+                        onChange={(event) => toggle(key, event.target.checked)}
+                        onClick={(event) => event.stopPropagation()}
+                        aria-label={`Select row ${key}`}
+                        className="size-4 cursor-pointer rounded-sm border-border accent-primary"
+                      />
+                    </td>
+                  )}
+                  {columns.map((column) => (
                     <td
                       key={column.key}
                       className={cn(
@@ -131,21 +171,7 @@ export function Table<T>({
                         column.className,
                       )}
                     >
-                      {selectable && index === 0 ? (
-                        <div className="flex items-center gap-3">
-                          <input
-                            type="checkbox"
-                            checked={selected}
-                            onChange={(event) => toggle(key, event.target.checked)}
-                            onClick={(event) => event.stopPropagation()}
-                            aria-label={`Select row ${key}`}
-                            className="size-4 shrink-0 cursor-pointer rounded-sm border-border accent-primary"
-                          />
-                          {column.cell(row)}
-                        </div>
-                      ) : (
-                        column.cell(row)
-                      )}
+                      {column.cell(row, rowIndex)}
                     </td>
                   ))}
                   {actions && (