row pinning css (#5075)

TanStack · Sep 17, 2023 · 5086e8a · 5086e8a
1 parent 7700c6d
commit 5086e8a
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/examples/react/row-pinning/src/index.css b/examples/react/row-pinning/src/index.css
@@ -7,6 +7,13 @@ table {
   border: 1px solid lightgray;
 }
 
+thead {
+  background: lightgray;
+  margin: 0;
+  position: sticky;
+  top: 0;
+}
+
 tbody {
   border-bottom: 1px solid lightgray;
 }
@@ -33,3 +40,10 @@ tfoot {
 tfoot th {
   font-weight: normal;
 }
+
+.container {
+  border: 1px solid lightgray;
+  height: 500px;
+  max-width: 900px !important;
+  overflow: auto;
+}
diff --git a/examples/react/row-pinning/src/main.tsx b/examples/react/row-pinning/src/main.tsx
@@ -350,7 +350,7 @@ function PinnedRow({ row, table }: { row: Row<any>; table: Table<any> }) {
         position: 'sticky',
         top:
           row.getIsPinned() === 'top'
-            ? `${row.getPinnedIndex() * 26 + 50}px`
+            ? `${row.getPinnedIndex() * 26 + 48}px`
             : undefined,
         bottom:
           row.getIsPinned() === 'bottom'