@knime/kds-table 0.1.1 → 0.2.1

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @knime/kds-table
 
+## 0.2.1
+
+### Patch Changes
+
+- Updated dependencies [e0a3ce6]
+  - @knime/kds-components@0.30.0
+  - @knime/kds-styles@0.30.0
+
+## 0.2.0
+
+### Minor Changes
+
+- 843450b: - Remove sonar link from table `README`
+  - Only show filtered column count in actionbar
+  - Make `KdsMenuButton` in the `Header` transparent
+  - Only use `scrollbar gutter: stable` for tables with a vertical scrollbar
+  - fix computation of auto sizes in new flex layout
+  - Breaking change: `MIN_COLUMN_SIZE` is no longer exported from the `@knime/kds-table` package entrypoint, but instead
+    via `constants.MIN_COLUMN_SIZE`.
+
+### Patch Changes
+
+- Updated dependencies [843450b]
+  - @knime/kds-components@0.29.1
+  - @knime/kds-styles@0.29.1
+
 ## 0.1.1
 
 ### Patch Changes

package/README.md

@@ -1,7 +1,5 @@
 # KNIME® Design System – Table Component
 
-[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=knime_knime-designsystem&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=knime_knime-designsystem)
-
 This is part of the [KNIME Design System](../README.md) maintained by the [UI Core Team](mailto:team-ui-core@knime.com).
 
 This package contains the table component used by e.g. the TableView of KNIME Analytics Platform and KNIME Hub. It is based on the [Vue] JavaScript framework and built on the KNIME Design System tokens.

package/dist/import-table-BaqmTPnF-BaqmTPnF.js

@@ -0,0 +1,23 @@
+import { openBlock, createElementBlock, createElementVNode } from 'vue';
+
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  viewBox: "0 0 12 12"
+};
+
+function render(_ctx, _cache) {
+  return (openBlock(), createElementBlock("svg", _hoisted_1, [...(_cache[0] || (_cache[0] = [
+    createElementVNode("path", {
+      d: "M6 10.015H2.447a.95.95 0 0 1-.947-.946V2.446a.945.945 0 0 1 .947-.946H9.08a.95.95 0 0 1 .947.946v3.548M1.5 4.811h8.526M4.816 1.5v8.515m4.263-2.773V10.8M7.658 9.38l1.421 1.42L10.5 9.38",
+      "vector-effect": "non-scaling-stroke"
+    }, null, -1)
+  ]))]))
+}
+const importTable = { render: render };
+
+export { importTable as default, render };
+//# sourceMappingURL=import-table-BaqmTPnF-BaqmTPnF.js.map

package/dist/import-table-BaqmTPnF-BaqmTPnF.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"import-table-BaqmTPnF-BaqmTPnF.js","sources":["../../components/dist/import-table-BaqmTPnF.js"],"sourcesContent":["import { openBlock, createElementBlock, createElementVNode } from 'vue';\n\nconst _hoisted_1 = {\n  xmlns: \"http://www.w3.org/2000/svg\",\n  fill: \"none\",\n  stroke: \"currentColor\",\n  \"stroke-linecap\": \"round\",\n  \"stroke-linejoin\": \"round\",\n  viewBox: \"0 0 12 12\"\n};\n\nfunction render(_ctx, _cache) {\n  return (openBlock(), createElementBlock(\"svg\", _hoisted_1, [...(_cache[0] || (_cache[0] = [\n    createElementVNode(\"path\", {\n      d: \"M6 10.015H2.447a.95.95 0 0 1-.947-.946V2.446a.945.945 0 0 1 .947-.946H9.08a.95.95 0 0 1 .947.946v3.548M1.5 4.811h8.526M4.816 1.5v8.515m4.263-2.773V10.8M7.658 9.38l1.421 1.42L10.5 9.38\",\n      \"vector-effect\": \"non-scaling-stroke\"\n    }, null, -1)\n  ]))]))\n}\nconst importTable = { render: render };\n\nexport { importTable as default, render };\n//# sourceMappingURL=import-table-BaqmTPnF.js.map\n"],"names":[],"mappings":";;AAEA,MAAM,UAAU,GAAG;AACnB,EAAE,KAAK,EAAE,4BAA4B;AACrC,EAAE,IAAI,EAAE,MAAM;AACd,EAAE,MAAM,EAAE,cAAc;AACxB,EAAE,gBAAgB,EAAE,OAAO;AAC3B,EAAE,iBAAiB,EAAE,OAAO;AAC5B,EAAE,OAAO,EAAE;AACX,CAAC;;AAED,SAAS,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE;AAC9B,EAAE,QAAQ,SAAS,EAAE,EAAE,kBAAkB,CAAC,KAAK,EAAE,UAAU,EAAE,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC,GAAG;AAC5F,IAAI,kBAAkB,CAAC,MAAM,EAAE;AAC/B,MAAM,CAAC,EAAE,yLAAyL;AAClM,MAAM,eAAe,EAAE;AACvB,KAAK,EAAE,IAAI,EAAE,EAAE;AACf,GAAG,CAAC,CAAC,CAAC,CAAC;AACP;AACK,MAAC,WAAW,GAAG,EAAE,MAAM,EAAE,MAAM;;;;"}

