@equinor/eds-data-grid-react 0.6.1 → 0.7.0

package/dist/eds-data-grid-react.cjs

@@ -6,8 +6,8 @@ var reactVirtual = require('@tanstack/react-virtual');
 var react = require('react');
 var styled = require('styled-components');
 var jsxRuntime = require('react/jsx-runtime');
-var edsTokens = require('@equinor/eds-tokens');
 var edsIcons = require('@equinor/eds-icons');
+var edsTokens = require('@equinor/eds-tokens');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -17,6 +17,7 @@ var styled__default = /*#__PURE__*/_interopDefault(styled);
 const EdsDataGridContext = /*#__PURE__*/react.createContext({
   enableSorting: false,
   stickyHeader: false,
+  stickyFooter: false,
   enableColumnFiltering: false,
   table: null
 });
@@ -236,23 +237,18 @@ const SortIndicator = ({
   }[column.getIsSorted()] ?? null;
 };
 
-const getSortLabel = sorted => {
-  if (sorted) {
-    return `${sorted}ending`;
-  }
-  return 'none';
-};
 const ResizeInner = styled__default.default.div.withConfig({
-  displayName: "TableHeaderCell__ResizeInner",
-  componentId: "sc-1n0j3v0-0"
+  displayName: "Resizer__ResizeInner",
+  componentId: "sc-plcbjs-0"
 })(["width:2px;opacity:0;height:100%;"]);
 const Resizer = styled__default.default.div.withConfig({
-  displayName: "TableHeaderCell__Resizer",
-  componentId: "sc-1n0j3v0-1"
+  displayName: "Resizer",
+  componentId: "sc-plcbjs-1"
 })(["transform:", ";", "{opacity:", ";}position:absolute;right:0;top:0;height:100%;width:5px;cursor:col-resize;user-select:none;touch-action:none;display:flex;justify-content:flex-end;"], props => props.$columnResizeMode === 'onEnd' ? 'translateX(0px)' : 'none', ResizeInner, props => props.$isResizing ? 1 : 0);
