Merge pull request #181 from Dezolated/sticky-table-header

Author: e11sy

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@editorjs/table",
   "description": "Table for Editor.js",
-  "version": "2.4.4",
+  "version": "2.4.5",
   "license": "MIT",
   "repository": "https://github.com/editor-js/table",
   "files": [

src/styles/table.pcss

@@ -72,7 +72,10 @@
     & .tc-row:first-child {
       font-weight: 600;
       border-bottom: 2px solid var(--color-border);
-
+      position: sticky;
+      top: 0;
+      z-index: 2;
+      background: var(--color-background);
       & [contenteditable]:empty::before {
         content: attr(heading);
         color: var(--color-text-secondary);
@@ -99,9 +102,18 @@
 }
 
 .tc-add-column {
-  padding: 4px 0;
-  justify-content: center;
+  display: grid;
   border-top: 1px solid var(--color-border);
+  grid-template-columns: var(--cell-size);
+  grid-auto-rows: var(--cell-size);
+  place-items: center;
+  svg {
+    padding: 5px;
+    position: sticky;
+    top: 0;
+    background-color: var(--color-background);
+  }
+
   &--disabled {
     visibility: hidden;
   }
@@ -116,8 +128,8 @@
   align-items: center;
   padding-left: 4px;
   position: relative;
-  &--disabled{
-    display : none;
+  &--disabled {
+    display: none;
   }
 
   &::before {
@@ -198,4 +210,4 @@
 
 .tc-wrap--readonly .tc-row::after {
   display: none;
-}
+}