@navikt/ds-react 0.15.0-rc.50 → 0.15.0-rc.51

package/cjs/table/ColumnHeader.js

@@ -34,8 +34,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
-const __1 = require("..");
 const ds_icons_1 = require("@navikt/ds-icons");
+const __1 = require("..");
 const HeaderCell_1 = __importDefault(require("./HeaderCell"));
 const ColumnHeader = (0, react_1.forwardRef)((_a, ref) => {
     var _b, _c, _d, _e;

package/cjs/table/DataCell.js

@@ -38,8 +38,10 @@ const classnames_1 = __importDefault(require("classnames"));
 const __1 = require("..");
 const _1 = require(".");
 const DataCell = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, children = "" } = _a, rest = __rest(_a, ["className", "children"]);
+    var { className, children = "", align } = _a, rest = __rest(_a, ["className", "children", "align"]);
     const context = (0, react_1.useContext)(_1.TableContext);
-    return (react_1.default.createElement(__1.BodyShort, Object.assign({ as: "td", ref: ref, className: (0, classnames_1.default)("navds-table__data-cell", className), size: context === null || context === void 0 ? void 0 : context.size }, rest), children));
+    return (react_1.default.createElement(__1.BodyShort, Object.assign({ as: "td", ref: ref, className: (0, classnames_1.default)("navds-table__data-cell", className, {
+            [`navds-table__data-cell--align-${align}`]: align,
+        }), size: context === null || context === void 0 ? void 0 : context.size }, rest), children));
 });
 exports.default = DataCell;

package/cjs/table/HeaderCell.js

@@ -37,8 +37,10 @@ const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const __1 = require("..");
 const HeaderCell = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, children } = _a, rest = __rest(_a, ["className", "children"]);
+    var { className, children, align } = _a, rest = __rest(_a, ["className", "children", "align"]);
     const context = (0, react_1.useContext)(__1.TableContext);
-    return (react_1.default.createElement(__1.Label, Object.assign({ as: "th", ref: ref, className: (0, classnames_1.default)("navds-table__header-cell", className), size: context === null || context === void 0 ? void 0 : context.size }, rest), children));
+    return (react_1.default.createElement(__1.Label, Object.assign({ as: "th", ref: ref, className: (0, classnames_1.default)("navds-table__header-cell", className, {
+            [`navds-table__header-cell--align-${align}`]: align,
+        }), size: context === null || context === void 0 ? void 0 : context.size }, rest), children));
 });
 exports.default = HeaderCell;

