Renders a table with rows dynamically created from an array of objects and a list of property names.
Object.keys()
, Array.prototype.filter()
, Array.prototype.includes()
and Array.prototype.reduce()
to produce a filteredData
array, containing all objects with the keys specified in propertyNames
.<table>
element with a set of columns equal to the amount of values in propertyNames
.Array.prototype.map()
to render each value in the propertyNames
array as a <th>
element.Array.prototype.map()
to render each object in the filteredData
array as a <tr>
element, containing a <td>
for each key in the object.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>
);
};
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')
);
React, Components
Renders a table with rows dynamically created from an array of primitives.
React, Components
Renders a tree view of a JSON object or array with collapsible content.
React, Components
Renders a checkbox list that uses a callback function to pass its selected value/values to the parent component.