Data table — People-by-day availability grid

Names form rows and days form columns in a simple availability matrix. Use to scan a small team schedule without a full calendar.

ReactHTML

1440 × 900

Open in new tab

Component.tsx113 lines

export default function DataTableAvailabilityGrid() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6 py-16 sm:py-24">
        <div>
          <h1 className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
            Team availability
          </h1>
          <p className="mt-4 max-w-2xl text-lg text-pretty text-neutral-600">
            Compare open days before choosing a shared meeting time.
          </p>
        </div>
        <table className="mt-8 w-full table-fixed text-left">
          <caption className="sr-only">
            Team availability from Monday 12 to Wednesday 14 October
          </caption>
          <thead className="bg-neutral-50">
            <tr>
              <th
                scope="col"
                className="px-3 py-3 text-left text-sm font-medium w-1/3"
              >
                Member
              </th>
              <th
                scope="col"
                className="px-3 py-3 text-left text-sm font-medium text-center px-1"
              >
                Mon 12
              </th>
              <th
                scope="col"
                className="px-3 py-3 text-left text-sm font-medium text-center px-1"
              >
                Tue 13
              </th>
              <th
                scope="col"
                className="px-3 py-3 text-left text-sm font-medium text-center px-1"
              >
                Wed 14
              </th>
            </tr>
          </thead>
          <tbody>
            <tr className="border-t border-neutral-200">
              <th
                scope="row"
                className="px-3 py-4 text-sm text-left font-medium "
              >
                Alex Rivera
              </th>
              <td className="px-1 py-4 text-center text-xs font-medium text-neutral-900">
                Free
              </td>
              <td className="px-1 py-4 text-center text-xs text-neutral-500">
                Busy
              </td>
              <td className="px-1 py-4 text-center text-xs font-medium text-neutral-900">
                Free
              </td>
            </tr>
            <tr className="border-t border-neutral-200">
              <th
                scope="row"
                className="px-3 py-4 text-sm text-left font-medium "
              >
                Jordan Lee
              </th>
              <td className="px-1 py-4 text-center text-xs text-neutral-500">
                Busy
              </td>
              <td className="px-1 py-4 text-center text-xs font-medium text-neutral-900">
                Free
              </td>
              <td className="px-1 py-4 text-center text-xs font-medium text-neutral-900">
                Free
              </td>
            </tr>
            <tr className="border-t border-neutral-200">
              <th
                scope="row"
                className="px-3 py-4 text-sm text-left font-medium "
              >
                Sam Taylor
              </th>
              <td className="px-1 py-4 text-center text-xs font-medium text-neutral-900">
                Free
              </td>
              <td className="px-1 py-4 text-center text-xs font-medium text-neutral-900">
                Free
              </td>
              <td className="px-1 py-4 text-center text-xs text-neutral-500">
                Busy
              </td>
            </tr>
          </tbody>
        </table>
        <div className="mt-6 flex flex-wrap items-center justify-between gap-4">
          <p className="text-sm text-neutral-500">
            Free: open day · Busy: unavailable
          </p>
          <a
            href="#"
            className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
          >
            Open full schedule
          </a>
        </div>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use for a small people/day availability snapshot. Choose a schedule dashboard for detailed times and appointments. Variations: compare three resources, replace days with time windows, or display capacity counts instead of availability.
Hierarchy: The h1 leads to named rows and date-labelled columns. Free and Busy are written words so status remains clear without color. Names allow 24 characters, title 5 words and lede 14.
Responsive: All three days remain visible at 320px. Day labels and member names wrap inside their cells; a narrow side padding protects the grid width. Footer legend and link wrap independently.
Layout: White section with a 1152px max-w-6xl container, 24px side gutters and 64px vertical padding, increasing to 96px at 640px. The fixed table starts after 32px. Names use one third of the width; three days share the remaining space. Member cells have 12px side padding while day cells use 4px; all rows use 16px vertical padding.
States: Links and controls have a 2px neutral-900 keyboard-focus outline offset by 2px. Filled actions change to neutral-700 on hover, outlined actions to neutral-50, and underlined links to neutral-600. Native form fields retain browser validation; controls describe structure and need application integration for persistence or navigation.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│Team availability                                             │
│Member                  Mon 12      Tue 13      Wed 14        │
│Alex Rivera              Free        Busy        Free         │
│Jordan Lee               Busy        Free        Free         │
│Sam Taylor               Free        Free        Busy         │
│Free: open day | Busy: unavailable       [Full schedule]      │
└──────────────────────────────────────────────────────────────┘

View all

Data table — Audit log with date bands
Layout tags: table,list,compact
Data table — Dense table with priority columns
Layout tags: stacked,table,numbers,compact
Data table — Expandable rows
Layout tags: stacked,table,list

Data table — People-by-day availability grid

Pattern notes

More in Data table

Data table — Audit log with date bands

Data table — Dense table with priority columns

Data table — Expandable rows