[master] refactor: refactor extensions management using DataTable (#4422

) * refactor: refactor extensions management using DataTable Signed-off-by: donniean <[email protected]> * refactor: simplify ExtensionsEmpty component and improve props handling Signed-off-by: donniean <[email protected]> * refactor: remove unused size property and comment out action buttons in Extensions component Signed-off-by: donniean <[email protected]> * refactor: add style to Extensions empty state for better layout Signed-off-by: donniean <[email protected]> * refactor: update column metadata in Extensions component for improved layout Signed-off-by: donniean <[email protected]> --------- Signed-off-by: donniean <[email protected]> Co-authored-by: donniean <[email protected]>
kubesphere · Jan 8, 2025 · 2d42d2b · 2d42d2b
1 parent 6e66971
commit 2d42d2b
Show file tree

Hide file tree

Showing 8 changed files with 206 additions and 195 deletions.
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -13,6 +13,7 @@
   ],
   "dependencies": {
     "@jridgewell/resolve-uri": "^3.1.0",
+    "@tanstack/react-table": "^8.17.3",
     "clean-deep": "^3.4.0",
     "embla-carousel-react": "^8.0.0-rc11",
     "file-saver": "^2.0.5",

diff --git a/packages/core/src/components/GlobalStyles/index.tsx b/packages/core/src/components/GlobalStyles/index.tsx
@@ -156,6 +156,30 @@ const GlobalStyles = createGlobalStyle`
       }
      }
   }
+
+  .kube-table-wrapper {
+    padding: 0 12px 12px;
+    table.kube-table {
+      width: 100%;
+    }
+    table.kube-table--max-context {
+      width: max-content;
+    }
+    td.table-cell {
+      .field-content {
+        word-break: break-word;
+      }
+      .field-label {
+        display: -webkit-box;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        -webkit-line-clamp: 3;
+        line-clamp: 3;
+        -webkit-box-orient: vertical;
+        white-space: unset;
+      }
+    }
+  }
 `;
 
 export default GlobalStyles;
diff --git a/...ages/core/src/containers/Extensions/Management/components/Extensions/Extensions.styles.ts b/...ages/core/src/containers/Extensions/Management/components/Extensions/Extensions.styles.ts
@@ -14,11 +14,14 @@ export const LoadingWrapper = styled.div`
   background-color: #fff;
 `;
 
-export const TableWrapper = styled(Card)`
-  position: relative;
-
-  & > div {
-    padding: 0;
+export const StyledCard = styled(Card)`
+  .kube-table-wrapper {
+    td.table-cell {
+      .field-label {
+        -webkit-line-clamp: 1;
+        line-clamp: 1;
+      }
+    }
   }
 `;