React · Theory

Tables in React

Theory

32/94

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>.

Exam tip

Semantic table + key on tr.

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>.

Short notes

Markup : table/thead/tbody/tr.
Key : on <tr>.
Trapdiv soup for tabular data.

// 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

Example

Short notes

Questions

Tables in React

Example

Short notes

Questions