feat: sticky table head in page list (#2668)

Co-authored-by: Himself65 <himself65@outlook.com>

packages/component/src/components/page-list/all-page.tsx

@@ -5,13 +5,15 @@ import { useMediaQuery, useTheme } from '@mui/material';
 import type React from 'react';
 import { type CSSProperties } from 'react';
 
-import { Table, TableBody, TableCell, TableHead, TableRow } from '../..';
+import { Table, TableBody, TableCell, TableHead, TableHeadRow } from '../..';
+import { TableBodyRow } from '../../ui/table';
+import { useHasScrollTop } from '../app-sidebar/sidebar-containers/use-has-scroll-top';
 import { AllPagesBody } from './all-pages-body';
 import { NewPageButton } from './components/new-page-buttton';
 import { TitleCell } from './components/title-cell';
 import { AllPageListMobileView, TrashListMobileView } from './mobile';
 import { TrashOperationCell } from './operation-cell';
-import { StyledTableContainer, StyledTableRow } from './styles';
+import { StyledTableContainer } from './styles';
 import type { ListData, PageListProps, TrashListData } from './type';
 import { useSorter } from './use-sorter';
 import { formatDate, useIsSmallDevices } from './utils';
@@ -66,7 +68,7 @@ const AllPagesHead = ({
 
   return (
     <TableHead>
-      <TableRow>
+      <TableHeadRow>
         {titleList
           .filter(({ showWhen = () => true }) => showWhen())
           .map(({ key, content, proportion, sortable = true, styles }) => (
@@ -97,7 +99,7 @@ const AllPagesHead = ({
               </div>
             </TableCell>
           ))}
-      </TableRow>
+      </TableHeadRow>
     </TableHead>
   );
 };
@@ -115,7 +117,7 @@ export const PageList = ({
     key: DEFAULT_SORT_KEY,
     order: 'desc',
   });
-
+  const [hasScrollTop, ref] = useHasScrollTop();
   const isSmallDevices = useIsSmallDevices();
   if (isSmallDevices) {
     return (
@@ -138,8 +140,8 @@ export const PageList = ({
       : undefined;
 
   return (
-    <StyledTableContainer>
-      <Table>
+    <StyledTableContainer ref={ref}>
+      <Table showBorder={hasScrollTop} style={{ maxHeight: '100%' }}>
         <AllPagesHead
           isPublicWorkspace={isPublicWorkspace}
           sorter={sorter}
@@ -162,12 +164,12 @@ const TrashListHead = () => {
   const t = useAFFiNEI18N();
   return (
     <TableHead>
-      <TableRow>
+      <TableHeadRow>
         <TableCell proportion={0.5}>{t['Title']()}</TableCell>
         <TableCell proportion={0.2}>{t['Created']()}</TableCell>
         <TableCell proportion={0.2}>{t['Moved to Trash']()}</TableCell>
         <TableCell proportion={0.1}></TableCell>
-      </TableRow>
+      </TableHeadRow>
     </TableHead>
   );
 };
@@ -179,6 +181,7 @@ export const PageListTrashView: React.FC<{
   const t = useAFFiNEI18N();
 
   const theme = useTheme();
+  const [hasScrollTop, ref] = useHasScrollTop();
   const isSmallDevices = useMediaQuery(theme.breakpoints.down('sm'));
   if (isSmallDevices) {
     const mobileList = list.map(({ pageId, icon, title, onClickPage }) => ({
@@ -205,7 +208,7 @@ export const PageListTrashView: React.FC<{
       index
     ) => {
       return (
-        <StyledTableRow
+        <TableBodyRow
           data-testid={`page-list-item-${pageId}`}
           key={`${pageId}-${index}`}
         >
@@ -229,14 +232,14 @@ export const PageListTrashView: React.FC<{
               onOpenPage={onClickPage}
             />
           </TableCell>
-        </StyledTableRow>
+        </TableBodyRow>
       );
     }
   );
 
   return (
-    <StyledTableContainer>
-      <Table>
+    <StyledTableContainer ref={ref}>
+      <Table showBorder={hasScrollTop}>
         <TrashListHead />
         <TableBody>{ListItems}</TableBody>
       </Table>

packages/component/src/components/page-list/all-pages-body.tsx

@@ -3,18 +3,19 @@ import { useDraggable } from '@dnd-kit/core';
 import type { ReactNode } from 'react';
 import { Fragment } from 'react';
 
-import { styled, TableBody, TableCell } from '../../..';
+import { styled } from '../../styles';
+import { TableBody, TableCell } from '../../ui/table';
 import { FavoriteTag } from './components/favorite-tag';
 import { TitleCell } from './components/title-cell';
 import { OperationCell } from './operation-cell';
-import { StyledTableRow } from './styles';
+import { StyledTableBodyRow } from './styles';
 import type { DateKey, DraggableTitleCellData, ListData } from './type';
 import { useDateGroup } from './use-date-group';
 import { formatDate, useIsSmallDevices } from './utils';
 
 export const GroupRow = ({ children }: { children: ReactNode }) => {
   return (
-    <StyledTableRow>
+    <StyledTableBodyRow>
       <TableCell
         style={{
           color: 'var(--affine-text-secondary-color)',
@@ -25,7 +26,7 @@ export const GroupRow = ({ children }: { children: ReactNode }) => {
       >
         {children}
       </TableCell>
-    </StyledTableRow>
+    </StyledTableBodyRow>
   );
 };
 
@@ -42,7 +43,7 @@ export const AllPagesBody = ({
   const isSmallDevices = useIsSmallDevices();
   const dataWithGroup = useDateGroup({ data, key: groupKey });
   return (
-    <TableBody>
+    <TableBody style={{ overflowY: 'auto', height: '100%' }}>
       {dataWithGroup.map(
         (
           {
@@ -71,7 +72,7 @@ export const AllPagesBody = ({
                   dataWithGroup[index - 1].groupName !== groupName) && (
                   <GroupRow>{groupName}</GroupRow>
                 )}
-              <StyledTableRow data-testid={`page-list-item-${pageId}`}>
+              <StyledTableBodyRow data-testid={`page-list-item-${pageId}`}>
                 <DraggableTitleCell
                   pageId={pageId}
                   draggableData={{
@@ -130,7 +131,7 @@ export const AllPagesBody = ({
                     />
                   </TableCell>
                 )}
-              </StyledTableRow>
+              </StyledTableBodyRow>
             </Fragment>
           );
         }

packages/component/src/components/page-list/mobile.tsx

@@ -6,13 +6,13 @@ import {
   TableBody,
   TableCell,
   TableHead,
-  TableRow,
+  TableHeadRow,
 } from '../../..';
 import { AllPagesBody } from './all-pages-body';
 import { NewPageButton } from './components/new-page-buttton';
 import {
+  StyledTableBodyRow,
   StyledTableContainer,
-  StyledTableRow,
   StyledTitleLink,
 } from './styles';
 import type { ListData } from './type';
@@ -31,7 +31,7 @@ const MobileHead = ({
   const t = useAFFiNEI18N();
   return (
     <TableHead>
-      <TableRow>
+      <TableHeadRow>
         <TableCell proportion={0.8}>{t['Title']()}</TableCell>
         {!isPublicWorkspace && (
           <TableCell>
@@ -50,7 +50,7 @@ const MobileHead = ({
             </div>
           </TableCell>
         )}
-      </TableRow>
+      </TableHeadRow>
     </TableHead>
   );
 };
@@ -103,7 +103,7 @@ export const TrashListMobileView = ({
 
   const ListItems = list.map(({ pageId, title, icon, onClickPage }, index) => {
     return (
-      <StyledTableRow
+      <StyledTableBodyRow
         data-testid={`page-list-item-${pageId}`}
         key={`${pageId}-${index}`}
       >
@@ -115,7 +115,7 @@ export const TrashListMobileView = ({
             </Content>
           </StyledTitleLink>
         </TableCell>
-      </StyledTableRow>
+      </StyledTableBodyRow>
     );
   });
 

packages/component/src/components/page-list/styles.ts

@@ -1,13 +1,13 @@
 import { displayFlex, styled } from '../../styles';
 import { Content } from '../../ui/layout/content';
-import { TableRow } from '../../ui/table/table-row';
+import { TableBodyRow } from '../../ui/table/table-row';
 
 export const StyledTableContainer = styled('div')(({ theme }) => {
   return {
-    height: 'calc(100vh - 52px)',
-    padding: '18px 32px 80px 32px',
+    height: '100%',
+    padding: '0 32px 180px 32px',
     maxWidth: '100%',
-    overflowY: 'auto',
+    overflowY: 'scroll',
     [theme.breakpoints.down('sm')]: {
       padding: '52px 0px',
       'tr > td:first-of-type': {
@@ -69,7 +69,7 @@ export const StyledTitlePreview = styled(Content)(() => {
   };
 });
 
-export const StyledTableRow = styled(TableRow)(() => {
+export const StyledTableBodyRow = styled(TableBodyRow)(() => {
   return {
     cursor: 'pointer',
     '.favorite-button': {