Dynamically parse data for table rows

Question

I am trying to parse the data dynamically for the table. So far I have tried the following to display the table.

  renderTableData = () => {
    return this.props.data.map((item, index) => {
      const { name, value } = item;
      return (
        <tr key={index}>
          <td>{name}</td>
          <td>{value}</td>
        </tr>
      );
    });
  };

Here I am hardcoding the field values for displaying. I need this to be dynamic

Full code: https://codesandbox.io/s/react-basic-class-component-3kpp5?file=/src/Table.js:0-805

import * as React from "react";

class Table extends React.Component {
  renderTableData = () => {
    return this.props.data.map((item, index) => {
      const { name, value } = item;
      return (
        <tr key={index}>
          <td>{name}</td>
          <td>{value}</td>
        </tr>
      );
    });
  };

  renderTableHeader = () => {
    let header = Object.keys(this.props.data[0]);
    return header.map((key, index) => {
      return <th key={index}>{key.toUpperCase()}</th>;
    });
  };

  render() {
    return (
      <div>
        <table>
          <tbody>
            <tr>{this.renderTableHeader()}</tr>
            {this.renderTableData()}
          </tbody>
        </table>
      </div>
    );
  }
}

export default Table;

Answer 1

You can loop through object properties with Object.entries

 renderTableData = () => {
    return this.props.data.map((item, index) => {
      return (
        <tr key={index}>
          {Object.entries(item).map(([key, value])=> <td key={key}>{value}</td>)}
        </tr>
      );
    });
  };

However, as you can see you lost control of the order of columns. Additionaly there might be columns you don't wish to display.

You can tackle that by appending Object.entries with custom implemented functions

<tr key={index}>
  {Object.entries(item)
   .filter(predicateFunction)
   .sort(sortingFunction).map(([key, value])=> <td key={key}>{value}</td>)}
</tr>

Or switch to react-data-table