Skip to content
Browse themes
Product block

Column Show, Hide & Reorder

Reordering that works from the keyboard rather than by drag alone, pinned columns that cannot be hidden or moved, and a guard so the last visible column cannot be unchecked into a blank table.

219 lineslucide-reactAdded 24 Aug 2026Updated 10 Sept 2026
  • table
  • columns
  • customise
  • reorder
  • visibility

What's included

  • components/data-table-column-manager.tsx
  • Needs lucide-react

Works with

  • React
  • Next.js
  • Tailwind CSS
  • TypeScript

npx hoverlab add data-table-column-manager

Or over MCP, from your editor's agent — no account needed.

License

Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.

Was this useful?

Start a page with this section — add more, order them, and leave with the page source.

Preview

Columns

5 of 8 shown

Column order: Name, Status, Owner, Plan, Created

Rendered live in your current theme — this is the same component whose source is below, not a screenshot of it.

Source

components/data-table-column-manager.tsx
'use client'

/**
 * <DataTableColumnManager> — show, hide and reorder a table's columns.
 *
 * The control that turns a fixed report into a table people can live in.
 * Three things it gets right that most implementations do not:
 *
 *  - Reordering works from the keyboard. Almost every column manager is
 *    drag-only, which means it does not work for anyone using a keyboard,
 *    a screen reader, or a trackpad they find fiddly. Move-up/move-down
 *    buttons are unglamorous and they work for everybody; a drag handle can
 *    be added on top, never underneath.
 *
 *  - Pinned columns cannot be hidden or moved out of the front. An id
 *    column that scrolls away or disappears leaves rows nothing to identify
 *    them by, and the resulting table is unreadable in a way the user
 *    cannot diagnose.
 *
 *  - The last visible column cannot be hidden. A table with zero columns is
 *    a blank rectangle with no way back, and users find it by unchecking
 *    boxes one at a time.
 *
 * Order is the array's order. There is no `position: number` field to keep
 * consistent, because two sources of truth for order is how a column ends
 * up in two places at once.
 */

import * as React from 'react'
import { ArrowUp, ArrowDown, Check, Pin, Columns3, RotateCcw } from 'lucide-react'

export interface ColumnDef {
  id: string
  label: string
  visible: boolean
  /** Always shown, always first. Cannot be hidden or reordered. */
  pinned?: boolean
}

export interface DataTableColumnManagerProps {
  columns?: ColumnDef[]
  onChange?: (next: ColumnDef[]) => void
  className?: string
}

const DEFAULT_COLUMNS: ColumnDef[] = [
  { id: 'name', label: 'Name', visible: true, pinned: true },
  { id: 'status', label: 'Status', visible: true },
  { id: 'owner', label: 'Owner', visible: true },
  { id: 'plan', label: 'Plan', visible: true },
  { id: 'seats', label: 'Seats', visible: false },
  { id: 'created', label: 'Created', visible: true },
  { id: 'lastActive', label: 'Last active', visible: false },
  { id: 'mrr', label: 'MRR', visible: false },
]

/**
 * Move a column one place, without letting it cross the pinned block.
 *
 * Exported because the index arithmetic is the part worth testing: an
 * off-by-one here silently swaps the wrong pair, and the bug is invisible
 * in a screenshot.
 */
export function moveColumn(columns: ColumnDef[], id: string, delta: -1 | 1): ColumnDef[] {
  const from = columns.findIndex((c) => c.id === id)
  if (from < 0 || columns[from]!.pinned) return columns

  const to = from + delta
  if (to < 0 || to >= columns.length) return columns
  // Refuse to swap with a pinned column rather than silently doing nothing
  // at a different index — the caller's guard and this one agree.
  if (columns[to]!.pinned) return columns

  const next = [...columns]
  ;[next[from], next[to]] = [next[to]!, next[from]!]
  return next
}

