@equinor/apollo-components 1.5.1 → 1.5.2

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import { IconData } from '@equinor/eds-icons';
 import * as react from 'react';
 import { ReactNode, ComponentProps } from 'react';
-import { Cell, CellContext, ColumnDef, Row, RowSelectionState, SortingState } from '@tanstack/react-table';
+import { Cell, CellContext, ColumnDef, Row, RowSelectionState, SortingState, Table, HeaderContext } from '@tanstack/react-table';
 import { ColumnDef as ColumnDef$1 } from '@tanstack/table-core';
 import * as styled_components from 'styled-components';
 import { CellProps, TypographyProps as TypographyProps$1 } from '@equinor/eds-core-react';
@@ -84,6 +84,20 @@ declare const tableSortingAtom: jotai.PrimitiveAtom<SortingState> & {
     init: SortingState;
 };
 
+interface TableHeaderProps<T> {
+    table: Table<T>;
+    sticky?: boolean;
+}
+declare function TableHeader<T>({ table, sticky }: TableHeaderProps<T>): JSX.Element;
+
+/**
+ * Capitalize the table header.
+ *
+ * React table utility function.
+ * @param context
+ * @returns A capitalized header
+ */
+declare function capitalizeHeader<T>(context: HeaderContext<T, any>): string;
 /** Prepend a column definition array with a select column. */
 declare function prependSelectColumn<T>(columns: ColumnDef<T>[], config?: DataTableConfig<T>): ColumnDef<T, unknown>[];
 
@@ -107,4 +121,4 @@ declare type TypographyProps = {
  */
 declare const TypographyCustom: (props: TypographyProps) => JSX.Element;
 
-export { AppShell, AppSidebar, ChipsCell, DataTable, DataTableConfig, DynamicCell, FilterConfig, HeaderConfig, HierarchyCell, RowSelectionMode, SelectColumnDef, StickyCell, TypographyCustom, globalFilterAtom, prependSelectColumn, rowSelectionAtom, tableSortingAtom };
+export { AppShell, AppSidebar, ChipsCell, DataTable, DataTableConfig, DynamicCell, FilterConfig, HeaderConfig, HierarchyCell, RowSelectionMode, SelectColumnDef, StickyCell, TableHeader, TypographyCustom, capitalizeHeader, globalFilterAtom, prependSelectColumn, rowSelectionAtom, tableSortingAtom };

package/dist/index.js

@@ -34,7 +34,9 @@ __export(src_exports, {
   HierarchyCell: () => HierarchyCell,
   SelectColumnDef: () => SelectColumnDef,
   StickyCell: () => StickyCell,
+  TableHeader: () => TableHeader,
   TypographyCustom: () => TypographyCustom,
+  capitalizeHeader: () => capitalizeHeader,
   globalFilterAtom: () => globalFilterAtom,
   prependSelectColumn: () => prependSelectColumn,
   rowSelectionAtom: () => rowSelectionAtom,
@@ -458,22 +460,31 @@ var HeaderDiv = import_styled_components11.default.div`
   display: flex;
   align-items: center;
   gap: 0.25rem;
+  z-index: 5;
 `;
 var StyledStickyCell2 = (0, import_styled_components11.default)(StickyCell)`
-  z-index: 5;
   ${leftCellShadow}
 `;
 var HeaderCell = ({ header }) => {
   var _a;
+  const style = {
+    width: header.column.getSize() === -1 ? "auto" : header.column.getSize()
+  };
+  const cellProps = {
+    style,
+    sort: getSort(header),
+    onClick: header.column.getToggleSortingHandler(),
+    colSpan: header.colSpan
+  };
   if ((_a = header.column.columnDef.meta) == null ? void 0 : _a.sticky)
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StyledStickyCell2, {
-      colSpan: header.colSpan,
+      ...cellProps,
       children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(HeaderContent, {
         header
       })
     }, header.id);
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Table.Cell, {
-    colSpan: header.colSpan,
+    ...cellProps,
     children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(HeaderContent, {
       header
     })
@@ -483,31 +494,47 @@ function HeaderContent({ header }) {
   if (header.isPlaceholder)
     return null;
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(HeaderDiv, {
-    onClick: header.column.getToggleSortingHandler(),
     children: [
       (0, import_react_table2.flexRender)(header.column.columnDef.header, header.getContext()),
       {
         asc: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Icon, {
-          data: import_eds_icons4.arrow_drop_down
+          data: import_eds_icons4.arrow_drop_up
         }),
         desc: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Icon, {
-          data: import_eds_icons4.arrow_drop_up
+          data: import_eds_icons4.arrow_drop_down
+        }),
+        none: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Icon, {
+          data: import_eds_icons4.arrow_drop_down
         })
       }[header.column.getIsSorted()] ?? null
     ]
   });
 }
+function getSort({ column }) {
+  if (!column.getCanSort())
+    return void 0;
+  switch (column.getIsSorted()) {
+    case "asc":
+      return "ascending";
+    case "desc":
+      return "descending";
+    default:
+      return "none";
+  }
+}
 
 // src/DataTable/components/TableHeader.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var TableHeader = ({ table, sticky }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.Table.Head, {
-  sticky,
-  children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.Table.Row, {
-    children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(HeaderCell, {
-      header
-    }, header.id))
-  }, headerGroup.id))
-});
+function TableHeader({ table, sticky }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.Table.Head, {
+    sticky,
+    children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.Table.Row, {
+      children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(HeaderCell, {
+        header
+      }, header.id))
+    }, headerGroup.id))
+  });
+}
 
 // src/DataTable/components/BasicTable.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
