@equinor/eds-data-grid-react 0.3.0-rc → 0.4.0

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

@@ -219,7 +219,7 @@ const Resizer = styled__default.default.div.withConfig({
 const Cell = styled__default.default(edsCoreReact.Table.Cell).withConfig({
   displayName: "TableHeaderCell__Cell",
   componentId: "sc-1n0j3v0-2"
-})(["font-weight:bold;height:30px;position:", ";top:0;", " ", ";&:hover ", "{background:", ";opacity:1;}"], p => p.$sticky || p.$pinned ? 'sticky' : 'relative', p => {
+})(["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;`;
   }
@@ -257,7 +257,6 @@ function TableHeaderCell({
     className: ctx.headerClass ? ctx.headerClass(header.column) : '',
     "aria-sort": getSortLabel(header.column.getIsSorted()),
     onClick: header.column.getToggleSortingHandler(),
-    key: header.id,
     colSpan: header.colSpan,
     style: {
       width: header.getSize(),
@@ -302,7 +301,7 @@ function TableHeaderCell({
       "data-testid": 'resize-handle',
       children: /*#__PURE__*/jsxRuntime.jsx(ResizeInner, {})
     })]
-  });
+  }, header.id);
 }
 
 function TableHeaderRow({
@@ -350,14 +349,13 @@ function TableBodyCell({
     $pinned: pinned,
     $offset: pinnedOffset,
     className: cellClass ? cellClass(cell.row, cell.column.id) : '',
-    key: cell.id,
     style: {
       width: cell.column.getSize(),
       maxWidth: cell.column.getSize(),
       ...(cellStyle?.(cell.row, cell.column.id) ?? {})
     },
     children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())
-  });
+  }, cell.id);
 }
 
 function TableRow({
@@ -386,6 +384,32 @@ const StyledTableRow = styled__default.default(edsCoreReact.Table.Row).withConfi
   componentId: "sc-1vjfq5p-0"
 })(["background-color:inherit;"]);
 
