Tables in React — React Technical Interview Questions & Answers

Tables in React

Tables in React

  • Use a real <table>, <thead>, <tbody>, <tr>, <th>, <td>. Map rows to <tr key={id}>. Don’t fake a table with twenty divs if the data is tabular — accessibility and copy-paste into Excel both suffer.
  • Sticky header and sort are extra. First get the markup and keys right. Libraries (TanStack Table) wait until the plain table is boringly correct.
  • Tables in React — on screen: a two-column marks table. Screen readers get a real <table>.

Technical Interview Tip: Semantic table + key on tr.

Code Examples for Tables in React

Example

// Table
const rows = [
  { id: 1, name: "Asha", marks: 72 },
  { id: 2, name: "Kabir", marks: 40 },
];

export default function Marks() {
  return (
    <table>
      <thead>
        <tr><th>Name</th><th>Marks</th></tr>
      </thead>
      <tbody>
        {rows.map((r) => (
          <tr key={r.id}>
            <td>{r.name}</td>
            <td>{r.marks}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

Tables in React — on screen: a two-column marks table. Screen readers get a real <table>.

How to Explain Tables in React to an Interviewer

Explain Tables as if you are teaching a junior — definition, then one tiny UI.

table/thead/tbody/tr. on <tr>.

What does the example show on screen (or print), and what does that prove?

Tables in React — on screen: a two-column marks table

What mistake do freshers make with Tables?

div soup for tabular data.