@equinor/apollo-components 1.10.0 → 1.11.0

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import { IconData } from '@equinor/eds-icons';
 import * as react from 'react';
 import { ReactNode, ReactElement, ComponentProps } from 'react';
-import { Cell, CellContext, Table, Row, ColumnDef, RowSelectionState, SortingState, HeaderContext } from '@tanstack/react-table';
+import { Cell, CellContext, Table, Row, ColumnDef, VisibilityState, RowSelectionState, SortingState, 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';
@@ -64,9 +64,17 @@ interface RowConfig<T> {
     onMouseEnter?: (row: Row<T>) => void;
     onMouseLeave?: (row: Row<T>) => void;
 }
+declare type TruncateMode = 'wrap' | 'hover';
 interface CellConfig<T> {
     getStickyCellColor?: (cell: Cell<T, unknown>) => string;
     getShouldHighlight?: (cell: Cell<T, unknown>) => boolean;
+    /**
+     * Whether to wrap or truncate default cells. Accepts `"wrap"` or `"hover"` and  or a function returning a boolean.
+     * Defauls to `"hover"` (i.e. all cells is truncated by default).
+     *
+     * ***Note**: This only applies to default cells. Custom cells need custom implementation.*
+     */
+    truncateMode?: TruncateMode | ((cell: Cell<T, unknown>) => TruncateMode);
 }
 declare type RowSelectionMode = 'single' | 'multiple';
 declare type TableLayout = 'auto' | 'fixed';
@@ -115,6 +123,9 @@ declare function DataTable$1<T>(props: DataTableProps<T>): JSX.Element;
 declare type DataTableProviderProps = ComponentProps<typeof Provider>;
 declare function DataTableProvider({ children, ...props }: DataTableProviderProps): JSX.Element;
 
+declare const columnVisibilityAtom: jotai.PrimitiveAtom<VisibilityState> & {
+    init: VisibilityState;
+};
 declare const globalFilterAtom: jotai.PrimitiveAtom<string> & {
     init: string;
 };
@@ -157,14 +168,8 @@ declare function SelectColumnDef<T>(props?: DataTableConfig<T>): ColumnDef$1<T,
 declare const StickyCell: styled_components.StyledComponent<react.ForwardRefExoticComponent<CellProps & react.RefAttributes<HTMLTableCellElement>>, any, {} & CellProps, never>;
 
 declare type TypographyProps = {
-    noWrap?: boolean;
-    /** Requires noWrap prop in order to function */
-    showAllOnHover?: boolean;
+    truncate?: boolean;
 } & TypographyProps$1;
-/** A cell used to wrap text in EDS Typography
- *
- * Developed for Plant Tracker.
- */
 declare const TypographyCustom: (props: TypographyProps) => JSX.Element;
 
-export { AppShell, AppSidebar, CellConfig, ChipsCell, ColumnSelect, DataTable, DataTableCommonProps, DataTableConfig, DataTableProps, DataTableRawProps, DynamicCell, FilterConfig, HeaderConfig, HierarchyCell, RowConfig, RowSelectionMode, SelectColumnDef, StickyCell, TableHeader, TableLayout, TableRowWrapper, TableRowWrapperProps, TypographyCustom, capitalizeHeader, globalFilterAtom, prependSelectColumn, rowSelectionAtom, tableSortingAtom };
+export { AppShell, AppSidebar, CellConfig, ChipsCell, ColumnSelect, DataTable, DataTableCommonProps, DataTableConfig, DataTableProps, DataTableRawProps, DynamicCell, FilterConfig, HeaderConfig, HierarchyCell, RowConfig, RowSelectionMode, SelectColumnDef, StickyCell, TableHeader, TableLayout, TableRowWrapper, TableRowWrapperProps, TruncateMode, TypographyCustom, capitalizeHeader, columnVisibilityAtom, globalFilterAtom, prependSelectColumn, rowSelectionAtom, tableSortingAtom };

package/dist/index.js

@@ -38,6 +38,7 @@ __export(src_exports, {
   TableHeader: () => TableHeader,
   TypographyCustom: () => TypographyCustom,
   capitalizeHeader: () => capitalizeHeader,
+  columnVisibilityAtom: () => columnVisibilityAtom,
   globalFilterAtom: () => globalFilterAtom,
   prependSelectColumn: () => prependSelectColumn,
   rowSelectionAtom: () => rowSelectionAtom,
@@ -233,7 +234,7 @@ var StyledStickyCell = (0, import_styled_components5.default)(StickyCell)`
   background-color: ${({ backgroundColor: bg }) => bg ? `${bg} !important` : `inherit`};
 `;
 var StyledCell = (0, import_styled_components5.default)(import_eds_core_react4.Table.Cell)`
-  ${({ backgroundColor: bg }) => bg ? `background-color: ${bg} !important;` : ``};
+  background-color: ${({ backgroundColor: bg }) => bg ? `${bg} !important` : `inherit`};
 `;
 function DynamicCell({ cell, highlight, getStickyCellColor }) {
   var _a;
@@ -267,53 +268,48 @@ var truncateStyle = {
   textOverflow: "ellipsis"
 };
 var TypographyCustom = (props) => {
-  const { noWrap, showAllOnHover, style: styleFromProps, ...edsTypographyProps } = props;
-  if (noWrap && showAllOnHover)
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(HoverCapture, {
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ShowAllWrapperWrapper, {
-          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_eds_core_react5.Typography, {
-            ...edsTypographyProps,
-            ref: void 0,
-            style: {
-              ...styleFromProps,
-              whiteSpace: "nowrap"
-            }
-          })
-        }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_eds_core_react5.Typography, {
-          ...edsTypographyProps,
-          style: {
-            ...styleFromProps,
-            ...truncateStyle
-          }
-        })
-      ]
+  const { truncate, style: styleFromProps, ...edsTypographyProps } = props;
+  if (truncate)
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HoverCapture, {
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_eds_core_react5.Typography, {
+        ...edsTypographyProps,
+        style: {
+          ...styleFromProps,
+          ...truncateStyle
+        }
+      })
     });
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_eds_core_react5.Typography, {
     ...edsTypographyProps,
-    style: { ...styleFromProps, ...noWrap ? truncateStyle : {} }
+    style: styleFromProps
   });
 };
 var HoverCapture = import_styled_components6.default.div`
+  padding: 0.5em 0;
+  margin: -0.5em 0;
+  height: ${import_eds_tokens3.tokens.typography.table.cell_text.lineHeight};
+  background-color: inherit;
+
   position: relative;
-  z-index: 0;
+  width: 100%;
 
-  padding: 0.5em;
-  margin: -0.5em;
+  &:hover {
+    z-index: 1;
+  }
 
-  &:hover > * {
-    opacity: 1;
+  & > * {
+    width: inherit;
+    position: absolute;
   }
-`;
-var ShowAllWrapperWrapper = import_styled_components6.default.div`
-  position: absolute;
-  z-index: 1;
-  pointer-events: none;
 
-  opacity: 0;
-  padding-right: 1em;
-  background-color: ${import_eds_tokens3.tokens.colors.interactive.table__cell__fill_hover.hex};
+  &:hover > * {
+    width: auto;
+    z-index: 1;
+    padding: 0.5em 1em;
+    margin: -0.5em -1em;
+
+    background-color: inherit;
+  }
 `;
 
 // src/cells/HierarchyCell.tsx
