Fix: Optimize table style #3221 (#9703)

### What problem does this PR solve?

Fix: Optimize table style
-Modify the style of the table scrollbar and remove unnecessary
scrollbars
-Adjust the header style of the table, add background color and
hierarchy
-Optimize the style of datasets and file tables
-Add a new background color variable

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/components/ui/table.tsx

@@ -8,7 +8,7 @@ const Table = React.forwardRef<
 >(({ className, rootClassName, ...props }, ref) => (
   <div
     className={cn(
-      'relative w-full overflow-auto rounded-2xl bg-bg-card',
+      'relative w-full overflow-auto rounded-2xl bg-bg-card scrollbar-none',
       rootClassName,
     )}
   >
@@ -27,7 +27,7 @@ const TableHeader = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <thead
     ref={ref}
-    className={cn('[&_tr]:border-b top-0 sticky', className)}
+    className={cn('[&_tr]:border-b top-0 sticky bg-bg-title z-10', className)}
     {...props}
   />
 ));
@@ -67,7 +67,7 @@ const TableRow = React.forwardRef<
   <tr
     ref={ref}
     className={cn(
-      'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
+      'border-b border-border-button transition-colors hover:bg-bg-card data-[state=selected]:bg-bg-card',
       className,
     )}
     {...props}
@@ -82,7 +82,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      'h-12 px-4 text-left align-middle font-normal text-text-secondary [&:has([role=checkbox])]:pr-0',
+      'h-12 px-4 text-left align-middle font-normal text-text-secondary [&:has([role=checkbox])]:pr-0 ',
       className,
     )}
     {...props}

web/src/locales/en.ts

