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

package/dist/esm/EdsDataGrid.js

@@ -1,185 +1,187 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { Typography, useEds, Table, Pagination } from '@equinor/eds-core-react';
 import { getCoreRowModel, getSortedRowModel, getFacetedRowModel, getFacetedUniqueValues, getFacetedMinMaxValues, getFilteredRowModel, getPaginationRowModel, useReactTable } from '@tanstack/react-table';
-import { useEds, Table, Pagination } from '@equinor/eds-core-react';
+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 { useVirtualizer } from '@tanstack/react-virtual';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import styled from 'styled-components';
+import { addPxSuffixIfInputHasNoPrefix } from './utils.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
-function EdsDataGrid(_ref) {
-  var rows = _ref.rows,
-    columns = _ref.columns,
-    columnResizeMode = _ref.columnResizeMode,
-    pageSize = _ref.pageSize,
-    rowSelection = _ref.rowSelection,
-    selectedRows = _ref.selectedRows,
-    enableColumnFiltering = _ref.enableColumnFiltering,
-    debug = _ref.debug,
-    enablePagination = _ref.enablePagination,
-    enableSorting = _ref.enableSorting,
-    stickyHeader = _ref.stickyHeader,
-    onSelectRow = _ref.onSelectRow,
-    caption = _ref.caption,
-    enableVirtual = _ref.enableVirtual,
-    virtualHeight = _ref.virtualHeight,
-    columnVisibility = _ref.columnVisibility,
-    columnVisibilityChange = _ref.columnVisibilityChange,
-    emptyMessage = _ref.emptyMessage,
-    columnOrder = _ref.columnOrder,
-    cellClass = _ref.cellClass,
-    cellStyle = _ref.cellStyle,
-    rowClass = _ref.rowClass,
-    rowStyle = _ref.rowStyle,
-    headerClass = _ref.headerClass,
-    headerStyle = _ref.headerStyle,
-    externalPaginator = _ref.externalPaginator,
-    _onSortingChange = _ref.onSortingChange,
-    manualSorting = _ref.manualSorting,
-    sortingState = _ref.sortingState,
-    columnPinState = _ref.columnPinState,
-    scrollbarHorizontal = _ref.scrollbarHorizontal,
-    width = _ref.width,
-    height = _ref.height;
-  var _useState = useState(sortingState !== null && sortingState !== void 0 ? sortingState : []),
-    _useState2 = _slicedToArray(_useState, 2),
-    sorting = _useState2[0],
-    setSorting = _useState2[1];
-  var _useState3 = useState(selectedRows !== null && selectedRows !== void 0 ? selectedRows : {}),
-    _useState4 = _slicedToArray(_useState3, 2),
-    selection = _useState4[0],
-    setSelection = _useState4[1];
-  var _useState5 = useState(columnPinState !== null && columnPinState !== void 0 ? columnPinState : {}),
-    _useState6 = _slicedToArray(_useState5, 2),
-    columnPin = _useState6[0],
-    setColumnPin = _useState6[1];
-  var _useState7 = useState([]),
-    _useState8 = _slicedToArray(_useState7, 2),
-    columnFilters = _useState8[0],
-    setColumnFilters = _useState8[1];
-  var _useState9 = useState(columnVisibility !== null && columnVisibility !== void 0 ? columnVisibility : {}),
-    _useState10 = _slicedToArray(_useState9, 2),
-    visible = _useState10[0],
-    setVisible = _useState10[1];
-  var _useState11 = useState(''),
-    _useState12 = _slicedToArray(_useState11, 2),
-    globalFilter = _useState12[0],
-    setGlobalFilter = _useState12[1];
-  var _useState13 = useState([]),
-    _useState14 = _slicedToArray(_useState13, 2),
-    columnOrderState = _useState14[0],
-    setColumnOrderState = _useState14[1];
-  var _useState15 = useState({
-      pageIndex: 0,
-      pageSize: pageSize !== null && pageSize !== void 0 ? pageSize : 25
-    }),
-    _useState16 = _slicedToArray(_useState15, 2),
-    page = _useState16[0],
-    setPage = _useState16[1];
-  useEffect(function () {
-    setVisible(columnVisibility !== null && columnVisibility !== void 0 ? columnVisibility : {});
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+function EdsDataGrid({
+  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
+}) {
+  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([]);
+  const [page, setPage] = useState({
+    pageIndex: 0,
+    pageSize: pageSize ?? 25
+  });
+  useEffect(() => {
+    setVisible(columnVisibility ?? {});
   }, [columnVisibility, setVisible]);
-  useEffect(function () {
-    setColumnPin(function (s) {
-      return columnPinState !== null && columnPinState !== void 0 ? columnPinState : s;
-    });
+  useEffect(() => {
+    setColumnPin(s => columnPinState ?? s);
   }, [columnPinState]);
-  useEffect(function () {
+  useEffect(() => {
     setSorting(sortingState);
   }, [sortingState]);
-  useEffect(function () {
-    setSelection(selectedRows !== null && selectedRows !== void 0 ? selectedRows : {});
+  useEffect(() => {
+    setSelection(selectedRows ?? {});
   }, [selectedRows]);
 
   /**
    * By default, the filter-function accepts single-value filters. This adds multi-filter functionality out of the box.
    */
-  var _columns = useMemo(function () {
-    return columns.map(function (column) {
+  const _columns = useMemo(() => {
+    return columns.map(column => {
       if (column.filterFn || column.enableColumnFilter === false) {
         return column;
       }
       /* istanbul ignore next */
-      return _objectSpread(_objectSpread({}, column), {}, {
-        filterFn: function filterFn(row, columnId, filterValue) {
-          var _row$getValue;
+      return {
+        ...column,
+        filterFn: (row, columnId, filterValue) => {
           if (debug) {
             console.log('filterFn', row, columnId, filterValue);
           }
           if (!filterValue || (Array.isArray(filterValue) || typeof filterValue === 'string') && filterValue.length === 0) {
             return true;
           }
-          var value = (_row$getValue = row.getValue(columnId)) !== null && _row$getValue !== void 0 ? _row$getValue : 'NULL_OR_UNDEFINED';
+          const value = row.getValue(columnId) ?? 'NULL_OR_UNDEFINED';
           if (Array.isArray(filterValue)) {
-            var numeric = filterValue.some(function (v) {
-              return typeof v === 'number';
-            });
+            const numeric = filterValue.some(v => typeof v === 'number');
             if (numeric) {
-              var _ref2 = filterValue,
-                _ref3 = _slicedToArray(_ref2, 2),
-                start = _ref3[0],
-                end = _ref3[1];
+              const [start, end] = filterValue;
               return Number(value) >= (isNaN(start) ? 0 : start) && Number(value) <= (!end || isNaN(end) ? Infinity : end);
             } else {
-              var validFilterValue = filterValue.filter(function (v) {
-                return !!v;
-              });
+              const validFilterValue = filterValue.filter(v => !!v);
               if (validFilterValue.length === 0) return true;
               return filterValue.includes(value);
             }
           }
           return value === filterValue;
         }
-      });
+      };
     });
   }, [debug, columns]);
 
   /**
    * Set up default table options
    */
-  var options = {
+  const options = {
     data: rows,
     columns: _columns,
+    defaultColumn: {
+      size: 150,
+      cell: context => {
+        return /*#__PURE__*/jsx(Typography, {
+          style: {
+            overflow: 'hidden',
+            whiteSpace: 'nowrap',
+            textOverflow: 'ellipsis'
+          },
+          group: "table",
+          variant: "cell_text",
+          children: String(context.getValue() ?? '')
+        });
+      }
+    },
     columnResizeMode: columnResizeMode,
+    onColumnSizingChange: change => {
+      if (typeof change === 'function') {
+        setInternalColumnSize(change(internalColumnSize));
+      } else {
+        setInternalColumnSize(change);
+      }
+      if (onColumnResize) {
+        onColumnResize(internalColumnSize);
+      }
+    },
     state: {
-      sorting: sorting,
+      sorting,
       columnPinning: columnPin,
       rowSelection: selection,
-      columnOrder: columnOrderState
+      columnOrder: columnOrderState,
+      columnSizing: columnSizing ?? internalColumnSize
     },
-    onSortingChange: function onSortingChange(changes) {
-      if (_onSortingChange) {
-        _onSortingChange(changes);
+    onSortingChange: changes => {
+      if (onSortingChange) {
+        onSortingChange(changes);
       }
       setSorting(changes);
     },
     enableColumnFilters: !!enableColumnFiltering,
     enableFilters: !!enableColumnFiltering,
-    enableSorting: enableSorting !== null && enableSorting !== void 0 ? enableSorting : false,
-    manualSorting: manualSorting !== null && manualSorting !== void 0 ? manualSorting : false,
+    enableSorting: enableSorting ?? false,
+    manualSorting: manualSorting ?? false,
     enableColumnResizing: !!columnResizeMode,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
     debugTable: debug,
     debugHeaders: debug,
     debugColumns: debug,
-    enableRowSelection: rowSelection !== null && rowSelection !== void 0 ? rowSelection : false,
+    enableRowSelection: rowSelection ?? false,
     enableColumnPinning: true,
-    enablePinning: true
+    enablePinning: true,
+    getRowId
   };
-  useEffect(function () {
+  useEffect(() => {
     if (columnOrder && columnOrder.length > 0) {
-      setColumnOrderState(columnOrder !== null && columnOrder !== void 0 ? columnOrder : []);
+      setColumnOrderState(columnOrder ?? []);
     }
   }, [columnOrder]);
 
   /**
    * Set up handlers for rowSelection
    */
-  if (rowSelection !== null && rowSelection !== void 0 ? rowSelection : false) {
-    options.onRowSelectionChange = function (updaterOrValue) {
+  if (rowSelection ?? false) {
+    options.onRowSelectionChange = updaterOrValue => {
       if (onSelectRow) {
         onSelectRow(updaterOrValue);
       }
@@ -204,7 +206,7 @@ function EdsDataGrid(_ref) {
   /**
    * Set up config for pagination
    */
-  if (enablePagination !== null && enablePagination !== void 0 ? enablePagination : false) {
+  if (enablePagination ?? false) {
     options.state.pagination = page;
     options.getPaginationRowModel = getPaginationRowModel();
   }
@@ -214,8 +216,8 @@ function EdsDataGrid(_ref) {
    */
   if (columnVisibility) {
     options.state.columnVisibility = visible;
-    options.onColumnVisibilityChange = function (vis) {
-      var updated;
+    options.onColumnVisibilityChange = vis => {
+      let updated;
       if (typeof vis === 'function') {
         updated = vis(visible);
       } else {
@@ -225,51 +227,49 @@ function EdsDataGrid(_ref) {
       setVisible(updated);
     };
   }
-  useEffect(function () {
-    setPage(function (prev) {
-      return _objectSpread(_objectSpread({}, prev), {}, {
-        pageSize: pageSize !== null && pageSize !== void 0 ? pageSize : 25
-      });
-    });
+  useEffect(() => {
+    setPage(prev => ({
+      ...prev,
+      pageSize: pageSize ?? 25
+    }));
   }, [pageSize]);
-  var table = useReactTable(options);
-  var parentRefStyle = {};
+  const table = useReactTable(options);
+  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) {
-    var _ref4;
-    parentRefStyle = {
-      height: (_ref4 = height !== null && height !== void 0 ? height : virtualHeight) !== null && _ref4 !== void 0 ? _ref4 : 500,
+    tableWrapperStyle = {
+      height: height ?? virtualHeight ?? 500,
       overflow: 'auto',
       position: 'relative'
     };
   }
-  var parentRef = useRef(null);
+  const parentRef = useRef(null);
 
   /**
    * Virtualization setup
    */
-  var _useEds = useEds(),
-    density = _useEds.density;
-  var estimateSize = useCallback(function () {
+  const {
+    density
+  } = useEds();
+  const estimateSize = useCallback(() => {
     return density === 'compact' ? 32 : 48;
   }, [density]);
-  var virtualizer = useVirtualizer({
+  const virtualizer = useVirtualizer({
     count: table.getRowModel().rows.length,
-    getScrollElement: function getScrollElement() {
-      return parentRef.current;
-    },
-    estimateSize: estimateSize
+    getScrollElement: () => parentRef.current,
+    estimateSize
   });
-  var virtualRows = virtualizer.getVirtualItems();
-  var paddingTop = virtualRows.length ? virtualRows[0].start : 0;
-  var paddingBottom = virtualRows.length ? virtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end : 0;
+  if (rowVirtualizerInstanceRef) rowVirtualizerInstanceRef.current = virtualizer;
+  const virtualRows = virtualizer.getVirtualItems();
+  const paddingTop = virtualRows.length ? virtualRows[0].start : 0;
+  const paddingBottom = virtualRows.length ? virtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end : 0;
 
   // These classes are primarily used to allow for feature-detection in the test-suite
-  var classList = {
+  const classList = {
     'sticky-header': !!stickyHeader,
     virtual: !!enableVirtual,
     paging: !!enablePagination
@@ -285,90 +285,81 @@ function EdsDataGrid(_ref) {
     enableSorting: !!enableSorting,
     enableColumnFiltering: !!enableColumnFiltering,
     stickyHeader: !!stickyHeader,
-    children: [/*#__PURE__*/jsxs("div", {
+    children: [/*#__PURE__*/jsxs(TableWrapper, {
       className: "table-wrapper",
-      style: _objectSpread(_objectSpread({
-        height: height !== null && height !== void 0 ? height : 'auto'
-      }, parentRefStyle), {}, {
-        width: scrollbarHorizontal ? width : 'auto',
-        tableLayout: scrollbarHorizontal ? 'fixed' : 'auto',
-        overflow: 'auto'
-      }),
+      style: tableWrapperStyle,
       ref: parentRef,
+      $height: height,
+      $width: width,
+      $scrollbarHorizontal: scrollbarHorizontal,
       children: [/*#__PURE__*/jsxs(Table, {
-        className: Object.entries(classList).filter(function (_ref5) {
-          var _ref6 = _slicedToArray(_ref5, 2),
-            k = _ref6[1];
-          return k;
-        }).map(function (_ref7) {
-          var _ref8 = _slicedToArray(_ref7, 1),
-            k = _ref8[0];
-          return k;
-        }).join(' '),
+        className: Object.entries(classList).filter(([, k]) => k).map(([k]) => k).join(' '),
         style: {
-          width: table.getTotalSize()
+          tableLayout: scrollbarHorizontal ? 'fixed' : 'auto',
+          width: table.getTotalSize(),
+          minWidth: scrollbarHorizontal ? minWidth : 'auto'
         },
         children: [caption && /*#__PURE__*/jsx(Table.Caption, {
           children: caption
         }), /*#__PURE__*/jsx(Table.Head, {
           sticky: stickyHeader,
-          children: table.getHeaderGroups().map(function (headerGroup) {
-            return /*#__PURE__*/jsx(TableHeaderRow, {
-              table: table,
-              headerGroup: headerGroup,
-              columnResizeMode: columnResizeMode,
-              deltaOffset: table.getState().columnSizingInfo.deltaOffset
-            }, headerGroup.id);
-          })
+          children: table.getHeaderGroups().map(headerGroup => /*#__PURE__*/jsx(TableHeaderRow, {
+            table: table,
+            headerGroup: headerGroup,
+            columnResizeMode: columnResizeMode,
+            deltaOffset: table.getState().columnSizingInfo.deltaOffset
+          }, headerGroup.id))
         }), /*#__PURE__*/jsxs(Table.Body, {
+          style: {
+            backgroundColor: 'inherit'
+          },
           children: [table.getRowModel().rows.length === 0 && emptyMessage && /*#__PURE__*/jsx(Table.Row, {
             children: /*#__PURE__*/jsx(Table.Cell, {
-              colSpan: table.getHeaderGroups().length,
+              colSpan: table.getFlatHeaders().length,
               children: emptyMessage
             })
           }), enableVirtual && /*#__PURE__*/jsxs(Fragment, {
-            children: [/*#__PURE__*/jsx(Table.Row, {
+            children: [paddingTop > 0 && /*#__PURE__*/jsx(Table.Row, {
               "data-testid": "virtual-padding-top",
               className: 'virtual-padding-top',
+              style: {
+                pointerEvents: 'none'
+              },
               children: /*#__PURE__*/jsx(Table.Cell, {
                 style: {
-                  height: "".concat(paddingTop, "px")
+                  height: `${paddingTop}px`
                 }
               })
-            }), virtualRows.map(function (row) {
-              return /*#__PURE__*/jsx(TableRow, {
-                row: table.getRowModel().rows[row.index]
-              }, row.index);
-            }), /*#__PURE__*/jsx(Table.Row, {
+            }), virtualRows.map(row => /*#__PURE__*/jsx(TableRow, {
+              row: table.getRowModel().rows[row.index]
+            }, row.index)), paddingBottom > 0 && /*#__PURE__*/jsx(Table.Row, {
               "data-testid": "virtual-padding-bottom",
               className: 'virtual-padding-bottom',
+              style: {
+                pointerEvents: 'none'
+              },
               children: /*#__PURE__*/jsx(Table.Cell, {
                 style: {
-                  height: "".concat(paddingBottom, "px")
+                  height: `${paddingBottom}px`
                 }
               })
             })]
-          }), !enableVirtual && table.getRowModel().rows.map(function (row) {
-            return /*#__PURE__*/jsx(TableRow, {
-              row: row
-            }, row.id);
-          })]
+          }), !enableVirtual && table.getRowModel().rows.map(row => /*#__PURE__*/jsx(TableRow, {
+            row: row
+          }, row.id))]
         })]
       }), externalPaginator ? externalPaginator : enablePagination && /*#__PURE__*/jsx("div", {
         style: {
-          maxWidth: "".concat(table.getTotalSize(), "px")
+          maxWidth: `${table.getTotalSize()}px`
         },
         children: /*#__PURE__*/jsx(Pagination, {
           totalItems: table.getFilteredRowModel().rows.length,
           withItemIndicator: true,
           itemsPerPage: page.pageSize,
-          onChange: function onChange(e, p) {
-            return setPage(function (s) {
-              return _objectSpread(_objectSpread({}, s), {}, {
-                pageIndex: p - 1
-              });
-            });
-          },
+          onChange: (e, p) => setPage(s => ({
+            ...s,
+            pageIndex: p - 1
+          })),
           defaultPage: 1
         })
       })]
@@ -377,5 +368,17 @@ function EdsDataGrid(_ref) {
     })]
   });
 }
+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/EdsDataGridContext.js

@@ -1,25 +1,22 @@
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { createContext, useContext } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["children"];
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-var EdsDataGridContext = /*#__PURE__*/createContext({
+const EdsDataGridContext = /*#__PURE__*/createContext({
   enableSorting: false,
   stickyHeader: false,
   enableColumnFiltering: false,
   table: null
 });
-function TableProvider(_ref) {
-  var children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded);
+function TableProvider({
+  children,
+  ...props
+}) {
   return /*#__PURE__*/jsx(EdsDataGridContext.Provider, {
     value: props,
     children: children
   });
 }
-var useTableContext = function useTableContext() {
-  return useContext(EdsDataGridContext);
-};
+const useTableContext = () => useContext(EdsDataGridContext);
 
 export { EdsDataGridContext, TableProvider, useTableContext };