@equinor/apollo-components 1.5.1 → 1.6.0

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';
@@ -25,8 +25,9 @@ declare const ChipsCell: (props: {
 declare type TableCellProps<T> = {
     cell: Cell<T, unknown>;
     highlight?: boolean;
+    getStickyCellColor?: (cell: Cell<T, unknown>) => string;
 };
-declare function DynamicCell<T>({ cell, highlight }: TableCellProps<T>): JSX.Element;
+declare function DynamicCell<T>({ cell, highlight, getStickyCellColor }: TableCellProps<T>): JSX.Element;
 
 declare type HierarchyCellOptions = {
     getRowDepth?: () => number;
@@ -42,6 +43,7 @@ interface HeaderConfig {
 interface FilterConfig {
     globalFilter?: boolean;
     globalFilterPlaceholder?: string;
+    filterFromLeafRows?: boolean;
 }
 declare type RowSelectionMode = 'single' | 'multiple';
 declare type DataTableConfig<T> = {
@@ -84,6 +86,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 +123,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,
@@ -222,13 +224,14 @@ var StyledStickyCell = (0, import_styled_components6.default)(StickyCell)`
   ${leftCellShadow}
 `;
 var StyledCell = (0, import_styled_components6.default)(import_eds_core_react4.Table.Cell)`
-  background-color: ${(props) => props.backgroundColor ? props.backgroundColor + " !important" : void 0};
+  ${(props) => props.backgroundColor ? `background-color: ${props.backgroundColor} !important;` : ``}
 `;
-function DynamicCell({ cell, highlight }) {
+function DynamicCell({ cell, highlight, getStickyCellColor }) {
   var _a;
   const cellContent = (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext());
   if ((_a = cell.column.columnDef.meta) == null ? void 0 : _a.sticky) {
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StyledStickyCell, {
+      backgroundColor: getStickyCellColor == null ? void 0 : getStickyCellColor(cell),
       "data-column": cell.column.id,
       children: cellContent
     });
@@ -458,22 +461,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 +495,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 +571,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;
 }
@@ -879,6 +911,7 @@ function DataTable({
     enableExpanding: !(config == null ? void 0 : config.hideExpandControls),
     enableMultiRowSelection: (config == null ? void 0 : config.rowSelectionMode) === "multiple",
     enableSubRowSelection: (config == null ? void 0 : config.rowSelectionMode) !== "single",
+    filterFromLeafRows: filters == null ? void 0 : filters.filterFromLeafRows,
     getFilteredRowModel: enableGlobalFilter((0, import_react_table5.getFilteredRowModel)()),
     getCoreRowModel: (0, import_react_table5.getCoreRowModel)(),
     getExpandedRowModel: (0, import_react_table5.getExpandedRowModel)(),
@@ -954,7 +987,9 @@ DataTable2.Provider = DataTableProvider;
   HierarchyCell,
   SelectColumnDef,
   StickyCell,
+  TableHeader,
   TypographyCustom,
+  capitalizeHeader,
   globalFilterAtom,
   prependSelectColumn,
   rowSelectionAtom,

package/dist/index.mjs

@@ -178,13 +178,14 @@ var StyledStickyCell = styled5(StickyCell)`
   ${leftCellShadow}
 `;
 var StyledCell = styled5(Table2.Cell)`
-  background-color: ${(props) => props.backgroundColor ? props.backgroundColor + " !important" : void 0};
+  ${(props) => props.backgroundColor ? `background-color: ${props.backgroundColor} !important;` : ``}
 `;
-function DynamicCell({ cell, highlight }) {
+function DynamicCell({ cell, highlight, getStickyCellColor }) {
   var _a;
   const cellContent = flexRender(cell.column.columnDef.cell, cell.getContext());
   if ((_a = cell.column.columnDef.meta) == null ? void 0 : _a.sticky) {
     return /* @__PURE__ */ jsx4(StyledStickyCell, {
+      backgroundColor: getStickyCellColor == null ? void 0 : getStickyCellColor(cell),
       "data-column": cell.column.id,
       children: cellContent
     });
@@ -422,22 +423,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 +457,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 +533,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;
 }
@@ -843,6 +873,7 @@ function DataTable({
     enableExpanding: !(config == null ? void 0 : config.hideExpandControls),
     enableMultiRowSelection: (config == null ? void 0 : config.rowSelectionMode) === "multiple",
     enableSubRowSelection: (config == null ? void 0 : config.rowSelectionMode) !== "single",
+    filterFromLeafRows: filters == null ? void 0 : filters.filterFromLeafRows,
     getFilteredRowModel: enableGlobalFilter(getFilteredRowModel()),
     getCoreRowModel: getCoreRowModel(),
     getExpandedRowModel: getExpandedRowModel(),
@@ -917,7 +948,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.6.0",
   "license": "MIT",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -20,8 +20,8 @@
     "@equinor/eds-core-react": "^0.27.0",
     "@equinor/eds-icons": "^0.15.0",
     "@equinor/eds-tokens": "^0.9.0",
-    "@tanstack/match-sorter-utils": "^8.5.14",
-    "@tanstack/react-table": "^8.5.15",
+    "@tanstack/match-sorter-utils": "^8.7.6",
+    "@tanstack/react-table": "^8.7.6",
     "@tanstack/react-virtual": "^3.0.0-beta.23",
     "jotai": "^1.10.0",
     "styled-components": "^5.3.6",