@@ -543,6 +570,10 @@ var import_react2 = require("react");
 var import_styled_components12 = __toESM(require("styled-components"));
 
 // src/DataTable/utils.tsx
+function capitalizeHeader(context) {
+  const header = context.header.id;
+  return header.charAt(0).toUpperCase() + header.slice(1);
+}
 function enableOrUndefined(enabled, value) {
   return Boolean(enabled) ? value : void 0;
 }
@@ -954,7 +985,9 @@ DataTable2.Provider = DataTableProvider;
   HierarchyCell,
   SelectColumnDef,
   StickyCell,
+  TableHeader,
   TypographyCustom,
+  capitalizeHeader,
   globalFilterAtom,
   prependSelectColumn,
   rowSelectionAtom,

package/dist/index.mjs

@@ -422,22 +422,31 @@ var HeaderDiv = styled10.div`
   display: flex;
   align-items: center;
   gap: 0.25rem;
+  z-index: 5;
 `;
 var StyledStickyCell2 = styled10(StickyCell)`
-  z-index: 5;
   ${leftCellShadow}
 `;
 var HeaderCell = ({ header }) => {
   var _a;
+  const style = {
+    width: header.column.getSize() === -1 ? "auto" : header.column.getSize()
+  };
+  const cellProps = {
+    style,
+    sort: getSort(header),
+    onClick: header.column.getToggleSortingHandler(),
+    colSpan: header.colSpan
+  };
   if ((_a = header.column.columnDef.meta) == null ? void 0 : _a.sticky)
     return /* @__PURE__ */ jsx9(StyledStickyCell2, {
-      colSpan: header.colSpan,
+      ...cellProps,
       children: /* @__PURE__ */ jsx9(HeaderContent, {
         header
       })
     }, header.id);
   return /* @__PURE__ */ jsx9(Table4.Cell, {
-    colSpan: header.colSpan,
+    ...cellProps,
     children: /* @__PURE__ */ jsx9(HeaderContent, {
       header
     })
@@ -447,31 +456,47 @@ function HeaderContent({ header }) {
   if (header.isPlaceholder)
     return null;
   return /* @__PURE__ */ jsxs6(HeaderDiv, {
-    onClick: header.column.getToggleSortingHandler(),
     children: [
       flexRender2(header.column.columnDef.header, header.getContext()),
       {
         asc: /* @__PURE__ */ jsx9(Icon4, {
-          data: arrow_drop_down
+          data: arrow_drop_up
         }),
         desc: /* @__PURE__ */ jsx9(Icon4, {
-          data: arrow_drop_up
+          data: arrow_drop_down
+        }),
+        none: /* @__PURE__ */ jsx9(Icon4, {
+          data: arrow_drop_down
         })
       }[header.column.getIsSorted()] ?? null
     ]
   });
 }
+function getSort({ column }) {
+  if (!column.getCanSort())
+    return void 0;
+  switch (column.getIsSorted()) {
+    case "asc":
+      return "ascending";
+    case "desc":
+      return "descending";
+    default:
+      return "none";
+  }
+}
 
 // src/DataTable/components/TableHeader.tsx
 import { jsx as jsx10 } from "react/jsx-runtime";
-var TableHeader = ({ table, sticky }) => /* @__PURE__ */ jsx10(Table5.Head, {
-  sticky,
-  children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx10(Table5.Row, {
-    children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx10(HeaderCell, {
-      header
-    }, header.id))
-  }, headerGroup.id))
-});
+function TableHeader({ table, sticky }) {
+  return /* @__PURE__ */ jsx10(Table5.Head, {
+    sticky,
+    children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx10(Table5.Row, {
+      children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx10(HeaderCell, {
+        header
+      }, header.id))
+    }, headerGroup.id))
+  });
+}
 
 // src/DataTable/components/BasicTable.tsx
 import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
@@ -507,6 +532,10 @@ import { useRef, useState as useState2 } from "react";
 import styled11 from "styled-components";
 
 // src/DataTable/utils.tsx
+function capitalizeHeader(context) {
+  const header = context.header.id;
+  return header.charAt(0).toUpperCase() + header.slice(1);
+}
 function enableOrUndefined(enabled, value) {
   return Boolean(enabled) ? value : void 0;
 }
@@ -917,7 +946,9 @@ export {
   HierarchyCell,
   SelectColumnDef,
   StickyCell,
+  TableHeader,
   TypographyCustom,
+  capitalizeHeader,
   globalFilterAtom,
   prependSelectColumn,
   rowSelectionAtom,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/apollo-components",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "license": "MIT",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",