From 7c5495f4f61cf052366f16e9a6fa4cf7e6c9982a Mon Sep 17 00:00:00 2001
From: Miyamae Yuuya <locona.0810@gmail.com>
Date: Wed, 3 Jan 2024 02:55:26 +0900
Subject: [PATCH] =?UTF-8?q?fix(Table):=20SelectRow=20=E3=83=87=E3=83=95?=
 =?UTF-8?q?=E3=82=A9=E3=83=AB=E3=83=88=E5=80=A4=E8=A8=AD=E5=AE=9A=E5=8F=AF?=
 =?UTF-8?q?=E8=83=BD=E3=81=AB=E3=81=99=E3=82=8B=20(#1494)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(Table): SelectRow デフォルト値設定可能にする

* Create lemon-peaches-visit.md
---
 .changeset/lemon-peaches-visit.md           |  5 +++++
 packages/for-ui/src/table/Table.stories.tsx |  2 ++
 packages/for-ui/src/table/Table.tsx         | 12 +++++++++++-
 3 files changed, 18 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/lemon-peaches-visit.md

diff --git a/.changeset/lemon-peaches-visit.md b/.changeset/lemon-peaches-visit.md
new file mode 100644
index 00000000..24335a6c
--- /dev/null
+++ b/.changeset/lemon-peaches-visit.md
@@ -0,0 +1,5 @@
+---
+"@4design/for-ui": patch
+---
+
+fix(Table): SelectRow デフォルト値設定可能にする
diff --git a/packages/for-ui/src/table/Table.stories.tsx b/packages/for-ui/src/table/Table.stories.tsx
index 939bc61e..4c42219b 100644
--- a/packages/for-ui/src/table/Table.stories.tsx
+++ b/packages/for-ui/src/table/Table.stories.tsx
@@ -49,6 +49,7 @@ export const WithSelect: Story = () => (
     columns={columns}
     data={StaticPersonData}
     getRowId={(row) => row.id.toString()}
+    selectedRow="2"
     onSelectRow={(row) => console.info('Selected row: ', row)}
   />
 );
@@ -58,6 +59,7 @@ export const WithSelectMultiple: Story = () => (
     columns={columns}
     data={StaticPersonData}
     getRowId={(row) => row.id.toString()}
+    selectedRows={['2', '3', '4']}
     onSelectRows={(rows) => console.info('Selected rows: ', rows)}
   />
 );
diff --git a/packages/for-ui/src/table/Table.tsx b/packages/for-ui/src/table/Table.tsx
index 5dd9cabe..35360599 100644
--- a/packages/for-ui/src/table/Table.tsx
+++ b/packages/for-ui/src/table/Table.tsx
@@ -49,10 +49,14 @@ export type TableProps<T extends RowData> = Pick<TableOptions<T>, 'data' | 'colu
 } & (
     | {
         /** If wanting to use selectable table, specify _onSelectRow_ or _onSelectRows_ exclusively */
+        selectedRow?: string;
+        selectedRows?: never;
         onSelectRow?: ((id: string | undefined) => void) | undefined;
         onSelectRows?: never;
       }
     | {
+        selectedRow?: never;
+        selectedRows?: string[];
         onSelectRow?: never;
         /** If wanting to use selectable table, specify _onSelectRow_ or _onSelectRows_ exclusively */
         onSelectRows?: ((ids: string[]) => void) | undefined;
@@ -63,6 +67,8 @@ export const Table = <T extends RowData>({
   data,
   disablePagination,
   defaultSortColumn,
+  selectedRow,
+  selectedRows,
   onSelectRow,
   onSelectRows,
   onRowClick,
@@ -76,8 +82,11 @@ export const Table = <T extends RowData>({
   defaultPage = 1,
   onChangePage,
 }: TableProps<T>) => {
+  const defaultSelectedRows = selectedRow
+    ? { [selectedRow]: true }
+    : selectedRows?.reduce((acc, id) => ({ ...acc, [id]: true }), {}) ?? {};
   const [sorting, setSorting] = useState<SortingState>(defaultSortColumn ? [defaultSortColumn] : []);
-  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>(defaultSelectedRows);
   const prevRowSelection = useRef<RowSelectionState>({});
   const tableId = useId();
 
@@ -91,6 +100,7 @@ export const Table = <T extends RowData>({
       if (prevRowSelection.current === row) {
         return;
       }
+      console.info(row);
       setRowSelection(row);
       prevRowSelection.current = row;
       const selectedIds = Object.keys(row);