Update basic example

examples/basic/package.json

@@ -7,6 +7,7 @@
     "eject": "rescripts eject"
   },
   "dependencies": {
+    "namor": "^1.1.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-scripts": "3.0.1",

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()
+}

examples/basic/yarn.lock

@@ -6318,6 +6318,11 @@ mute-stream@0.0.7:
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
   integrity sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=
 
+namor@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/namor/-/namor-1.1.2.tgz#33c0bd65a89a8fe450a385fb08ba3906d3f4d456"
+  integrity sha512-p75fI18pc7CTg9T7bD8pdfRxJUPn4JJ27q+gOmZ2X6tFyQJYkzEyOS0odAXNTvps7qMS87cVAW2ShJ0wmhE6hg==
+
 nan@^2.12.1:
   version "2.14.0"
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.0.tgz#7818f722027b2459a86f0295d434d1fc2336c52c"