package/dist/index.css

@@ -321,6 +321,84 @@ tbody[data-v-70f2c330] {
 }
 }
 
+.kds-progress-bar {
+&[data-v-5fdfbce2] {
+  --progress-bar-background-color: var(--kds-color-surface-subtle);
+  --progress-bar-foreground-color: var(
+    --kds-color-background-primary-bold-initial
+  );
+  --progress-bar-radius: var(--kds-border-radius-container-pill);
+  --progress-bar-height: var(--kds-dimension-component-height-0-25x);
+
+  position: relative;
+  width: 100%;
+  height: var(--progress-bar-height);
+  overflow: hidden;
+  border-radius: var(--progress-bar-radius);
+
+  /* Firefox uses this to target the bar that represents the value of the progress element */
+
+  /* the following two rules need to stay separate, as otherwise it causes it not to be applied in Chrome correctly */
+}
+& .progress[data-v-5fdfbce2] {
+    display: block;
+    width: 100%;
+    height: var(--progress-bar-height);
+    padding: 0;
+    overflow: hidden;
+    appearance: none;
+
+    /* Firefox sets the background of the bar from here  */
+    background-color: var(--progress-bar-background-color);
+    border: none;
+    border-radius: var(--progress-bar-radius);
+}
+& .progress[data-v-5fdfbce2]::-webkit-progress-bar {
+    background-color: var(--progress-bar-background-color);
+}
+& .progress[data-v-5fdfbce2]::-webkit-progress-value {
+    background-color: var(--progress-bar-foreground-color);
+    border-radius: var(--progress-bar-radius);
+    transition: width 0.5s;
+}
+& .progress[data-v-5fdfbce2]::-moz-progress-bar {
+    background-color: var(--progress-bar-foreground-color);
+}
+& .progress[data-v-5fdfbce2]:indeterminate {
+    background-color: var(--progress-bar-background-color);
+    background-image: none;
+}
+& .progress[data-v-5fdfbce2]:indeterminate::-webkit-progress-bar {
+    background-color: transparent;
+}
+& .progress[data-v-5fdfbce2]:indeterminate::-moz-progress-bar {
+    background-color: transparent;
+}
+& .indeterminate-bar[data-v-5fdfbce2] {
+    position: absolute;
+    inset-block: 0;
+    width: 35%;
+    pointer-events: none;
+    background-color: var(--progress-bar-foreground-color);
+    border-radius: var(--kds-border-radius-container-pill);
+    animation: move-indeterminate-5fdfbce2 1.5s linear infinite;
+}
+}
+.kds-progress-bar-medium[data-v-5fdfbce2] {
+  --progress-bar-height: var(--kds-dimension-component-height-0-25x);
+}
+.kds-progress-bar-large[data-v-5fdfbce2] {
+  --progress-bar-height: var(--kds-dimension-component-height-0-75x);
+}
+@keyframes move-indeterminate-5fdfbce2 {
+0% {
+    transform: translateX(-120%);
+}
+100% {
+    transform: translateX(320%);
+}
+}
+
 .kds-color-swatch {
 &[data-v-91e0130d] {
   display: inline-block;
@@ -1142,7 +1220,7 @@ html.kds-legacy {
 }
 }
 
-.kds-menu-item-link[data-v-677d6ca6] {
+.kds-menu-item-link[data-v-96d9cfba] {
   display: block;
   color: inherit;
   text-decoration: none;
@@ -1159,7 +1237,7 @@ html.kds-legacy {
 }
 
 .kds-menu-container {
-&[data-v-cce3fc40] {
+&[data-v-9dc6d3f6] {
   display: flex;
   flex-direction: column;
   gap: var(--kds-spacing-container-0-10x);
@@ -1171,11 +1249,46 @@ html.kds-legacy {
   border-radius: var(--kds-border-radius-container-0-50x);
   box-shadow: var(--kds-elevation-level-3);
 }
-&[data-v-cce3fc40]:focus-visible {
+&[data-v-9dc6d3f6]:focus-visible {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
 }
+.submenu-popover[data-v-9dc6d3f6] {
+  inset: anchor(top) auto auto anchor(right);
+  padding: 0 var(--kds-spacing-container-0-25x);
+  margin: 0;
+  position-try-fallbacks:
+    --kds-popover-try-right-dropdown, --kds-popover-try-left-dropdown,
+    --kds-popover-try-right-dropup, --kds-popover-try-left-dropup;
+  overflow: visible;
+  font: inherit;
+  color: inherit;
+  background-color: transparent;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+/* noinspection CssInvalidFunction,CssInvalidAtRule */
+@position-try --kds-popover-try-right-dropdown {
+  inset: anchor(top) auto auto anchor(right);
+}
+
+/* noinspection CssInvalidFunction,CssInvalidAtRule */
+@position-try --kds-popover-try-left-dropdown {
+  inset: anchor(top) anchor(left) auto auto;
+}
+
+/* noinspection CssInvalidFunction,CssInvalidAtRule */
+@position-try --kds-popover-try-right-dropup {
+  inset: auto auto anchor(bottom) anchor(right);
+}
+
+/* noinspection CssInvalidFunction,CssInvalidAtRule */
+@position-try --kds-popover-try-left-dropup {
+  inset: auto anchor(left) anchor(bottom) auto;
+}
 
 .kds-popover {
 &[data-v-1e5f9d24] {
@@ -4295,17 +4408,17 @@ body:has(dialog.modal[open]) {
 }
 
 .description {
-&[data-v-43067f23] {
+&[data-v-ed6ba7bb] {
   font: var(--kds-font-base-body-small);
   color: var(--kds-color-text-and-icon-neutral);
   overflow-wrap: anywhere;
 
   /* stylelint-disable knime/no-deep-nesting */
 }
-&.plain[data-v-43067f23] {
+&.plain[data-v-ed6ba7bb] {
     white-space: pre-line;
 }
-&[data-v-43067f23]  {
+&[data-v-ed6ba7bb]  {
 p {
 & {
       padding: 0;
@@ -4326,11 +4439,11 @@ i,
 }
 h3 {
       margin: 0;
-      font: var(--kds-font-base-body-large-strong);
+      font: var(--kds-font-base-body-medium-strong);
 }
 h4 {
       margin: 0;
-      font: var(--kds-font-base-body-medium-strong);
+      font: var(--kds-font-base-body-small-strong);
 }
 pre {
 & {
@@ -4409,7 +4522,7 @@ a {
           margin-left: var(--kds-spacing-container-0-12x);
           content: "";
           background-color: var(--link-color);
-          mask-image: var(--v0c7d182f);
+          mask-image: var(--v4209a14a);
           mask-repeat: no-repeat;
           mask-size: contain;
 }
@@ -4572,18 +4685,18 @@ tr {
 }
 
 .page-controls {
-&[data-v-0c85eb71] {
+&[data-v-df9e464a] {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-75x);
 }
-& .page-row-range[data-v-0c85eb71],
-  & .page-size-menu[data-v-0c85eb71] {
+& .page-row-range[data-v-df9e464a],
+  & .page-size-menu[data-v-df9e464a] {
     flex-grow: 1;
     flex-basis: 0;
 }
-.page-size-menu[data-v-0c85eb71] {
+.page-size-menu[data-v-df9e464a] {
     display: flex;
     justify-content: flex-end;
 }
@@ -4631,24 +4744,24 @@ tr {
   position-try-order: most-inline-size;
 }
 
-.sort-popover[data-v-e540d3eb] {
+.sort-popover[data-v-80bf221a] {
   position-try-order: most-inline-size;
 }
 .popover-container {
 .body {
-&[data-v-e540d3eb] {
+&[data-v-80bf221a] {
     display: grid;
     grid-template-columns: auto auto;
     gap: var(--kds-spacing-container-0-5x);
     }
-&[data-v-e540d3eb] > * {
+&[data-v-80bf221a] > * {
       min-width: 0;
 }
 }
 }
 
 .kds-table-action-bar {
-&[data-v-4a75b4b1] {
+&[data-v-8cfb3c41] {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -4657,28 +4770,28 @@ tr {
   padding-left: var(--kds-spacing-container-0-5x);
   border-top: var(--kds-border-base-subtle);
 }
-&.temporary-view[data-v-4a75b4b1] {
+&.temporary-view[data-v-8cfb3c41] {
     background-color: var(--kds-color-background-static-info-muted);
 }
 & .left {
-&[data-v-4a75b4b1] {
+&[data-v-8cfb3c41] {
     display: flex;
     flex: 1 0 0;
     gap: var(--kds-spacing-container-0-5x);
     align-items: center;
     padding: var(--kds-spacing-container-0-12x) 0;
 }
-& .title[data-v-4a75b4b1] {
+& .title[data-v-8cfb3c41] {
       font: var(--kds-font-base-title-medium-strong);
       color: var(--kds-color-text-and-icon-neutral);
 }
-& .dimension[data-v-4a75b4b1] {
+& .dimension[data-v-8cfb3c41] {
       font: var(--kds-font-base-title-small);
       color: var(--kds-color-text-and-icon-muted);
       white-space: pre;
 }
 }
-& .right[data-v-4a75b4b1] {
+& .right[data-v-8cfb3c41] {
     display: flex;
     gap: var(--kds-spacing-container-0-25x);
     align-items: center;
@@ -4688,13 +4801,13 @@ tr {
 }
 
 thead {
-&[data-v-3fabfb11] {
+&[data-v-08a86b18] {
   background-color: var(--kds-color-surface-default);
   border-top: var(--kds-border-base-subtle);
   border-bottom: var(--kds-border-base-subtle);
 }
 & tr {
-&[data-v-3fabfb11] {
+&[data-v-08a86b18] {
     display: flex;
     height: 100%;
     transition:
@@ -4702,31 +4815,31 @@ thead {
       box-shadow 0.15s;
 }
 & th {
-&[data-v-3fabfb11] {
+&[data-v-08a86b18] {
       min-height: var(--kds-dimension-component-height-2-5x);
       max-height: var(--kds-dimension-component-height-5x);
       text-align: left;
       white-space: nowrap;
 }
-&.deletion-cell-spacer[data-v-3fabfb11] {
+&.deletion-cell-spacer[data-v-08a86b18] {
         width: var(--kds-dimension-component-width-2x);
 }
-&.header-focused[data-v-3fabfb11] {
+&.header-focused[data-v-08a86b18] {
         background-color: var(--kds-color-focus-background);
 }
 &.select-cell {
-&[data-v-3fabfb11] {
+&[data-v-08a86b18] {
         display: flex;
         justify-content: center;
         width: var(--kds-dimension-component-width-2x);
         padding: var(--kds-spacing-container-0-75x);
 }
-& .select-checkbox[data-v-3fabfb11] {
+& .select-checkbox[data-v-08a86b18] {
           /* With this added padding the checkbox appears centered initially */
           padding: var(--kds-spacing-container-0-10x);
 }
 }
-&.colored-header[data-v-3fabfb11] {
+&.colored-header[data-v-08a86b18] {
         /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties -- runtime variable set via inline :style */
         background-image: linear-gradient(
           90deg,
@@ -4737,7 +4850,7 @@ thead {
         background-size: var(--kds-spacing-container-0-25x);
 }
 &.column-header {
-&[data-v-3fabfb11] {
+&[data-v-08a86b18] {
         /* Need to set position relative here to position the resize handle absolutely within the header cell */
         position: relative;
         display: flex;
@@ -4748,44 +4861,44 @@ thead {
         color: var(--kds-color-text-and-icon-neutral);
 }
 & .column-header-content {
-&[data-v-3fabfb11] {
+&[data-v-08a86b18] {
           display: flex;
           flex-direction: column;
           justify-content: center;
           width: 100%;
 }
-&[data-v-3fabfb11]:focus {
+&[data-v-08a86b18]:focus {
             outline: none;
 }
-&.with-button-in-header[data-v-3fabfb11] {
+&.with-button-in-header[data-v-08a86b18] {
             width: calc(
               100% - var(--kds-dimension-component-width-1-5x)
             ); /* due to .sub-menu-select-header / .delete-column-button: width */
 }
 & .main-header {
-&[data-v-3fabfb11] {
+&[data-v-08a86b18] {
             display: flex;
 }
-& .header-text-container[data-v-3fabfb11] {
+& .header-text-container[data-v-08a86b18] {
               max-width: 100%;
               overflow: hidden;
               text-overflow: ellipsis;
               font: var(--kds-font-base-title-medium-strong);
 }
 }
-& .sub-header-text-container[data-v-3fabfb11] {
+& .sub-header-text-container[data-v-08a86b18] {
             overflow: hidden;
             text-overflow: ellipsis;
             font: var(--kds-font-base-subtext-small);
 }
 }
-& .delete-column-button[data-v-3fabfb11] {
+& .delete-column-button[data-v-08a86b18] {
           display: flex;
           align-items: center;
           width: var(--kds-dimension-component-width-2x);
 }
 & .resize-handle-area {
-&[data-v-3fabfb11] {
+&[data-v-08a86b18] {
           position: absolute;
 
           /* resize handle should range into top border */
@@ -4811,42 +4924,42 @@ thead {
           cursor: col-resize;
           opacity: 0;
 }
-& .resize-handle[data-v-3fabfb11] {
+& .resize-handle[data-v-08a86b18] {
             border-right: var(--kds-border-resize-handle-hover);
             border-radius: var(--kds-border-radius-container-0-25x);
 }
-&.hover[data-v-3fabfb11] {
+&.hover[data-v-08a86b18] {
             opacity: 1;
 }
-&.drag[data-v-3fabfb11] {
+&.drag[data-v-08a86b18] {
             opacity: 1;
 }
 }
 }
-&.new-column-head[data-v-3fabfb11] {
+&.new-column-head[data-v-08a86b18] {
         display: flex;
         flex-direction: column;
         justify-content: center;
         padding: var(--kds-spacing-container-0-5x);
 }
 }
-&[data-v-3fabfb11]:hover {
+&[data-v-08a86b18]:hover {
       outline: none;
 }
 }
-&.sub-menu-active tr[data-v-3fabfb11] {
+&.sub-menu-active tr[data-v-08a86b18] {
     padding-right: var(--kds-dimension-component-width-2x);
 }
 }
 .header-selection-overlay {
-&[data-v-3fabfb11] {
+&[data-v-08a86b18] {
   position: absolute;
   top: 0;
   height: 100%;
   pointer-events: none;
   border: var(--kds-border-action-selected-accent);
 }
-&.header-focused[data-v-3fabfb11] {
+&.header-focused[data-v-08a86b18] {
     border: var(--kds-border-action-focused);
 }
 }
@@ -4863,7 +4976,7 @@ thead {
 }
 
 .expand-button {
-&[data-v-5cde8e39] {
+&[data-v-f204ddf3] {
   display: flex;
   flex-shrink: 0;
   align-items: center;
@@ -4877,42 +4990,40 @@ thead {
   border: none;
   border-radius: var(--kds-border-radius-container-0-12x);
 }
-&[data-v-5cde8e39]:hover {
+&[data-v-f204ddf3]:hover {
     background-color: var(--kds-color-background-neutral-hover);
 }
-&[data-v-5cde8e39]:active {
+&[data-v-f204ddf3]:active {
     background-color: var(--kds-color-background-neutral-active);
 }
 &.toggled {
-&[data-v-5cde8e39] {
+&[data-v-f204ddf3] {
     color: var(--kds-color-text-and-icon-neutral-inverted);
     background-color: var(--kds-color-background-info-bold-initial);
     border: var(--kds-border-action-transparent);
 }
-&[data-v-5cde8e39]:hover {
+&[data-v-f204ddf3]:hover {
       background-color: var(--kds-color-background-info-bold-hover);
 }
-&[data-v-5cde8e39]:active {
+&[data-v-f204ddf3]:active {
       background-color: var(--kds-color-background-info-bold-active);
 }
 }
 }
 
 .data-cell {
-&[data-v-cf791d20] {
+&[data-v-698a5d81] {
   display: flex;
-  gap: var(--kds-spacing-container-0-25x);
-  align-items: center;
   font: var(--kds-font-base-interactive-small);
   color: var(--kds-color-text-and-icon-neutral);
   white-space: nowrap;
   user-select: none;
   background-clip: border-box;
 }
-&.in-cell-selection[data-v-cf791d20] {
+&.in-cell-selection[data-v-698a5d81] {
     background-color: var(--kds-color-focus-background);
 }
-&.colored-cell[data-v-cf791d20] {
+&.colored-cell[data-v-698a5d81] {
     /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties -- runtime variable set via inline :style */
     background-image: linear-gradient(
       90deg,
@@ -4922,44 +5033,51 @@ thead {
     background-repeat: no-repeat;
     background-size: var(--kds-spacing-container-0-25x);
 }
-&.inline-block span[data-v-cf791d20] {
+&.inline-block span[data-v-698a5d81] {
     display: inline-block;
 }
-& .cell-text[data-v-cf791d20] {
-    flex: 1;
+& .cell-content[data-v-698a5d81] {
+    display: flex;
+    gap: var(--kds-spacing-container-0-25x);
+    align-self: flex-start;
+    justify-content: space-between;
+    width: 100%;
+}
+& .cell-content .cell-text[data-v-698a5d81] {
+    flex: 0 1 auto;
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 }
 
-tr[data-v-981795db] {
+tr[data-v-0ad921a2] {
   display: flex;
 }
 tr.row {
-&[data-v-981795db] {
+&[data-v-0ad921a2] {
   border-bottom: var(--kds-border-base-subtle);
   }
 & td {
-&[data-v-981795db] {
+&[data-v-0ad921a2] {
     padding: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     }
 &.select-cell {
-&[data-v-981795db] {
+&[data-v-0ad921a2] {
       display: flex;
       justify-content: center;
       width: var(--kds-dimension-component-width-2x);
       min-width: var(--kds-dimension-component-width-2x);
       }
-& .select-checkbox[data-v-981795db] {
+& .select-checkbox[data-v-0ad921a2] {
         /* With this added padding the checkbox appears centered initially */
         padding: var(--kds-spacing-container-0-10x);
 }
 }
 &.deletion-cell {
-&[data-v-981795db] {
+&[data-v-0ad921a2] {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -4967,11 +5085,11 @@ tr.row {
       min-width: var(--kds-dimension-component-width-2x);
       opacity: 0;
       }
-&[data-v-981795db]:focus-within {
+&[data-v-0ad921a2]:focus-within {
         opacity: 1;
 }
 }
-&.action[data-v-981795db] {
+&.action[data-v-0ad921a2] {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -4980,19 +5098,19 @@ tr.row {
 }
 }
 &:hover {
-&[data-v-981795db] {
+&[data-v-0ad921a2] {
     outline: none;
     background-color: var(--kds-color-background-neutral-hover);
     }
-& .deletion-cell[data-v-981795db] {
+& .deletion-cell[data-v-0ad921a2] {
       opacity: 1;
 }
 }
-& a[data-v-981795db] {
+& a[data-v-0ad921a2] {
     outline: none;
 }
 }
-.row-drag-handle[data-v-981795db] {
+.row-drag-handle[data-v-0ad921a2] {
   position: relative;
   bottom: var(--kds-spacing-container-0-37x);
   height: var(--kds-spacing-container-0-37x);
@@ -5039,7 +5157,7 @@ table {
 }
 }
 
-.table-column-size-calculation[data-v-b93f03c7] {
+.table-column-size-calculation[data-v-ea7bec0f] {
   position: absolute;
   top: -9999px;
   left: -9999px;