Data table

React, Components · Nov 3, 2020

Renders a table with rows dynamically created from an array of primitives.

  • Render a <table> element with two columns (ID and Value).
  • Use Array.prototype.map() to render every item in data as a <tr> element with an appropriate key.
const DataTable = ({ data }) => {
  return (
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Value</th>
        </tr>
      </thead>
      <tbody>
        {data.map((val, i) => (
          <tr key={`${i}_${val}`}>
            <td>{i}</td>
            <td>{val}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};
const people = ['John', 'Jesse'];
ReactDOM.render(<DataTable data={people} />, document.getElementById('root'));

More like this

  • Object table view

    Renders a table with rows dynamically created from an array of objects and a list of property names.

    React, Components · Sep 6, 2020

  • Data list

    Renders a list of elements from an array of primitives.

    React, Components · Nov 3, 2020

  • Expandable object tree view

    Renders a tree view of a JSON object or array with collapsible content.

    React, Components · Nov 16, 2020