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

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

@@ -386,6 +386,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 +449,15 @@ function EdsDataGrid({
   minWidth,
   height,
   getRowId,
-  rowVirtualizerInstanceRef
+  rowVirtualizerInstanceRef,
+  columnSizing,
+  onColumnResize
 }) {
   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([]);
@@ -492,6 +521,7 @@ function EdsDataGrid({
     data: rows,
     columns: _columns,
     defaultColumn: {
+      size: 150,
       cell: context => {
         return /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Typography, {
           style: {
@@ -506,11 +536,22 @@ 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
     },
     onSortingChange: changes => {
       if (onSortingChange) {
@@ -596,14 +637,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 +688,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 +771,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

@@ -5,6 +5,8 @@ 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,15 @@ function EdsDataGrid({
   minWidth,
   height,
   getRowId,
-  rowVirtualizerInstanceRef
+  rowVirtualizerInstanceRef,
+  columnSizing,
+  onColumnResize
 }) {
   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([]);
@@ -113,6 +118,7 @@ function EdsDataGrid({
     data: rows,
     columns: _columns,
     defaultColumn: {
+      size: 150,
       cell: context => {
         return /*#__PURE__*/jsx(Typography, {
           style: {
@@ -127,11 +133,22 @@ 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
     },
     onSortingChange: changes => {
       if (onSortingChange) {
@@ -217,14 +234,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 +285,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 +368,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/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, }: 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, OnChangeFn, Row, RowSelectionState, SortingState, TableOptions } from '@tanstack/react-table';
 import { Virtualizer } from '@tanstack/react-virtual';
 import { CSSProperties, MutableRefObject, ReactElement } from 'react';
 type BaseProps<T> = {
@@ -181,6 +181,8 @@ type SortProps = {
 };
 type ColumnProps = {
     columnPinState?: ColumnPinningState;
+    columnSizing?: ColumnSizingState;
+    onColumnResize?: (e: ColumnSizingState) => void;
 };
 type RefProps = {
     rowVirtualizerInstanceRef?: MutableRefObject<Virtualizer<HTMLDivElement, Element> | null>;

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.3.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-virtual": "^3.0.4",
     "@equinor/eds-icons": "^0.21.0",
-    "@equinor/eds-tokens": "0.9.2",
-    "@equinor/eds-utils": "^0.8.3"
+    "@equinor/eds-utils": "^0.8.4",
+    "@equinor/eds-tokens": "0.9.2"
   },
   "devDependencies": {
     "@mdx-js/react": "2.3.0",