+/**
+ * Function returning wether a string only contains number. Allows leading or trailing spaces.
+ *
+ * Examples:
+ *
+ * ```
+ * isNumberOnlyString("10") // true
+ * isNumberOnlyString("10.10") // true
+ * isNumberOnlyString("10px") // false
+ * isNumberOnlyString("10%") // false
+ * isNumberOnlyString("10 ") // true
+ * ```
+ *
+ * @param number
+ * @returns
+ */
+function isNumberOnlyString(number) {
+  return !isNaN(Number(number)) && !isNaN(parseFloat(number));
+}
+function addPxSuffixIfInputHasNoPrefix(size) {
+  if (typeof size === 'number' || isNumberOnlyString(size)) {
+    return `${size}px`;
+  }
+  return size;
+}
+
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 function EdsDataGrid({
   rows,
@@ -423,12 +447,19 @@ function EdsDataGrid({
   minWidth,
   height,
   getRowId,
-  rowVirtualizerInstanceRef
+  rowVirtualizerInstanceRef,
+  columnSizing,
+  onColumnResize,
+  expansionState,
+  setExpansionState,
+  getSubRows,
+  defaultColumn
 }) {
   const [sorting, setSorting] = react.useState(sortingState ?? []);
   const [selection, setSelection] = react.useState(selectedRows ?? {});
   const [columnPin, setColumnPin] = react.useState(columnPinState ?? {});
   const [columnFilters, setColumnFilters] = react.useState([]);
+  const [internalColumnSize, setInternalColumnSize] = react.useState(columnSizing ?? {});
   const [visible, setVisible] = react.useState(columnVisibility ?? {});
   const [globalFilter, setGlobalFilter] = react.useState('');
   const [columnOrderState, setColumnOrderState] = react.useState([]);
@@ -436,6 +467,11 @@ function EdsDataGrid({
     pageIndex: 0,
     pageSize: pageSize ?? 25
   });
+  react.useEffect(() => {
+    if (virtualHeight) {
+      console.warn(`virtualHeight prop is deprecated and will be removed in a later version. Please update your code to use height instead.`);
+    }
+  }, [virtualHeight]);
   react.useEffect(() => {
     setVisible(columnVisibility ?? {});
   }, [columnVisibility, setVisible]);
@@ -491,7 +527,8 @@ function EdsDataGrid({
   const options = {
     data: rows,
     columns: _columns,
-    defaultColumn: {
+    defaultColumn: defaultColumn ?? {
+      size: 150,
       cell: context => {
         return /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Typography, {
           style: {
@@ -506,12 +543,27 @@ function EdsDataGrid({
       }
     },
     columnResizeMode: columnResizeMode,
+    onColumnSizingChange: change => {
+      if (typeof change === 'function') {
+        setInternalColumnSize(change(internalColumnSize));
+      } else {
+        setInternalColumnSize(change);
+      }
+      if (onColumnResize) {
+        onColumnResize(internalColumnSize);
+      }
+    },
     state: {
       sorting,
       columnPinning: columnPin,
       rowSelection: selection,
-      columnOrder: columnOrderState
+      columnOrder: columnOrderState,
+      columnSizing: columnSizing ?? internalColumnSize,
+      expanded: expansionState
     },
+    getSubRows: getSubRows,
+    onExpandedChange: setExpansionState,
+    getExpandedRowModel: reactTable.getExpandedRowModel(),
     onSortingChange: changes => {
       if (onSortingChange) {
         onSortingChange(changes);
@@ -596,14 +648,14 @@ function EdsDataGrid({
     }));
   }, [pageSize]);
   const table = reactTable.useReactTable(options);
-  let parentRefStyle = {};
+  let tableWrapperStyle = {};
 
   /**
    * Style the parent container to enable virtualization.
    * By not setting this, the virtual-scroll will always render every row, reducing computational overhead if turned off.
    */
   if (enableVirtual) {
-    parentRefStyle = {
+    tableWrapperStyle = {
       height: height ?? virtualHeight ?? 500,
       overflow: 'auto',
       position: 'relative'
@@ -647,16 +699,13 @@ function EdsDataGrid({
     enableSorting: !!enableSorting,
     enableColumnFiltering: !!enableColumnFiltering,
     stickyHeader: !!stickyHeader,
-    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+    children: [/*#__PURE__*/jsxRuntime.jsxs(TableWrapper, {
       className: "table-wrapper",
-      style: {
-        height: height ?? 'auto',
-        ...parentRefStyle,
-        width: scrollbarHorizontal ? width ?? '100%' : 'auto',
-        overflow: 'auto',
-        contain: 'layout paint style'
-      },
+      style: tableWrapperStyle,
       ref: parentRef,
+      $height: height,
+      $width: width,
+      $scrollbarHorizontal: scrollbarHorizontal,
       children: [/*#__PURE__*/jsxRuntime.jsxs(edsCoreReact.Table, {
         className: Object.entries(classList).filter(([, k]) => k).map(([k]) => k).join(' '),
         style: {
@@ -733,5 +782,17 @@ function EdsDataGrid({
     })]
   });
 }
+const TableWrapper = styled__default.default.div.withConfig({
+  displayName: "EdsDataGrid__TableWrapper",
+  componentId: "sc-82fj3f-0"
+})(["height:", ";width:", ";overflow:auto;contain:", ";"], ({
+  $height
+}) => addPxSuffixIfInputHasNoPrefix($height) ?? 'auto', ({
+  $scrollbarHorizontal,
+  $width
+}) => $scrollbarHorizontal ? addPxSuffixIfInputHasNoPrefix($width) ?? '100%' : 'auto', ({
+  $height,
+  $width
+}) => Boolean($height) && Boolean($width) ? 'strict' : 'unset');
 
 exports.EdsDataGrid = EdsDataGrid;

package/dist/esm/EdsDataGrid.js

@@ -1,10 +1,12 @@
 import { Typography, useEds, Table, Pagination } from '@equinor/eds-core-react';
-import { getCoreRowModel, getSortedRowModel, getFacetedRowModel, getFacetedUniqueValues, getFacetedMinMaxValues, getFilteredRowModel, getPaginationRowModel, useReactTable } from '@tanstack/react-table';
+import { getExpandedRowModel, getCoreRowModel, getSortedRowModel, getFacetedRowModel, getFacetedUniqueValues, getFacetedMinMaxValues, getFilteredRowModel, getPaginationRowModel, useReactTable } from '@tanstack/react-table';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { useState, useEffect, useMemo, useRef, useCallback } from 'react';
 import { TableHeaderRow } from './components/TableHeaderRow.js';
 import { TableRow } from './components/TableRow.js';
 import { TableProvider } from './EdsDataGridContext.js';
+import styled from 'styled-components';
+import { addPxSuffixIfInputHasNoPrefix } from './utils.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
@@ -44,12 +46,19 @@ function EdsDataGrid({
   minWidth,
   height,
   getRowId,
-  rowVirtualizerInstanceRef
+  rowVirtualizerInstanceRef,
+  columnSizing,
+  onColumnResize,
+  expansionState,
+  setExpansionState,
+  getSubRows,
+  defaultColumn
 }) {
   const [sorting, setSorting] = useState(sortingState ?? []);
   const [selection, setSelection] = useState(selectedRows ?? {});
   const [columnPin, setColumnPin] = useState(columnPinState ?? {});
   const [columnFilters, setColumnFilters] = useState([]);
+  const [internalColumnSize, setInternalColumnSize] = useState(columnSizing ?? {});
   const [visible, setVisible] = useState(columnVisibility ?? {});
   const [globalFilter, setGlobalFilter] = useState('');
   const [columnOrderState, setColumnOrderState] = useState([]);
@@ -57,6 +66,11 @@ function EdsDataGrid({
     pageIndex: 0,
     pageSize: pageSize ?? 25
   });
+  useEffect(() => {
+    if (virtualHeight) {
+      console.warn(`virtualHeight prop is deprecated and will be removed in a later version. Please update your code to use height instead.`);
+    }
+  }, [virtualHeight]);
   useEffect(() => {
     setVisible(columnVisibility ?? {});
   }, [columnVisibility, setVisible]);
@@ -112,7 +126,8 @@ function EdsDataGrid({
   const options = {
     data: rows,
     columns: _columns,
-    defaultColumn: {
+    defaultColumn: defaultColumn ?? {
+      size: 150,
       cell: context => {
         return /*#__PURE__*/jsx(Typography, {
           style: {
@@ -127,12 +142,27 @@ function EdsDataGrid({
       }
     },
     columnResizeMode: columnResizeMode,
+    onColumnSizingChange: change => {
+      if (typeof change === 'function') {
+        setInternalColumnSize(change(internalColumnSize));
+      } else {
+        setInternalColumnSize(change);
+      }
+      if (onColumnResize) {
+        onColumnResize(internalColumnSize);
+      }
+    },
     state: {
       sorting,
       columnPinning: columnPin,
       rowSelection: selection,
-      columnOrder: columnOrderState
+      columnOrder: columnOrderState,
+      columnSizing: columnSizing ?? internalColumnSize,
+      expanded: expansionState
     },
+    getSubRows: getSubRows,
+    onExpandedChange: setExpansionState,
+    getExpandedRowModel: getExpandedRowModel(),
     onSortingChange: changes => {
       if (onSortingChange) {
         onSortingChange(changes);
@@ -217,14 +247,14 @@ function EdsDataGrid({
     }));
   }, [pageSize]);
   const table = useReactTable(options);
-  let parentRefStyle = {};
+  let tableWrapperStyle = {};
 
   /**
    * Style the parent container to enable virtualization.
    * By not setting this, the virtual-scroll will always render every row, reducing computational overhead if turned off.
    */
   if (enableVirtual) {
-    parentRefStyle = {
+    tableWrapperStyle = {
       height: height ?? virtualHeight ?? 500,
       overflow: 'auto',
       position: 'relative'
@@ -268,16 +298,13 @@ function EdsDataGrid({
     enableSorting: !!enableSorting,
     enableColumnFiltering: !!enableColumnFiltering,
     stickyHeader: !!stickyHeader,
-    children: [/*#__PURE__*/jsxs("div", {
+    children: [/*#__PURE__*/jsxs(TableWrapper, {
       className: "table-wrapper",
-      style: {
-        height: height ?? 'auto',
-        ...parentRefStyle,
-        width: scrollbarHorizontal ? width ?? '100%' : 'auto',
-        overflow: 'auto',
-        contain: 'layout paint style'
-      },
+      style: tableWrapperStyle,
       ref: parentRef,
+      $height: height,
+      $width: width,
+      $scrollbarHorizontal: scrollbarHorizontal,
       children: [/*#__PURE__*/jsxs(Table, {
         className: Object.entries(classList).filter(([, k]) => k).map(([k]) => k).join(' '),
         style: {
@@ -354,5 +381,17 @@ function EdsDataGrid({
     })]
   });
 }
+const TableWrapper = styled.div.withConfig({
+  displayName: "EdsDataGrid__TableWrapper",
+  componentId: "sc-82fj3f-0"
+})(["height:", ";width:", ";overflow:auto;contain:", ";"], ({
+  $height
+}) => addPxSuffixIfInputHasNoPrefix($height) ?? 'auto', ({
+  $scrollbarHorizontal,
+  $width
+}) => $scrollbarHorizontal ? addPxSuffixIfInputHasNoPrefix($width) ?? '100%' : 'auto', ({
+  $height,
+  $width
+}) => Boolean($height) && Boolean($width) ? 'strict' : 'unset');
 
 export { EdsDataGrid };

package/dist/esm/components/TableBodyCell.js

@@ -34,14 +34,13 @@ function TableBodyCell({
     $pinned: pinned,
     $offset: pinnedOffset,
     className: cellClass ? cellClass(cell.row, cell.column.id) : '',
-    key: cell.id,
     style: {
       width: cell.column.getSize(),
       maxWidth: cell.column.getSize(),
       ...(cellStyle?.(cell.row, cell.column.id) ?? {})
     },
     children: flexRender(cell.column.columnDef.cell, cell.getContext())
-  });
+  }, cell.id);
 }
 
 export { TableBodyCell };

package/dist/esm/components/TableHeaderCell.js

@@ -25,7 +25,7 @@ const Resizer = styled.div.withConfig({
 const Cell = styled(Table.Cell).withConfig({
   displayName: "TableHeaderCell__Cell",
   componentId: "sc-1n0j3v0-2"
-})(["font-weight:bold;height:30px;position:", ";top:0;", " ", ";&:hover ", "{background:", ";opacity:1;}"], p => p.$sticky || p.$pinned ? 'sticky' : 'relative', p => {
+})(["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;`;
   }
@@ -63,7 +63,6 @@ function TableHeaderCell({
     className: ctx.headerClass ? ctx.headerClass(header.column) : '',
     "aria-sort": getSortLabel(header.column.getIsSorted()),
     onClick: header.column.getToggleSortingHandler(),
-    key: header.id,
     colSpan: header.colSpan,
     style: {
       width: header.getSize(),
@@ -108,7 +107,7 @@ function TableHeaderCell({
       "data-testid": 'resize-handle',
       children: /*#__PURE__*/jsx(ResizeInner, {})
     })]
-  });
+  }, header.id);
 }
 
 export { TableHeaderCell };

package/dist/esm/utils.js

@@ -0,0 +1,27 @@
+/**
+ * Function returning wether a string only contains number. Allows leading or trailing spaces.
+ *
+ * Examples:
+ *
+ * ```
+ * isNumberOnlyString("10") // true
+ * isNumberOnlyString("10.10") // true
+ * isNumberOnlyString("10px") // false
+ * isNumberOnlyString("10%") // false
+ * isNumberOnlyString("10 ") // true
+ * ```
+ *
+ * @param number
+ * @returns
+ */
+function isNumberOnlyString(number) {
+  return !isNaN(Number(number)) && !isNaN(parseFloat(number));
+}
+function addPxSuffixIfInputHasNoPrefix(size) {
+  if (typeof size === 'number' || isNumberOnlyString(size)) {
+    return `${size}px`;
+  }
+  return size;
+}
+
+export { addPxSuffixIfInputHasNoPrefix, isNumberOnlyString };

package/dist/types/EdsDataGrid.d.ts

@@ -1,2 +1,2 @@
 import { EdsDataGridProps } from './EdsDataGridProps';
-export declare function EdsDataGrid<T>({ rows, columns, columnResizeMode, pageSize, rowSelection, selectedRows, enableColumnFiltering, debug, enablePagination, enableSorting, stickyHeader, onSelectRow, caption, enableVirtual, virtualHeight, columnVisibility, columnVisibilityChange, emptyMessage, columnOrder, cellClass, cellStyle, rowClass, rowStyle, headerClass, headerStyle, externalPaginator, onSortingChange, manualSorting, sortingState, columnPinState, scrollbarHorizontal, width, minWidth, height, getRowId, rowVirtualizerInstanceRef, }: EdsDataGridProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function EdsDataGrid<T>({ rows, columns, columnResizeMode, pageSize, rowSelection, selectedRows, enableColumnFiltering, debug, enablePagination, enableSorting, stickyHeader, onSelectRow, 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, }: EdsDataGridProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/types/EdsDataGridProps.d.ts

@@ -1,4 +1,4 @@
-import { Column, ColumnDef, ColumnPinningState, ColumnResizeMode, OnChangeFn, Row, RowSelectionState, SortingState, TableOptions } from '@tanstack/react-table';
+import { Column, ColumnDef, ColumnPinningState, ColumnResizeMode, ColumnSizingState, ExpandedState, OnChangeFn, Row, RowSelectionState, SortingState, TableOptions } from '@tanstack/react-table';
 import { Virtualizer } from '@tanstack/react-virtual';
 import { CSSProperties, MutableRefObject, ReactElement } from 'react';
 type BaseProps<T> = {
@@ -84,6 +84,11 @@ type BaseProps<T> = {
      * @link [Guide](https://tanstack.com/table/v8/docs/guide/tables)
      */
     getRowId?: TableOptions<T>['getRowId'];
+    /**
+     * Optional prop to override the default column setup (cell, header, size etc.)
+     * @link [API Docs](https://tanstack.com/table/v8/docs/api/core/table#defaultcolumn)
+     */
+    defaultColumn?: Partial<ColumnDef<T, unknown>>;
 };
 type StyleProps<T> = {
     /**
@@ -155,6 +160,7 @@ type VirtualProps = {
     enableVirtual?: boolean;
     /**
      * The height of the virtualized table in pixels.
+     * @deprecated Use `height` prop over virtualHeight, this will be removed in a later version
      * @default 500
      */
     virtualHeight?: number;
@@ -181,11 +187,18 @@ type SortProps = {
 };
 type ColumnProps = {
     columnPinState?: ColumnPinningState;
+    columnSizing?: ColumnSizingState;
+    onColumnResize?: (e: ColumnSizingState) => void;
 };
 type RefProps = {
     rowVirtualizerInstanceRef?: MutableRefObject<Virtualizer<HTMLDivElement, Element> | null>;
 };
-export type EdsDataGridProps<T> = BaseProps<T> & StyleProps<T> & SortProps & FilterProps & PagingProps & ColumnProps & VirtualProps & RefProps & {
+type ExpansionProps<T> = {
+    expansionState?: ExpandedState;
+    setExpansionState?: React.Dispatch<React.SetStateAction<ExpandedState>>;
+    getSubRows?: (row: T, rowIndex: number) => Array<T>;
+};
+export type EdsDataGridProps<T> = BaseProps<T> & StyleProps<T> & SortProps & FilterProps & PagingProps & ColumnProps & VirtualProps & RefProps & ExpansionProps<T> & {
     /**
      * Which columns are visible. If not set, all columns are visible. undefined means that the column is visible.
      * @default undefined

package/dist/types/utils.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Function returning wether a string only contains number. Allows leading or trailing spaces.
+ *
+ * Examples:
+ *
+ * ```
+ * isNumberOnlyString("10") // true
+ * isNumberOnlyString("10.10") // true
+ * isNumberOnlyString("10px") // false
+ * isNumberOnlyString("10%") // false
+ * isNumberOnlyString("10 ") // true
+ * ```
+ *
+ * @param number
+ * @returns
+ */
+export declare function isNumberOnlyString(number: string): boolean;
+export declare function addPxSuffixIfInputHasNoPrefix(size: number | string): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-data-grid-react",
-  "version": "0.3.0-rc",
+  "version": "0.4.0",
   "description": "A feature-rich data-grid written in React, implementing the Equinor Design System",
   "license": "MIT",
   "types": "dist/types/index.d.ts",
@@ -14,17 +14,17 @@
     "email": "fg_eds@equinor.com"
   },
   "peerDependencies": {
+    "@equinor/eds-core-react": ">=0.36.0",
     "react": ">=16.8",
     "react-dom": ">=16.8",
-    "styled-components": ">=4.2",
-    "@equinor/eds-core-react": "^0.35.1"
+    "styled-components": ">=4.2"
   },
   "dependencies": {
-    "@tanstack/react-table": "^8.10.7",
-    "@tanstack/react-virtual": "^3.0.1",
+    "@tanstack/react-table": "^8.13.2",
+    "@tanstack/react-virtual": "^3.1.3",
     "@equinor/eds-icons": "^0.21.0",
     "@equinor/eds-tokens": "0.9.2",
-    "@equinor/eds-utils": "^0.8.3"
+    "@equinor/eds-utils": "^0.8.4"
   },
   "devDependencies": {
     "@mdx-js/react": "2.3.0",