fix: show table head when no item in page list (#2642)

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

@@ -108,6 +108,7 @@ export const PageList = ({
   onCreateNewPage,
   onCreateNewEdgeless,
   onImportFile,
+  fallback,
 }: PageListProps) => {
   const sorter = useSorter<ListData>({
     data: list,
@@ -152,6 +153,7 @@ export const PageList = ({
           data={sorter.data}
         />
       </Table>
+      {sorter.data.length === 0 && fallback ? fallback : null}
     </StyledTableContainer>
   );
 };
@@ -172,7 +174,8 @@ const TrashListHead = () => {
 
 export const PageListTrashView: React.FC<{
   list: TrashListData[];
-}> = ({ list }) => {
+  fallback?: React.ReactNode;
+}> = ({ list, fallback }) => {
   const t = useAFFiNEI18N();
 
   const theme = useTheme();
@@ -237,6 +240,7 @@ export const PageListTrashView: React.FC<{
         <TrashListHead />
         <TableBody>{ListItems}</TableBody>
       </Table>
+      {list.length === 0 && fallback ? fallback : null}
     </StyledTableContainer>
   );
 };

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

@@ -1,10 +1,11 @@
-import { TableRow } from '../..';
-import { Content, displayFlex, styled } from '../../';
+import { displayFlex, styled } from '../../styles';
+import { Content } from '../../ui/layout/content';
+import { TableRow } from '../../ui/table/table-row';
 
 export const StyledTableContainer = styled('div')(({ theme }) => {
   return {
     height: 'calc(100vh - 52px)',
-    padding: '18px 32px 52px 32px',
+    padding: '18px 32px 80px 32px',
     maxWidth: '100%',
     overflowY: 'auto',
     [theme.breakpoints.down('sm')]: {

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

@@ -41,6 +41,7 @@ export type TrashListData = {
 export type PageListProps = {
   isPublicWorkspace?: boolean;
   list: ListData[];
+  fallback?: React.ReactNode;
   onCreateNewPage: () => void;
   onCreateNewEdgeless: () => void;
   onImportFile: () => void;