export function DataTableColumnManager({
  columns = DEFAULT_COLUMNS,
  onChange,
  className,
}: DataTableColumnManagerProps) {
  /*
    Per-instance prefix for every id this block emits.

    The literals these replaced were a latent duplicate the moment the
    block appeared twice on one document, and `aria-labelledby` on a
    duplicated id resolves to the first match -- so the second copy was
    labelled by the first copy's heading. Client component, so `useId` is
    the right tool.
  */
  const uid = React.useId()

  const [initial] = React.useState(columns)
  const [state, setState] = React.useState(columns)

  const commit = (next: ColumnDef[]) => {
    setState(next)
    onChange?.(next)
  }

  const visibleCount = state.filter((c) => c.visible).length

  const toggle = (id: string) => {
    const column = state.find((c) => c.id === id)
    if (!column || column.pinned) return
    // The last visible column stays visible. See the note at the top.
    if (column.visible && visibleCount <= 1) return
    commit(state.map((c) => (c.id === id ? { ...c, visible: !c.visible } : c)))
  }

  const firstMovable = state.findIndex((c) => !c.pinned)

  return (
    <section
      className={`w-full max-w-sm rounded-2xl border border-border/60 bg-card ${className ?? ''}`}
      aria-labelledby={`${uid}-columns-heading`}
    >
      <header className="flex items-center gap-2 border-b border-border/60 px-5 py-3.5">
        <Columns3 aria-hidden className="h-4 w-4 text-muted-foreground" />
        <h2 id={`${uid}-columns-heading`} className="text-sm font-semibold tracking-tight">
          Columns
        </h2>
        <span className="text-xs text-muted-foreground">
          {visibleCount} of {state.length} shown
        </span>
        <button
          type="button"
          onClick={() => commit(initial)}
          className="ms-auto inline-flex items-center gap-1 rounded-lg px-2 py-1 text-xs font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
        >
          <RotateCcw aria-hidden className="h-3 w-3" />
          Reset
        </button>
      </header>

      <ul className="py-1.5">
        {state.map((column, index) => {
          const canMoveUp = !column.pinned && index > firstMovable
          const canMoveDown = !column.pinned && index < state.length - 1
          const lastVisible = column.visible && visibleCount <= 1

          return (
            <li key={column.id} className="flex items-center gap-2 px-3 py-1">
              <label
                className={`flex flex-1 items-center gap-2.5 rounded-lg px-2 py-1.5 text-sm ${
                  column.pinned || lastVisible
                    ? 'cursor-not-allowed opacity-60'
                    : 'cursor-pointer hover:bg-muted/60'
                }`}
                title={
                  column.pinned
                    ? 'Pinned columns are always shown'
                    : lastVisible
                      ? 'At least one column has to stay visible'
                      : undefined
                }
              >
                <span className="relative flex h-4 w-4 shrink-0 items-center justify-center">
                  <input
                    type="checkbox"
                    checked={column.visible}
                    disabled={column.pinned || lastVisible}
                    onChange={() => toggle(column.id)}
                    className="peer h-4 w-4 appearance-none rounded border border-border bg-background checked:border-primary checked:bg-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed"
                  />
                  <Check
                    aria-hidden
                    className="pointer-events-none absolute h-3 w-3 text-primary-foreground opacity-0 peer-checked:opacity-100"
                  />
                </span>
                <span className="flex-1 truncate">{column.label}</span>
                {column.pinned ? (
                  <Pin aria-hidden className="h-3 w-3 shrink-0 text-muted-foreground" />
                ) : null}
              </label>

              {/*
                Buttons, not a drag handle. Reordering has to work without a
                pointer; a handle is an addition, never the only route.
              */}
              <span className="flex shrink-0 items-center">
                <button
                  type="button"
                  disabled={!canMoveUp}
                  onClick={() => commit(moveColumn(state, column.id, -1))}
                  aria-label={`Move ${column.label} up`}
                  className="rounded-md p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-25"
                >
                  <ArrowUp aria-hidden className="h-3.5 w-3.5" />
                </button>
                <button
                  type="button"
                  disabled={!canMoveDown}
                  onClick={() => commit(moveColumn(state, column.id, 1))}
                  aria-label={`Move ${column.label} down`}
                  className="rounded-md p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-25"
                >
                  <ArrowDown aria-hidden className="h-3.5 w-3.5" />
                </button>
              </span>
            </li>
          )
        })}
      </ul>

      {/*
        Announced, not merely drawn. Someone reordering with the keyboard
        gets no visual scan of the list, so the resulting order has to be
        readable as text.
      */}
      <p aria-live="polite" className="sr-only">
        Column order: {state.filter((c) => c.visible).map((c) => c.label).join(', ')}
      </p>
    </section>
  )
}

