update table

actifyjs · Nov 4, 2024 · 6063609 · 6063609
1 parent cfa4d4d
commit 6063609
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 23 deletions.
diff --git a/apps/docs/src/usages/table.tsx b/apps/docs/src/usages/table.tsx
@@ -1,7 +1,6 @@
 import {
   Cell,
   Column,
-  Pagination,
   Row,
   Table,
   TableBody,
@@ -65,13 +64,7 @@ export default () => {
         sortDescriptor={list.sortDescriptor}
         aria-label="Example static collection table"
         style={{ height: '210px', maxWidth: '400px' }}
-        paginator={
-          <Pagination
-            totalPages={totalPages}
-            currentPage={currentPage}
-            onPageChange={handlePageChange}
-          />
-        }
+        paginator={{ pageSizes: [5, 10, 20] }}
       >
         <TableHeader>
           <Column key="name" allowsSorting>

diff --git a/packages/actify/src/components/Table/Table.tsx b/packages/actify/src/components/Table/Table.tsx
@@ -3,6 +3,8 @@
 import { AriaTableProps, useTable } from 'react-aria'
 import { SelectionBehavior, useTableState } from 'react-stately'
 
+import { Pagination, type PaginationProps } from '../Pagination'
+import React from 'react'
 import { TableCell } from './TableCell'
 import { TableCheckboxCell } from './TableCheckboxCell'
 import { TableColumnHeader } from './TableColumnHeader'
@@ -12,11 +14,10 @@ import { TableRow } from './TableRow'
 import { TableRowGroup } from './TableRowGroup'
 import { TableSelectAllCell } from './TableSelectAllCell'
 import styles from './table.module.css'
-import { useRef } from 'react'
 
 interface TableComponentProps<T> extends AriaTableProps, TableProps<T> {
   children: any
-  paginator?: React.ReactNode
+  paginator?: PaginationProps
   style?: React.CSSProperties
   selectionBehavior?: SelectionBehavior
 }
@@ -28,10 +29,43 @@ const Table = <T extends object>(props: TableComponentProps<T>) => {
       selectionMode === 'multiple' && selectionBehavior !== 'replace'
   })
 
-  const ref = useRef<HTMLTableElement | null>(null)
   const { collection } = state
+  const ref = React.useRef<HTMLTableElement | null>(null)
   const { gridProps } = useTable(props, state, ref)
 
+  // paginator
+  const pageSizes = paginator?.pageSizes ?? [5, 10, 20]
+  const [currentPage, setCurrentPage] = React.useState(1)
+  const [selectedPageSize, setSelectedPageSize] = React.useState(pageSizes[0])
+
+  const onPageChange = (page: number) => {
+    setCurrentPage(page)
+  }
+
+  React.useEffect(() => {
+    const totalPages = Math.ceil(collection.size / selectedPageSize)
+    if (totalPages < currentPage) {
+      setCurrentPage(1)
+    }
+  }, [currentPage, selectedPageSize])
+
+  const paginationProps = React.useMemo(() => {
+    const totalPages = Math.ceil(collection.size / selectedPageSize)
+    return {
+      pageSizes,
+      currentPage,
+      totalPages,
+      selectedPageSize,
+      setSelectedPageSize
+    }
+  }, [
+    pageSizes,
+    currentPage,
+    collection,
+    selectedPageSize,
+    setSelectedPageSize
+  ])
+
   return (
     <>
       <table {...gridProps} ref={ref} className={styles['table']}>
@@ -57,20 +91,29 @@ const Table = <T extends object>(props: TableComponentProps<T>) => {
           ))}
         </TableRowGroup>
         <TableRowGroup type="tbody">
-          {[...collection.body.childNodes].map((row) => (
-            <TableRow node={row} key={row.key} state={state}>
-              {[...row.childNodes].map((cell) =>
-                cell.props.isSelectionCell ? (
-                  <TableCheckboxCell key={cell.key} node={cell} state={state} />
-                ) : (
-                  <TableCell key={cell.key} node={cell} state={state} />
-                )
-              )}
-            </TableRow>
-          ))}
+          {[...collection.body.childNodes]
+            .slice(
+              selectedPageSize * (currentPage - 1),
+              currentPage * selectedPageSize
+            )
+            .map((row) => (
+              <TableRow node={row} key={row.key} state={state}>
+                {[...row.childNodes].map((cell) =>
+                  cell.props.isSelectionCell ? (
+                    <TableCheckboxCell
+                      key={cell.key}
+                      node={cell}
+                      state={state}
+                    />
+                  ) : (
+                    <TableCell key={cell.key} node={cell} state={state} />
+                  )
+                )}
+              </TableRow>
+            ))}
         </TableRowGroup>
       </table>
-      {paginator}
+      {paginator && <Pagination {...{ onPageChange, ...paginationProps }} />}
     </>
   )
 }