Build a Generate Table (rows x columns) | Interview Question

Q: Build a Generate Table (rows x columns)

**Target Audience:** Beginners preparing for a frontend machine coding round. Assumes basic HTML and JavaScript; React ideas are explained as they come up. **Difficulty:** Easy > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. The Verified output comes from mounting the solution with React 19.3.1 inside <StrictMode> in jsdom and driving the form with a script. ## 1. Why This Even Matters — A Story First Picture a cinema usher seating a school group. She fills the first column of seats from the front row to the back, then walks one aisle over and fills the next column from the back to the front, so she never walks back empty-handed. Number the children in the order they sat and you get exactly the "snake" table this question asks for. The question looks like a loop exercise, and it is partly that. But interviewers use it to check three things that matter in real forms: keeping what the user is typing separate from wha

The problem

Question presented to candidate: "Build a small form with two number inputs, Rows and Columns, and a Generate button. When the user submits, render a table of that size filled with the numbers 1 to rows times columns. The numbers go down the first column, then up the second column, down the third, and so on, like a snake."

Requirements:

Two labelled number inputs (1 to 20) and a Generate button; Enter in either input submits.
The table only changes when the form is submitted, not while typing.
Cell values snake through the columns: for 4 x 5 the first row is 1 8 9 16 17.
Invalid input (empty, 0, decimals, above 20) shows an error per field, marks it invalid, and keeps the last valid table on screen.

What a strong answer should cover:

Separate draft state (what is in the inputs, as typed) from committed state (the last valid size); the grid is derived from the committed size.
A closed-form formula for each cell: even column col * rows + row + 1, odd column col * rows + (rows - row).
Number input quirks: the DOM value is a string, empty inputs, decimals, and framework conversions (Vue v-model and Angular ngModel hand back numbers).
Accessible errors with aria-invalid and aria-describedby, a <caption>, and a form submit handler rather than a click handler.
Stable keys when rendering rows and cells, and an upper bound to keep the DOM small.

Clarifying questions expected:

"Is the snake order column-wise or row-wise, and does it start at 1?"
"What are the maximum sizes, and should the table update live as I type?"

Code / implementation expected: Yes. A form with validation and a generated table in the framework of your choice.

Rendering
Lists
Forms

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Beginners preparing for a frontend machine coding round. Assumes basic HTML and JavaScript; React ideas are explained as they come up. Difficulty: Easy

How to read this doc: Plain language first, then 📌 Interview term: callouts. The Verified output comes from mounting the solution with React 19.3.1 inside <StrictMode> in jsdom and driving the form with a script.

1. Why This Even Matters — A Story First

Picture a cinema usher seating a school group. She fills the first column of seats from the front row to the back, then walks one aisle over and fills the next column from the back to the front, so she never walks back empty-handed. Number the children in the order they sat and you get exactly the "snake" table this question asks for.

The question looks like a loop exercise, and it is partly that. But interviewers use it to check three things th

The solution is hidden so you can try first

10 min read · 9 sections

React solution

Every file of the working solution. Open it in the playground to run and change it.

ReactComplete solution

Open in playground

import TableGenerator from "./src/components/TableGenerator";

export default function App() {
  return (
    <main className="app">
      <h1>Generate table</h1>
      <TableGenerator />
    </main>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.