Before you paste

  • Styling is Tailwind utility classes on semantic tokens (bg-card, text-muted-foreground) — it inherits your theme instead of overriding it.
  • Install: npm i lucide-react
  • Every prop has a default, so it renders standalone before you wire it up.

Where it goes

Drop it at components/data-table-column-manager.tsx and import it where you need the section:

import { DataTableColumnManager } from '@/components/data-table-column-manager'

Props

Read out of the component’s own type and signature, so this cannot drift from the source below. Every prop has a default — the component renders standalone before you pass it anything.

PropTypeDefault
columnsColumnDef[]DEFAULT_COLUMNS
onChange(next: ColumnDef[]) => void—
classNamestring—

Not using React?

The same block rendered once to markup, wrapped as a file your framework compiles. Tailwind classes are framework-agnostic, so the design transfers intact — the behaviour does not.

This block is interactive. The markup below is its initial state with the event handlers stripped — you will need to re-wire the behaviour in your framework.

data-table-column-manager.html
<!--
  Column Show, Hide & Reorder — markup from the Hoverlab catalog.

  This is the block rendered once to HTML and wrapped as a component
  file. It is not a port of the React source: the Tailwind classes carry
  the design, which is the part that took the work, and they are the same
  in every framework.

  This block is interactive in React and the handlers are NOT here.
  Buttons, toggles and menus render in their initial state and do
  nothing until you wire them up.
