Merge pull request #468 from logto-io/sijie--log-1975-table-scroll

feat(console): table scroll

packages/console/src/pages/Users/index.module.scss

@@ -1,5 +1,11 @@
 @use '@/scss/underscore' as _;
 
+.card {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
 .headline {
   display: flex;
   justify-content: space-between;
@@ -10,10 +16,7 @@
 }
 
 .table {
-  margin-top: _.unit(4);
+  flex: 1;
-
-  tbody {
-    max-height: calc(100vh - _.unit(64));
 
   tr.clickable {
     cursor: pointer;
@@ -22,7 +25,10 @@
       background: var(--color-table-row-selected);
     }
   }
-  }
+}
+
+.pagination {
+  min-height: 64px;
 }
 
 .userName {

packages/console/src/pages/Users/index.tsx

@@ -1,5 +1,6 @@
 import { User } from '@logto/schemas';
 import { conditionalString } from '@silverhand/essentials';
+import classNames from 'classnames';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import Modal from 'react-modal';
@@ -18,6 +19,7 @@ import TableError from '@/components/Table/TableError';
 import TableLoading from '@/components/Table/TableLoading';
 import { RequestError } from '@/hooks/use-api';
 import * as modalStyles from '@/scss/modal.module.scss';
+import * as tableStyles from '@/scss/table.module.scss';
 
 import CreateForm from './components/CreateForm';
 import * as styles from './index.module.scss';
@@ -39,7 +41,7 @@ const Users = () => {
   const [users, totalCount] = data ?? [];
 
   return (
-    <Card>
+    <Card className={styles.card}>
       <div className={styles.headline}>
         <CardTitle title="users.title" subtitle="users.subtitle" />
         <Button
@@ -68,7 +70,8 @@ const Users = () => {
       <div className={styles.filter}>
         <Search defaultValue={keyword} onSearch={setKeyword} />
       </div>
-      <table className={styles.table}>
+      <div className={classNames(styles.table, tableStyles.scrollable)}>
+        <table>
           <colgroup>
             <col className={styles.userName} />
             <col />
@@ -123,6 +126,8 @@ const Users = () => {
             ))}
           </tbody>
         </table>
+      </div>
+      <div className={styles.pagination}>
         {totalCount !== undefined && totalCount > 0 && (
           <Pagination
             pageCount={Math.ceil(totalCount / pageSize)}
@@ -130,6 +135,7 @@ const Users = () => {
             onChange={setPageIndex}
           />
         )}
+      </div>
     </Card>
   );
 };

packages/console/src/scss/normalized.scss

@@ -25,7 +25,6 @@ table {
   border-spacing: 0;
   width: 100%;
   table-layout: fixed;
-  overflow: hidden;
 
   thead {
     th {

packages/console/src/scss/table.module.scss

@@ -0,0 +1,21 @@
+@use '@/scss/underscore' as _;
+
+.scrollable {
+  margin-top: _.unit(4);
+  overflow-y: auto;
+  border: 1px solid var(--color-neutral-90);
+  border-radius: _.unit(2);
+
+  table {
+    border: none;
+
+    thead tr {
+      position: sticky;
+      top: 0;
+
+      th {
+        background: var(--color-on-primary);
+      }
+    }
+  }
+}