Update basic example

examples/basic/src/App.js

@@ -2,7 +2,7 @@ import React from 'react'
 import styled from 'styled-components'
 import { useTable, useColumns, useRows } from 'react-table'
 
-import olympicWinnersSmall from './data/olympicWinnersSmall.json'
+import makeData from './makeData'
 
 const Styles = styled.div`
   padding: 1rem;
@@ -33,21 +33,45 @@ const Styles = styled.div`
   }
 `
 
-const data = olympicWinnersSmall.slice(0, 100)
+const data = makeData(20)
 
 function Table() {
   const columns = React.useMemo(
     () => [
-      { Header: 'Athlete', accessor: 'athlete' },
-      { Header: 'Country', accessor: 'country' },
-      { Header: 'Age', accessor: 'age' },
-      { Header: 'Bronze', accessor: 'bronze' },
-      { Header: 'Date', accessor: 'date' },
-      { Header: 'Gold', accessor: 'gold' },
-      { Header: 'Silver', accessor: 'silver' },
-      { Header: 'Sport', accessor: 'sport' },
-      { Header: 'Total', accessor: 'total' },
-      { Header: 'Year', accessor: 'year' },
+      {
+        Header: 'Name',
+        columns: [
+          {
+            Header: 'First Name',
+            accessor: 'firstName',
+          },
+          {
+            Header: 'Last Name',
+            accessor: 'lastName',
+          },
+        ],
+      },
+      {
+        Header: 'Info',
+        columns: [
+          {
+            Header: 'Age',
+            accessor: 'age',
+          },
+          {
+            Header: 'Visits',
+            accessor: 'visits',
+          },
+          {
+            Header: 'Status',
+            accessor: 'status',
+          },
+          {
+            Header: 'Profile Progress',
+            accessor: 'progress',
+          },
+        ],
+      },
     ],
     []
   )

examples/basic/src/makeData.js

@@ -0,0 +1,40 @@
+import namor from 'namor'
+
+const range = len => {
+  const arr = []
+  for (let i = 0; i < len; i++) {
+    arr.push(i)
+  }
+  return arr
+}
+
+const newPerson = () => {
+  const statusChance = Math.random()
+  return {
+    firstName: namor.generate({ words: 1, numbers: 0 }),
+    lastName: namor.generate({ words: 1, numbers: 0 }),
+    age: Math.floor(Math.random() * 30),
+    visits: Math.floor(Math.random() * 100),
+    progress: Math.floor(Math.random() * 100),
+    status:
+      statusChance > 0.66
+        ? 'relationship'
+        : statusChance > 0.33
+        ? 'complicated'
+        : 'single',
+  }
+}
+
+export default function makeData(...lens) {
+  const makeDataLevel = (depth = 0) => {
+    const len = lens[depth]
+    return range(len).map(d => {
+      return {
+        ...newPerson(),
+        subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
+      }
+    })
+  }
+
+  return makeDataLevel()
+}