Merge branch 'master' of https://github.com/The-Code-Monkey/react-sup…

…er-responsive-table into The-Code-Monkey-master

README.md

@@ -12,6 +12,7 @@ react-super-responsive-table converts your table data to a user-friendly list in
 - [Installation](#installation)
 - [Usage](#usage)
 - [Using Dynamic Headers](#using-dynamic-headers)
+- [Using Auto Table Wrapper](#using-auto-table-wrapper)
 - [Contributors](#Contributors)
 - [Contributing](#contributing)
 - [License](#license)
@@ -92,6 +93,49 @@ Headers are statefully stored on first render of the table, since the library do
 </Table>
 ```
 
+## Using Auto Table Wrapper
+
+To use the `AutoTableWrapper` Component just wrap it around any normal html table or even elements that contain tables.
+
+```
+import React from 'react'
+import { AutoTableWrapper } from 'react-super-responsive-table/SuperAutoResponsiveTable'
+import 'react-super-responsive-table/dist/SuperResponsiveTableStyle.css'
+
+export default function TableExample(props) {
+  return (
+    <AutoTableWrapper>
+      <table>
+        <thead>
+          <tr>
+            <th>Event</th>
+            <th>Date</th>
+            <th>Location</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Tablescon</td>
+            <td>9 April 2019</td>
+            <td>East Annex</td>
+          </tr>
+          <tr>
+            <td>Capstone Data</td>
+            <td>19 May 2019</td>
+            <td>205 Gorgas</td>
+          </tr>
+          <tr>
+            <td>Tuscaloosa D3</td>
+            <td>29 June 2019</td>
+            <td>Github</td>
+          </tr>
+        </tbody>
+      </table>
+    </AutoTableWrapper>
+  )
+}
+```
+
 ## Contributors
 
 Super Responsive Tables are made possible by these great community members:

src/SuperAutoResponsiveTable.js

@@ -0,0 +1,124 @@
+import React from 'react';
+
+import { Table, Tbody, Td, Th, Thead, Tr } from './SuperResponsiveTable'
+
+const getType = el => el.type;
+
+const makeTable = (tableChildren) => (
+  <Table>
+    {Array.isArray(tableChildren) ?
+      tableChildren.map(child => {
+        if (getType(child) === 'thead') {
+          return makeThead(child.props.children);
+        }
+        if (getType(child) === 'tbody') {
+          return makeTbody(child.props.children);
+        }
+        return child;
+      })
+      :
+      getType(tableChildren) === 'thead' ? (
+          makeThead(tableChildren.props.children)
+        )
+        :
+        tableChildren
+    }
+  </Table>
+);
+const makeTbody = (tbodyChildren) => (
+  <Tbody>
+    {Array.isArray(tbodyChildren) ?
+      tbodyChildren.map((child, key) => {
+        if (getType(child) === 'tr') {
+          return makeTbodyTr(child.props.children, key)
+        }
+      })
+      :
+      getType(tbodyChildren) === 'tr' ?
+        makeTbodyTr(tbodyChildren.props.children, 0)
+        :
+        tbodyChildren
+    }
+  </Tbody>
+)
+const makeThead = (theadChildren) => (
+  <Thead>
+    {Array.isArray(theadChildren) ?
+
+      theadChildren.map((child, key) => {
+        if (getType(child) === 'tr') {
+          return makeTheadTr(child.props.children, key)
+        }
+      })
+      :
+      getType(theadChildren) === 'tr' ? (
+          makeTheadTr(theadChildren.props.children, 0)
+        )
+        :
+        theadChildren
+    }
+  </Thead>
+);
+const makeTbodyTr = (tbodyTrChildren, key) => (
+  <Tr key={key} columnKey={key}>
+    {Array.isArray(tbodyTrChildren) ?
+      tbodyTrChildren.map(child => {
+        if (getType(child) === 'td') {
+          return makeTbodyTd(child.props.children, key)
+        }
+      })
+      :
+      getType(tbodyTrChildren) === 'td' ?
+        makeTbodyTd(tbodyTrChildren.props.children, key)
+        :
+        tbodyTrChildren
+    }
+  </Tr>
+)
+const makeTheadTr = (theadTrChildren, key) => (
+  <Tr key={key} columnKey={key}>
+    {Array.isArray(theadTrChildren) ?
+      theadTrChildren.map(child => {
+        if (getType(child) === 'th') {
+          return makeTheadTh(child.props.children, key)
+        }
+      })
+      :
+      getType(theadTrChildren) === 'th' ?
+        makeTheadTh(theadTrChildren.props.children, key)
+        :
+        theadTrChildren
+    }
+  </Tr>
+);
+const makeTbodyTd = (tbodyTdChildren, key) => (
+  <Td>
+    {tbodyTdChildren}
+  </Td>
+);
+const makeTheadTh = (theadThChildren, key) => (
+  <Th>
+    {theadThChildren}
+  </Th>
+)
+
+const findTable = (props) => {
+  const { children } = props;
+  if (getType(children) === 'table') {
+    return makeTable(children.props.children)
+  } else {
+    return React.createElement(children.type, {...props}, findTable(children.props))
+  }
+};
+
+export class AutoTableWrapper extends React.Component {
+  render() {
+    const { props } = this;
+    const { children } = props;
+    if (children) {
+      return findTable(props);
+    } else {
+      return "Auto Table Requires Children To Work"
+    }
+  }
+}