-const Cell = styled__default.default(edsCoreReact.Table.Cell).withConfig({
-  displayName: "TableHeaderCell__Cell",
-  componentId: "sc-1n0j3v0-2"
+
+const TableCell = styled__default.default(edsCoreReact.Table.Cell).withConfig({
+  displayName: "TableCell",
+  componentId: "sc-1g0k23m-0"
 })(["font-weight:bold;position:", ";top:0;", " ", ";&:hover ", "{background:", ";opacity:1;}"], p => p.$sticky || p.$pinned ? 'sticky' : 'relative', p => {
   if (p.$pinned) {
     return `${p.$pinned}: ${p.$offset}px;`;
@@ -262,6 +258,13 @@ const Cell = styled__default.default(edsCoreReact.Table.Cell).withConfig({
   if (p.$sticky && p.$pinned) return 'z-index: 13';
   if (p.$sticky || p.$pinned) return 'z-index: 12';
 }, ResizeInner, edsTokens.tokens.colors.interactive.primary__hover.rgba);
+
+const getSortLabel = sorted => {
+  if (sorted) {
+    return `${sorted}ending`;
+  }
+  return 'none';
+};
 function TableHeaderCell({
   header,
   columnResizeMode
@@ -275,7 +278,7 @@ function TableHeaderCell({
     }
     return pinned === 'left' ? header.getStart() : table.getTotalSize() - header.getStart() - header.getSize();
   }, [pinned, header, table]);
-  return header.isPlaceholder ? /*#__PURE__*/jsxRuntime.jsx(Cell, {
+  return header.isPlaceholder ? /*#__PURE__*/jsxRuntime.jsx(TableCell, {
     $sticky: ctx.stickyHeader,
     $offset: offset,
     $pinned: pinned,
@@ -284,7 +287,7 @@ function TableHeaderCell({
       ...(ctx.headerStyle ? ctx.headerStyle(header.column) : {})
     },
     "aria-hidden": true
-  }) : /*#__PURE__*/jsxRuntime.jsxs(Cell, {
+  }) : /*#__PURE__*/jsxRuntime.jsxs(TableCell, {
     $sticky: ctx.stickyHeader,
     $offset: offset,
     $pinned: pinned,
@@ -307,7 +310,7 @@ function TableHeaderCell({
           className: "table-header-cell-label",
           children: reactTable.flexRender(header.column.columnDef.header, header.getContext())
         })
-      }), header.column.columnDef.meta?.customFilterInput && /*#__PURE__*/jsxRuntime.jsx(SortIndicator, {
+      }), !header.column.columnDef.meta?.customFilterInput && /*#__PURE__*/jsxRuntime.jsx(SortIndicator, {
         column: header.column
       }), header.column.getCanFilter() && !header.column.columnDef.meta?.customFilterInput ?
       /*#__PURE__*/
@@ -348,6 +351,82 @@ function TableHeaderRow({
   });
 }
 
+function TableFooterCell({
+  footer,
+  columnResizeMode
+}) {
+  const ctx = useTableContext();
+  const table = ctx.table;
+  const pinned = footer.column.getIsPinned();
+  const offset = react.useMemo(() => {
+    if (!pinned) {
+      return null;
+    }
+    return pinned === 'left' ? footer.getStart() : table.getTotalSize() - footer.getStart() - footer.getSize();
+  }, [pinned, footer, table]);
+  return footer.isPlaceholder ? /*#__PURE__*/jsxRuntime.jsx(TableCell, {
+    $sticky: ctx.stickyFooter,
+    $offset: offset,
+    $pinned: pinned,
+    className: ctx.footerClass ? ctx.footerClass(footer.column) : '',
+    style: {
+      ...(ctx.footerStyle ? ctx.footerStyle(footer.column) : {})
+    },
+    "aria-hidden": true
+  }) : /*#__PURE__*/jsxRuntime.jsxs(TableCell, {
+    $sticky: ctx.stickyFooter,
+    $offset: offset,
+    $pinned: pinned,
+    className: ctx.footerClass ? ctx.footerClass(footer.column) : '',
+    onClick: footer.column.getToggleSortingHandler(),
+    colSpan: footer.colSpan,
+    style: {
+      width: footer.getSize(),
+      verticalAlign: ctx.enableColumnFiltering ? 'top' : 'middle',
+      ...(ctx.footerStyle ? ctx.footerStyle(footer.column) : {})
+    },
+    children: [/*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        style: {
+          display: 'flex',
+          flexDirection: 'column'
+        },
+        children: /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: "table-footer-cell-label",
+          children: reactTable.flexRender(footer.column.columnDef.footer, footer.getContext())
+        })
+      }), !footer.column.columnDef.meta?.customFilterInput && /*#__PURE__*/jsxRuntime.jsx(SortIndicator, {
+        column: footer.column
+      })]
+    }), columnResizeMode && /*#__PURE__*/jsxRuntime.jsx(Resizer, {
+      onClick: e => e.stopPropagation(),
+      onMouseDown: footer.getResizeHandler(),
+      onTouchStart: footer.getResizeHandler(),
+      $isResizing: footer.column.getIsResizing(),
+      $columnResizeMode: columnResizeMode,
+      className: 'resize-handle',
+      "data-testid": 'resize-handle',
+      children: /*#__PURE__*/jsxRuntime.jsx(ResizeInner, {})
+    })]
+  }, footer.id);
+}
+
+function TableFooterRow({
+  footerGroup,
+  columnResizeMode,
+  deltaOffset,
+  table
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Table.Row, {
+    children: footerGroup.headers.map(footer => /*#__PURE__*/jsxRuntime.jsx(TableFooterCell, {
+      footer: footer,
+      table: table,
+      columnResizeMode: columnResizeMode,
+      deltaOffset: deltaOffset
+    }, footer.id))
+  });
+}
+
 const StyledCell = styled__default.default(edsCoreReact.Table.Cell).withConfig({
   displayName: "TableBodyCell__StyledCell",
   componentId: "sc-1gsd2k4-0"
@@ -470,6 +549,7 @@ function EdsDataGrid({
   enablePagination,
   enableSorting,
   stickyHeader,
+  stickyFooter,
   onSelectRow,
   onRowSelectionChange,
   caption,
@@ -485,6 +565,8 @@ function EdsDataGrid({
   rowStyle,
   headerClass,
   headerStyle,
+  footerClass,
+  footerStyle,
   externalPaginator,
   onSortingChange,
   manualSorting,
@@ -503,7 +585,8 @@ function EdsDataGrid({
   getSubRows,
   defaultColumn,
   onRowClick,
-  onCellClick
+  onCellClick,
+  enableFooter
 }) {
   logDevelopmentWarningOfPropUse({
     virtualHeight: {
@@ -754,6 +837,7 @@ function EdsDataGrid({
   // These classes are primarily used to allow for feature-detection in the test-suite
   const classList = {
     'sticky-header': !!stickyHeader,
+    'sticky-footer': !!stickyFooter,
     virtual: !!enableVirtual,
     paging: !!enablePagination
   };
@@ -764,10 +848,13 @@ function EdsDataGrid({
     rowStyle: rowStyle,
     headerClass: headerClass,
     headerStyle: headerStyle,
+    footerClass: footerClass,
+    footerStyle: footerStyle,
     table: table,
     enableSorting: !!enableSorting,
     enableColumnFiltering: !!enableColumnFiltering,
     stickyHeader: !!stickyHeader,
+    stickyFooter: !!stickyFooter,
     children: [/*#__PURE__*/jsxRuntime.jsxs(TableWrapper, {
       className: "table-wrapper",
       style: tableWrapperStyle,
@@ -837,6 +924,15 @@ function EdsDataGrid({
             onClick: onRowClick ? event => onRowClick(row, event) : undefined,
             onCellClick: onCellClick
           }, row.id))]
+        }), enableFooter && /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Table.Foot, {
+          sticky: stickyFooter,
+          "data-testid": "eds-grid-footer",
+          children: table.getFooterGroups().map(footerGroup => /*#__PURE__*/jsxRuntime.jsx(TableFooterRow, {
+            table: table,
+            footerGroup: footerGroup,
+            columnResizeMode: columnResizeMode,
+            deltaOffset: table.getState().columnSizingInfo.deltaOffset
+          }, footerGroup.id))
         })]
       }), externalPaginator ? externalPaginator : enablePagination && /*#__PURE__*/jsxRuntime.jsx("div", {
         style: {

package/dist/esm/EdsDataGrid.js

@@ -5,6 +5,7 @@ import { useState, useEffect, useMemo, useRef, useCallback } from 'react';
 import styled from 'styled-components';
 import { TableProvider } from './EdsDataGridContext.js';
 import { TableHeaderRow } from './components/TableHeaderRow.js';
+import { TableFooterRow } from './components/TableFooterRow.js';
 import { TableRow } from './components/TableRow.js';
 import { addPxSuffixIfInputHasNoPrefix, logDevelopmentWarningOfPropUse } from './utils.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -26,6 +27,7 @@ function EdsDataGrid({
   enablePagination,
   enableSorting,
   stickyHeader,
+  stickyFooter,
   onSelectRow,
   onRowSelectionChange,
   caption,
@@ -41,6 +43,8 @@ function EdsDataGrid({
   rowStyle,
   headerClass,
   headerStyle,
+  footerClass,
+  footerStyle,
   externalPaginator,
   onSortingChange,
   manualSorting,
@@ -59,7 +63,8 @@ function EdsDataGrid({
   getSubRows,
   defaultColumn,
   onRowClick,
-  onCellClick
+  onCellClick,
+  enableFooter
 }) {
   logDevelopmentWarningOfPropUse({
     virtualHeight: {
@@ -310,6 +315,7 @@ function EdsDataGrid({
   // These classes are primarily used to allow for feature-detection in the test-suite
   const classList = {
     'sticky-header': !!stickyHeader,
+    'sticky-footer': !!stickyFooter,
     virtual: !!enableVirtual,
     paging: !!enablePagination
   };
@@ -320,10 +326,13 @@ function EdsDataGrid({
     rowStyle: rowStyle,
     headerClass: headerClass,
     headerStyle: headerStyle,
+    footerClass: footerClass,
+    footerStyle: footerStyle,
     table: table,
     enableSorting: !!enableSorting,
     enableColumnFiltering: !!enableColumnFiltering,
     stickyHeader: !!stickyHeader,
+    stickyFooter: !!stickyFooter,
     children: [/*#__PURE__*/jsxs(TableWrapper, {
       className: "table-wrapper",
       style: tableWrapperStyle,
@@ -393,6 +402,15 @@ function EdsDataGrid({
             onClick: onRowClick ? event => onRowClick(row, event) : undefined,
             onCellClick: onCellClick
           }, row.id))]
+        }), enableFooter && /*#__PURE__*/jsx(Table.Foot, {
+          sticky: stickyFooter,
+          "data-testid": "eds-grid-footer",
+          children: table.getFooterGroups().map(footerGroup => /*#__PURE__*/jsx(TableFooterRow, {
+            table: table,
+            footerGroup: footerGroup,
+            columnResizeMode: columnResizeMode,
+            deltaOffset: table.getState().columnSizingInfo.deltaOffset
+          }, footerGroup.id))
         })]
       }), externalPaginator ? externalPaginator : enablePagination && /*#__PURE__*/jsx("div", {
         style: {

package/dist/esm/EdsDataGridContext.js

@@ -5,6 +5,7 @@ import { jsx } from 'react/jsx-runtime';
 const EdsDataGridContext = /*#__PURE__*/createContext({
   enableSorting: false,
   stickyHeader: false,
+  stickyFooter: false,
   enableColumnFiltering: false,
   table: null
 });

package/dist/esm/components/Resizer.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+const ResizeInner = styled.div.withConfig({
+  displayName: "Resizer__ResizeInner",
+  componentId: "sc-plcbjs-0"
+})(["width:2px;opacity:0;height:100%;"]);
+const Resizer = styled.div.withConfig({
+  displayName: "Resizer",
+  componentId: "sc-plcbjs-1"
+})(["transform:", ";", "{opacity:", ";}position:absolute;right:0;top:0;height:100%;width:5px;cursor:col-resize;user-select:none;touch-action:none;display:flex;justify-content:flex-end;"], props => props.$columnResizeMode === 'onEnd' ? 'translateX(0px)' : 'none', ResizeInner, props => props.$isResizing ? 1 : 0);
+
+export { ResizeInner, Resizer };

package/dist/esm/components/TableCell.js

@@ -0,0 +1,19 @@
+import { Table } from '@equinor/eds-core-react';
+import { tokens } from '@equinor/eds-tokens';
+import styled from 'styled-components';
+import { ResizeInner } from './Resizer.js';
+
+const TableCell = styled(Table.Cell).withConfig({
+  displayName: "TableCell",
+  componentId: "sc-1g0k23m-0"
+})(["font-weight:bold;position:", ";top:0;", " ", ";&:hover ", "{background:", ";opacity:1;}"], p => p.$sticky || p.$pinned ? 'sticky' : 'relative', p => {
+  if (p.$pinned) {
+    return `${p.$pinned}: ${p.$offset}px;`;
+  }
+  return '';
+}, p => {
+  if (p.$sticky && p.$pinned) return 'z-index: 13';
+  if (p.$sticky || p.$pinned) return 'z-index: 12';
+}, ResizeInner, tokens.colors.interactive.primary__hover.rgba);
+
+export { TableCell };

package/dist/esm/components/TableFooterCell.js

@@ -0,0 +1,69 @@
+import { flexRender } from '@tanstack/react-table';
+import { useTableContext } from '../EdsDataGridContext.js';
+import { useMemo } from 'react';
+import { SortIndicator } from './SortIndicator.js';
+import { Resizer, ResizeInner } from './Resizer.js';
+import { TableCell } from './TableCell.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function TableFooterCell({
+  footer,
+  columnResizeMode
+}) {
+  const ctx = useTableContext();
+  const table = ctx.table;
+  const pinned = footer.column.getIsPinned();
+  const offset = useMemo(() => {
+    if (!pinned) {
+      return null;
+    }
+    return pinned === 'left' ? footer.getStart() : table.getTotalSize() - footer.getStart() - footer.getSize();
+  }, [pinned, footer, table]);
+  return footer.isPlaceholder ? /*#__PURE__*/jsx(TableCell, {
+    $sticky: ctx.stickyFooter,
+    $offset: offset,
+    $pinned: pinned,
+    className: ctx.footerClass ? ctx.footerClass(footer.column) : '',
+    style: {
+      ...(ctx.footerStyle ? ctx.footerStyle(footer.column) : {})
+    },
+    "aria-hidden": true
+  }) : /*#__PURE__*/jsxs(TableCell, {
+    $sticky: ctx.stickyFooter,
+    $offset: offset,
+    $pinned: pinned,
+    className: ctx.footerClass ? ctx.footerClass(footer.column) : '',
+    onClick: footer.column.getToggleSortingHandler(),
+    colSpan: footer.colSpan,
+    style: {
+      width: footer.getSize(),
+      verticalAlign: ctx.enableColumnFiltering ? 'top' : 'middle',
+      ...(ctx.footerStyle ? ctx.footerStyle(footer.column) : {})
+    },
+    children: [/*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx("div", {
+        style: {
+          display: 'flex',
+          flexDirection: 'column'
+        },
+        children: /*#__PURE__*/jsx("span", {
+          className: "table-footer-cell-label",
+          children: flexRender(footer.column.columnDef.footer, footer.getContext())
+        })
+      }), !footer.column.columnDef.meta?.customFilterInput && /*#__PURE__*/jsx(SortIndicator, {
+        column: footer.column
+      })]
+    }), columnResizeMode && /*#__PURE__*/jsx(Resizer, {
+      onClick: e => e.stopPropagation(),
+      onMouseDown: footer.getResizeHandler(),
+      onTouchStart: footer.getResizeHandler(),
+      $isResizing: footer.column.getIsResizing(),
+      $columnResizeMode: columnResizeMode,
+      className: 'resize-handle',
+      "data-testid": 'resize-handle',
+      children: /*#__PURE__*/jsx(ResizeInner, {})
+    })]
+  }, footer.id);
+}
+
+export { TableFooterCell };

package/dist/esm/components/TableFooterRow.js

@@ -0,0 +1,21 @@
+import { Table } from '@equinor/eds-core-react';
+import { TableFooterCell } from './TableFooterCell.js';
+import { jsx } from 'react/jsx-runtime';
+
+function TableFooterRow({
+  footerGroup,
+  columnResizeMode,
+  deltaOffset,
+  table
+}) {
+  return /*#__PURE__*/jsx(Table.Row, {
+    children: footerGroup.headers.map(footer => /*#__PURE__*/jsx(TableFooterCell, {
+      footer: footer,
+      table: table,
+      columnResizeMode: columnResizeMode,
+      deltaOffset: deltaOffset
+    }, footer.id))
+  });
+}
+
+export { TableFooterRow };

package/dist/esm/components/TableHeaderCell.js

@@ -1,11 +1,10 @@
 import { flexRender } from '@tanstack/react-table';
-import { Table } from '@equinor/eds-core-react';
 import { useTableContext } from '../EdsDataGridContext.js';
-import styled from 'styled-components';
-import { tokens } from '@equinor/eds-tokens';
 import { useMemo } from 'react';
 import { FilterWrapper } from './FilterWrapper.js';
 import { SortIndicator } from './SortIndicator.js';
+import { Resizer, ResizeInner } from './Resizer.js';
+import { TableCell } from './TableCell.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 const getSortLabel = sorted => {
@@ -14,26 +13,6 @@ const getSortLabel = sorted => {
   }
   return 'none';
 };
-const ResizeInner = styled.div.withConfig({
-  displayName: "TableHeaderCell__ResizeInner",
-  componentId: "sc-1n0j3v0-0"
-})(["width:2px;opacity:0;height:100%;"]);
-const Resizer = styled.div.withConfig({
-  displayName: "TableHeaderCell__Resizer",
-  componentId: "sc-1n0j3v0-1"
-})(["transform:", ";", "{opacity:", ";}position:absolute;right:0;top:0;height:100%;width:5px;cursor:col-resize;user-select:none;touch-action:none;display:flex;justify-content:flex-end;"], props => props.$columnResizeMode === 'onEnd' ? 'translateX(0px)' : 'none', ResizeInner, props => props.$isResizing ? 1 : 0);
-const Cell = styled(Table.Cell).withConfig({
-  displayName: "TableHeaderCell__Cell",
-  componentId: "sc-1n0j3v0-2"
-})(["font-weight:bold;position:", ";top:0;", " ", ";&:hover ", "{background:", ";opacity:1;}"], p => p.$sticky || p.$pinned ? 'sticky' : 'relative', p => {
-  if (p.$pinned) {
-    return `${p.$pinned}: ${p.$offset}px;`;
-  }
-  return '';
-}, p => {
-  if (p.$sticky && p.$pinned) return 'z-index: 13';
-  if (p.$sticky || p.$pinned) return 'z-index: 12';
-}, ResizeInner, tokens.colors.interactive.primary__hover.rgba);
 function TableHeaderCell({
   header,
   columnResizeMode
@@ -47,7 +26,7 @@ function TableHeaderCell({
     }
     return pinned === 'left' ? header.getStart() : table.getTotalSize() - header.getStart() - header.getSize();
   }, [pinned, header, table]);
-  return header.isPlaceholder ? /*#__PURE__*/jsx(Cell, {
+  return header.isPlaceholder ? /*#__PURE__*/jsx(TableCell, {
     $sticky: ctx.stickyHeader,
     $offset: offset,
     $pinned: pinned,
@@ -56,7 +35,7 @@ function TableHeaderCell({
       ...(ctx.headerStyle ? ctx.headerStyle(header.column) : {})
     },
     "aria-hidden": true
-  }) : /*#__PURE__*/jsxs(Cell, {
+  }) : /*#__PURE__*/jsxs(TableCell, {
     $sticky: ctx.stickyHeader,
     $offset: offset,
     $pinned: pinned,
@@ -79,7 +58,7 @@ function TableHeaderCell({
           className: "table-header-cell-label",
           children: flexRender(header.column.columnDef.header, header.getContext())
         })
-      }), header.column.columnDef.meta?.customFilterInput && /*#__PURE__*/jsx(SortIndicator, {
+      }), !header.column.columnDef.meta?.customFilterInput && /*#__PURE__*/jsx(SortIndicator, {
         column: header.column
       }), header.column.getCanFilter() && !header.column.columnDef.meta?.customFilterInput ?
       /*#__PURE__*/

package/dist/types/EdsDataGrid.d.ts

@@ -1,2 +1,2 @@
 import { EdsDataGridProps } from './EdsDataGridProps';
-export declare function EdsDataGrid<T>({ rows, columns, columnResizeMode, pageSize, rowSelection, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, selectedRows, rowSelectionState, enableColumnFiltering, debug, enablePagination, enableSorting, stickyHeader, onSelectRow, onRowSelectionChange, caption, enableVirtual, virtualHeight, columnVisibility, columnVisibilityChange, emptyMessage, columnOrder, cellClass, cellStyle, rowClass, rowStyle, headerClass, headerStyle, externalPaginator, onSortingChange, manualSorting, sortingState, columnPinState, scrollbarHorizontal, width, minWidth, height, getRowId, rowVirtualizerInstanceRef, columnSizing, onColumnResize, expansionState, setExpansionState, getSubRows, defaultColumn, onRowClick, onCellClick, }: EdsDataGridProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function EdsDataGrid<T>({ rows, columns, columnResizeMode, pageSize, rowSelection, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, selectedRows, rowSelectionState, enableColumnFiltering, debug, enablePagination, enableSorting, stickyHeader, stickyFooter, onSelectRow, onRowSelectionChange, caption, enableVirtual, virtualHeight, columnVisibility, columnVisibilityChange, emptyMessage, columnOrder, cellClass, cellStyle, rowClass, rowStyle, headerClass, headerStyle, footerClass, footerStyle, externalPaginator, onSortingChange, manualSorting, sortingState, columnPinState, scrollbarHorizontal, width, minWidth, height, getRowId, rowVirtualizerInstanceRef, columnSizing, onColumnResize, expansionState, setExpansionState, getSubRows, defaultColumn, onRowClick, onCellClick, enableFooter, }: EdsDataGridProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/types/EdsDataGridContext.d.ts

@@ -3,6 +3,7 @@ import { Column, Row, Table as TanStackTable } from '@tanstack/react-table';
 type Context<T> = {
     enableSorting: boolean;
     stickyHeader: boolean;
+    stickyFooter: boolean;
     enableColumnFiltering: boolean;
     table: TanStackTable<T> | null;
     cellClass?: (row: Row<T>, columnId: string) => string;
@@ -11,6 +12,8 @@ type Context<T> = {
     rowStyle?: (row: Row<T>) => CSSProperties;
     headerClass?: (column: Column<T>) => string;
     headerStyle?: (column: Column<T>) => CSSProperties;
+    footerClass?: (column: Column<T>) => string;
+    footerStyle?: (column: Column<T>) => CSSProperties;
 };
 export declare const EdsDataGridContext: import("react").Context<Context<any>>;
 export declare function TableProvider<T>({ children, ...props }: Context<T> & {

package/dist/types/EdsDataGridProps.d.ts

@@ -26,6 +26,11 @@ type BaseProps<T> = {
      * @default false
      */
     stickyHeader?: boolean;
+    /**
+     * Make the table footer sticky
+     * @default false
+     */
+    stickyFooter?: boolean;
     /**
      * Element to display in Table.Caption
      * @default undefined
@@ -75,6 +80,10 @@ type BaseProps<T> = {
      * @link [API Docs](https://tanstack.com/table/v8/docs/api/core/table#defaultcolumn)
      */
     defaultColumn?: Partial<ColumnDef<T, unknown>>;
+    /**
+     * Optional props to show table footer
+     */
+    enableFooter?: boolean;
 };
 type RowSelectionProps<T> = {
     /**
@@ -157,6 +166,16 @@ type StyleProps<T> = {
      * @param column
      */
     headerStyle?: (column: Column<T>) => CSSProperties;
+    /**
+     * Function that can be used to set custom classes on a footer cell
+     * @param column
+     */
+    footerClass?: (column: Column<T>) => string;
+    /**
+     * Function that can be used to set custom styles on a footer cell
+     * @param column
+     */
+    footerStyle?: (column: Column<T>) => CSSProperties;
 };
 type FilterProps = {
     /**

package/dist/types/components/Resizer.d.ts

@@ -0,0 +1,8 @@
+import { ColumnResizeMode } from '@tanstack/react-table';
+type ResizeProps = {
+    $columnResizeMode: ColumnResizeMode | null | undefined;
+    $isResizing: boolean;
+};
+export declare const ResizeInner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Resizer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ResizeProps>> & string;
+export {};

package/dist/types/components/TableCell.d.ts

@@ -0,0 +1,18 @@
+import { ColumnPinningPosition } from '@tanstack/react-table';
+export declare const TableCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<(Omit<{
+    variant?: import("@equinor/eds-core-react/dist/types/components/Table/Table.types").Variants;
+    color?: import("@equinor/eds-core-react/dist/types/components/Table/Table.types").Colors;
+    sort?: React.AriaAttributes["aria-sort"];
+} & import("react").TdHTMLAttributes<HTMLTableCellElement> & import("react").RefAttributes<HTMLTableCellElement>, "ref"> & {
+    ref?: import("react").Ref<HTMLTableCellElement>;
+}) | (Omit<{
+    variant?: import("@equinor/eds-core-react/dist/types/components/Table/Table.types").Variants;
+    color?: import("@equinor/eds-core-react/dist/types/components/Table/Table.types").Colors;
+    sort?: React.AriaAttributes["aria-sort"];
+} & import("react").ThHTMLAttributes<HTMLTableCellElement> & import("react").RefAttributes<HTMLTableCellElement>, "ref"> & {
+    ref?: import("react").Ref<HTMLTableCellElement>;
+}), {
+    $sticky: boolean;
+    $pinned: ColumnPinningPosition;
+    $offset: number;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<import("@equinor/eds-core-react").CellProps & import("react").RefAttributes<HTMLTableCellElement>>, keyof import("react").Component<any, {}, any>>;

package/dist/types/components/TableFooterCell.d.ts

@@ -0,0 +1,9 @@
+import { ColumnResizeMode, Header, Table as TanStackTable } from '@tanstack/react-table';
+type Props<T> = {
+    footer: Header<T, unknown>;
+    columnResizeMode: ColumnResizeMode | null | undefined;
+    deltaOffset: number | null;
+    table: TanStackTable<T>;
+};
+export declare function TableFooterCell<T>({ footer, columnResizeMode }: Props<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/TableFooterRow.d.ts

@@ -0,0 +1,9 @@
+import { ColumnResizeMode, HeaderGroup, Table as TanStackTable } from '@tanstack/react-table';
+type Props<T> = {
+    footerGroup: HeaderGroup<T>;
+    columnResizeMode?: ColumnResizeMode | null;
+    deltaOffset: number | null;
+    table: TanStackTable<T>;
+};
+export declare function TableFooterRow<T>({ footerGroup, columnResizeMode, deltaOffset, table, }: Props<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-data-grid-react",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "A feature-rich data-grid written in React, implementing the Equinor Design System",
   "license": "MIT",
   "types": "dist/types/index.d.ts",
@@ -14,60 +14,60 @@
     "email": "fg_eds@equinor.com"
   },
   "peerDependencies": {
-    "@equinor/eds-core-react": ">=0.36.0",
+    "@equinor/eds-core-react": ">=0.42.0",
     "react": ">=16.8",
     "react-dom": ">=16.8",
     "styled-components": ">=5.1"
   },
   "dependencies": {
-    "@tanstack/react-table": "^8.16.0",
-    "@tanstack/react-virtual": "^3.5.0",
+    "@tanstack/react-table": "^8.20.1",
+    "@tanstack/react-virtual": "^3.10.6",
+    "@equinor/eds-tokens": "0.9.2",
     "@equinor/eds-icons": "^0.21.0",
-    "@equinor/eds-utils": "^0.8.5",
-    "@equinor/eds-tokens": "0.9.2"
+    "@equinor/eds-utils": "^0.8.5"
   },
   "devDependencies": {
     "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
-    "@storybook/addon-a11y": "^8.0.2",
-    "@storybook/addon-actions": "^8.0.2",
-    "@storybook/addon-docs": "^8.0.2",
-    "@storybook/addon-essentials": "^8.0.2",
-    "@storybook/addon-links": "^8.0.2",
-    "@storybook/blocks": "^8.0.2",
-    "@storybook/preview-api": "^8.0.2",
-    "@storybook/react": "^8.0.2",
-    "@storybook/react-vite": "^8.0.2",
-    "@testing-library/dom": "^9.3.3",
-    "@testing-library/jest-dom": "^6.1.4",
-    "@testing-library/react": "14.0.0",
-    "@testing-library/user-event": "^14.5.1",
-    "@types/jest": "^29.5.6",
-    "@types/node": "20.8.9",
-    "@types/ramda": "^0.30.0",
-    "@types/react": "^18.2.33",
-    "@types/react-dom": "^18.2.14",
+    "@storybook/addon-a11y": "^8.2.8",
+    "@storybook/addon-actions": "^8.2.8",
+    "@storybook/addon-docs": "^8.2.8",
+    "@storybook/addon-essentials": "^8.2.8",
+    "@storybook/addon-links": "^8.2.8",
+    "@storybook/blocks": "^8.2.8",
+    "@storybook/preview-api": "^8.2.8",
+    "@storybook/react": "^8.2.8",
+    "@storybook/react-vite": "^8.2.8",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/react": "16.0.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.12",
+    "@types/node": "22.1.0",
+    "@types/ramda": "^0.30.1",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "babel-loader": "^9.1.3",
     "babel-plugin-styled-components": "^2.1.4",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "jest-styled-components": "^7.2.0",
     "js-file-download": "^0.4.12",
-    "postcss": "^8.4.31",
-    "ramda": "^0.30.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-hook-form": "^7.47.0",
-    "rollup": "^4.2.0",
+    "postcss": "^8.4.41",
+    "ramda": "^0.30.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.52.2",
+    "rollup": "^4.20.0",
     "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-postcss": "^4.0.2",
-    "storybook": "^8.0.2",
-    "styled-components": "6.1.11",
-    "ts-jest": "29.1.1",
-    "ts-node": "10.9.1",
-    "tsc-watch": "^6.0.4",
-    "typescript": "~5.2.2"
+    "storybook": "^8.2.8",
+    "styled-components": "6.1.12",
+    "ts-jest": "29.2.4",
+    "ts-node": "10.9.2",
+    "tsc-watch": "^6.2.0",
+    "typescript": "~5.5.4"
   },
   "homepage": "https://eds.equinor.com",
   "repository": {
@@ -85,10 +85,6 @@
     "react",
     "data grid"
   ],
-  "engines": {
-    "pnpm": ">=4",
-    "node": ">=10.0.0"
-  },
   "scripts": {
     "build": "rollup -c --bundleConfigAsCjs && tsc -p tsconfig.build.json",
     "test": "tsc -p tsconfig.spec.json && jest",