From 2eb7c73ecb92ffd3ab3443469adefffcf2cf60db Mon Sep 17 00:00:00 2001
From: zccz14 <zheng.chen@no-trade-no.life>
Date: Mon, 24 Feb 2025 16:34:44 +0800
Subject: [PATCH] feat(ui): refactor DataView and ListView to improve layout
 and remove topSlot prop

---
 ui/web/src/modules/Interactive/DataView.tsx  |   7 +-
 ui/web/src/modules/Interactive/ListView.tsx  |  61 +++---
 ui/web/src/modules/Interactive/TableView.tsx | 217 +++++++++----------
 3 files changed, 139 insertions(+), 146 deletions(-)

diff --git a/ui/web/src/modules/Interactive/DataView.tsx b/ui/web/src/modules/Interactive/DataView.tsx
index 7582b71c..fb8cffc3 100644
--- a/ui/web/src/modules/Interactive/DataView.tsx
+++ b/ui/web/src/modules/Interactive/DataView.tsx
@@ -229,8 +229,11 @@ export function DataView<T, K>(props: {
 
   return (
     <div ref={containerRef} style={{ width: '100%' }}>
-      {actualLayoutMode === 'table' && <TableView table={table} topSlot={topSlot} />}
-      {actualLayoutMode === 'list' && <ListView table={table} topSlot={topSlot} />}
+      <Space wrap style={{ width: '100%' }}>
+        {topSlot}
+      </Space>
+      {actualLayoutMode === 'table' && <TableView table={table} />}
+      {actualLayoutMode === 'list' && <ListView table={table} />}
     </div>
   );
 }
diff --git a/ui/web/src/modules/Interactive/ListView.tsx b/ui/web/src/modules/Interactive/ListView.tsx
index 90183127..fe330a4c 100644
--- a/ui/web/src/modules/Interactive/ListView.tsx
+++ b/ui/web/src/modules/Interactive/ListView.tsx
@@ -2,40 +2,35 @@ import { Descriptions, List, Space } from '@douyinfe/semi-ui';
 import { Table, flexRender } from '@tanstack/react-table';
 import React from 'react';
 
-export function ListView<T>(props: { table: Table<T>; topSlot?: React.ReactNode }) {
+export function ListView<T>(props: { table: Table<T> }) {
   const { table } = props;
   return (
-    <Space vertical align="start" style={{ width: '100%' }}>
-      <Space wrap style={{ width: '100%' }}>
-        {props.topSlot}
-      </Space>
-      <List>
-        {table.getRowModel().rows.map((row) => (
-          <List.Item key={row.id}>
-            <Descriptions>
-              {table.getHeaderGroups().map((headerGroup) =>
-                headerGroup.headers.map((header, idx) => {
-                  return (
-                    <Descriptions.Item
-                      key={headerGroup.id + '/' + idx}
-                      itemKey={
-                        header.isPlaceholder
-                          ? null
-                          : flexRender(header.column.columnDef.header, header.getContext())
-                      }
-                    >
-                      {row
-                        .getVisibleCells()
-                        .filter((cell) => cell.column.id === header.column.id)
-                        .map((cell) => flexRender(cell.column.columnDef.cell, cell.getContext()))}
-                    </Descriptions.Item>
-                  );
-                }),
-              )}
-            </Descriptions>
-          </List.Item>
-        ))}
-      </List>
-    </Space>
+    <List style={{ width: '100%' }}>
+      {table.getRowModel().rows.map((row) => (
+        <List.Item key={row.id}>
+          <Descriptions>
+            {table.getHeaderGroups().map((headerGroup) =>
+              headerGroup.headers.map((header, idx) => {
+                return (
+                  <Descriptions.Item
+                    key={headerGroup.id + '/' + idx}
+                    itemKey={
+                      header.isPlaceholder
+                        ? null
+                        : flexRender(header.column.columnDef.header, header.getContext())
+                    }
+                  >
+                    {row
+                      .getVisibleCells()
+                      .filter((cell) => cell.column.id === header.column.id)
+                      .map((cell) => flexRender(cell.column.columnDef.cell, cell.getContext()))}
+                  </Descriptions.Item>
+                );
+              }),
+            )}
+          </Descriptions>
+        </List.Item>
+      ))}
+    </List>
   );
 }
diff --git a/ui/web/src/modules/Interactive/TableView.tsx b/ui/web/src/modules/Interactive/TableView.tsx
index ebad09b2..d4f90ef0 100644
--- a/ui/web/src/modules/Interactive/TableView.tsx
+++ b/ui/web/src/modules/Interactive/TableView.tsx
@@ -12,127 +12,122 @@ import {
 import { Button, Dropdown, DropdownItem, DropdownMenu, Input, Space } from '@douyinfe/semi-ui';
 import { Table, flexRender } from '@tanstack/react-table';
 
-export function TableView<T>(props: { table: Table<T>; topSlot?: React.ReactNode }) {
+export function TableView<T>(props: { table: Table<T> }) {
   const { table } = props;
 
   return (
-    <Space vertical align="start" style={{ width: '100%' }}>
-      <Space wrap style={{ width: '100%' }}>
-        {props.topSlot}
-      </Space>
-      <Space style={{ width: '100%', overflowX: 'auto' }}>
-        <table className="semi-table" style={{ whiteSpace: 'nowrap' }}>
-          <thead
-            className="semi-table-thead"
-            style={{ position: 'sticky', zIndex: 1, top: 0, background: 'var(--semi-color-bg-1)' }}
-          >
-            {table.getHeaderGroups().map((headerGroup) => (
-              <tr key={headerGroup.id} className="semi-table-row">
-                {headerGroup.headers.map((header) => (
-                  <th key={header.id} className="semi-table-row-head">
-                    <Space vertical>
-                      <Space>
-                        {header.isPlaceholder
-                          ? null
-                          : flexRender(header.column.columnDef.header, header.getContext())}
+    <Space style={{ width: '100%', overflowX: 'auto' }}>
+      <table className="semi-table" style={{ whiteSpace: 'nowrap' }}>
+        <thead
+          className="semi-table-thead"
+          style={{ position: 'sticky', zIndex: 1, top: 0, background: 'var(--semi-color-bg-1)' }}
+        >
+          {table.getHeaderGroups().map((headerGroup) => (
+            <tr key={headerGroup.id} className="semi-table-row">
+              {headerGroup.headers.map((header) => (
+                <th key={header.id} className="semi-table-row-head">
+                  <Space vertical>
+                    <Space>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(header.column.columnDef.header, header.getContext())}
 
-                        {header.column.getCanSort() ? (
-                          <Button
-                            theme="borderless"
-                            icon={
-                              {
-                                asc: <IconCaretup />,
-                                desc: <IconCaretdown />,
-                                false: <IconSort />,
-                              }[header.column.getIsSorted() as string] ?? null
-                            }
-                            onClick={header.column.getToggleSortingHandler()}
-                          />
-                        ) : null}
+                      {header.column.getCanSort() ? (
+                        <Button
+                          theme="borderless"
+                          icon={
+                            {
+                              asc: <IconCaretup />,
+                              desc: <IconCaretdown />,
+                              false: <IconSort />,
+                            }[header.column.getIsSorted() as string] ?? null
+                          }
+                          onClick={header.column.getToggleSortingHandler()}
+                        />
+                      ) : null}
 
-                        <Dropdown
-                          content={
-                            <DropdownMenu>
+                      <Dropdown
+                        content={
+                          <DropdownMenu>
+                            <DropdownItem
+                              icon={<IconEyeOpened />}
+                              onClick={header.column.getToggleVisibilityHandler()}
+                            >
+                              隐藏字段
+                            </DropdownItem>
+                            {header.column.getCanGroup() && (
                               <DropdownItem
-                                icon={<IconEyeOpened />}
-                                onClick={header.column.getToggleVisibilityHandler()}
+                                icon={header.column.getIsGrouped() ? <IconArrowRight /> : <IconArrowLeft />}
+                                onClick={header.column.getToggleGroupingHandler()}
                               >
-                                隐藏字段
+                                {header.column.getIsGrouped() ? '取消分组' : '分组'}
                               </DropdownItem>
-                              {header.column.getCanGroup() && (
-                                <DropdownItem
-                                  icon={header.column.getIsGrouped() ? <IconArrowRight /> : <IconArrowLeft />}
-                                  onClick={header.column.getToggleGroupingHandler()}
-                                >
-                                  {header.column.getIsGrouped() ? '取消分组' : '分组'}
-                                </DropdownItem>
-                              )}
-                            </DropdownMenu>
-                          }
-                        >
-                          <IconMenu />
-                        </Dropdown>
-                      </Space>
+                            )}
+                          </DropdownMenu>
+                        }
+                      >
+                        <IconMenu />
+                      </Dropdown>
+                    </Space>
 
-                      {header.column.getCanFilter() ? (
-                        <Input
-                          value={header.column.getFilterValue() as string}
-                          placeholder={'搜索...'}
-                          onChange={(v) => {
-                            header.column.setFilterValue(v);
-                          }}
+                    {header.column.getCanFilter() ? (
+                      <Input
+                        value={header.column.getFilterValue() as string}
+                        placeholder={'搜索...'}
+                        onChange={(v) => {
+                          header.column.setFilterValue(v);
+                        }}
+                      />
+                    ) : null}
+                  </Space>
+                </th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody className="semi-table-tbody">
+          {table.getRowModel().rows.map((row) => (
+            <tr key={row.id} className="semi-table-row">
+              {row.getVisibleCells().map((cell) => {
+                return (
+                  <td key={cell.id} className="semi-table-row-cell">
+                    {cell.getIsGrouped() ? (
+                      <Space>
+                        <Button
+                          theme="borderless"
+                          icon={row.getIsExpanded() ? <IconTreeTriangleDown /> : <IconTreeTriangleRight />}
+                          onClick={row.getToggleExpandedHandler()}
                         />
-                      ) : null}
-                    </Space>
-                  </th>
-                ))}
-              </tr>
-            ))}
-          </thead>
-          <tbody className="semi-table-tbody">
-            {table.getRowModel().rows.map((row) => (
-              <tr key={row.id} className="semi-table-row">
-                {row.getVisibleCells().map((cell) => {
-                  return (
-                    <td key={cell.id} className="semi-table-row-cell">
-                      {cell.getIsGrouped() ? (
-                        <Space>
-                          <Button
-                            theme="borderless"
-                            icon={row.getIsExpanded() ? <IconTreeTriangleDown /> : <IconTreeTriangleRight />}
-                            onClick={row.getToggleExpandedHandler()}
-                          />
-                          {flexRender(cell.column.columnDef.cell, cell.getContext())} ({row.subRows.length})
-                        </Space>
-                      ) : cell.getIsAggregated() ? (
-                        flexRender(
-                          cell.column.columnDef.aggregatedCell ?? cell.column.columnDef.cell,
-                          cell.getContext(),
-                        )
-                      ) : cell.getIsPlaceholder() ? null : (
-                        flexRender(cell.column.columnDef.cell, cell.getContext())
-                      )}
-                    </td>
-                  );
-                })}
-              </tr>
-            ))}
-          </tbody>
-          <tfoot>
-            {table.getFooterGroups().map((footerGroup) => (
-              <tr key={footerGroup.id}>
-                {footerGroup.headers.map((header) => (
-                  <th key={header.id}>
-                    {header.isPlaceholder
-                      ? null
-                      : flexRender(header.column.columnDef.footer, header.getContext())}
-                  </th>
-                ))}
-              </tr>
-            ))}
-          </tfoot>
-        </table>
-      </Space>
+                        {flexRender(cell.column.columnDef.cell, cell.getContext())} ({row.subRows.length})
+                      </Space>
+                    ) : cell.getIsAggregated() ? (
+                      flexRender(
+                        cell.column.columnDef.aggregatedCell ?? cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )
+                    ) : cell.getIsPlaceholder() ? null : (
+                      flexRender(cell.column.columnDef.cell, cell.getContext())
+                    )}
+                  </td>
+                );
+              })}
+            </tr>
+          ))}
+        </tbody>
+        <tfoot>
+          {table.getFooterGroups().map((footerGroup) => (
+            <tr key={footerGroup.id}>
+              {footerGroup.headers.map((header) => (
+                <th key={header.id}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(header.column.columnDef.footer, header.getContext())}
+                </th>
+              ))}
+            </tr>
+          ))}
+        </tfoot>
+      </table>
     </Space>
   );
 }