From 593d04bc823ecfdc017f4eb8a60c8f84a26948df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Stefan=20Feje=C5=A1?= Date: Sat, 13 Oct 2018 12:17:28 +0200 Subject: [PATCH 1/7] add MappedTable --- snippets/mapped-table.md | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 snippets/mapped-table.md diff --git a/snippets/mapped-table.md b/snippets/mapped-table.md new file mode 100644 index 000000000..6bb78a2e7 --- /dev/null +++ b/snippets/mapped-table.md @@ -0,0 +1,35 @@ +### MappedTable + +Generate a table with dynamic rows based on passed array of data. Optionally include headers. + +Conditionaly check weather to include table headers or not. Use `Array.prototype.map` to map over array of data and return `` for each entry. + +```jsx +function MappedTable(props) { + return ( + + {props.headers ? return({props.headers.map((h, i)=> (h))}) : return null} + {props.data.map((v, i) => { + return ( + + v.name + + ); + })} + + ); +} +``` + +```jsx +const people = [{ id: 841, name: 'John' }, { id: 241, name: 'Jesse' }]; +const headers = ['id', 'name']; +ReactDOM.render( + , + document.getElementById('root') +); +``` + + + + From 6b554932909efb3e991faffd71eaed2ab72ecc43 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Stefan=20Feje=C5=A1?= Date: Sat, 13 Oct 2018 13:54:20 +0200 Subject: [PATCH 2/7] fix MappedTable --- snippets/mapped-table.md | 36 +++++++++++++++++++++++------------- 1 file changed, 23 insertions(+), 13 deletions(-) diff --git a/snippets/mapped-table.md b/snippets/mapped-table.md index 6bb78a2e7..ee6e38509 100644 --- a/snippets/mapped-table.md +++ b/snippets/mapped-table.md @@ -1,22 +1,32 @@ ### MappedTable -Generate a table with dynamic rows based on passed array of data. Optionally include headers. +Renders a table with rows dynamically created from an array of data. -Conditionaly check weather to include table headers or not. Use `Array.prototype.map` to map over array of data and return `` for each entry. +Use the value of the `headers` prop to conditionally render a table with a header. Use `Array.prototype.map` to render every item in `data` as a `` element and give it a `key`. `data` can either be an array of objects with the `id` and `value` properties or an array of primitives. Omit the `headers` prop to render a `table` without headers. ```jsx function MappedTable(props) { return ( - - {props.headers ? return({props.headers.map((h, i)=> (h))}) : return null} - {props.data.map((v, i) => { - return ( - - v.name + + + {props.headers ? ( + + {props.headers.map((h, i) => ( + + ))} - ); - })} - + ) : null} + + + {props.data.map((v, i) => { + return ( + + + + ); + })} + +
h
v.name
); } ``` @@ -30,6 +40,6 @@ ReactDOM.render( ); ``` - + - + From 43ce691869e5d07395528b840149e7def4e85bb8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Stefan=20Feje=C5=A1?= Date: Sat, 13 Oct 2018 16:48:53 +0200 Subject: [PATCH 3/7] ommit return keyword --- snippets/mapped-table.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/snippets/mapped-table.md b/snippets/mapped-table.md index ee6e38509..892fa4915 100644 --- a/snippets/mapped-table.md +++ b/snippets/mapped-table.md @@ -18,13 +18,13 @@ function MappedTable(props) { ) : null} - {props.data.map((v, i) => { - return ( + {props.data.map((v, i) => + ( v.name ); - })} + )} ); From 135dbcaedfc86f3608baa118378ab67994accfce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Stefan=20Feje=C5=A1?= Date: Mon, 15 Oct 2018 19:37:13 +0200 Subject: [PATCH 4/7] update mapped-table --- snippets/mapped-table.md | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/snippets/mapped-table.md b/snippets/mapped-table.md index 892fa4915..6a55a17b2 100644 --- a/snippets/mapped-table.md +++ b/snippets/mapped-table.md @@ -2,25 +2,26 @@ Renders a table with rows dynamically created from an array of data. -Use the value of the `headers` prop to conditionally render a table with a header. Use `Array.prototype.map` to render every item in `data` as a `` element and give it a `key`. `data` can either be an array of objects with the `id` and `value` properties or an array of primitives. Omit the `headers` prop to render a `table` without headers. +Use the value of the `headers` prop to conditionally render a table with a header. Use `Array.prototype.map` to render every item in `data` as a `` element and give it a `key`. `data` can either be an array of objects with the `id` and `name` properties or an array of primitives. Omit the `headers` prop to render a `table` without headers. ```jsx -function MappedTable(props) { +function MappedTable({ headers, data }) { return ( - {props.headers ? ( + {headers && ( - {props.headers.map((h, i) => ( + {headers.map((h, i) => ( ))} - ) : null} + )} - {props.data.map((v, i) => + {data.map((v, i) => ( + ); From 236ade6922d1de69b0be9f2111ccf6f3aed4e70f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Stefan=20Feje=C5=A1?= Date: Mon, 15 Oct 2018 19:56:40 +0200 Subject: [PATCH 5/7] fix to use shorter syntax --- snippets/mapped-table.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/snippets/mapped-table.md b/snippets/mapped-table.md index 6a55a17b2..eb8df3601 100644 --- a/snippets/mapped-table.md +++ b/snippets/mapped-table.md @@ -20,7 +20,7 @@ function MappedTable({ headers, data }) { {data.map((v, i) => ( - + From a74d7277a074fdc46ac449fe37114f181bcb038c Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Thu, 29 Nov 2018 11:13:59 +0200 Subject: [PATCH 6/7] Update and rename mapped-table.md to DataTable.md --- snippets/DataTable.md | 41 +++++++++++++++++++++++++++++++++++ snippets/mapped-table.md | 46 ---------------------------------------- 2 files changed, 41 insertions(+), 46 deletions(-) create mode 100644 snippets/DataTable.md delete mode 100644 snippets/mapped-table.md diff --git a/snippets/DataTable.md b/snippets/DataTable.md new file mode 100644 index 000000000..73f85cae6 --- /dev/null +++ b/snippets/DataTable.md @@ -0,0 +1,41 @@ +### DataTable + +Renders a table with rows dynamically created from an array of data. + +Render a `
h
v.id v.name
v.id v.name
` element with two columns (`ID` and `Value`). +Use `Array.prototype.map` to render every item in `data` as a `` element, consisting of its index and value, give it a `key` produced from the concatenation of the two. + +```jsx +function DataTable({ data }) { + return ( +
+ + + + + + + + {data.map((val, i) => + + + + + )} + +
IDValue
{i}{val}
+ ); +} +``` + +```jsx +const people = ['John', 'Jesse']; +ReactDOM.render( + , + document.getElementById('root') +); +``` + + + + diff --git a/snippets/mapped-table.md b/snippets/mapped-table.md deleted file mode 100644 index eb8df3601..000000000 --- a/snippets/mapped-table.md +++ /dev/null @@ -1,46 +0,0 @@ -### MappedTable - -Renders a table with rows dynamically created from an array of data. - -Use the value of the `headers` prop to conditionally render a table with a header. Use `Array.prototype.map` to render every item in `data` as a `` element and give it a `key`. `data` can either be an array of objects with the `id` and `name` properties or an array of primitives. Omit the `headers` prop to render a `table` without headers. - -```jsx -function MappedTable({ headers, data }) { - return ( - - - {headers && ( - - {headers.map((h, i) => ( - - ))} - - )} - - - {data.map((v, i) => - ( - - - - - ); - )} - -
h
v.idv.name
- ); -} -``` - -```jsx -const people = [{ id: 841, name: 'John' }, { id: 241, name: 'Jesse' }]; -const headers = ['id', 'name']; -ReactDOM.render( - , - document.getElementById('root') -); -``` - - - - From a3ac0855af4186a89a9ec530cf85358014bc561e Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Thu, 29 Nov 2018 11:42:43 +0200 Subject: [PATCH 7/7] Update DataTable.md --- snippets/DataTable.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/snippets/DataTable.md b/snippets/DataTable.md index 73f85cae6..93dfce73e 100644 --- a/snippets/DataTable.md +++ b/snippets/DataTable.md @@ -1,6 +1,6 @@ ### DataTable -Renders a table with rows dynamically created from an array of data. +Renders a table with rows dynamically created from an array of primitives. Render a `` element with two columns (`ID` and `Value`). Use `Array.prototype.map` to render every item in `data` as a `` element, consisting of its index and value, give it a `key` produced from the concatenation of the two.