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

* fix(Table): SelectRow デフォルト値設定可能にする * Create lemon-peaches-visit.md
4-design · Jan 2, 2024 · 7c5495f · 7c5495f
1 parent 1ccbffb
commit 7c5495f
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 1 deletion.
diff --git a/.changeset/lemon-peaches-visit.md 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
@@ -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
@@ -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);