@dnb/eufemia 9.38.0-beta.1 → 9.38.0

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to @dnb/eufemia will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [9.38.0-beta.1](https://github.com/dnbexperience/eufemia/compare/v9.37.0...v9.38.0-beta.1) (2022-11-17)
+# [9.38.0](https://github.com/dnbexperience/eufemia/compare/v9.37.0...v9.38.0) (2022-11-22)
 
 
 ### Bug Fixes
@@ -18,10 +18,15 @@ All notable changes to @dnb/eufemia will be documented in this file. See
 ### Features
 
 * **Table:** add "fixed" prop for fixed table layouts ([#1708](https://github.com/dnbexperience/eufemia/issues/1708)) ([241ee0f](https://github.com/dnbexperience/eufemia/commit/241ee0f77bc48c0dd9ac84d0035971c784ba3a8b))
+* **Table:** add table "border" and "outline" property ([#1739](https://github.com/dnbexperience/eufemia/issues/1739)) ([ad63ffb](https://github.com/dnbexperience/eufemia/commit/ad63ffbda03b6a72f9567df6d8d02033f0d4434c))
+* **Table:** add Table.ScrolView to support horizontal scroll ([#1735](https://github.com/dnbexperience/eufemia/issues/1735)) ([85a4d86](https://github.com/dnbexperience/eufemia/commit/85a4d86afa20ea775d89c2bfcef56dd32a2e6004))
 * **Table:** add Table.SortButton ([#1709](https://github.com/dnbexperience/eufemia/issues/1709)) ([288a8db](https://github.com/dnbexperience/eufemia/commit/288a8dbaf2e0622208d567b62302e5b668bd90b7))
+* **Table:** add TableContainer to stack tables with an outline ([#1740](https://github.com/dnbexperience/eufemia/issues/1740)) ([376ac06](https://github.com/dnbexperience/eufemia/commit/376ac063518d8741223b39d87197d207b939c008))
 * **Table:** add Th.HelpButton to be used in Table Headers ([#1711](https://github.com/dnbexperience/eufemia/issues/1711)) ([c142323](https://github.com/dnbexperience/eufemia/commit/c142323b56389218b5f2451c55fc7282dec5d0c4))
+* **Table:** support rowSpan ([#1733](https://github.com/dnbexperience/eufemia/issues/1733)) ([463692d](https://github.com/dnbexperience/eufemia/commit/463692db1e803903a93c32a1028689f3f9e55afc))
 * **Th:** add table header sortable props ([#1706](https://github.com/dnbexperience/eufemia/issues/1706)) ([c40393a](https://github.com/dnbexperience/eufemia/commit/c40393addb8bc75fc84320ad21f5c0f1c5c42bc0))
 * **Tr:** automate odd/even and make it overridable ([#1705](https://github.com/dnbexperience/eufemia/issues/1705)) ([d73d3cb](https://github.com/dnbexperience/eufemia/commit/d73d3cbdc115ceb5b9e9609a719ff58b919d9c69))
+* **Typography:** support styles for superscript and subscript elements ([#1721](https://github.com/dnbexperience/eufemia/issues/1721)) ([c2b043d](https://github.com/dnbexperience/eufemia/commit/c2b043db0bfddb9678e526f4eb2a9a0b1ca16d9d))
 * **Upload:** support files dropped on the document body ([#1719](https://github.com/dnbexperience/eufemia/issues/1719)) ([f206243](https://github.com/dnbexperience/eufemia/commit/f20624303468789b89a907cb5157e5a975ac43a7))
 
 # [9.37.0](https://github.com/dnbexperience/eufemia/compare/v9.36.0...v9.37.0) (2022-11-07)

package/cjs/components/lib.d.ts

@@ -51,10 +51,9 @@ export function getComponents(): {
     StepIndicator: typeof StepIndicator;
     Switch: typeof Switch;
     Table: {
-        (componentProps: import("./table/Table").TableProps & import("react").TableHTMLAttributes<HTMLTableElement> & import("./space/types").SpacingElementProps & {
-            space?: import("./space/types").SpaceTypes | import("./space/types").SpacingElementProps;
-        }): JSX.Element;
+        (componentProps: import("./table/Table").TableAllProps): JSX.Element;
         StickyHelper: () => JSX.Element;
+        ScrollView: typeof import("./table/TableScrollView").default;
     };
     Tabs: typeof Tabs;
     Tag: {

package/cjs/components/table/Table.d.ts

@@ -1,11 +1,14 @@
 import React from 'react';
-import { SkeletonShow } from '../skeleton/Skeleton';
-import { SpacingProps } from '../../shared/types';
-import { StickyHelper, StickyTableHeaderProps } from './TableStickyHeader';
+import ScrollView from './TableScrollView';
+import { StickyHelper } from './TableStickyHeader';
+import type { StickyTableHeaderProps } from './TableStickyHeader';
+import type { SkeletonShow } from '../skeleton/Skeleton';
+import type { SpacingProps } from '../../shared/types';
 export declare type TableSizes = 'large' | 'medium';
 export declare type TableVariants = 'generic';
 export { StickyHelper };
-export interface TableProps extends StickyTableHeaderProps {
+export { ScrollView };
+export declare type TableProps = {
     /**
      * The content of the component.
      */
@@ -28,18 +31,30 @@ export interface TableProps extends StickyTableHeaderProps {
      * Default: generic.
      */
     variant?: TableVariants;
+    /**
+     * Use `true` to show borders between table data cell
+     * Default: false
+     */
+    border?: boolean;
+    /**
+     * Use `true` to show a outline border around the table
+     * Default: false
+     */
+    outline?: boolean;
     /**
      * Defines if the table should behave with a fixed table layout, using: "table-layout: fixed;"
      * Default: null.
      */
     fixed?: boolean;
-}
+} & StickyTableHeaderProps;
+export declare type TableAllProps = TableProps & React.TableHTMLAttributes<HTMLTableElement> & SpacingProps;
 export declare const defaultProps: {
     size: string;
     variant: string;
 };
 declare const Table: {
-    (componentProps: TableProps & React.TableHTMLAttributes<HTMLTableElement> & SpacingProps): JSX.Element;
+    (componentProps: TableAllProps): JSX.Element;
     StickyHelper: () => JSX.Element;
+    ScrollView: typeof ScrollView;
 };
 export default Table;

package/cjs/components/table/Table.js

@@ -39,6 +39,12 @@ require("core-js/modules/es.object.assign.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "ScrollView", {
+  enumerable: true,
+  get: function get() {
+    return _TableScrollView.default;
+  }
+});
 Object.defineProperty(exports, "StickyHelper", {
   enumerable: true,
   get: function get() {
@@ -63,11 +69,13 @@ var _SkeletonHelper = require("../skeleton/SkeletonHelper");
 
 var _componentHelper = require("../../shared/component-helper");
 
+var _TableScrollView = _interopRequireDefault(require("./TableScrollView"));
+
 var _TableContext = _interopRequireDefault(require("./TableContext"));
 
 var _TableStickyHeader = require("./TableStickyHeader");
 
-var _excluded = ["className", "children", "size", "skeleton", "variant", "sticky", "stickyOffset", "fixed"];
+var _excluded = ["className", "children", "size", "skeleton", "variant", "sticky", "stickyOffset", "fixed", "border", "outline"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -116,6 +124,8 @@ var Table = function Table(componentProps) {
       sticky = allProps.sticky,
       stickyOffset = allProps.stickyOffset,
       fixed = allProps.fixed,
+      border = allProps.border,
+      outline = allProps.outline,
       props = _objectWithoutProperties(allProps, _excluded);
 
   var skeletonClasses = (0, _SkeletonHelper.createSkeletonClass)('font', skeleton, context);
@@ -144,7 +154,7 @@ var Table = function Table(componentProps) {
       allProps: _objectSpread(_objectSpread({}, context.getTranslation(componentProps).Table), allProps)
     }
   }, _react.default.createElement("table", _extends({
-    className: (0, _classnames.default)('dnb-table', spacingClasses, skeletonClasses, className, variant && "dnb-table__variant--".concat(variant), size && "dnb-table__size--".concat(size), sticky && "dnb-table--sticky", fixed && "dnb-table--fixed"),
+    className: (0, _classnames.default)('dnb-table', spacingClasses, skeletonClasses, className, variant && "dnb-table__variant--".concat(variant), size && "dnb-table__size--".concat(size), sticky && "dnb-table--sticky", fixed && "dnb-table--fixed", border && "dnb-table--border", outline && "dnb-table--outline"),
     ref: elementRef
   }, props), children)));
 
@@ -156,4 +166,5 @@ var Table = function Table(componentProps) {
 
 var _default = Table;
 exports.default = _default;
-Table.StickyHelper = _TableStickyHeader.StickyHelper;
+Table.StickyHelper = _TableStickyHeader.StickyHelper;
+Table.ScrollView = _TableScrollView.default;

package/cjs/components/table/TableContainer.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import type { TableProps } from './Table';
+import type { SpacingProps } from '../space/types';
+export declare type TableContainerProps = {
+    /**
+     * The content of the component.
+     */
+    children: [
+        React.ReactElement<TableContainerHeadProps>,
+        React.ReactElement<TableContainerBodyProps>,
+        React.ReactElement<TableContainerFootProps>
+    ];
+};
+export declare type TableContainerAllProps = TableContainerProps & React.TableHTMLAttributes<HTMLTableRowElement> & SpacingProps;
+declare function TableContainer(props: TableContainerAllProps): JSX.Element;
+declare namespace TableContainer {
+    var Body: typeof TableContainerBody;
+    var Head: typeof TableContainerHead;
+    var Foot: typeof TableContainerFoot;
+}
+export default TableContainer;
+export declare type TableContainerBodyProps = {
+    /**
+     * The content of the component.
+     */
+    children: React.ReactElement<TableProps> | Array<React.ReactElement<TableProps>>;
+};
+export declare function TableContainerBody(props: TableContainerBodyProps & React.HTMLAttributes<HTMLDivElement>): JSX.Element;
+export declare type TableContainerHeadProps = {
+    /**
+     * The content of the component.
+     */
+    children: React.ReactNode;
+};
+export declare function TableContainerHead(props: TableContainerHeadProps & React.HTMLAttributes<HTMLDivElement>): JSX.Element;
+export declare type TableContainerFootProps = {
+    /**
+     * The content of the component.
+     */
+    children: React.ReactNode;
+};
+export declare function TableContainerFoot(props: TableContainerFootProps & React.HTMLAttributes<HTMLDivElement>): JSX.Element;

package/cjs/components/table/TableContainer.js

@@ -0,0 +1,86 @@
+"use strict";
+
+require("core-js/modules/es.object.keys.js");
+
+require("core-js/modules/es.array.index-of.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.object.assign.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableContainerBody = TableContainerBody;
+exports.TableContainerFoot = TableContainerFoot;
+exports.TableContainerHead = TableContainerHead;
+exports.default = TableContainer;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _ScrollView = _interopRequireDefault(require("../../fragments/scroll-view/ScrollView"));
+
+var _SpacingUtils = require("../space/SpacingUtils");
+
+var _componentHelper = require("../../shared/component-helper");
+
+var _excluded = ["children", "className"],
+    _excluded2 = ["children", "className"],
+    _excluded3 = ["children", "className"],
+    _excluded4 = ["children", "className"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function TableContainer(props) {
+  var children = props.children,
+      className = props.className,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  var spacingClasses = (0, _SpacingUtils.createSpacingClasses)(props);
+  (0, _componentHelper.validateDOMAttributes)(props, rest);
+  return _react.default.createElement("section", _extends({
+    className: (0, _classnames.default)('dnb-table__container', className, spacingClasses)
+  }, rest), _react.default.createElement(_ScrollView.default, null, children));
+}
+
+function TableContainerBody(props) {
+  var children = props.children,
+      className = props.className,
+      rest = _objectWithoutProperties(props, _excluded2);
+
+  return _react.default.createElement("div", _extends({
+    className: (0, _classnames.default)('dnb-table__container__body', className)
+  }, rest), children);
+}
+
+function TableContainerHead(props) {
+  var children = props.children,
+      className = props.className,
+      rest = _objectWithoutProperties(props, _excluded3);
+
+  return _react.default.createElement("div", _extends({
+    className: (0, _classnames.default)('dnb-table__container__head', className)
+  }, rest), children);
+}
+
+function TableContainerFoot(props) {
+  var children = props.children,
+      className = props.className,
+      rest = _objectWithoutProperties(props, _excluded4);
+
+  return _react.default.createElement("div", _extends({
+    className: (0, _classnames.default)('dnb-table__container__foot', className)
+  }, rest), children);
+}
+
+TableContainer.Body = TableContainerBody;
+TableContainer.Head = TableContainerHead;
+TableContainer.Foot = TableContainerFoot;

package/cjs/components/table/TableScrollView.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { SpacingProps } from '../../shared/types';
+export declare type TableScrollViewProps = {
+    /**
+     * The content of the component.
+     */
+    children: React.ReactElement<HTMLTableElement>;
+};
+export declare type TableScrollViewAllProps = TableScrollViewProps & Omit<React.TableHTMLAttributes<HTMLDivElement>, 'children'> & SpacingProps;
+export default function TableScrollView(props: TableScrollViewAllProps): JSX.Element;

package/cjs/components/table/TableScrollView.js

@@ -0,0 +1,40 @@
+"use strict";
+
+require("core-js/modules/es.object.keys.js");
+
+require("core-js/modules/es.array.index-of.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.object.assign.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = TableScrollView;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _ScrollView = _interopRequireDefault(require("../../fragments/scroll-view/ScrollView"));
+
+var _excluded = ["className", "children"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function TableScrollView(props) {
+  var className = props.className,
+      children = props.children,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  return _react.default.createElement(_ScrollView.default, _extends({
+    className: (0, _classnames.default)('dnb-table__scroll-view', className)
+  }, rest), children);
+}

package/cjs/components/table/TableStickyHeader.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export interface StickyTableHeaderProps {
+export declare type StickyTableHeaderProps = {
     /**
      * Makes the Table header sticky
      * Default: false
@@ -14,7 +14,7 @@ export interface StickyTableHeaderProps {
      * @deprecated Please use `stickyOffset`
      */
     sticky_offset?: string | number;
-}
+};
 export declare const useStickyHeader: ({ sticky, stickyOffset, sticky_offset, }: StickyTableHeaderProps) => {
     elementRef: React.MutableRefObject<HTMLTableElement>;
 };

package/cjs/components/table/TableTd.d.ts

@@ -1,5 +1,15 @@
 import React from 'react';
 export declare type TableTdProps = {
+    /**
+     * if set to `true`, no padding will be added
+     * Default: false
+     */
+    noSpacing?: boolean;
+    /**
+     * Set to `horizontal` for padding on left and right side
+     * Default: false
+     */
+    spacing?: 'horizontal';
     /**
      * The content of the component.
      * Default: null

package/cjs/components/table/TableTd.js

@@ -17,7 +17,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _excluded = ["className", "children"];
+var _excluded = ["className", "children", "noSpacing", "spacing"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -30,10 +30,12 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 function Td(componentProps) {
   var className = componentProps.className,
       children = componentProps.children,
+      noSpacing = componentProps.noSpacing,
+      spacing = componentProps.spacing,
       props = _objectWithoutProperties(componentProps, _excluded);
 
   return _react.default.createElement("td", _extends({
     role: "cell",
-    className: (0, _classnames.default)('dnb-table__td', className)
+    className: (0, _classnames.default)('dnb-table__td', className, noSpacing && 'dnb-table__td--no-spacing', spacing && "dnb-table__td--spacing-".concat(spacing))
   }, props), children);
 }

package/cjs/components/table/TableTh.d.ts

@@ -32,5 +32,6 @@ declare function Th(componentProps: TableThProps & React.ThHTMLAttributes<HTMLTa
 declare namespace Th {
     var SortButton: typeof TableSortButton;
     var HelpButton: typeof TableHelpButton;
+    var Horizontal: ({ className, ...rest }: React.ThHTMLAttributes<HTMLDivElement>) => JSX.Element;
 }
 export default Th;

package/cjs/components/table/TableTh.js

@@ -21,7 +21,8 @@ var _TableSortButton = _interopRequireDefault(require("./TableSortButton"));
 
 var _TableHelpButton = _interopRequireDefault(require("./TableHelpButton"));
 
-var _excluded = ["className", "children", "sortable", "active", "reversed", "noWrap"];
+var _excluded = ["className", "children", "sortable", "active", "reversed", "noWrap"],
+    _excluded2 = ["className"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -46,5 +47,16 @@ function Th(componentProps) {
   }, props), children);
 }
 
+function Horizontal(_ref) {
+  var _ref$className = _ref.className,
+      className = _ref$className === void 0 ? null : _ref$className,
+      rest = _objectWithoutProperties(_ref, _excluded2);
+
+  return _react.default.createElement("div", _extends({}, rest, {
+    className: (0, _classnames.default)('dnb-table__th__horizontal', className)
+  }));
+}
+
 Th.SortButton = _TableSortButton.default;
-Th.HelpButton = _TableHelpButton.default;
+Th.HelpButton = _TableHelpButton.default;
+Th.Horizontal = Horizontal;

package/cjs/components/table/TableTr.d.ts

@@ -5,6 +5,11 @@ export declare type TableTrProps = {
      * The variant of the tr
      */
     variant?: 'even' | 'odd';
+    /**
+     * If set to true, the inherited header text will not wrap to new lines
+     * Default: false
+     */
+    noWrap?: boolean;
     /**
      * The content of the component.
      */

package/cjs/components/table/TableTr.js

@@ -19,7 +19,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _TableContext = _interopRequireDefault(require("./TableContext"));
 
-var _excluded = ["variant", "children", "className"];
+var _excluded = ["variant", "noWrap", "children", "className"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -31,6 +31,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 function Tr(componentProps) {
   var variant = componentProps.variant,
+      noWrap = componentProps.noWrap,
       children = componentProps.children,
       _className = componentProps.className,
       props = _objectWithoutProperties(componentProps, _excluded);
@@ -40,7 +41,7 @@ function Tr(componentProps) {
   }),
       currentVariant = _useHandleTrVariant.currentVariant;
 
-  var className = (0, _classnames.default)('dnb-table__tr', _className, currentVariant && "dnb-table__tr--".concat(currentVariant));
+  var className = (0, _classnames.default)('dnb-table__tr', _className, currentVariant && "dnb-table__tr--".concat(currentVariant), noWrap && 'dnb-table--no-wrap');
   return _react.default.createElement("tr", _extends({
     role: "row",
     className: className

package/cjs/components/table/style/_table-cell.scss

@@ -0,0 +1,21 @@
+/*
+* Table component
+*
+*/
+
+.dnb-table {
+  & > tr > th,
+  & > tr > td,
+  & > thead > tr > th,
+  & > tbody > tr > td,
+  &__th,
+  &__td {
+    position: relative;
+
+    font-size: var(--font-size-basis);
+    line-height: var(--line-height-basis);
+    border-spacing: 0;
+
+    word-break: keep-all;
+  }
+}

package/cjs/components/table/style/_table-container.scss

@@ -0,0 +1,61 @@
+/*
+* Table component
+*
+*/
+
+@mixin tableBorder {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+
+  pointer-events: none;
+}
+
+.dnb-table__container {
+  position: relative;
+
+  --border: 0.0625rem solid var(--color-black-8);
+  background-color: var(--color-white);
+
+  &::after {
+    @include tableBorder();
+
+    border: var(--border);
+  }
+
+  &,
+  &::after {
+    border-radius: 0.5rem;
+  }
+
+  &,
+  &__body,
+  &__head,
+  &__foot {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__body {
+    .dnb-table {
+      &:not([class*='space__bottom']) {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  &__head {
+    padding: 2rem 1rem 0;
+
+    .dnb-spacing & .dnb-h--large:not([class*='space__top']) {
+      margin: 0;
+    }
+  }
+  &__foot {
+    padding: 0.5rem 1rem 2rem;
+  }
+}

package/cjs/components/table/style/_table-header-buttons.scss

@@ -171,11 +171,6 @@
       }
     }
   }
-  & > thead > tr > th#{&}--no-wrap,
-  & > tbody > tr > th#{&}--no-wrap,
-  & &__th#{&}--no-wrap {
-    white-space: nowrap;
-  }
 
   & &__th,
   & > thead > tr > th {

package/cjs/components/table/style/_table-sticky.scss

@@ -0,0 +1,42 @@
+/*
+* Table component
+*
+*/
+
+.dnb-table {
+  &__sticky-helper > td {
+    display: block;
+    overflow: hidden;
+    padding: 0 !important;
+    height: 0;
+  }
+
+  tr.sticky th {
+    position: sticky;
+    top: var(--table-top, 0); // is set by "stickyOffset" prop
+    z-index: 2;
+
+    &::before {
+      content: '';
+      position: absolute;
+      opacity: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: 6px;
+
+      // The @mixin defaultDropShadow() does not work in this case
+      // because we need only a bottom shadow (with clip-path)
+      box-shadow: var(--shadow-default-x) -2px 12px 8px var(--shadow-default-color);
+      clip-path: inset(6px 0 -48px 0);
+
+      transition: opacity 300ms ease-out;
+      [data-visual-test-wrapper] & {
+        transition: none;
+      }
+    }
+  }
+  tr.sticky.show-shadow th::before {
+    opacity: 1;
+  }
+}