@navikt/ds-react 0.16.16 → 0.16.19

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/Table.tsx

@@ -3,9 +3,15 @@ import cl from "classnames";
 import Header, { HeaderType } from "./Header";
 import Body, { BodyType } from "./Body";
 import Row, { RowType } from "./Row";
+import ColumnHeader, { ColumnHeaderType } from "./ColumnHeader";
 import HeaderCell, { HeaderCellType } from "./HeaderCell";
 import DataCell, { DataCellType } from "./DataCell";
 
+export interface SortState {
+  orderBy: string;
+  direction: "ascending" | "descending";
+}
+
 export interface TableProps
   extends React.TableHTMLAttributes<HTMLTableElement> {
   /**
@@ -18,6 +24,14 @@ export interface TableProps
    * @default false
    */
   zebraStripes?: boolean;
+  /**
+   * Sort state
+   */
+  sort?: SortState;
+  /**
+   * Callback whens sort state changes
+   */
+  onSortChange?: (sortKey?: string) => void;
 }
 
 export interface TableType
@@ -29,17 +43,30 @@ export interface TableType
   Row: RowType;
   DataCell: DataCellType;
   HeaderCell: HeaderCellType;
+  ColumnHeader: ColumnHeaderType;
 }
 
 export interface TableContextProps {
   size: "medium" | "small";
+  onSortChange?: (sortKey: string) => void;
+  sort?: SortState;
 }
 
 export const TableContext = createContext<TableContextProps | null>(null);
 
 const Table = forwardRef(
-  ({ className, zebraStripes = false, size = "medium", ...rest }, ref) => (
-    <TableContext.Provider value={{ size }}>
+  (
+    {
+      className,
+      zebraStripes = false,
+      size = "medium",
+      onSortChange,
+      sort,
+      ...rest
+    },
+    ref
+  ) => (
+    <TableContext.Provider value={{ size, onSortChange, sort }}>
       <table
         {...rest}
         ref={ref}
@@ -54,6 +81,7 @@ const Table = forwardRef(
 Table.Header = Header;
 Table.Body = Body;
 Table.Row = Row;
+Table.ColumnHeader = ColumnHeader;
 Table.HeaderCell = HeaderCell;
 Table.DataCell = DataCell;