refactor: table refactor with react-aria

apps/docs/src/usages/table.tsx

@@ -1,48 +1,100 @@
-import { Table } from 'actify'
+import {
+  Cell,
+  Column,
+  Pagination,
+  Row,
+  Table,
+  TableBody,
+  TableHeader,
+  useAsyncList
+} from 'actify'
+
+import { useState } from 'react'
+
+interface StarWarsChar {
+  name: string
+  url: string
+  [x: string]: string
+}
 
 export default () => {
-  const headers = [
-    {
-      text: 'Name',
-      value: 'name'
-    },
-    {
-      text: 'Job',
-      value: 'job'
-    },
-    {
-      text: 'Employed',
-      value: 'date'
-    }
-  ]
+  const totalPages = 20
+  const [currentPage, setCurrentPage] = useState(1)
 
-  const items = [
-    {
-      name: 'John Michael',
-      job: 'Manager',
-      date: '23/04/18'
-    },
-    {
-      name: 'Alexa Liras',
-      job: 'Developer',
-      date: '23/04/18'
-    },
-    {
-      name: 'Laurent Perrier',
-      job: 'Executive',
-      date: '19/09/17'
-    },
-    {
-      name: 'Michael Levi',
-      job: 'Developer',
-      date: '24/12/08'
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page)
+  }
+
+  const list = useAsyncList<StarWarsChar>({
+    async load({ signal }) {
+      let res = await fetch('https://swapi.py4e.com/api/people/?search', {
+        signal
+      })
+      let json = await res.json()
+      return {
+        items: json.results
+      }
     },
-    {
-      name: 'Richard Gran',
-      job: 'Manager',
-      date: '04/10/21'
+    async sort({ items, sortDescriptor }) {
+      return {
+        items: items.sort((a, b) => {
+          // @ts-ignore
+          const first = a[sortDescriptor.column]
+          // @ts-ignore
+          const second = b[sortDescriptor.column]
+
+          let cmp =
+            (parseInt(first, 10) || first) < (parseInt(second, 10) || second)
+              ? -1
+              : 1
+          if (sortDescriptor.direction === 'descending') {
+            cmp *= -1
+          }
+          return cmp
+        })
+      }
     }
-  ]
+  })
 
-  return <Table headers={headers} items={items} actions pageSizes={[3, 10]} initialPaginationState={{page: 1, pageSize: 3}}></Table>
+  return (
+    <>
+      <Table
+        selectionMode="multiple"
+        selectionBehavior="toggle"
+        onSortChange={list.sort}
+        sortDescriptor={list.sortDescriptor}
+        aria-label="Example static collection table"
+        style={{ height: '210px', maxWidth: '400px' }}
+        paginator={
+          <Pagination
+            totalPages={totalPages}
+            currentPage={currentPage}
+            onPageChange={handlePageChange}
+          />
+        }
+      >
+        <TableHeader>
+          <Column key="name" allowsSorting>
+            Name
+          </Column>
+          <Column key="height" allowsSorting>
+            Height
+          </Column>
+          <Column key="mass" allowsSorting>
+            Mass
+          </Column>
+          <Column key="birth_year" allowsSorting>
+            Birth year
+          </Column>
+        </TableHeader>
+        <TableBody items={list.items}>
+          {(item) => (
+            <Row key={item.name}>
+              {(columnKey) => <Cell>{item[columnKey]}</Cell>}
+            </Row>
+          )}
+        </TableBody>
+      </Table>
+    </>
+  )
 }