@navikt/ds-react 0.14.12 → 0.15.0-rc.30

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.HTMLAttributes<HTMLTableElement> {
   /**
    * Changes padding
@@ -17,6 +23,14 @@ export interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
    * @default false
    */
   zebraStripes?: boolean;
+  /**
+   * Sort state
+   */
+  sort?: SortState;
+  /**
+   * Callback whens ort state changes
+   */
+  onSortChange?: (state?: SortState) => void;
 }
 
 export interface TableType
@@ -28,17 +42,47 @@ export interface TableType
   Row: RowType;
   DataCell: DataCellType;
   HeaderCell: HeaderCellType;
+  ColumnHeader: ColumnHeaderType;
 }
 
 export interface TableContextProps {
   size: "medium" | "small";
+  toggleColumnSort?: (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,
+        toggleColumnSort: (sortKey) =>
+          onSortChange?.(
+            sort?.orderBy === sortKey && sort.direction === "descending"
+              ? undefined
+              : {
+                  orderBy: sortKey,
+                  direction:
+                    sort?.direction === "ascending"
+                      ? "descending"
+                      : "ascending",
+                }
+          ),
+        sort,
+      }}
+    >
       <table
         {...rest}
         ref={ref}
@@ -53,6 +97,7 @@ const Table = forwardRef(
 Table.Header = Header;
 Table.Body = Body;
 Table.Row = Row;
+Table.ColumnHeader = ColumnHeader;
 Table.HeaderCell = HeaderCell;
 Table.DataCell = DataCell;