Turn an array of objects into a table

At work we use a number of javascript files that hold constants we can import to any of our builders or editors. The structure looks something like:

export const importantThing = [
    {
        id: 'slug',
        displayText: 'nice name',
        helpUrl: 'someurl.com/docs/nice-name'
        ...
    },
    ...etc
]

So a fairly large array of objects which makes it easy to work with. With this data structure I needed to export a whole bunch of these objects out and into a table. After a bit of searching there wasn’t anything I could drop in to the tiny project I created to build the tables.

I ended up with two functions that render first the table header and then the table rows:

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

function renderTableRows(data) {
	const keys = Object.keys(data[0]);
	const table = data.map((row, index) => {
		return (
			<tr key={index}>
				{keys.map((key, index) => <td key={index}>{JSON.stringify(row[key])}</td>)}
			</tr>
		)
	});
	return table;
}

When implemented in the react component:

<table className="table table-sm">
  <tbody>
    <tr>{renderTableHeader(importantThing)}</tr> 
      {renderTableRows(importantThing)}
  </tbody>
</table>

Small and simple without any external libraries or extra bells and whistles. This gives a very plain table that I can easily copy and paste into a spreadsheet, print, or in this case share with another team so they have easy access to all of the underlying data from our production app.

[wpforms id="1992" title="false" description="false"]
<div class="wpforms-container wpforms-container-full" id="wpforms-1992"><form id="wpforms-form-1992" class="wpforms-validate wpforms-form" data-formid="1992" method="post" enctype="multipart/form-data" action="/turn-an-array-of-objects-into-a-table/"><noscript class="wpforms-error-noscript">Please enable JavaScript in your browser to complete this form.</noscript><div class="wpforms-field-container"><div id="wpforms-1992-field_0-container" class="wpforms-field wpforms-field-name" data-field-id="0"><label class="wpforms-field-label" for="wpforms-1992-field_0">Name <span class="wpforms-required-label">*</span></label><div class="wpforms-field-row wpforms-field-large"><div class="wpforms-field-row-block wpforms-first wpforms-one-half"><input type="text" id="wpforms-1992-field_0" class="wpforms-field-name-first wpforms-field-required" name="wpforms[fields][0][first]" required><label for="wpforms-1992-field_0" class="wpforms-field-sublabel after ">First</label></div><div class="wpforms-field-row-block wpforms-one-half"><input type="text" id="wpforms-1992-field_0-last" class="wpforms-field-name-last wpforms-field-required" name="wpforms[fields][0][last]" required><label for="wpforms-1992-field_0-last" class="wpforms-field-sublabel after ">Last</label></div></div></div><div id="wpforms-1992-field_1-container" class="wpforms-field wpforms-field-email" data-field-id="1"><label class="wpforms-field-label" for="wpforms-1992-field_1">Email <span class="wpforms-required-label">*</span></label><input type="email" id="wpforms-1992-field_1" class="wpforms-field-medium wpforms-field-required" name="wpforms[fields][1]" required></div><div id="wpforms-1992-field_2-container" class="wpforms-field wpforms-field-textarea" data-field-id="2"><label class="wpforms-field-label" for="wpforms-1992-field_2">Comment or Message <span class="wpforms-required-label">*</span></label><textarea id="wpforms-1992-field_2" class="wpforms-field-medium wpforms-field-required" name="wpforms[fields][2]" required></textarea></div></div><div class="wpforms-field wpforms-field-hp"><label for="wpforms-1992-field-hp" class="wpforms-field-label">Website</label><input type="text" name="wpforms[hp]" id="wpforms-1992-field-hp" class="wpforms-field-medium"></div><div class="wpforms-submit-container" ><input type="hidden" name="wpforms[id]" value="1992"><input type="hidden" name="wpforms[author]" value="1"><input type="hidden" name="wpforms[post_id]" value="2256"><button type="submit" name="wpforms[submit]" class="wpforms-submit " id="wpforms-submit-1992" value="wpforms-submit" aria-live="assertive" data-alt-text="Sending..." data-submit-text="Submit">Submit</button></div></form></div> <!-- .wpforms-container -->