Kebab file names

snippets/mapped-table.md

@@ -0,0 +1,56 @@
+---
+title: Object table view
+tags: components,array,object
+cover: waves-from-above-2
+firstSeen: 2018-11-29T11:50:10+02:00
+lastUpdated: 2020-09-06T14:20:45+03:00
+---
+
+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()` and `Array.prototype.reduce()` to produce a `filteredData` array, containing all objects with the keys specified in `propertyNames`.
+- Render a `<table>` element with a set of columns equal to the amount of values in `propertyNames`.
+- Use `Array.prototype.map()` to render each value in the `propertyNames` array as a `<th>` element.
+- Use `Array.prototype.map()` to render each object in the `filteredData` array as a `<tr>` element, containing a `<td>` for each key in the object.
+- **Note:** This component does not work with nested objects and will break if there are nested objects inside any of the properties specified in `propertyNames`.
+
+```jsx
+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>
+  );
+};
+```
+
+```jsx
+const people = [
+  { name: 'John', surname: 'Smith', age: 42 },
+  { name: 'Adam', surname: 'Smith', gender: 'male' }
+];
+const propertyNames = ['name', 'surname', 'age'];
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MappedTable data={people} propertyNames={propertyNames} />
+);
+```