package/esm/table/ColumnHeader.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
-interface ColumnHeaderProps extends React.HTMLAttributes<HTMLTableCellElement> {
+import { HeaderCellProps } from "./HeaderCell";
+interface ColumnHeaderProps extends HeaderCellProps {
     /**
      * Key to sort by
      */

package/esm/table/ColumnHeader.js

@@ -10,8 +10,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { forwardRef, useContext } from "react";
-import { TableContext } from "..";
 import { Down, Up } from "@navikt/ds-icons";
+import { TableContext } from "..";
 import HeaderCell from "./HeaderCell";
 const ColumnHeader = forwardRef((_a, ref) => {
     var _b, _c, _d, _e;

package/esm/table/ColumnHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnHeader.js","sourceRoot":"","sources":["../../src/table/ColumnHeader.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,IAAI,CAAC;AAClC,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,UAAU,MAAM,cAAc,CAAC;AAmBtC,MAAM,YAAY,GAAqB,UAAU,CAC/C,CAAC,EAA2D,EAAE,GAAG,EAAE,EAAE;;QAApE,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,GAAG,KAAK,EAAE,OAAO,OAAW,EAAN,IAAI,cAAzD,gDAA2D,CAAF;IACxD,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAEzC,IAAI,QAAQ,IAAI,CAAC,OAAO,EAAE;QACxB,OAAO,CAAC,IAAI,CAAC,wDAAwD,CAAC,CAAC;KACxE;IAED,OAAO,CACL,oBAAC,UAAU,kBACT,KAAK,EAAC,KAAK,EACX,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,eAElB,QAAQ;YACN,CAAC,CAAC,CAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,0CAAE,OAAO,MAAK,OAAO;gBAClC,CAAC,CAAC,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,0CAAE,SAAS;gBAC1B,CAAC,CAAC,MAAM;YACV,CAAC,CAAC,SAAS,IAEX,IAAI,GAEP,QAAQ,CAAC,CAAC,CAAC,CACV,gCACE,SAAS,EAAC,0BAA0B,EACpC,OAAO,EACL,QAAQ,IAAI,OAAO;YACjB,CAAC,CAAC,GAAG,EAAE,WAAC,OAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,YAAY,+CAArB,OAAO,EAAiB,OAAO,CAAC,CAAA,EAAA;YACxC,CAAC,CAAC,SAAS;QAGd,QAAQ;QACR,CAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,0CAAE,OAAO,MAAK,OAAO;YACnC,CAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,0CAAE,SAAS,MAAK,YAAY,CAAC,CAAC,CAAC,CAC1C,oBAAC,IAAI,kBAAY,iBAAiB,GAAG,CACtC,CAAC,CAAC,CAAC,CACF,oBAAC,EAAE,kBAAY,iBAAiB,GAAG,CACpC,CACM,CACV,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CACU,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ColumnHeader.js","sourceRoot":"","sources":["../../src/table/ColumnHeader.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,IAAI,CAAC;AAClC,OAAO,UAA+B,MAAM,cAAc,CAAC;AAmB3D,MAAM,YAAY,GAAqB,UAAU,CAC/C,CAAC,EAA2D,EAAE,GAAG,EAAE,EAAE;;QAApE,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,GAAG,KAAK,EAAE,OAAO,OAAW,EAAN,IAAI,cAAzD,gDAA2D,CAAF;IACxD,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAEzC,IAAI,QAAQ,IAAI,CAAC,OAAO,EAAE;QACxB,OAAO,CAAC,IAAI,CAAC,wDAAwD,CAAC,CAAC;KACxE;IAED,OAAO,CACL,oBAAC,UAAU,kBACT,KAAK,EAAC,KAAK,EACX,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,eAElB,QAAQ;YACN,CAAC,CAAC,CAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,0CAAE,OAAO,MAAK,OAAO;gBAClC,CAAC,CAAC,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,0CAAE,SAAS;gBAC1B,CAAC,CAAC,MAAM;YACV,CAAC,CAAC,SAAS,IAEX,IAAI,GAEP,QAAQ,CAAC,CAAC,CAAC,CACV,gCACE,SAAS,EAAC,0BAA0B,EACpC,OAAO,EACL,QAAQ,IAAI,OAAO;YACjB,CAAC,CAAC,GAAG,EAAE,WAAC,OAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,YAAY,+CAArB,OAAO,EAAiB,OAAO,CAAC,CAAA,EAAA;YACxC,CAAC,CAAC,SAAS;QAGd,QAAQ;QACR,CAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,0CAAE,OAAO,MAAK,OAAO;YACnC,CAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,0CAAE,SAAS,MAAK,YAAY,CAAC,CAAC,CAAC,CAC1C,oBAAC,IAAI,kBAAY,iBAAiB,GAAG,CACtC,CAAC,CAAC,CAAC,CACF,oBAAC,EAAE,kBAAY,iBAAiB,GAAG,CACpC,CACM,CACV,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CACU,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/esm/table/DataCell.d.ts

@@ -1,5 +1,10 @@
 import React from "react";
 interface DataCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+    /**
+     * Content alignment
+     * @default "left"
+     */
+    align?: "left" | "center" | "right";
 }
 export interface DataCellType extends React.ForwardRefExoticComponent<DataCellProps & React.RefAttributes<HTMLTableCellElement>> {
 }

package/esm/table/DataCell.js

@@ -14,9 +14,11 @@ import cl from "classnames";
 import { BodyShort } from "..";
 import { TableContext } from ".";
 const DataCell = forwardRef((_a, ref) => {
-    var { className, children = "" } = _a, rest = __rest(_a, ["className", "children"]);
+    var { className, children = "", align } = _a, rest = __rest(_a, ["className", "children", "align"]);
     const context = useContext(TableContext);
-    return (React.createElement(BodyShort, Object.assign({ as: "td", ref: ref, className: cl("navds-table__data-cell", className), size: context === null || context === void 0 ? void 0 : context.size }, rest), children));
+    return (React.createElement(BodyShort, Object.assign({ as: "td", ref: ref, className: cl("navds-table__data-cell", className, {
+            [`navds-table__data-cell--align-${align}`]: align,
+        }), size: context === null || context === void 0 ? void 0 : context.size }, rest), children));
 });
 export default DataCell;
 //# sourceMappingURL=DataCell.js.map

package/esm/table/DataCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataCell.js","sourceRoot":"","sources":["../../src/table/DataCell.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,SAAS,EAAE,MAAM,IAAI,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,GAAG,CAAC;AASjC,MAAM,QAAQ,GAAiB,UAAU,CACvC,CAAC,EAAqC,EAAE,GAAG,EAAE,EAAE;QAA9C,EAAE,SAAS,EAAE,QAAQ,GAAG,EAAE,OAAW,EAAN,IAAI,cAAnC,yBAAqC,CAAF;IAClC,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAEzC,OAAO,CACL,oBAAC,SAAS,kBACR,EAAE,EAAC,IAAI,EACP,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,SAAS,CAAC,EAClD,IAAI,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,IACf,IAAI,GAEP,QAAQ,CACC,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"DataCell.js","sourceRoot":"","sources":["../../src/table/DataCell.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,SAAS,EAAE,MAAM,IAAI,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,GAAG,CAAC;AAejC,MAAM,QAAQ,GAAiB,UAAU,CACvC,CAAC,EAA4C,EAAE,GAAG,EAAE,EAAE;QAArD,EAAE,SAAS,EAAE,QAAQ,GAAG,EAAE,EAAE,KAAK,OAAW,EAAN,IAAI,cAA1C,kCAA4C,CAAF;IACzC,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAEzC,OAAO,CACL,oBAAC,SAAS,kBACR,EAAE,EAAC,IAAI,EACP,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,SAAS,EAAE;YACjD,CAAC,iCAAiC,KAAK,EAAE,CAAC,EAAE,KAAK;SAClD,CAAC,EACF,IAAI,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,IACf,IAAI,GAEP,QAAQ,CACC,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/esm/table/HeaderCell.d.ts

@@ -1,6 +1,11 @@
 import React from "react";
-interface HeaderCellProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
+export interface HeaderCellProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
     scope?: string;
+    /**
+     * Content alignment
+     * @default "left"
+     */
+    align?: "left" | "center" | "right";
 }
 export interface HeaderCellType extends React.ForwardRefExoticComponent<HeaderCellProps & React.RefAttributes<HTMLTableCellElement>> {
 }

package/esm/table/HeaderCell.js

@@ -13,9 +13,11 @@ import React, { forwardRef, useContext } from "react";
 import cl from "classnames";
 import { Label, TableContext } from "..";
 const HeaderCell = forwardRef((_a, ref) => {
-    var { className, children } = _a, rest = __rest(_a, ["className", "children"]);
+    var { className, children, align } = _a, rest = __rest(_a, ["className", "children", "align"]);
     const context = useContext(TableContext);
-    return (React.createElement(Label, Object.assign({ as: "th", ref: ref, className: cl("navds-table__header-cell", className), size: context === null || context === void 0 ? void 0 : context.size }, rest), children));
+    return (React.createElement(Label, Object.assign({ as: "th", ref: ref, className: cl("navds-table__header-cell", className, {
+            [`navds-table__header-cell--align-${align}`]: align,
+        }), size: context === null || context === void 0 ? void 0 : context.size }, rest), children));
 });
 export default HeaderCell;
 //# sourceMappingURL=HeaderCell.js.map

package/esm/table/HeaderCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderCell.js","sourceRoot":"","sources":["../../src/table/HeaderCell.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,IAAI,CAAC;AAWzC,MAAM,UAAU,GAAmB,UAAU,CAC3C,CAAC,EAAgC,EAAE,GAAG,EAAE,EAAE;QAAzC,EAAE,SAAS,EAAE,QAAQ,OAAW,EAAN,IAAI,cAA9B,yBAAgC,CAAF;IAC7B,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAEzC,OAAO,CACL,oBAAC,KAAK,kBACJ,EAAE,EAAC,IAAI,EACP,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,0BAA0B,EAAE,SAAS,CAAC,EACpD,IAAI,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,IACf,IAAI,GAEP,QAAQ,CACH,CACT,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"HeaderCell.js","sourceRoot":"","sources":["../../src/table/HeaderCell.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,IAAI,CAAC;AAiBzC,MAAM,UAAU,GAAmB,UAAU,CAC3C,CAAC,EAAuC,EAAE,GAAG,EAAE,EAAE;QAAhD,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,OAAW,EAAN,IAAI,cAArC,kCAAuC,CAAF;IACpC,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAEzC,OAAO,CACL,oBAAC,KAAK,kBACJ,EAAE,EAAC,IAAI,EACP,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,0BAA0B,EAAE,SAAS,EAAE;YACnD,CAAC,mCAAmC,KAAK,EAAE,CAAC,EAAE,KAAK;SACpD,CAAC,EACF,IAAI,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,IACf,IAAI,GAEP,QAAQ,CACH,CACT,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.15.0-rc.50+0b31abf96",
+  "version": "0.15.0-rc.51+009658439",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
@@ -66,5 +66,5 @@
     "@types/react": "^17.0.30",
     "react": "^17.0.0"
   },
-  "gitHead": "0b31abf968f41793e1eb2d67e66b9cd9c92bd83e"
+  "gitHead": "009658439a412c2f1b190290ca65d2862e41710e"
 }

package/src/table/ColumnHeader.tsx

@@ -1,9 +1,9 @@
 import React, { forwardRef, useContext } from "react";
-import { TableContext } from "..";
 import { Down, Up } from "@navikt/ds-icons";
-import HeaderCell from "./HeaderCell";
+import { TableContext } from "..";
+import HeaderCell, { HeaderCellProps } from "./HeaderCell";
 
-interface ColumnHeaderProps extends React.HTMLAttributes<HTMLTableCellElement> {
+interface ColumnHeaderProps extends HeaderCellProps {
   /**
    * Key to sort by
    */

package/src/table/DataCell.tsx

@@ -3,7 +3,13 @@ import cl from "classnames";
 import { BodyShort } from "..";
 import { TableContext } from ".";
 
-interface DataCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {}
+interface DataCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+  /**
+   * Content alignment
+   * @default "left"
+   */
+  align?: "left" | "center" | "right";
+}
 
 export interface DataCellType
   extends React.ForwardRefExoticComponent<
@@ -11,14 +17,16 @@ export interface DataCellType
   > {}
 
 const DataCell: DataCellType = forwardRef(
-  ({ className, children = "", ...rest }, ref) => {
+  ({ className, children = "", align, ...rest }, ref) => {
     const context = useContext(TableContext);
 
     return (
       <BodyShort
         as="td"
         ref={ref}
-        className={cl("navds-table__data-cell", className)}
+        className={cl("navds-table__data-cell", className, {
+          [`navds-table__data-cell--align-${align}`]: align,
+        })}
         size={context?.size}
         {...rest}
       >

package/src/table/HeaderCell.tsx

@@ -2,8 +2,14 @@ import React, { forwardRef, useContext } from "react";
 import cl from "classnames";
 import { Label, TableContext } from "..";
 
-interface HeaderCellProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
+export interface HeaderCellProps
+  extends React.ThHTMLAttributes<HTMLTableCellElement> {
   scope?: string;
+  /**
+   * Content alignment
+   * @default "left"
+   */
+  align?: "left" | "center" | "right";
 }
 
 export interface HeaderCellType
@@ -12,14 +18,16 @@ export interface HeaderCellType
   > {}
 
 const HeaderCell: HeaderCellType = forwardRef(
-  ({ className, children, ...rest }, ref) => {
+  ({ className, children, align, ...rest }, ref) => {
     const context = useContext(TableContext);
 
     return (
       <Label
         as="th"
         ref={ref}
-        className={cl("navds-table__header-cell", className)}
+        className={cl("navds-table__header-cell", className, {
+          [`navds-table__header-cell--align-${align}`]: align,
+        })}
         size={context?.size}
         {...rest}
       >

package/src/table/stories/table-hot.stories.tsx

@@ -1,6 +1,5 @@
-import { capitalize } from "@material-ui/core";
-import { EllipsisCircleH } from "@navikt/ds-icons";
 import React, { useState } from "react";
+import { capitalize } from "@material-ui/core";
 import { Table } from "../";
 import { Button } from "../..";
 import { SortState } from "../..";
@@ -10,10 +9,20 @@ export default {
   component: Table,
 };
 
+interface Column {
+  key: string;
+  name?: string;
+  sortable?: boolean;
+  render?: (value: any) => React.ReactElement<any, any> | null;
+  value?: (oppgave: any) => any;
+  width?: number;
+  align?: "left" | "center" | "right";
+}
+
 export const Hot = () => {
   const [sort, setSort] = useState<SortState>();
 
-  const columns = [
+  const columns: Column[] = [
     {
       key: "eier",
       name: "Eier",
@@ -71,6 +80,7 @@ export const Hot = () => {
           6
         )} ${oppgave.personinformasjon.fnr.slice(6)}`,
       width: 124,
+      align: "right",
     },
     {
       key: "bosted",
@@ -121,7 +131,7 @@ export const Hot = () => {
         >
           <Table.Header>
             <Table.Row>
-              {columns.map(({ key, name, width, sortable = true }) => (
+              {columns.map(({ key, name, width, sortable = true, align }) => (
                 <Table.ColumnHeader
                   style={{
                     width,
@@ -131,6 +141,7 @@ export const Hot = () => {
                   key={key}
                   sortable={sortable}
                   sortKey={key}
+                  align={align}
                 >
                   <div
                     style={{
@@ -177,7 +188,13 @@ export const Hot = () => {
               .map((oppgave) => (
                 <Table.Row key={oppgave.saksid}>
                   {columns.map(
-                    ({ key, value, width, render = (value) => value }) => (
+                    ({
+                      key,
+                      value,
+                      width,
+                      render = (value) => value,
+                      align,
+                    }) => (
                       <Table.DataCell
                         style={{
                           width,
@@ -189,8 +206,9 @@ export const Hot = () => {
                         }}
                         title={oppgave[key]}
                         key={key}
+                        align={align}
                       >
-                        {render(value ? value(oppgave) : oppgave[key], oppgave)}
+                        {render(value ? value(oppgave) : oppgave[key])}
                       </Table.DataCell>
                     )
                   )}