@elliemae/ds-data-table 2.4.2 → 2.4.3-rc.10

package/cjs/DataTable.js

@@ -21,6 +21,7 @@ var useDatatableConfig = require('./configs/useDatatableConfig.js');
 require('./configs/useRowFlattenization.js');
 var FiltersBar = require('./parts/FilterBar/FiltersBar.js');
 var DataTableSchema = require('./DataTableSchema.js');
+var styled = require('./styled.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -41,13 +42,21 @@ const DataTable = props => {
   const tableWrapperRef = React.useRef();
   const tableContentWrapperRef = React.useRef();
   const ctx = useDatatableConfig.useDatatableConfig(props);
+  const {
+    tableProps: {
+      height,
+      width
+    }
+  } = ctx;
   return /*#__PURE__*/_jsx__default["default"](reactRedux.Provider, {
     store: reduxStore
   }, void 0, /*#__PURE__*/_jsx__default["default"](DataTableContext["default"].Provider, {
     value: ctx
-  }, void 0, /*#__PURE__*/jsxRuntime.jsxs("div", {
+  }, void 0, /*#__PURE__*/jsxRuntime.jsxs(styled.StyledDataTableWrapper, {
     ref: tableWrapperRef,
     "data-testid": constants.DATA_TESTID.DATA_TABLE_WRAPPER,
+    height: height,
+    width: width,
     children: [withFilterBar ? _FiltersBar || (_FiltersBar = /*#__PURE__*/_jsx__default["default"](FiltersBar.FiltersBar, {})) : null, /*#__PURE__*/jsxRuntime.jsx(TableContent, {
       ref: tableContentWrapperRef
     })]

package/cjs/DataTableSchema.js

@@ -57,6 +57,11 @@ const DataTableSchema = {
   withFilterBar: dsPropsHelpers.PropTypes.bool.description('Whether to display the filter bar'),
   filterBarProps: dsPropsHelpers.PropTypes.shape({
     customPillRenderer: dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.func, dsPropsHelpers.PropTypes.element]).description('If you specify custom filters, you will need to render their pills here'),
+    isDropdownMenuOpen: dsPropsHelpers.PropTypes.bool.description('Wether the DropdownMenu is Open or not.'),
+    onDropdownMenuToggle: dsPropsHelpers.PropTypes.func.description('Callback to toggle the DropdownMenu.'),
+    onClearAllFiltersClick: dsPropsHelpers.PropTypes.func.description('Callback for Clear Al Filters option.'),
+    onDropdownMenuClickOutside: dsPropsHelpers.PropTypes.func.description('Callback triggered when clicking outside DropdownMenu.'),
+    onDropdownMenuTriggerClick: dsPropsHelpers.PropTypes.func.description('Callback triggered when clicking DropdownMenu ellipsis.'),
     extraOptions: dsPropsHelpers.PropTypes.arrayOf(dsPropsHelpers.PropTypes.shape({
       type: dsPropsHelpers.PropTypes.string,
       id: dsPropsHelpers.PropTypes.string,

package/cjs/addons/Editables/ComboboxEditableCell/ComboboxEditableCell.js

@@ -18,7 +18,6 @@ require('@elliemae/ds-popperjs');
 require('styled-components');
 require('../../../redux/reducers/index.js');
 require('../../../configs/constants.js');
-require('react/jsx-runtime');
 var EditableCell = require('../../../exported-related/EditableCell.js');
 require('@elliemae/ds-icons');
 require('@elliemae/ds-utilities');
@@ -27,6 +26,7 @@ require('../../../configs/useRowFlattenization.js');
 require('core-js/modules/esnext.async-iterator.map.js');
 require('core-js/modules/esnext.iterator.map.js');
 require('../../../styled.js');
+require('react/jsx-runtime');
 require('@elliemae/ds-form');
 require('../../../parts/TableContent.js');
 require('@elliemae/ds-grid');

package/cjs/addons/Editables/DateEditableCell/DateEditableCell.js

@@ -15,7 +15,6 @@ require('@elliemae/ds-popperjs');
 require('styled-components');
 require('../../../redux/reducers/index.js');
 require('../../../configs/constants.js');
-require('react/jsx-runtime');
 var EditableCell = require('../../../exported-related/EditableCell.js');
 require('@elliemae/ds-icons');
 require('@elliemae/ds-utilities');
@@ -26,6 +25,7 @@ require('../../../configs/useRowFlattenization.js');
 require('core-js/modules/esnext.async-iterator.map.js');
 require('core-js/modules/esnext.iterator.map.js');
 require('../../../styled.js');
+require('react/jsx-runtime');
 require('@elliemae/ds-form');
 require('../../../parts/TableContent.js');
 require('@elliemae/ds-grid');

package/cjs/addons/Editables/TextEditableCell/TextEditableCell.js

@@ -15,7 +15,6 @@ require('@elliemae/ds-button');
 require('@elliemae/ds-popperjs');
 require('../../../redux/reducers/index.js');
 require('../../../configs/constants.js');
-require('react/jsx-runtime');
 var EditableCell = require('../../../exported-related/EditableCell.js');
 require('@elliemae/ds-icons');
 require('@elliemae/ds-utilities');
@@ -26,6 +25,7 @@ require('../../../configs/useRowFlattenization.js');
 require('core-js/modules/esnext.async-iterator.map.js');
 require('core-js/modules/esnext.iterator.map.js');
 require('../../../styled.js');
+require('react/jsx-runtime');
 require('@elliemae/ds-form');
 require('../../../parts/TableContent.js');
 require('@elliemae/ds-grid');

package/cjs/addons/Filters/Components/SelectFilter/BaseSelectFilter.js

@@ -55,6 +55,8 @@ require('../../../../exported-related/Filters/applyOutOfTheBoxFilters.js');
 require('moment');
 require('core-js/modules/esnext.async-iterator.some.js');
 require('core-js/modules/esnext.iterator.some.js');
+require('../../../../redux/reducers/index.js');
+var useDispatchHeadersActions = require('../../../../redux/reducers/headersReducers/useDispatchHeadersActions.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -80,6 +82,9 @@ const BaseSelectFilter = props => {
     innerRef,
     onValueChange
   } = props;
+  const {
+    patchHeaderFilterButtonAndMenu
+  } = useDispatchHeadersActions.useDispatchHeadersActions();
   const filterOptions = React.useMemo(() => {
     // If the user didn't provide options, use the available ones
     if (!userFilterOptions) {
@@ -100,6 +105,7 @@ const BaseSelectFilter = props => {
 
   const handleOnChange = value => {
     onValueChange(type, value);
+    if (!isMulti) patchHeaderFilterButtonAndMenu(column.id, true);
   };
 
   const [filters, setFilteredOptions] = React.useState(filterOptions);

package/cjs/addons/Filters/Components/SelectFilter/MultiSelectFilter.js

@@ -16,9 +16,9 @@ require('@elliemae/ds-popperjs');
 require('styled-components');
 require('../../../../redux/reducers/index.js');
 var constants = require('../../../../configs/constants.js');
-require('react/jsx-runtime');
 require('../../../../styled.js');
 require('../../../../DataTableContext.js');
+require('react/jsx-runtime');
 require('@elliemae/ds-icons');
 require('@elliemae/ds-utilities');
 require('core-js/modules/esnext.async-iterator.reduce.js');

package/cjs/addons/Filters/Components/SelectFilter/SingleSelectFilter.js

@@ -16,9 +16,9 @@ require('@elliemae/ds-popperjs');
 require('styled-components');
 require('../../../../redux/reducers/index.js');
 var constants = require('../../../../configs/constants.js');
-require('react/jsx-runtime');
 require('../../../../styled.js');
 require('../../../../DataTableContext.js');
+require('react/jsx-runtime');
 require('@elliemae/ds-icons');
 require('@elliemae/ds-utilities');
 require('core-js/modules/esnext.async-iterator.reduce.js');

package/cjs/configs/useDatatableConfig.js

@@ -54,7 +54,11 @@ const useDatatableConfig = props => {
   // Layout config
   // ===========================================================================
 
-  const [gridLayout, setGridLayout] = React.useState(columnsToGrid.columnsToGrid(visibleColumns, props.colsLayoutStyle));
+  const [gridLayout, setGridLayout] = React.useState(columnsToGrid.columnsToGrid(visibleColumns, props.colsLayoutStyle)); // We need to listen and update the state based on this props
+
+  React.useEffect(() => {
+    setGridLayout(columnsToGrid.columnsToGrid(visibleColumns, props.colsLayoutStyle));
+  }, [visibleColumns, props.colsLayoutStyle]);
   const totalColumnsWidth = React.useMemo(() => props.colsLayoutStyle === constants.ColsLayoutStyle.Fixed ? gridLayout.reduce((acc, cur) => acc + Number.parseInt(cur, 10), 0) : '100%', [props.colsLayoutStyle, gridLayout]);
   const layoutHelpers = React.useMemo(() => ({
     gridLayout,

package/cjs/exported-related/EditableCell.js

@@ -18,8 +18,7 @@ const EditableCell = props => {
     StandardRender,
     EditableRenderer,
     cell,
-    isRowSelected,
-    setValue
+    isRowSelected
   } = props;
   const {
     virtualListHelpers

package/cjs/exported-related/FilterPopover.js

@@ -15,7 +15,6 @@ var dsPopperjs = require('@elliemae/ds-popperjs');
 var styled = require('styled-components');
 require('../redux/reducers/index.js');
 var constants = require('../configs/constants.js');
-var jsxRuntime = require('react/jsx-runtime');
 var useDispatchHeadersActions = require('../redux/reducers/headersReducers/useDispatchHeadersActions.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -36,7 +35,22 @@ const Button = /*#__PURE__*/styled__default["default"](DSButton.DSButton).withCo
 const PopperContent = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-16i88ut-2"
 })(["background-color:#fff;"]);
-const FilterPopover = _ref2 => {
+
+const ButtonTrap = _ref2 => {
+  let {
+    cb
+  } = _ref2;
+  return /*#__PURE__*/_jsx__default["default"]("span", {
+    "aria-hidden": "true",
+    tabIndex: 0,
+    onFocus: e => {
+      e.stopPropagation();
+      cb();
+    }
+  });
+};
+
+const FilterPopover = _ref3 => {
   let {
     column,
     columnId,
@@ -48,7 +62,7 @@ const FilterPopover = _ref2 => {
     innerRef,
     ariaLabel,
     customStyles
-  } = _ref2;
+  } = _ref3;
   const {
     hideFilterButton,
     hideFilterMenu
@@ -56,7 +70,6 @@ const FilterPopover = _ref2 => {
     hideFilterButton: true,
     hideFilterMenu: true
   };
-  const popperRef = React.useRef(null);
   const {
     patchHeaderFilterButtonAndMenu,
     patchHeader
@@ -87,6 +100,13 @@ const FilterPopover = _ref2 => {
   };
 
   const [referenceElement, setReferenceElement] = React.useState(null);
+  const buttonTrapCallback = React.useCallback(() => {
+    patchHeader(columnId, {
+      hideFilterMenu: true,
+      hideFilterButton: false
+    });
+    referenceElement?.focus();
+  }, [columnId, patchHeader, referenceElement]);
   return /*#__PURE__*/_jsx__default["default"]("div", {
     // This is here to prevent propagation, and not trigger the sort functionality
     onClick: e => e.stopPropagation(),
@@ -109,11 +129,6 @@ const FilterPopover = _ref2 => {
     },
     style: {
       display: 'flex'
-    },
-    onBlur: e => {
-      if (e.target !== referenceElement && !popperRef.current?.contains(e.relatedTarget)) {
-        referenceElement?.focus();
-      }
     }
   }, void 0, /*#__PURE__*/_jsx__default["default"](FilterButton, {
     hide: !isIconVisible,
@@ -145,24 +160,11 @@ const FilterPopover = _ref2 => {
       minWidth: column.ref?.current?.offsetWidth ?? '0px'
     }),
     placementOrderPreference: ['bottom-end']
-  }, void 0, /*#__PURE__*/jsxRuntime.jsx(PopperContent, {
-    onKeyDown: e => {
-      if (e.code === 'Tab') {
-        setTimeout(() => {
-          if (!popperRef?.current?.contains(document.activeElement)) {
-            patchHeader(columnId, {
-              hideFilterMenu: true,
-              hideFilterButton: false
-            });
-            e.preventDefault();
-            referenceElement.focus();
-          }
-        });
-      }
-    },
-    ref: popperRef,
-    children: menuContent
-  })));
+  }, void 0, /*#__PURE__*/_jsx__default["default"](PopperContent, {}, void 0, /*#__PURE__*/_jsx__default["default"](ButtonTrap, {
+    cb: buttonTrapCallback
+  }), menuContent, /*#__PURE__*/_jsx__default["default"](ButtonTrap, {
+    cb: buttonTrapCallback
+  }))));
 };
 
 exports.FilterPopover = FilterPopover;

package/cjs/exported-related/RowRenderer/DefaultRowContentRenderer.js

@@ -100,12 +100,18 @@ const DefaultRowContentRenderer = props => {
 
     return padding;
   }, [row.depth, visibleColumns]);
+  const handleSelectDisableRow = React.useCallback(e => {
+    if (disabledRows[row.uid]) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  }, [disabledRows, row.uid]);
   const PureRowContent = React.useMemo(() => {
     const DetailsView = row.original.tableRowDetails;
     return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [/*#__PURE__*/jsxRuntime.jsx(styled.StyledCellContainer, _objectSpread(_objectSpread({
         ref: rowRef,
-        tabIndex: 0,
+        tabIndex: disabledRows[row.uid] ? -1 : 0,
         role: "row",
         "aria-rowindex": row.realIndex + 1,
         "aria-label": ariaLabelMessage(row, selection?.[row.uid] === true),
@@ -124,6 +130,7 @@ const DefaultRowContentRenderer = props => {
         selected: noSelectionColumn && selection?.[row.uid] === true,
         disabled: disabledRows[row.uid],
         "data-testid": constants.DATA_TESTID.DATA_TABLE_ROW_CONTENT,
+        onMouseDown: handleSelectDisableRow,
         children: /*#__PURE__*/_jsx__default["default"](index$1, {
           row: row,
           isRowSelected: selectedRowId === row.uid,

package/cjs/exported-related/RowRenderer/useRowRendererHandlers.js

@@ -48,12 +48,26 @@ const useRowRendererHandlers = _ref => {
   const {
     tableProps: {
       onRowClick,
-      onRowFocus
+      onRowFocus,
+      disabledRows
     },
     virtualListHelpers: {
       scrollToIndex
     }
   } = React.useContext(DataTableContext["default"]);
+
+  const isOptionFocuseable = opt => !disabledRows[opt.id];
+
+  const findInCircularList = function (list, from, criteria) {
+    let step = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+
+    for (let i = (from + step + list.length) % list.length; i !== from && from > -1; i = (i + step + list.length) % list.length) {
+      if (criteria(list[i])) return i;
+    }
+
+    return from; // return same item
+  };
+
   const {
     setSelectedRowId,
     setFocusedRowId
@@ -64,6 +78,7 @@ const useRowRendererHandlers = _ref => {
       uid
     } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : row;
     // setSelectedRowId(null);
+    if (disabledRows[uid]) return;
     onRowClick(original, e, uid);
     onRowFocus({
       itemIndex,
@@ -75,7 +90,7 @@ const useRowRendererHandlers = _ref => {
       },
       original
     }, e);
-  }, [row, onRowClick, onRowFocus, itemIndex, scrollToIndex]);
+  }, [row, disabledRows, onRowClick, onRowFocus, itemIndex, scrollToIndex]);
   const isActive = draggableProps && draggableProps.active;
   const handleKeyDown = React.useCallback(e => {
     if (isDragOverlay || isActive) {
@@ -102,24 +117,27 @@ const useRowRendererHandlers = _ref => {
 
     if (e.code === 'ArrowDown') {
       e.preventDefault();
-      if (itemIndex + 1 < items.length) setFocusedRowId(items[itemIndex + 1].uid);
+      e.stopPropagation();
+      const next = findInCircularList(items, itemIndex, isOptionFocuseable);
+      setFocusedRowId(items[next].uid);
     }
 
     if (e.code === 'ArrowUp') {
       e.preventDefault();
-      if (itemIndex - 1 >= 0) setFocusedRowId(items[itemIndex - 1].uid);
+      const prev = findInCircularList(items, itemIndex, isOptionFocuseable, -1);
+      setFocusedRowId(items[prev].uid);
     }
-  }, [isDragOverlay, isActive, selectedRowId, row, setSelectedRowId, handleItemClick, itemIndex, items, setFocusedRowId]);
+  }, [isDragOverlay, isActive, selectedRowId, row, setSelectedRowId, handleItemClick, items, itemIndex, isOptionFocuseable, setFocusedRowId]);
   const handleOnBlur = React.useCallback(e => {
     if (e.relatedTarget?.getAttribute('data-testid') === 'data-table-row-content') {
       setSelectedRowId(null);
     }
   }, [setSelectedRowId]);
   const handleOnFocus = React.useCallback(e => {
-    if (e.target && e.target.getAttribute('data-testid') === constants.DATA_TESTID.DATA_TABLE_ROW_CONTENT) {
+    if (!disabledRows[row.uid] && e.target && e.target.getAttribute('data-testid') === constants.DATA_TESTID.DATA_TABLE_ROW_CONTENT) {
       setFocusedRowId(row.uid);
     }
-  }, [row.uid, setFocusedRowId]);
+  }, [row.uid, setFocusedRowId, disabledRows]);
   return {
     handleItemClick,
     handleKeyDown,

package/cjs/exported-related/Toolbar/Toolbar.js

@@ -55,22 +55,15 @@ const Toolbar = _ref => {
     children
   } = _ref;
   const [show, setShow] = React.useState(false);
-  const [clicked, setClicked] = React.useState(false);
   const toolbarRef = React.useRef(null);
-  const handleOnClickOutside = React.useCallback(() => {
-    setShow(false);
-    setClicked(false);
-  }, []);
-  const handleOnClick = React.useCallback(() => {
-    setShow(true);
-    setClicked(true);
-  }, []);
+  const handleOnClickOutside = React.useCallback(() => setShow(false), []);
+  const handleOnClick = React.useCallback(() => setShow(true), []);
   dsUtilities.useOnClickOutside(toolbarRef, handleOnClickOutside);
   return /*#__PURE__*/jsxRuntime.jsx(ToolbarPosition, {
     ref: toolbarRef,
     children: /*#__PURE__*/_jsx__default["default"](ToolbarWrapper, {
       onMouseEnter: () => setShow(true),
-      onMouseLeave: () => setShow(clicked)
+      onMouseLeave: () => setShow(false)
     }, void 0, show && /*#__PURE__*/_jsx__default["default"](ToolbarBtns, {}, void 0, children), /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
       buttonType: "text",
       className: "toolbar-trigger",

package/cjs/parts/Cells/Cell.js

@@ -71,7 +71,8 @@ const Cell = _ref2 => {
   const ctx = React.useContext(DataTableContext["default"]);
   const {
     tableProps: {
-      cellRendererProps
+      cellRendererProps,
+      disabledRows
     }
   } = ctx;
   const {
@@ -120,7 +121,7 @@ const Cell = _ref2 => {
     return null;
   }, [DefaultCellContentJSX, cellProps, column]);
   return /*#__PURE__*/jsxRuntime.jsx(PureStandardCell, _objectSpread(_objectSpread({}, cellProps), {}, {
-    children: column.editable ? EditableContentJSX : DefaultCellContentJSX
+    children: column.editable && !disabledRows[row.id] ? EditableContentJSX : DefaultCellContentJSX
   }));
 };
 

package/cjs/parts/FilterBar/FiltersBar.js

@@ -20,9 +20,9 @@ require('@elliemae/ds-popperjs');
 require('styled-components');
 require('../../redux/reducers/index.js');
 var constants = require('../../configs/constants.js');
-require('react/jsx-runtime');
 require('../../styled.js');
 var DataTableContext = require('../../DataTableContext.js');
+require('react/jsx-runtime');
 require('@elliemae/ds-utilities');
 require('core-js/modules/esnext.async-iterator.reduce.js');
 require('core-js/modules/esnext.iterator.reduce.js');
@@ -76,6 +76,7 @@ const FiltersBar = () => {
     },
     visibleColumns
   } = React.useContext(DataTableContext["default"]);
+  const [isOpen, setIsOpen] = React.useState(false);
   const pillGroupRefs = React.useMemo(() => {
     const refs = [];
 
@@ -86,7 +87,29 @@ const FiltersBar = () => {
   const dropdownMenuRef = React.useRef(null);
   const removeAllFilters = React.useCallback(() => {
     onFiltersChange([]);
-  }, [onFiltersChange]);
+    filterBarProps?.onClearAllFiltersClick?.();
+  }, [onFiltersChange, filterBarProps.onClearAllFiltersClick]);
+  const onFilterBarClose = React.useCallback(() => {
+    filterBarProps?.onDropdownMenuToggle?.(false, 'onClose');
+    setIsOpen(false);
+  }, [filterBarProps.onDropdownMenuToggle]);
+  const onFilterBarOpen = React.useCallback(() => {
+    filterBarProps?.onDropdownMenuToggle?.(true, 'onOpen');
+    setIsOpen(true);
+  }, [filterBarProps.onDropdownMenuToggle]);
+  const onFilterBarOnClickOutside = React.useCallback(() => {
+    filterBarProps?.onDropdownMenuToggle?.(false, 'onClickOutside');
+    filterBarProps?.onDropdownMenuClickOutside?.();
+    setIsOpen(false);
+  }, [filterBarProps.onDropdownMenuToggle, filterBarProps.onDropdownMenuClickOutside]);
+  const onTriggerClick = React.useCallback(() => {
+    filterBarProps?.onDropdownMenuTriggerClick?.();
+    onFilterBarOpen();
+  }, [filterBarProps.onDropdownMenuTriggerClick]);
+  const finalIsOpen = React.useMemo(() => {
+    if (typeof filterBarProps?.isDropdownMenuOpen === 'boolean') return filterBarProps.isDropdownMenuOpen;
+    return isOpen;
+  }, [filterBarProps.isDropdownMenuOpen, isOpen]);
   return /*#__PURE__*/_jsx__default["default"](styled.StyledWrapper, {
     width: width,
     "aria-live": "polite",
@@ -122,6 +145,9 @@ const FiltersBar = () => {
     }, column);
   }), /*#__PURE__*/_jsx__default["default"](styled.StyledDropdownMenu, {
     preventOverflow: "scrollParent",
+    isOpen: finalIsOpen,
+    onClose: onFilterBarClose,
+    onClickOutsideMenu: onFilterBarOnClickOutside,
     options: [{
       id: '__internal__option__clear__filters',
       label: 'Clear Filters',
@@ -133,6 +159,7 @@ const FiltersBar = () => {
       },
       buttonType: "text",
       innerRef: dropdownMenuRef,
+      onClick: onTriggerClick,
       icon: _MoreOptionsVert || (_MoreOptionsVert = /*#__PURE__*/_jsx__default["default"](dsIcons.MoreOptionsVert, {}))
     })
   }));

package/cjs/parts/Filters/index.js

@@ -25,9 +25,9 @@ require('@elliemae/ds-popperjs');
 require('styled-components');
 require('../../redux/reducers/index.js');
 require('../../configs/constants.js');
-var jsxRuntime = require('react/jsx-runtime');
 require('../../styled.js');
 require('../../DataTableContext.js');
+var jsxRuntime = require('react/jsx-runtime');
 require('@elliemae/ds-icons');
 require('@elliemae/ds-utilities');
 require('core-js/modules/esnext.async-iterator.reduce.js');

package/cjs/parts/Headers/HeaderResizer.js

@@ -79,9 +79,9 @@ const HeaderResizer = _ref => {
     e.stopPropagation();
   }, [column.id, nextWidth, visibleColumnsCopy]);
   const onResizeEnd = React.useCallback(() => {
-    onColumnResize(column.id, nextWidth);
     setGridLayout(columnsToGrid.columnsToGrid(visibleColumns, constants.ColsLayoutStyle.Fixed));
     setIsResizing(false);
+    onColumnResize(column.id, nextWidth);
   }, [onColumnResize, column.id, nextWidth, setGridLayout, visibleColumns]);
   React.useEffect(() => {
     const debouncedResizeHandler = onResizeHandler;

package/cjs/parts/Row.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
 var reactRedux = require('react-redux');
+var dsSystem = require('@elliemae/ds-system');
 var DataTableContext = require('../DataTableContext.js');
 require('core-js/modules/esnext.async-iterator.for-each.js');
 require('core-js/modules/esnext.iterator.constructor.js');
@@ -29,6 +30,15 @@ const setItemRefs = (measureRef, draggableRef, ref) => {
   refsHelpers.setMultipleRefs(...refsToSet)(ref);
 };
 
+const StyledRow = dsSystem.styled('div')`
+  cursor: ${_ref => {
+  let {
+    disabled
+  } = _ref;
+  return disabled ? 'not-allowed' : 'normal';
+}};
+`;
+
 const RowComp = props => {
   const {
     row,
@@ -39,11 +49,17 @@ const RowComp = props => {
     selectedRowId
   } = props;
   const ctx = React.useContext(DataTableContext["default"]);
+  const {
+    tableProps: {
+      disabledRows
+    }
+  } = ctx;
   const {
     draggableProps
   } = React.useContext(SortableItemContext.SortableItemContext);
   const draggableRef = draggableProps && draggableProps.setNodeRef;
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
+  return /*#__PURE__*/jsxRuntime.jsx(StyledRow, {
+    disabled: disabledRows[row.id],
     style: !isDragOverlay ? itemWrapperStyle : {},
     ref: ref => setItemRefs(measureRef, draggableRef, ref),
     children: /*#__PURE__*/_jsx__default["default"](index.RowVariantMapItem, {

package/cjs/parts/RowVariants/index.js

@@ -16,9 +16,9 @@ require('@elliemae/ds-popperjs');
 require('styled-components');
 require('../../redux/reducers/index.js');
 require('../../configs/constants.js');
-var jsxRuntime = require('react/jsx-runtime');
 require('../../styled.js');
 require('../../DataTableContext.js');
+var jsxRuntime = require('react/jsx-runtime');
 require('@elliemae/ds-icons');
 require('@elliemae/ds-utilities');
 require('core-js/modules/esnext.async-iterator.reduce.js');

package/cjs/parts/TableContent.js

@@ -64,7 +64,7 @@ const TableContentComponent = props => {
     visibleColumns
   } = React.useContext(DataTableContext["default"]);
   const [shiftKeyPressed, setShiftKeyPressed] = React.useState(false);
-  const PureTableContent = React.useMemo(() => /*#__PURE__*/jsxRuntime.jsxs(styled.StyledDataTableWrapper, {
+  const PureTableContent = React.useMemo(() => /*#__PURE__*/jsxRuntime.jsxs(styled.StyledDataTableContentWrapper, {
     "data-testid": constants.DATA_TESTID.DATA_TABLE_CONTENT_WRAPPER,
     height: height,
     width: width,