-->
<section class="w-full max-w-sm rounded-2xl border border-border/60 bg-card " aria-labelledby="_R_0_-columns-heading">
  <header class="flex items-center gap-2 border-b border-border/60 px-5 py-3.5">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-columns3 lucide-columns-3 h-4 w-4 text-muted-foreground" aria-hidden="true">
      <rect width="18" height="18" x="3" y="3" rx="2"></rect>
      <path d="M9 3v18"></path>
      <path d="M15 3v18"></path>
    </svg>
    <h2 id="_R_0_-columns-heading" class="text-sm font-semibold tracking-tight">Columns</h2>
    <span class="text-xs text-muted-foreground">5 of 8 shown</span>
    <button type="button" class="ms-auto inline-flex items-center gap-1 rounded-lg px-2 py-1 text-xs font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rotate-ccw h-3 w-3" aria-hidden="true"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path></svg>Reset</button>
  </header>
  <ul class="py-1.5">
    <li class="flex items-center gap-2 px-3 py-1">
      <label class="flex flex-1 items-center gap-2.5 rounded-lg px-2 py-1.5 text-sm cursor-not-allowed opacity-60" title="Pinned columns are always shown">
        <span class="relative flex h-4 w-4 shrink-0 items-center justify-center">
          <input type="checkbox" disabled="" class="peer h-4 w-4 appearance-none rounded border border-border bg-background checked:border-primary checked:bg-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed" checked="" />
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check pointer-events-none absolute h-3 w-3 text-primary-foreground opacity-0 peer-checked:opacity-100" aria-hidden="true">
            <path d="M20 6 9 17l-5-5"></path>
          </svg>
        </span>
        <span class="flex-1 truncate">Name</span>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pin h-3 w-3 shrink-0 text-muted-foreground" aria-hidden="true">
          <path d="M12 17v5"></path>
          <path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"></path>
        </svg>
      </label>
      <span class="flex shrink-0 items-center">
        <button type="button" disabled="" aria-label="Move Name up" class="rounded-md p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-25">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up h-3.5 w-3.5" aria-hidden="true">
            <path d="m5 12 7-7 7 7"></path>
            <path d="M12 19V5"></path>
          </svg>
        </button>
        <button type="button" disabled="" aria-label="Move Name down" class="rounded-md p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-25">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down h-3.5 w-3.5" aria-hidden="true">
            <path d="M12 5v14"></path>
            <path d="m19 12-7 7-7-7"></path>
          </svg>
        </button>
      </span>
    </li>
    <li class="flex items-center gap-2 px-3 py-1">
      <label class="flex flex-1 items-center gap-2.5 rounded-lg px-2 py-1.5 text-sm cursor-pointer hover:bg-muted/60">
        <span class="relative flex h-4 w-4 shrink-0 items-center justify-center">
          <input type="checkbox" class="peer h-4 w-4 appearance-none rounded border border-border bg-background checked:border-primary checked:bg-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed" checked="" />
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check pointer-events-none absolute h-3 w-3 text-primary-foreground opacity-0 peer-checked:opacity-100" aria-hidden="true">
            <path d="M20 6 9 17l-5-5"></path>
          </svg>
        </span>
        <span class="flex-1 truncate">Status</span>
      </label>
      <span class="flex shrink-0 items-center">
        <button type="button" disabled="" aria-label="Move Status up" class="rounded-md p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-25">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up h-3.5 w-3.5" aria-hidden="true">
            <path d="m5 12 7-7 7 7"></path>
            <path d="M12 19V5"></path>
          </svg>
        </button>
        <button type="button" aria-label="Move Status down" class="rounded-md p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-25">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down h-3.5 w-3.5" aria-hidden="true">
            <path d="M12 5v14"></path>
            <path d="m19 12-7 7-7-7"></path>
          </svg>
        </button>
      </span>
    </li>
    <li class="flex items-center gap-2 px-3 py-1">
      <label class="flex flex-1 items-center gap-2.5 rounded-lg px-2 py-1.5 text-sm cursor-pointer hover:bg-muted/60">
        <span class="relative flex h-4 w-4 shrink-0 items-center justify-center">
          <input type="checkbox" class="peer h-4 w-4 appearance-none rounded border border-border bg-background checked:border-primary checked:bg-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed" checked="" />
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check pointer-events-none absolute h-3 w-3 text-primary-foreground opacity-0 peer-checked:opacity-100" aria-hidden="true">
            <path d="M20 6 9 17l-5-5"></path>
          </svg>
        </span>
        <span class="flex-1 truncate">Owner</span>
      </label>
      <span class="flex shrink-0 items-center">
        <button type="button" aria-label="Move Owner up" class="rounded-md p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-25">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up h-3.5 w-3.5" aria-hidden="true">
            <path d="m5 12 7-7 7 7"></path>
            <path d="M12 19V5"></path>
          </svg>
        </button>
        <button type="button" aria-label="Move Owner down" class="rounded-md p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-25">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down h-3.5 w-3.5" aria-hidden="true">
            <path d="M12 5v14"></path>
            <path d="m19 12-7 7-7-7"></path>
          </svg>
        </button>
      </span>
    </li>
    <li class="flex items-center gap-2 px-3 py-1">
      <label class="flex flex-1 items-center gap-2.5 rounded-lg px-2 py-1.5 text-sm cursor-pointer hover:bg-muted/60">
        <span class="relative flex h-4 w-4 shrink-0 items-center justify-center">
          <input type="checkbox" class="peer h-4 w-4 appearance-none rounded border border-border bg-background checked:border-primary checked:bg-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed" checked="" />
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check pointer-events-none absolute h-3 w-3 text-primary-foreground opacity-0 peer-checked:opacity-100" aria-hidden="true">
            <path d="M20 6 9 17l-5-5"></path>
          </svg>
        </span>
        <span class="flex-1 truncate">Plan</span>
      </label>
      <span class="flex shrink-0 items-center">
        <button type="button" aria-label="Move Plan up" class="rounded-md p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-25">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up h-3.5 w-3.5" aria-hidden="true">
            <path d="m5 12 7-7 7 7"></path>
            <path d="M12 19V5"></path>
          </svg>
        </button>
        <button type="button" aria-label="Move Plan down" class="rounded-md p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-25">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down h-3.5 w-3.5" aria-hidden="true">
            <path d="M12 5v14"></path>
            <path d="m19 12-7 7-7-7"></path>
          </svg>
        </button>
      </span>
    </li>
    <li class="flex items-center gap-2 px-3 py-1">
      <label class="flex flex-1 items-center gap-2.5 rounded-lg px-2 py-1.5 text-sm cursor-pointer hover:bg-muted/60">
        <span class="relative flex h-4 w-4 shrink-0 items-center justify-center">
          <input type="checkbox" class="peer h-4 w-4 appearance-none rounded border border-border bg-background checked:border-primary checked:bg-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed" />
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check pointer-events-none absolute h-3 w-3 text-primary-foreground opacity-0 peer-checked:opacity-100" aria-hidden="true">
            <path d="M20 6 9 17l-5-5"></path>
          </svg>
        </span>
        <span class="flex-1 truncate">Seats</span>
      </label>
      <span class="flex shrink-0 items-center">
        <button type="button" aria-label="Move Seats up" class="rounded-md p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-25">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up h-3.5 w-3.5" aria-hidden="true">
            <path d="m5 12 7-7 7 7"></path>
            <path d="M12 19V5"></path>
          </svg>
        </button>
        <button type="button" aria-label="Move Seats down" class="rounded-md p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-25">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down h-3.5 w-3.5" aria-hidden="true">
            <path d="M12 5v14"></path>
            <path d="m19 12-7 7-7-7"></path>
          </svg>
        </button>
      </span>
    </li>
    <li class="flex items-center gap-2 px-3 py-1">
      <label class="flex flex-1 items-center gap-2.5 rounded-lg px-2 py-1.5 text-sm cursor-pointer hover:bg-muted/60">
        <span class="relative flex h-4 w-4 shrink-0 items-center justify-center">
          <input type="checkbox" class="peer h-4 w-4 appearance-none rounded border border-border bg-background checked:border-primary checked:bg-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed" checked="" />
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check pointer-events-none absolute h-3 w-3 text-primary-foreground opacity-0 peer-checked:opacity-100" aria-hidden="true">
            <path d="M20 6 9 17l-5-5"></path>
          </svg>
        </span>
        <span class="flex-1 truncate">Created</span>
      </label>
      <span class="flex shrink-0 items-center">
        <button type="button" aria-label="Move Created up" class="rounded-md p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-25">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up h-3.5 w-3.5" aria-hidden="true">
            <path d="m5 12 7-7 7 7"></path>
            <path d="M12 19V5"></path>
          </svg>
        </button>
        <button type="button" aria-label="Move Created down" class="rounded-md p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-25">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down h-3.5 w-3.5" aria-hidden="true">
            <path d="M12 5v14"></path>
            <path d="m19 12-7 7-7-7"></path>
          </svg>
        </button>
      </span>
    </li>
    <li class="flex items-center gap-2 px-3 py-1">
      <label class="flex flex-1 items-center gap-2.5 rounded-lg px-2 py-1.5 text-sm cursor-pointer hover:bg-muted/60">
        <span class="relative flex h-4 w-4 shrink-0 items-center justify-center">
          <input type="checkbox" class="peer h-4 w-4 appearance-none rounded border border-border bg-background checked:border-primary checked:bg-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed" />
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check pointer-events-none absolute h-3 w-3 text-primary-foreground opacity-0 peer-checked:opacity-100" aria-hidden="true">
            <path d="M20 6 9 17l-5-5"></path>
          </svg>
        </span>
        <span class="flex-1 truncate">Last active</span>
      </label>
      <span class="flex shrink-0 items-center">
        <button type="button" aria-label="Move Last active up" class="rounded-md p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-25">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up h-3.5 w-3.5" aria-hidden="true">
            <path d="m5 12 7-7 7 7"></path>
            <path d="M12 19V5"></path>
          </svg>
        </button>
        <button type="button" aria-label="Move Last active down" class="rounded-md p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-25">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down h-3.5 w-3.5" aria-hidden="true">
            <path d="M12 5v14"></path>
            <path d="m19 12-7 7-7-7"></path>
          </svg>
        </button>
      </span>
    </li>
    <li class="flex items-center gap-2 px-3 py-1">
      <label class="flex flex-1 items-center gap-2.5 rounded-lg px-2 py-1.5 text-sm cursor-pointer hover:bg-muted/60">
        <span class="relative flex h-4 w-4 shrink-0 items-center justify-center">
          <input type="checkbox" class="peer h-4 w-4 appearance-none rounded border border-border bg-background checked:border-primary checked:bg-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed" />
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check pointer-events-none absolute h-3 w-3 text-primary-foreground opacity-0 peer-checked:opacity-100" aria-hidden="true">
            <path d="M20 6 9 17l-5-5"></path>
          </svg>
        </span>
        <span class="flex-1 truncate">MRR</span>
      </label>
      <span class="flex shrink-0 items-center">
        <button type="button" aria-label="Move MRR up" class="rounded-md p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-25">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up h-3.5 w-3.5" aria-hidden="true">
            <path d="m5 12 7-7 7 7"></path>
            <path d="M12 19V5"></path>
          </svg>
        </button>
        <button type="button" disabled="" aria-label="Move MRR down" class="rounded-md p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-25">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down h-3.5 w-3.5" aria-hidden="true">
            <path d="M12 5v14"></path>
            <path d="m19 12-7 7-7-7"></path>
          </svg>
        </button>
      </span>
    </li>
  </ul>
  <p aria-live="polite" class="sr-only">Column order: Name, Status, Owner, Plan, Created</p>
