Renders a table with rows dynamically created from an array of objects and a list of property names.
- Use
Object.keys()
,Array.prototype.filter()
,Array.prototype.includes()
andArray.prototype.reduce()
to produce afilteredData
array, containing all objects with the keys specified inpropertyNames
. - Render a
<table>
element with a set of columns equal to the amount of values inpropertyNames
. - Use
Array.prototype.map()
to render each value in thepropertyNames
array as a<th>
element. - Use
Array.prototype.map()
to render each object in thefilteredData
array as a<tr>
element, containing a<td>
for each key in the object.
This component does not work with nested objects and will break if there are nested objects inside any of the properties specified in propertyNames
const MappedTable = ({ data, propertyNames }) => { let filteredData = data.map(v => Object.keys(v) .filter(k => propertyNames.includes(k)) .reduce((acc, key) => ((acc[key] = v[key]), acc), {}) ); return ( <table> <thead> <tr> {propertyNames.map(val => ( <th key={`h_${val}`}>{val}</th> ))} </tr> </thead> <tbody> {filteredData.map((val, i) => ( <tr key={`i_${i}`}> {propertyNames.map(p => ( <td key={`i_${i}_${p}`}>{val[p]}</td> ))} </tr> ))} </tbody> </table> ); };
Examples
const people = [ { name: 'John', surname: 'Smith', age: 42 }, { name: 'Adam', surname: 'Smith', gender: 'male' } ]; const propertyNames = ['name', 'surname', 'age']; ReactDOM.render( <MappedTable data={people} propertyNames={propertyNames} />, document.getElementById('root') );
Recommended snippets
Renders a table with rows dynamically created from an array of primitives.
Renders a checkbox list that uses a callback function to pass its selected value/values to the parent component.
Renders a tree view of a JSON object or array with collapsible content.