@@ -373,7 +369,7 @@ function SelectColumnDef(props = {}) {
         checked: table.getIsAllRowsSelected(),
         indeterminate: table.getIsSomeRowsSelected(),
         "aria-label": table.getIsAllRowsSelected() ? "Deselect all rows" : "Select all rows",
-        onChange: table.getToggleAllRowsSelectedHandler()
+        onChange: table.getIsSomeRowsSelected() ? () => table.toggleAllRowsSelected(false) : table.getToggleAllRowsSelectedHandler()
       })
     }) : null,
     cell: ({ table, row }) => {
@@ -714,6 +710,13 @@ function prependSelectColumn(columns, config) {
     return [SelectColumnDef(config), ...columns];
   return [config.selectColumn(), ...columns];
 }
+function getFunctionValueOrDefault(valueOrFn, fnProps, defaultValue) {
+  if (valueOrFn === void 0)
+    return defaultValue;
+  if (typeof valueOrFn === "function")
+    return valueOrFn(fnProps);
+  return valueOrFn;
+}
 
 // src/DataTable/components/ColumnSelect.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
@@ -936,7 +939,7 @@ var DataTableWrapper = import_styled_components16.default.div`
   }
 `;
 function DataTableRaw(props) {
-  const { isLoading, header, filters, config, rowConfig, table } = props;
+  const { isLoading, header, filters, config, rowConfig, cellConfig, table } = props;
   const tableContainerRef = (0, import_react4.useRef)(null);
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(DataTableWrapper, {
     captionPadding: header == null ? void 0 : header.captionPadding,
@@ -957,11 +960,13 @@ function DataTableRaw(props) {
           containerRef: tableContainerRef,
           table,
           rowConfig,
+          cellConfig,
           isLoading,
           stickyHeader: header == null ? void 0 : header.stickyHeader
         }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(BasicTable, {
           table,
           rowConfig,
+          cellConfig,
           isLoading,
           stickyHeader: header == null ? void 0 : header.stickyHeader
         })
@@ -976,7 +981,7 @@ var import_jotai3 = require("jotai");
 var import_react5 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 function useDataTable(props) {
-  const { columns, data, filters, config, meta } = props;
+  const { columns, data, filters, config, cellConfig } = props;
   const [columnVisibility, setColumnVisibility] = (0, import_jotai3.useAtom)(columnVisibilityAtom);
   const [globalFilter, setGlobalFilter] = (0, import_jotai3.useAtom)(globalFilterAtom);
   const [sorting, setSorting] = (0, import_jotai3.useAtom)(tableSortingAtom);
@@ -997,12 +1002,14 @@ function useDataTable(props) {
       columnVisibility
     },
     defaultColumn: {
-      cell: (cell) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TypographyCustom, {
-        noWrap: true,
-        children: cell.getValue()
-      })
+      cell: ({ cell }) => {
+        const truncateMode = getFunctionValueOrDefault(cellConfig == null ? void 0 : cellConfig.truncateMode, cell, "hover");
+        return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TypographyCustom, {
+          truncate: truncateMode === "hover",
+          children: cell.getValue()
+        });
+      }
     },
-    meta,
     enableSorting: config == null ? void 0 : config.sortable,
     enableExpanding: !(config == null ? void 0 : config.hideExpandControls),
     enableMultiRowSelection: (config == null ? void 0 : config.rowSelectionMode) === "multiple",
@@ -1065,6 +1072,7 @@ DataTable2.Provider = DataTableProvider;
   TableHeader,
   TypographyCustom,
   capitalizeHeader,
+  columnVisibilityAtom,
   globalFilterAtom,
   prependSelectColumn,
   rowSelectionAtom,

package/dist/index.mjs

@@ -186,7 +186,7 @@ var StyledStickyCell = styled5(StickyCell)`
   background-color: ${({ backgroundColor: bg }) => bg ? `${bg} !important` : `inherit`};
 `;
 var StyledCell = styled5(Table2.Cell)`
-  ${({ backgroundColor: bg }) => bg ? `background-color: ${bg} !important;` : ``};
+  background-color: ${({ backgroundColor: bg }) => bg ? `${bg} !important` : `inherit`};
 `;
 function DynamicCell({ cell, highlight, getStickyCellColor }) {
   var _a;
@@ -215,64 +215,59 @@ import {
 } from "@equinor/eds-core-react";
 import { tokens as tokens3 } from "@equinor/eds-tokens";
 import styled6 from "styled-components";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var truncateStyle = {
   overflow: "hidden",
   whiteSpace: "nowrap",
   textOverflow: "ellipsis"
 };
 var TypographyCustom = (props) => {
-  const { noWrap, showAllOnHover, style: styleFromProps, ...edsTypographyProps } = props;
-  if (noWrap && showAllOnHover)
-    return /* @__PURE__ */ jsxs3(HoverCapture, {
-      children: [
-        /* @__PURE__ */ jsx5(ShowAllWrapperWrapper, {
-          children: /* @__PURE__ */ jsx5(EdsTypography, {
-            ...edsTypographyProps,
-            ref: void 0,
-            style: {
-              ...styleFromProps,
-              whiteSpace: "nowrap"
-            }
-          })
-        }),
-        /* @__PURE__ */ jsx5(EdsTypography, {
-          ...edsTypographyProps,
-          style: {
-            ...styleFromProps,
-            ...truncateStyle
-          }
-        })
-      ]
+  const { truncate, style: styleFromProps, ...edsTypographyProps } = props;
+  if (truncate)
+    return /* @__PURE__ */ jsx5(HoverCapture, {
+      children: /* @__PURE__ */ jsx5(EdsTypography, {
+        ...edsTypographyProps,
+        style: {
+          ...styleFromProps,
+          ...truncateStyle
+        }
+      })
     });
   return /* @__PURE__ */ jsx5(EdsTypography, {
     ...edsTypographyProps,
-    style: { ...styleFromProps, ...noWrap ? truncateStyle : {} }
+    style: styleFromProps
   });
 };
 var HoverCapture = styled6.div`
+  padding: 0.5em 0;
+  margin: -0.5em 0;
+  height: ${tokens3.typography.table.cell_text.lineHeight};
+  background-color: inherit;
+
   position: relative;
-  z-index: 0;
+  width: 100%;
 
-  padding: 0.5em;
-  margin: -0.5em;
+  &:hover {
+    z-index: 1;
+  }
 
-  &:hover > * {
-    opacity: 1;
+  & > * {
+    width: inherit;
+    position: absolute;
   }
-`;
-var ShowAllWrapperWrapper = styled6.div`
-  position: absolute;
-  z-index: 1;
-  pointer-events: none;
 
-  opacity: 0;
-  padding-right: 1em;
-  background-color: ${tokens3.colors.interactive.table__cell__fill_hover.hex};
+  &:hover > * {
+    width: auto;
+    z-index: 1;
+    padding: 0.5em 1em;
+    margin: -0.5em -1em;
+
+    background-color: inherit;
+  }
 `;
 
 // src/cells/HierarchyCell.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 var CellWrapper = styled7(TypographyCustom)`
   height: 100%;
   display: flex;
@@ -293,7 +288,7 @@ var CellWrapper = styled7(TypographyCustom)`
 `;
 function HierarchyCell(cell, options = {}) {
   var _a, _b;
-  return /* @__PURE__ */ jsxs4(CellWrapper, {
+  return /* @__PURE__ */ jsxs3(CellWrapper, {
     depth: ((_a = options.getRowDepth) == null ? void 0 : _a.call(options)) ?? cell.row.depth,
     expanded: cell.row.getIsExpanded(),
     children: [
@@ -309,7 +304,7 @@ function HierarchyCell(cell, options = {}) {
 import { Button as Button2, Checkbox, Icon as Icon3, Radio } from "@equinor/eds-core-react";
 import { chevron_down, chevron_up } from "@equinor/eds-icons";
 import styled8 from "styled-components";
-import { Fragment, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 var CellWrapper2 = styled8.div`
   display: flex;
   align-items: center;
@@ -328,7 +323,7 @@ function SelectColumnDef(props = {}) {
         checked: table.getIsAllRowsSelected(),
         indeterminate: table.getIsSomeRowsSelected(),
         "aria-label": table.getIsAllRowsSelected() ? "Deselect all rows" : "Select all rows",
-        onChange: table.getToggleAllRowsSelectedHandler()
+        onChange: table.getIsSomeRowsSelected() ? () => table.toggleAllRowsSelected(false) : table.getToggleAllRowsSelectedHandler()
       })
     }) : null,
     cell: ({ table, row }) => {
@@ -336,7 +331,7 @@ function SelectColumnDef(props = {}) {
       return /* @__PURE__ */ jsx7(CellWrapper2, {
         paddingLeft,
         rowDepth: row.depth,
-        children: /* @__PURE__ */ jsxs5(Fragment, {
+        children: /* @__PURE__ */ jsxs4(Fragment, {
           children: [
             selectionMode === "single" ? /* @__PURE__ */ jsx7(Radio, {
               checked: row.getIsSelected(),
@@ -412,7 +407,7 @@ import { Icon as Icon4, Table as Table5 } from "@equinor/eds-core-react";
 import { arrow_drop_down, arrow_drop_up } from "@equinor/eds-icons";
 import { flexRender as flexRender2 } from "@tanstack/react-table";
 import styled11 from "styled-components";
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var HeaderDiv = styled11.div`
   display: flex;
   align-items: center;
@@ -448,7 +443,7 @@ var HeaderCell = ({ header }) => {
 function HeaderContent({ header }) {
   if (header.isPlaceholder)
     return null;
-  return /* @__PURE__ */ jsxs6(HeaderDiv, {
+  return /* @__PURE__ */ jsxs5(HeaderDiv, {
     children: [
       flexRender2(header.column.columnDef.header, header.getContext()),
       {
@@ -534,7 +529,7 @@ function handleRowEvent(row, handler) {
 }
 
 // src/DataTable/components/BasicTable.tsx
-import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
 function BasicTable({
   table,
   rowConfig,
@@ -543,7 +538,7 @@ function BasicTable({
   isLoading
 }) {
   const tableRows = table.getRowModel().rows;
-  return /* @__PURE__ */ jsxs7(EdsTable, {
+  return /* @__PURE__ */ jsxs6(EdsTable, {
     children: [
       /* @__PURE__ */ jsx12(TableHeader, {
         sticky: stickyHeader,
@@ -669,9 +664,16 @@ function prependSelectColumn(columns, config) {
     return [SelectColumnDef(config), ...columns];
   return [config.selectColumn(), ...columns];
 }
+function getFunctionValueOrDefault(valueOrFn, fnProps, defaultValue) {
+  if (valueOrFn === void 0)
+    return defaultValue;
+  if (typeof valueOrFn === "function")
+    return valueOrFn(fnProps);
+  return valueOrFn;
+}
 
 // src/DataTable/components/ColumnSelect.tsx
-import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
 var ColumnSelectContent = styled14.div`
   display: grid;
   grid-template-columns: repeat(2, 1fr);
@@ -687,7 +689,7 @@ function ColumnSelect({ table }) {
   const [isOpen, setIsOpen] = useState3(false);
   const referenceElement = useRef(null);
   const selectableColumns = table.getAllLeafColumns().filter((column) => column.id !== "select");
-  return /* @__PURE__ */ jsxs8(Fragment2, {
+  return /* @__PURE__ */ jsxs7(Fragment2, {
     children: [
       /* @__PURE__ */ jsx14(Button4, {
         "aria-haspopup": true,
@@ -702,14 +704,14 @@ function ColumnSelect({ table }) {
           data: view_column
         })
       }),
-      /* @__PURE__ */ jsxs8(Popover, {
+      /* @__PURE__ */ jsxs7(Popover, {
         open: isOpen,
         id: "column-select-popover",
         anchorEl: referenceElement.current,
         placement: "bottom-end",
         onClose: () => setIsOpen(false),
         children: [
-          /* @__PURE__ */ jsxs8(Popover.Header, {
+          /* @__PURE__ */ jsxs7(Popover.Header, {
             children: [
               /* @__PURE__ */ jsx14(Popover.Title, {
                 children: "Column settings"
@@ -726,7 +728,7 @@ function ColumnSelect({ table }) {
               })
             ]
           }),
-          /* @__PURE__ */ jsxs8(Popover.Content, {
+          /* @__PURE__ */ jsxs7(Popover.Content, {
             children: [
               /* @__PURE__ */ jsx14(ColumnSelectContent, {
                 children: selectableColumns.map((column) => {
@@ -758,7 +760,7 @@ function ColumnSelect({ table }) {
 }
 
 // src/DataTable/components/DataTableHeader.tsx
-import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
 var DataTableHeaderWrapper = styled15.div`
   display: flex;
   align-items: center;
@@ -775,7 +777,7 @@ var FilterContainer = styled15.div`
 function DataTableHeader({ config, table, ...props }) {
   var _a;
   const [globalFilter, setGlobalFilter] = useAtom(globalFilterAtom);
-  return /* @__PURE__ */ jsxs9(DataTableHeaderWrapper, {
+  return /* @__PURE__ */ jsxs8(DataTableHeaderWrapper, {
     className: "--table-caption",
     captionPadding: props.captionPadding,
     children: [
@@ -785,7 +787,7 @@ function DataTableHeader({ config, table, ...props }) {
       }),
       /* @__PURE__ */ jsx15(FilterContainer, {
         className: "--filter-container",
-        children: /* @__PURE__ */ jsxs9(Fragment3, {
+        children: /* @__PURE__ */ jsxs8(Fragment3, {
           children: [
             (config == null ? void 0 : config.globalFilter) && /* @__PURE__ */ jsx15(DebouncedInput, {
               value: globalFilter,
@@ -822,7 +824,7 @@ var PaddingRow = (props) => {
 };
 
 // src/DataTable/components/VirtualTable.tsx
-import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
 function VirtualTable({
   table,
   rowConfig,
@@ -840,13 +842,13 @@ function VirtualTable({
   const virtualRows = rowVirtualizer.getVirtualItems();
   const paddingTop = virtualRows.length > 0 ? ((_a = virtualRows == null ? void 0 : virtualRows[0]) == null ? void 0 : _a.start) || 0 : 0;
   const paddingBottom = virtualRows.length > 0 ? rowVirtualizer.getTotalSize() - (((_b = virtualRows == null ? void 0 : virtualRows[virtualRows.length - 1]) == null ? void 0 : _b.end) || 0) : 0;
-  return /* @__PURE__ */ jsxs10(Table9, {
+  return /* @__PURE__ */ jsxs9(Table9, {
     children: [
       /* @__PURE__ */ jsx17(TableHeader, {
         sticky: props.stickyHeader,
         table
       }),
-      /* @__PURE__ */ jsxs10(TableBody, {
+      /* @__PURE__ */ jsxs9(TableBody, {
         children: [
           /* @__PURE__ */ jsx17(PaddingRow, {
             height: paddingTop
@@ -871,7 +873,7 @@ function VirtualTable({
 }
 
 // src/DataTable/DataTableRaw.tsx
-import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
 var DataTableWrapper = styled16.div`
   width: ${(props) => props.width ?? "100%"};
 
@@ -891,9 +893,9 @@ var DataTableWrapper = styled16.div`
   }
 `;
 function DataTableRaw(props) {
-  const { isLoading, header, filters, config, rowConfig, table } = props;
+  const { isLoading, header, filters, config, rowConfig, cellConfig, table } = props;
   const tableContainerRef = useRef2(null);
-  return /* @__PURE__ */ jsxs11(DataTableWrapper, {
+  return /* @__PURE__ */ jsxs10(DataTableWrapper, {
     captionPadding: header == null ? void 0 : header.captionPadding,
     height: config == null ? void 0 : config.height,
     width: config == null ? void 0 : config.width,
@@ -912,11 +914,13 @@ function DataTableRaw(props) {
           containerRef: tableContainerRef,
           table,
           rowConfig,
+          cellConfig,
           isLoading,
           stickyHeader: header == null ? void 0 : header.stickyHeader
         }) : /* @__PURE__ */ jsx18(BasicTable, {
           table,
           rowConfig,
+          cellConfig,
           isLoading,
           stickyHeader: header == null ? void 0 : header.stickyHeader
         })
@@ -937,7 +941,7 @@ import { useAtom as useAtom2 } from "jotai";
 import { useEffect as useEffect2 } from "react";
 import { jsx as jsx19 } from "react/jsx-runtime";
 function useDataTable(props) {
-  const { columns, data, filters, config, meta } = props;
+  const { columns, data, filters, config, cellConfig } = props;
   const [columnVisibility, setColumnVisibility] = useAtom2(columnVisibilityAtom);
   const [globalFilter, setGlobalFilter] = useAtom2(globalFilterAtom);
   const [sorting, setSorting] = useAtom2(tableSortingAtom);
@@ -958,12 +962,14 @@ function useDataTable(props) {
       columnVisibility
     },
     defaultColumn: {
-      cell: (cell) => /* @__PURE__ */ jsx19(TypographyCustom, {
-        noWrap: true,
-        children: cell.getValue()
-      })
+      cell: ({ cell }) => {
+        const truncateMode = getFunctionValueOrDefault(cellConfig == null ? void 0 : cellConfig.truncateMode, cell, "hover");
+        return /* @__PURE__ */ jsx19(TypographyCustom, {
+          truncate: truncateMode === "hover",
+          children: cell.getValue()
+        });
+      }
     },
-    meta,
     enableSorting: config == null ? void 0 : config.sortable,
     enableExpanding: !(config == null ? void 0 : config.hideExpandControls),
     enableMultiRowSelection: (config == null ? void 0 : config.rowSelectionMode) === "multiple",
@@ -1025,6 +1031,7 @@ export {
   TableHeader,
   TypographyCustom,
   capitalizeHeader,
+  columnVisibilityAtom,
   globalFilterAtom,
   prependSelectColumn,
   rowSelectionAtom,

package/package.json

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