</section>
  • This is rendered HTML, not a translation of the React source. The Tailwind classes carry the design and work in any framework.
  • It is one frame: the component in its initial state, with no props applied beyond the defaults.
  • This block is interactive in React — toggles, menus or form state. None of that survives here; the markup is the closed/default state and the handlers are gone. Re-wire them in your own framework.
  • Requires Tailwind, and the design tokens the classes reference (bg-card, text-muted-foreground, and so on). The template ZIPs ship a globals.css that defines them.

What each framework gets across the whole catalog — effects convert properly; this rung is markup.

For AI

The component, its props, the design tokens it expects and the command that installs it — as one prompt. Paste it into Claude, Cursor, v0 or ChatGPT and what they build around it will match the rest of the catalog instead of inventing its own system.

See the prompt
Used in these pages
Want the whole screen instead of this one section? Open a page and copy it entire.
7 more blocks in Data Tables
All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.
Browse Data Tables
Shipping one commercially
Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.
  • A commercial licence for everything in the catalog
  • Unlimited bundle exports, in Vue, Svelte and Tailwind
  • One payment — no subscription, nothing to renew
Pro — $79 once
More Data Tables blocks
View category
Open the full page for this block
Sortable Selectable Table
Type-aware sorting with aria-sort, a header checkbox that goes properly indeterminate, and selection that survives a re-sort.
Data Tables297 lines1 dep
Open the full page for this block
Table Search & Filter Bar
Search, filter count and view switch, with active filters shown as removable chips so a filtered table never looks unfiltered.
Data Tables180 lines1 dep
Open the full page for this block
Expandable Detail Rows
Rows that open into a full-width detail panel via colSpan, with aria-expanded and aria-controls wired to the detail row.
Data Tables205 lines1 dep
Open the full page for this block
Bulk Action Bar
The selection bar that asks the question most tables skip: this page, or all 1,284 rows the filter matches. Typed confirmation above a threshold, an undo with the window counting down, and a select-all that names its own scope.
Data Tables405 lines1 dep
Open the full page for this block
Inline Editable Table
Edit cells in the grid with staged changes, per-cell validation, the original value kept beside the attempt, and a save that counts what is still pending.
Data Tables301 lines1 dep
Open the full page for this block
Grouped Table with Subtotals
Collapsible group headers that carry their own subtotals while collapsed, with a grand total that sums every row rather than only the visible ones.
Data Tables238 lines1 dep