Merge branch 'iipbs/sn/dev'

packages/common/components/src/ui/data-table/index.tsx

@@ -77,47 +77,69 @@ function DataTable<T>({
 function THead<T>({ table }: { table: TableInstance<T> }) {
   return (
     <TableHeader>
-      {table.getHeaderGroups().map((headerGroup) => (
-        <TableRow key={headerGroup.id}>
-          {headerGroup.headers.map((header) => {
-            const columnRelativeDepth = header.depth - header.column.depth;
-            if (
-              !header.isPlaceholder &&
-              columnRelativeDepth > 1 &&
-              header.id === header.column.id
-            ) {
-              return null;
-            }
+      {table
+        .getHeaderGroups()
+        .map((headerGroup, headerGroupIndex, headerGroups) => (
+          <TableRow
+            key={headerGroup.id}
+            className={cn(
+              headerGroups.length > 1 &&
+                headerGroupIndex === 0 &&
+                "!border-b-0",
+            )}
+          >
+            {headerGroup.headers.map((header) => {
+              const columnRelativeDepth = header.depth - header.column.depth;
+              if (
+                !header.isPlaceholder &&
+                columnRelativeDepth > 1 &&
+                header.id === header.column.id
+              ) {
+                return null;
+              }
 
-            let rowSpan = 1;
-            if (header.isPlaceholder) {
-              const leafs = header.getLeafHeaders();
-              rowSpan = (leafs?.[leafs.length - 1]?.depth ?? 0) - header.depth;
-            }
+              let rowSpan = 1;
+              if (header.isPlaceholder) {
+                const leafs = header.getLeafHeaders();
+                rowSpan =
+                  (leafs?.[leafs.length - 1]?.depth ?? 0) - header.depth;
+              }
 
-            const { meta } = header.column.columnDef;
+              const { meta } = header.column.columnDef;
 
-            return (
-              <TableHead
-                key={header.id}
-                className="sticky top-0 z-10"
-                colSpan={header.colSpan}
-                rowSpan={rowSpan}
-                {...meta}
-              >
-                {flexRender(
-                  header.column.columnDef.header,
-                  header.getContext(),
-                )}
-              </TableHead>
-            );
-          })}
-        </TableRow>
-      ))}
+              const isNestedGroupHeader =
+                !header.isPlaceholder && hasNestedColumns(header.column);
+
+              return (
+                <TableHead
+                  key={header.id}
+                  className={cn(
+                    "sticky top-0 z-10",
+                    isNestedGroupHeader && "data-table-group-header",
+                  )}
+                  colSpan={header.colSpan}
+                  rowSpan={rowSpan}
+                  {...meta}
+                >
+                  {flexRender(
+                    header.column.columnDef.header,
+                    header.getContext(),
+                  )}
+                </TableHead>
+              );
+            })}
+          </TableRow>
+        ))}
     </TableHeader>
   );
 }
 
+function hasNestedColumns<T>(
+  column: import("@tanstack/react-table").Column<T, unknown>,
+) {
+  return column.columns.length > 0;
+}
+
 function Pagination<T>({ table }: { table: TableInstance<T> }) {
   const pageCount = table.getPageCount();
   const currentPage = table.getState().pagination.pageIndex;

packages/common/components/src/ui/table/table.css

@@ -18,6 +18,18 @@
   .table-ui.default th {
     @apply bg-[#5987bf] text-[#fff];
   }
+  .table-ui th.data-table-group-header {
+    background-image: linear-gradient(
+      to right,
+      transparent 0.2rem,
+      var(--background) 0.2rem,
+      var(--background) calc(100% - 0.2rem),
+      transparent calc(100% - 0.2rem)
+    );
+    background-position: left bottom;
+    background-repeat: no-repeat;
+    background-size: 100% 1px;
+  }
   .table-ui.default td {
     @apply border-b border-b-border text-label;
   }