Editable Cells Table

<!--
  A reading cell is a full-width <button> so it is keyboard-reachable and clearly
  interactive; activating it swaps in an <input> with an aria-label naming the
  field. Commit on Enter or blur, cancel on Escape - a lost edit on a blur is the
  most common data-grid bug. Non-editable columns render as plain text. (State
  lives in React/TS; this markup shows one cell mid-edit.)
-->
<div class="w-full overflow-x-auto">
  <table class="w-full min-w-[32rem] border-collapse text-left text-sm">
    <thead>
      <tr class="border-b border-gray-200 dark:border-gray-800">
        <th scope="col" class="px-3 py-2.5 font-medium text-gray-700 dark:text-gray-300">Item</th>
        <th scope="col" class="px-3 py-2.5 font-medium text-gray-700 dark:text-gray-300">Qty</th>
      </tr>
    </thead>
    <tbody>
      <tr class="border-b border-gray-100 dark:border-gray-800">
        <td class="px-1 py-1">
          <button type="button" class="w-full rounded px-2 py-1.5 text-left text-gray-700 hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-gray-300 dark:hover:bg-gray-800 dark:focus-visible:ring-blue-400">Cardstock</button>
        </td>
        <td class="px-1 py-1">
          <input type="text" aria-label="Edit Qty" value="12" class="w-full rounded border border-blue-500 bg-white px-2 py-1.5 text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:bg-gray-950 dark:text-gray-100 dark:focus-visible:ring-blue-400" />
        </td>
      </tr>
    </tbody>
  </table>
</div>