fix(Table): 外部からページを指定できるようにする

.changeset/four-spoons-cough.md

@@ -0,0 +1,5 @@
+---
+"@4design/for-ui": patch
+---
+
+fix(Table): 外部からページを指定できるようにする

packages/for-ui/src/table/Table.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { MdMoreVert, MdOutlineDelete, MdOutlineEdit } from 'react-icons/md';
 import { Meta, Story } from '@storybook/react/types-6-0';
 import { Badge } from '../badge';
@@ -86,9 +86,50 @@ export const WithTablePageSize: Story = () => (
   <Table<PersonData> columns={columns} data={StaticPersonData} pageSize={10} />
 );
 
-export const WithTablePageCount: Story = () => (
-  <Table<PersonData> columns={columns} data={StaticPersonData} pageSize={10} pageCount={2} />
-);
+export const WithTablePage: Story = () => {
+  const usePagination = (limit = 10) => {
+    const [page, setPage] = useState(1);
+
+    const offset = (page - 1) * limit;
+    const next = () => setPage(page + 1);
+    const prev = () => setPage(page - 1);
+    const onChange = (p: number) => {
+      if (p === page) return;
+
+      setPage(p);
+    };
+
+    return {
+      page,
+      limit,
+      offset,
+      actions: {
+        next,
+        prev,
+        onChange,
+      },
+    };
+  };
+
+  const { page, limit, offset, actions } = usePagination();
+  const data = StaticPersonData.slice(offset, page * limit);
+  const pageCount = Math.ceil(StaticPersonData.length / limit);
+
+  return (
+    <Table<PersonData>
+      columns={columns}
+      data={data}
+      page={page}
+      pageSize={limit}
+      pageCount={pageCount}
+      onChangePage={actions.onChange}
+    />
+  );
+};
+
+export const WithTablePageCount: Story = () => {
+  return <Table<PersonData> columns={columns} data={StaticPersonData} pageSize={10} pageCount={2} />;
+};
 
 export const WithClickRow: Story = () => (
   <Table<PersonData>

packages/for-ui/src/table/Table.tsx

@@ -30,6 +30,7 @@ export type TableProps<T extends RowData> = Pick<TableOptions<T>, 'data' | 'colu
   /** The component used to render reach row. By default, Row is used. */
   rowRenderer?: FC<RowProps<T>>;
   className?: string;
+  page?: number;
   pageCount?: number;
   pageSize?: number;
   defaultPage?: number;
@@ -60,6 +61,7 @@ export const Table = <T extends RowData>({
   pageCount,
   pageSize = 20,
   className,
+  page,
   defaultPage = 1,
   onChangePage,
 }: TableProps<T>) => {
@@ -231,7 +233,7 @@ export const Table = <T extends RowData>({
         </TableBody>
       </TableFrame>
       {!disablePagination && (
-        <TablePagination defaultPage={defaultPage} onChangePagination={onChangePage} table={table} />
+        <TablePagination page={page} defaultPage={defaultPage} onChangePagination={onChangePage} table={table} />
       )}
     </Fragment>
   );

packages/for-ui/src/table/TablePagination.tsx

@@ -3,21 +3,26 @@ import { RowData, Table } from '@tanstack/react-table';
 
 export interface TablePaginationProps<T extends RowData> {
   table: Table<T>;
+  page?: number;
   defaultPage?: number;
   onChangePagination?: (page: number) => void;
 }
 
 export const TablePagination = <T extends RowData>({
   table,
+  page,
   defaultPage = 1,
   onChangePagination,
 }: TablePaginationProps<T>) => {
   const { getPageCount, setPageIndex } = table;
 
-  const handleChange = (_: React.ChangeEvent<unknown>, page: number) => {
-    setPageIndex(page - 1);
+  const handleChange = (_: React.ChangeEvent<unknown>, p: number) => {
     if (onChangePagination) {
-      onChangePagination(page);
+      onChangePagination(p);
+    }
+
+    if (!page) {
+      setPageIndex(p - 1);
     }
   };
 
@@ -27,6 +32,7 @@ export const TablePagination = <T extends RowData>({
         <div />
         <div>
           <Pagination
+            page={page}
             defaultPage={defaultPage}
             size="large"
             shape="rounded"