@@ -837,7 +837,7 @@ This auto-tagging feature enhances retrieval by adding another layer of domain-s
     fileManager: {
       name: 'Name',
       uploadDate: 'Upload Date',
-      knowledgeBase: 'Knowledge Base',
+      knowledgeBase: 'Dataset',
       size: 'Size',
       action: 'Action',
       addToKnowledge: 'Link to Knowledge Base',

web/src/pages/dataset/dataset/dataset-action-cell.tsx

@@ -50,9 +50,10 @@ export function DatasetActionCell({
   }, [record, showRenameModal]);
 
   return (
-    <section className="flex gap-4 items-center text-text-sub-title-invert">
+    <section className="flex gap-4 items-center text-text-sub-title-invert opacity-0 group-hover:opacity-100 transition-opacity">
       <Button
-        variant={'ghost'}
+        variant="transparent"
+        className="border-none hover:bg-bg-card text-text-primary"
         size={'sm'}
         disabled={isRunning}
         onClick={handleRename}
@@ -61,7 +62,12 @@ export function DatasetActionCell({
       </Button>
       <HoverCard>
         <HoverCardTrigger>
-          <Button variant="ghost" disabled={isRunning} size={'sm'}>
+          <Button
+            variant="transparent"
+            className="border-none hover:bg-bg-card text-text-primary"
+            disabled={isRunning}
+            size={'sm'}
+          >
             <Eye />
           </Button>
         </HoverCardTrigger>
@@ -88,7 +94,8 @@ export function DatasetActionCell({
 
       {isVirtualDocument || (
         <Button
-          variant={'ghost'}
+          variant="transparent"
+          className="border-none hover:bg-bg-card text-text-primary"
           onClick={onDownloadDocument}
           disabled={isRunning}
           size={'sm'}
@@ -97,7 +104,12 @@ export function DatasetActionCell({
         </Button>
       )}
       <ConfirmDeleteDialog onOk={handleRemove}>
-        <Button variant={'ghost'} size={'sm'} disabled={isRunning}>
+        <Button
+          variant="transparent"
+          className="border-none hover:bg-bg-card text-text-primary"
+          size={'sm'}
+          disabled={isRunning}
+        >
           <Trash2 />
         </Button>
       </ConfirmDeleteDialog>

web/src/pages/dataset/dataset/dataset-table.tsx

@@ -119,7 +119,7 @@ export function DatasetTable({
 
   return (
     <div className="w-full">
-      <Table rootClassName="max-h-[82vh]">
+      <Table rootClassName="max-h-[calc(100vh-222px)]">
         <TableHeader>
           {table.getHeaderGroups().map((headerGroup) => (
             <TableRow key={headerGroup.id}>
@@ -144,6 +144,7 @@ export function DatasetTable({
               <TableRow
                 key={row.id}
                 data-state={row.getIsSelected() && 'selected'}
+                className="group"
               >
                 {row.getVisibleCells().map((cell) => (
                   <TableCell

web/src/pages/files/action-cell.tsx

@@ -61,24 +61,40 @@ export function ActionCell({
   }, [record, showMoveFileModal]);
 
   return (
-    <section className="flex gap-4 items-center text-text-sub-title-invert">
+    <section className="flex gap-4 items-center text-text-sub-title-invert opacity-0 group-hover:opacity-100 transition-opacity">
       <Button
-        variant="ghost"
+        variant="transparent"
+        className="border-none hover:bg-bg-card text-text-primary"
         size={'sm'}
         onClick={handleShowConnectToKnowledgeModal}
       >
         <Link2 />
       </Button>
-      <Button variant="ghost" size={'sm'} onClick={handleShowMoveFileModal}>
+      <Button
+        variant="transparent"
+        className="border-none hover:bg-bg-card text-text-primary"
+        size={'sm'}
+        onClick={handleShowMoveFileModal}
+      >
         <FolderInput />
       </Button>
 
-      <Button variant="ghost" size={'sm'} onClick={handleShowFileRenameModal}>
+      <Button
+        variant="transparent"
+        className="border-none hover:bg-bg-card text-text-primary"
+        size={'sm'}
+        onClick={handleShowFileRenameModal}
+      >
         <FolderPen />
       </Button>
 
       {isFolder || (
-        <Button variant={'ghost'} size={'sm'} onClick={onDownloadDocument}>
+        <Button
+          variant="transparent"
+          className="border-none hover:bg-bg-card text-text-primary"
+          size={'sm'}
+          onClick={onDownloadDocument}
+        >
           <ArrowDownToLine />
         </Button>
       )}
@@ -89,7 +105,11 @@ export function ActionCell({
           documentName={record.name}
           className="text-text-sub-title-invert"
         >
-          <Button variant={'ghost'} size={'sm'}>
+          <Button
+            variant="transparent"
+            className="border-none hover:bg-bg-card text-text-primary"
+            size={'sm'}
+          >
             <Eye />
           </Button>
         </NewDocumentLink>
@@ -97,7 +117,8 @@ export function ActionCell({
 
       {/* <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <Button variant="ghost" size={'sm'}>
+          <Button variant="transparent"
+        className="border-none" size={'sm'}>
             <EllipsisVertical />
           </Button>
         </DropdownMenuTrigger>
@@ -118,7 +139,11 @@ export function ActionCell({
         </DropdownMenuContent>
       </DropdownMenu> */}
       <ConfirmDeleteDialog>
-        <Button variant="ghost" size={'sm'}>
+        <Button
+          variant="transparent"
+          className="border-none hover:bg-bg-card text-text-primary"
+          size={'sm'}
+        >
           <Trash2 />
         </Button>
       </ConfirmDeleteDialog>

web/src/pages/files/files-table.tsx

@@ -213,6 +213,7 @@ export function FilesTable({
       id: 'actions',
       header: t('action'),
       enableHiding: false,
+      enablePinning: true,
       cell: ({ row }) => {
         return (
           <ActionCell
@@ -259,51 +260,56 @@ export function FilesTable({
   });
 
   return (
-    <div className="w-full">
-      <Table>
-        <TableHeader>
-          {table.getHeaderGroups().map((headerGroup) => (
-            <TableRow key={headerGroup.id}>
-              {headerGroup.headers.map((header) => {
-                return (
-                  <TableHead key={header.id}>
-                    {header.isPlaceholder
-                      ? null
-                      : flexRender(
-                          header.column.columnDef.header,
-                          header.getContext(),
-                        )}
-                  </TableHead>
-                );
-              })}
-            </TableRow>
-          ))}
-        </TableHeader>
-        <TableBody>
-          {loading ? (
-            <TableSkeleton columnsLength={columns.length}></TableSkeleton>
-          ) : table.getRowModel().rows?.length ? (
-            table.getRowModel().rows.map((row) => (
-              <TableRow
-                key={row.id}
-                data-state={row.getIsSelected() && 'selected'}
-              >
-                {row.getVisibleCells().map((cell) => (
-                  <TableCell
-                    key={cell.id}
-                    className={cell.column.columnDef.meta?.cellClassName}
-                  >
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </TableCell>
-                ))}
+    <>
+      <div className="w-full">
+        <Table rootClassName="max-h-[calc(100vh-242px)] overflow-auto">
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <TableHead key={header.id}>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext(),
+                          )}
+                    </TableHead>
+                  );
+                })}
               </TableRow>
-            ))
-          ) : (
-            <TableEmpty columnsLength={columns.length}></TableEmpty>
-          )}
-        </TableBody>
-      </Table>
-
+            ))}
+          </TableHeader>
+          <TableBody className="max-h-96 overflow-y-auto">
+            {loading ? (
+              <TableSkeleton columnsLength={columns.length}></TableSkeleton>
+            ) : table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && 'selected'}
+                  className="group"
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell
+                      key={cell.id}
+                      className={cell.column.columnDef.meta?.cellClassName}
+                    >
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableEmpty columnsLength={columns.length}></TableEmpty>
+            )}
+          </TableBody>
+        </Table>
+      </div>
       <div className="flex items-center justify-end py-4">
         <div className="space-x-2">
           <RAGFlowPagination
@@ -331,6 +337,6 @@ export function FilesTable({
           loading={fileRenameLoading}
         ></RenameDialog>
       )}
-    </div>
+    </>
   );
 }

web/tailwind.config.js

@@ -55,7 +55,7 @@ module.exports = {
         'input-border': 'var(--input-border)',
 
         /* design colors */
-
+        'bg-title': 'var(--bg-title)',
         'bg-base': 'var(--bg-base)',
         'bg-card': 'var(--bg-card)',
         'bg-component': 'var(--bg-component)',

web/tailwind.css

@@ -91,6 +91,8 @@
     --input-border: rgba(22, 22, 24, 0.2);
 
     --metallic: #46464a;
+
+    --bg-title: #f6f6f7;
     /* design colors */
 
     --bg-base: #ffffff;
@@ -235,6 +237,8 @@
     --input-border: rgba(255, 255, 255, 0.2);
 
     --metallic: #fafafa;
+
+    --bg-title: #38383a;
     /* design colors */
 
     --bg-base: #161618;