@equinor/apollo-components 1.8.0 → 1.8.1

package/dist/index.d.ts

@@ -71,6 +71,7 @@ interface CellConfig<T> {
 declare type RowSelectionMode = 'single' | 'multiple';
 declare type DataTableConfig<T> = {
     height?: string;
+    tableLayout?: 'auto' | 'fixed';
     sortable?: boolean;
     virtual?: boolean;
     rowSelectionMode?: RowSelectionMode;

package/dist/index.js

@@ -195,24 +195,12 @@ var ChipsCell = (props) => {
 // src/cells/DynamicCell.tsx
 var import_eds_core_react4 = require("@equinor/eds-core-react");
 var import_react_table = require("@tanstack/react-table");
-var import_styled_components6 = __toESM(require("styled-components"));
+var import_styled_components5 = __toESM(require("styled-components"));
 
 // src/cells/StickyCell.tsx
 var import_eds_core_react3 = require("@equinor/eds-core-react");
 var import_styled_components4 = __toESM(require("styled-components"));
-var StickyCell = (0, import_styled_components4.default)(import_eds_core_react3.Table.Cell)`
-  position: sticky;
-  right: 0;
-  top: 0;
-  z-index: 4;
-`;
-var StickyHeaderCell = (0, import_styled_components4.default)(StickyCell)`
-  z-index: 5;
-`;
-
-// src/cells/styles.ts
-var import_styled_components5 = require("styled-components");
-var leftCellShadow = import_styled_components5.css`
+var leftCellShadow = import_styled_components4.css`
   &:before {
     box-shadow: -1px 0 1px -1px inset;
     content: ' ';
@@ -223,15 +211,24 @@ var leftCellShadow = import_styled_components5.css`
     width: 1px;
   }
 `;
+var StickyCell = (0, import_styled_components4.default)(import_eds_core_react3.Table.Cell)`
+  position: sticky;
+  right: 0;
+  top: 0;
+  z-index: 4;
+  background-clip: padding-box;
+  ${leftCellShadow}
+`;
+var StickyHeaderCell = (0, import_styled_components4.default)(StickyCell)`
+  z-index: 5;
+`;
 
 // src/cells/DynamicCell.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var StyledStickyCell = (0, import_styled_components6.default)(StickyCell)`
-  background-clip: padding-box;
-  ${leftCellShadow}
+var StyledStickyCell = (0, import_styled_components5.default)(StickyCell)`
   ${(props) => props.backgroundColor ? `background-color: ${props.backgroundColor} !important;` : ``}
 `;
-var StyledCell = (0, import_styled_components6.default)(import_eds_core_react4.Table.Cell)`
+var StyledCell = (0, import_styled_components5.default)(import_eds_core_react4.Table.Cell)`
   ${(props) => props.backgroundColor ? `background-color: ${props.backgroundColor} !important;` : ``}
 `;
 function DynamicCell({ cell, highlight, getStickyCellColor }) {
@@ -253,12 +250,12 @@ function DynamicCell({ cell, highlight, getStickyCellColor }) {
 
 // src/cells/HierarchyCell.tsx
 var import_eds_tokens4 = require("@equinor/eds-tokens");
-var import_styled_components8 = __toESM(require("styled-components"));
+var import_styled_components7 = __toESM(require("styled-components"));
 
 // src/cells/TypographyCustom.tsx
 var import_eds_core_react5 = require("@equinor/eds-core-react");
 var import_eds_tokens3 = require("@equinor/eds-tokens");
-var import_styled_components7 = __toESM(require("styled-components"));
+var import_styled_components6 = __toESM(require("styled-components"));
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var truncateStyle = {
   overflow: "hidden",
@@ -294,7 +291,7 @@ var TypographyCustom = (props) => {
     style: { ...styleFromProps, ...noWrap ? truncateStyle : {} }
   });
 };
-var HoverCapture = import_styled_components7.default.div`
+var HoverCapture = import_styled_components6.default.div`
   position: relative;
   z-index: 0;
 
@@ -305,7 +302,7 @@ var HoverCapture = import_styled_components7.default.div`
     opacity: 1;
   }
 `;
-var ShowAllWrapperWrapper = import_styled_components7.default.div`
+var ShowAllWrapperWrapper = import_styled_components6.default.div`
   position: absolute;
   z-index: 1;
   pointer-events: none;
@@ -317,14 +314,14 @@ var ShowAllWrapperWrapper = import_styled_components7.default.div`
 
 // src/cells/HierarchyCell.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var CellWrapper = (0, import_styled_components8.default)(TypographyCustom)`
+var CellWrapper = (0, import_styled_components7.default)(TypographyCustom)`
   height: 100%;
   display: flex;
   align-items: center;
 
   ${({ depth, expanded }) => expanded && depth === 0 && "font-weight: bold;"}
 
-  ${({ depth }) => depth > 0 && import_styled_components8.css`
+  ${({ depth }) => depth > 0 && import_styled_components7.css`
       border-left: 3px solid ${import_eds_tokens4.tokens.colors.infographic.primary__moss_green_34.hex};
       gap: 0.5rem;
       .--divider {
@@ -352,9 +349,9 @@ function HierarchyCell(cell, options = {}) {
 // src/cells/SelectColumnDef.tsx
 var import_eds_core_react6 = require("@equinor/eds-core-react");
 var import_eds_icons3 = require("@equinor/eds-icons");
-var import_styled_components9 = __toESM(require("styled-components"));
+var import_styled_components8 = __toESM(require("styled-components"));
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var CellWrapper2 = import_styled_components9.default.div`
+var CellWrapper2 = import_styled_components8.default.div`
   display: flex;
   align-items: center;
   width: 48px;
@@ -410,7 +407,7 @@ function SelectColumnDef(selectionMode) {
 var import_react_table3 = require("@tanstack/react-table");
 var import_jotai3 = require("jotai");
 var import_react4 = require("react");
-var import_styled_components15 = __toESM(require("styled-components"));
+var import_styled_components14 = __toESM(require("styled-components"));
 
 // src/DataTable/atoms.ts
 var import_jotai = require("jotai");
@@ -425,9 +422,9 @@ var import_eds_core_react11 = require("@equinor/eds-core-react");
 
 // src/DataTable/components/PlaceholderRow.tsx
 var import_eds_core_react7 = require("@equinor/eds-core-react");
-var import_styled_components10 = __toESM(require("styled-components"));
+var import_styled_components9 = __toESM(require("styled-components"));
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var PlaceholderTextWrapper = import_styled_components10.default.div`
+var PlaceholderTextWrapper = import_styled_components9.default.div`
   display: flex;
   justify-content: center;
 `;
@@ -453,17 +450,14 @@ var import_eds_core_react9 = require("@equinor/eds-core-react");
 var import_eds_core_react8 = require("@equinor/eds-core-react");
 var import_eds_icons4 = require("@equinor/eds-icons");
 var import_react_table2 = require("@tanstack/react-table");
-var import_styled_components11 = __toESM(require("styled-components"));
+var import_styled_components10 = __toESM(require("styled-components"));
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var HeaderDiv = import_styled_components11.default.div`
+var HeaderDiv = import_styled_components10.default.div`
   display: flex;
   align-items: center;
   gap: 0.25rem;
   z-index: 5;
 `;
-var StyledStickyCell2 = (0, import_styled_components11.default)(StickyCell)`
-  ${leftCellShadow}
-`;
 var HeaderCell = ({ header }) => {
   var _a;
   const style = {
@@ -476,7 +470,7 @@ var HeaderCell = ({ header }) => {
     colSpan: header.colSpan
   };
   if ((_a = header.column.columnDef.meta) == null ? void 0 : _a.sticky)
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StyledStickyCell2, {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StickyHeaderCell, {
       ...cellProps,
       children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(HeaderContent, {
         header
@@ -605,18 +599,18 @@ function BasicTable({
 var import_eds_core_react14 = require("@equinor/eds-core-react");
 var import_eds_icons7 = require("@equinor/eds-icons");
 var import_jotai2 = require("jotai");
-var import_styled_components14 = __toESM(require("styled-components"));
+var import_styled_components13 = __toESM(require("styled-components"));
 
 // src/DataTable/filters/DebouncedInput.tsx
 var import_eds_core_react12 = require("@equinor/eds-core-react");
 var import_eds_icons5 = require("@equinor/eds-icons");
 var import_react2 = require("react");
-var import_styled_components12 = __toESM(require("styled-components"));
+var import_styled_components11 = __toESM(require("styled-components"));
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var Wrapper3 = import_styled_components12.default.div`
+var Wrapper3 = import_styled_components11.default.div`
   width: 200px;
 `;
-var CloseButton = (0, import_styled_components12.default)(import_eds_core_react12.Button)`
+var CloseButton = (0, import_styled_components11.default)(import_eds_core_react12.Button)`
   width: 24px;
   height: 24px;
 `;
@@ -677,7 +671,7 @@ var fuzzyFilter = (row, columnId, value, addMeta) => {
 var import_eds_core_react13 = require("@equinor/eds-core-react");
 var import_eds_icons6 = require("@equinor/eds-icons");
 var import_react3 = require("react");
-var import_styled_components13 = __toESM(require("styled-components"));
+var import_styled_components12 = __toESM(require("styled-components"));
 
 // src/DataTable/utils.tsx
 function capitalizeHeader(context) {
@@ -703,12 +697,12 @@ function prependSelectColumn(columns, config) {
 
 // src/DataTable/components/ColumnSelect.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
-var ColumnSelectContent = import_styled_components13.default.div`
+var ColumnSelectContent = import_styled_components12.default.div`
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-gap: 0.5rem;
 `;
-var ActionsWrapper = import_styled_components13.default.div`
+var ActionsWrapper = import_styled_components12.default.div`
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -790,14 +784,14 @@ function ColumnSelect({ table }) {
 
 // src/DataTable/components/DataTableHeader.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var DataTableHeaderWrapper = import_styled_components14.default.div`
+var DataTableHeaderWrapper = import_styled_components13.default.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 0.5rem;
   padding: ${(props) => props.captionPadding ?? "1rem"};
 `;
-var FilterContainer = import_styled_components14.default.div`
+var FilterContainer = import_styled_components13.default.div`
   display: flex;
   align-items: center;
   gap: 1rem;
@@ -903,7 +897,7 @@ function VirtualTable({
 
 // src/DataTable/DataTable.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var DataTableWrapper = import_styled_components15.default.div`
+var DataTableWrapper = import_styled_components14.default.div`
   width: ${(props) => props.width ?? "100%"};
 
   .--table-container {
@@ -912,8 +906,10 @@ var DataTableWrapper = import_styled_components15.default.div`
     overflow: auto;
 
     table {
-      width: 100%;
-      table-layout: auto;
+      width: ${(props) => props.width ?? "100%"};
+      height: ${(props) => props.height ?? "100%"};
+      table-layout: ${(props) => props.tableLayout ?? "fixed"};
+      border-collapse: collapse;
     }
   }
 `;
@@ -976,9 +972,9 @@ function DataTable({
   }, [table, config == null ? void 0 : config.expandAllByDefault]);
   const tableContainerRef = (0, import_react4.useRef)(null);
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(DataTableWrapper, {
-    captionPadding: header == null ? void 0 : header.captionPadding,
     height: config == null ? void 0 : config.height,
     width: config == null ? void 0 : config.width,
+    tableLayout: config == null ? void 0 : config.tableLayout,
     children: [
       /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DataTableHeader, {
         tableCaption: header == null ? void 0 : header.tableCaption,

package/dist/index.mjs

@@ -152,19 +152,7 @@ import styled5 from "styled-components";
 
 // src/cells/StickyCell.tsx
 import { Table } from "@equinor/eds-core-react";
-import styled4 from "styled-components";
-var StickyCell = styled4(Table.Cell)`
-  position: sticky;
-  right: 0;
-  top: 0;
-  z-index: 4;
-`;
-var StickyHeaderCell = styled4(StickyCell)`
-  z-index: 5;
-`;
-
-// src/cells/styles.ts
-import { css as css2 } from "styled-components";
+import styled4, { css as css2 } from "styled-components";
 var leftCellShadow = css2`
   &:before {
     box-shadow: -1px 0 1px -1px inset;
@@ -176,12 +164,21 @@ var leftCellShadow = css2`
     width: 1px;
   }
 `;
+var StickyCell = styled4(Table.Cell)`
+  position: sticky;
+  right: 0;
+  top: 0;
+  z-index: 4;
+  background-clip: padding-box;
+  ${leftCellShadow}
+`;
+var StickyHeaderCell = styled4(StickyCell)`
+  z-index: 5;
+`;
 
 // src/cells/DynamicCell.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
 var StyledStickyCell = styled5(StickyCell)`
-  background-clip: padding-box;
-  ${leftCellShadow}
   ${(props) => props.backgroundColor ? `background-color: ${props.backgroundColor} !important;` : ``}
 `;
 var StyledCell = styled5(Table2.Cell)`
@@ -422,9 +419,6 @@ var HeaderDiv = styled10.div`
   gap: 0.25rem;
   z-index: 5;
 `;
-var StyledStickyCell2 = styled10(StickyCell)`
-  ${leftCellShadow}
-`;
 var HeaderCell = ({ header }) => {
   var _a;
   const style = {
@@ -437,7 +431,7 @@ var HeaderCell = ({ header }) => {
     colSpan: header.colSpan
   };
   if ((_a = header.column.columnDef.meta) == null ? void 0 : _a.sticky)
-    return /* @__PURE__ */ jsx9(StyledStickyCell2, {
+    return /* @__PURE__ */ jsx9(StickyHeaderCell, {
       ...cellProps,
       children: /* @__PURE__ */ jsx9(HeaderContent, {
         header
@@ -873,8 +867,10 @@ var DataTableWrapper = styled14.div`
     overflow: auto;
 
     table {
-      width: 100%;
-      table-layout: auto;
+      width: ${(props) => props.width ?? "100%"};
+      height: ${(props) => props.height ?? "100%"};
+      table-layout: ${(props) => props.tableLayout ?? "fixed"};
+      border-collapse: collapse;
     }
   }
 `;
@@ -937,9 +933,9 @@ function DataTable({
   }, [table, config == null ? void 0 : config.expandAllByDefault]);
   const tableContainerRef = useRef2(null);
   return /* @__PURE__ */ jsxs11(DataTableWrapper, {
-    captionPadding: header == null ? void 0 : header.captionPadding,
     height: config == null ? void 0 : config.height,
     width: config == null ? void 0 : config.width,
+    tableLayout: config == null ? void 0 : config.tableLayout,
     children: [
       /* @__PURE__ */ jsx18(DataTableHeader, {
         tableCaption: header == null ? void 0 : header.tableCaption,

package/package.json

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