Spreadsheet Keyboard Navigation Table — Excel-Style Arrow Key Grid HTML CSS JS

<div class="skn-card">
  <div class="skn-head">
    <h3>Sheet1</h3>
    <p class="skn-hint">Arrow keys to move &middot; Tab / Shift+Tab &middot; Enter to edit &middot; Esc to cancel</p>
  </div>
  <table class="skn-table" id="sknTable" tabindex="0"></table>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#f4f6fb;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}

.skn-card{background:#fff;border-radius:14px;padding:16px;width:100%;max-width:600px;box-shadow:0 18px 44px rgba(15,23,42,.1)}
.skn-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;flex-wrap:wrap;gap:4px}
.skn-head h3{font-size:14px;font-weight:800;color:#0f172a}
.skn-hint{font-size:11px;color:#94a3b8;font-weight:600}

.skn-table{border-collapse:collapse;width:100%;font-size:12.5px;outline:none;user-select:none}
.skn-table td{border:1px solid #e2e8f0;padding:0;position:relative}
.skn-table .skn-col-head,.skn-table .skn-row-head{background:#f1f5f9;color:#64748b;font-weight:700;text-align:center;font-size:11px;padding:6px 4px}
.skn-cell{padding:7px 10px;color:#1e293b;min-height:14px;text-align:right;font-variant-numeric:tabular-nums;cursor:cell}
.skn-cell[data-col="0"]{text-align:left}

.skn-cell.active{outline:2px solid #6366f1;outline-offset:-2px;background:#eef2ff;z-index:2}
.skn-cell.editing{padding:0}
.skn-cell.editing input{width:100%;border:none;outline:none;padding:6px 9px;font:inherit;text-align:inherit;background:#fff;box-shadow:inset 0 0 0 2px #6366f1}

var COLS = ['Item', 'Qty', 'Unit Price', 'Total'];
var DATA = [
  ['Widget A', '12', '4.50', '54.00'],
  ['Widget B', '5', '19.99', '99.95'],
  ['Bracket', '30', '0.75', '22.50'],
  ['Bolt Pack', '8', '3.20', '25.60'],
  ['Panel', '3', '58.00', '174.00'],
];

var table = document.getElementById('sknTable');
var active = { row: 0, col: 0 };
var editing = false;

function buildTable() {
  var thead = '<tr><td class="skn-col-head"></td>' + COLS.map(function (c) { return '<td class="skn-col-head">' + c + '</td>'; }).join('') + '</tr>';
  var rows = DATA.map(function (r, ri) {
    var cells = r.map(function (v, ci) {
      return '<td class="skn-cell" data-row="' + ri + '" data-col="' + ci + '"><span class="skn-val">' + v + '</span></td>';
    }).join('');
    return '<tr><td class="skn-row-head">' + (ri + 1) + '</td>' + cells + '</tr>';
  }).join('');
  table.innerHTML = thead + rows;
}

function cellEl(row, col) {
  return table.querySelector('.skn-cell[data-row="' + row + '"][data-col="' + col + '"]');
}

function clearActive() {
  var prev = table.querySelector('.skn-cell.active');
  if (prev) prev.classList.remove('active');
}

function setActive(row, col) {
  row = Math.max(0, Math.min(DATA.length - 1, row));
  col = Math.max(0, Math.min(COLS.length - 1, col));
  clearActive();
  active = { row: row, col: col };
  var el = cellEl(row, col);
  if (el) el.classList.add('active');
  table.focus();
}

function startEdit() {
  var el = cellEl(active.row, active.col);
  if (!el || editing) return;
  editing = true;
  var value = DATA[active.row][active.col];
  el.classList.add('editing');
  el.innerHTML = '<input type="text" value="' + value.replace(/"/g, '&quot;') + '">';
  var input = el.querySelector('input');
  input.focus();
  input.select();

  function commit(save) {
    if (!editing) return;
    editing = false;
    if (save) DATA[active.row][active.col] = input.value;
    el.classList.remove('editing');
    el.innerHTML = '<span class="skn-val">' + DATA[active.row][active.col] + '</span>';
    el.classList.add('active');
    table.focus();
  }

  input.addEventListener('keydown', function (e) {
    if (e.key === 'Enter') { e.preventDefault(); commit(true); setActive(active.row + 1, active.col); }
    else if (e.key === 'Escape') { e.preventDefault(); commit(false); }
    else if (e.key === 'Tab') { e.preventDefault(); commit(true); setActive(active.row, active.col + (e.shiftKey ? -1 : 1)); }
  });
  input.addEventListener('blur', function () { commit(true); });
}

table.addEventListener('click', function (e) {
  var cell = e.target.closest('.skn-cell');
  if (!cell) return;
  setActive(Number(cell.dataset.row), Number(cell.dataset.col));
});

table.addEventListener('dblclick', function (e) {
  var cell = e.target.closest('.skn-cell');
  if (!cell) return;
  setActive(Number(cell.dataset.row), Number(cell.dataset.col));
  startEdit();
});

table.addEventListener('keydown', function (e) {
  if (editing) return;
  switch (e.key) {
    case 'ArrowUp': e.preventDefault(); setActive(active.row - 1, active.col); break;
    case 'ArrowDown': e.preventDefault(); setActive(active.row + 1, active.col); break;
    case 'ArrowLeft': e.preventDefault(); setActive(active.row, active.col - 1); break;
    case 'ArrowRight': e.preventDefault(); setActive(active.row, active.col + 1); break;
    case 'Tab': e.preventDefault(); setActive(active.row, active.col + (e.shiftKey ? -1 : 1)); break;
    case 'Enter': e.preventDefault(); startEdit(); break;
    default:
      if (e.key.length === 1 && !e.ctrlKey && !e.metaKey) {
        startEdit();
        var input = table.querySelector('.skn-cell.editing input');
        if (input) input.value = '';
      }
  }
});

buildTable();
setActive(0, 0);