Fix: Table: Empty デザイン

Closes #1551
4-design · Apr 5, 2024 · 97bf725 · 97bf725
1 parent c4fe4ec
commit 97bf725
Showing 1 changed file with 22 additions and 15 deletions.
diff --git a/packages/for-ui/src/table/Table.tsx b/packages/for-ui/src/table/Table.tsx
@@ -315,21 +315,28 @@ export const Table = <T extends RowData>({
           ))}
         </TableHead>
         <TableBody>
-          {table.getRowModel().rows.map((row) => (
-            <RowComponent
-              key={row.id}
-              row={row}
-              selectable={selectable}
-              onClick={
-                (onSelectRow || onSelectRows || onRowClick) &&
-                ((e, row) => {
-                  selectRow(row);
-                  onRowClick?.(e, row);
-                })
-              }
-            />
-          ))}
-        </TableBody>
+          {table.getRowModel().rows.length > 0 ? (
+            table.getRowModel().rows.map((row) => (
+              <RowComponent
+                key={row.id}
+                row={row}
+                selectable={selectable}
+                onClick={
+                  (onSelectRow || onSelectRows || onRowClick) &&
+                  ((e, row) => {
+                    selectRow(row);
+                    onRowClick?.(e, row);
+                  })
+                }
+              />
+            ))
+          ) : (
+            <tr>
+              <td colSpan={passedColumns.length} style={{ textAlign: 'center' }}>
+                データがありません
+              </td>
+            </tr>
+          )}
       </TableFrame>
       {!disablePagination && (
         <div className={fsx(`flex w-full justify-center`)}>