@elliemae/ds-datagrids 2.3.0-alpha.8 → 2.3.0-next.2

package/cjs/plugins/column-sizing/ext-points/getTableProps.js

@@ -0,0 +1,63 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var React = require('react');
+var dsUtilities = require('@elliemae/ds-utilities');
+var utils = require('../utils.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function getTableProps(tableProps, _ref) {
+  let {
+    refs,
+    tableRef,
+    bodyWidth,
+    scrollbarWidth,
+    isDragging,
+    columnSizeService,
+    updateRowWidth,
+    columns
+  } = _ref;
+  const [tableNode, tableRefCallback] = React.useState();
+  dsUtilities.useResizeObserver(_ref2 => {
+    let {
+      width
+    } = _ref2;
+    if (!refs.header.current) return;
+    if (typeof scrollbarWidth.current !== 'number') scrollbarWidth.current = utils.getScrollbarSizeFromHeaderAndBody(refs);
+    if (typeof bodyWidth.current !== 'number') bodyWidth.current = refs.body.offsetWidth; // DataGrid: header with width 0 after redirect from details page (https://jira.elliemae.io/browse/PUI-2162)
+    // if (scrollbarWidth.current !== 0 && width - scrollbarWidth.current > 0) {
+    //   refs.header.current.style.width = `${width - scrollbarWidth.current}px`
+    // }
+
+    if (isDragging.current) return;
+    columnSizeService.updateMissingWidths(width);
+    updateRowWidth(width);
+  }, tableNode);
+  React.useEffect(() => {
+    if (tableNode) {
+      columnSizeService.updateMissingWidths(tableNode.clientWidth);
+      updateRowWidth(tableNode.clientWidth);
+    }
+
+    if (typeof bodyWidth.current !== 'number') bodyWidth.current = refs.body.clientWidth;
+  }, [columns, tableNode]);
+  return _objectSpread(_objectSpread({}, tableProps), {}, {
+    innerRef: dsUtilities.mergeRefs(tableRefCallback, tableProps.innerRef, tableRef)
+  });
+}
+
+exports.getTableProps = getTableProps;

package/cjs/plugins/column-sizing/getColumnNameFromProperty.js

@@ -0,0 +1,9 @@
+'use strict';
+
+require('core-js/modules/es.string.replace.js');
+
+function getColumnFromProperty(property) {
+  return property && property.replace(/\./g, '-');
+}
+
+module.exports = getColumnFromProperty;

package/cjs/plugins/column-sizing/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var ColumnSizingPlugin = require('./ColumnSizingPlugin.js');
+
+
+
+exports.ColumnSizingPlugin = ColumnSizingPlugin.ColumnSizingPlugin;

package/cjs/plugins/column-sizing/useColumnSizeService.js

@@ -0,0 +1,162 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.reduce.js');
+require('core-js/modules/esnext.iterator.reduce.js');
+var React = require('react');
+var utils = require('./utils.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function useColumnSizeService(instance) {
+  const columns = React.useRef({});
+  const [expandableGridDetailWidth, setExpandableGridDetailWidth] = React.useState(0);
+  const [expandableColumnWidth, setExpandableColumnWidth] = React.useState(0);
+  const expandedToContentColumns = React.useRef({});
+  const previousTotalWidth = React.useRef(0);
+  const initialUsedSpace = React.useRef({
+    space: 0,
+    amount: 0,
+    percentage: 0
+  });
+
+  const increaseUsedSpace = (space, columnUuid) => {
+    if (typeof space === 'number') {
+      initialUsedSpace.current.space += space;
+    } else if (space && space.endsWith('%')) {
+      initialUsedSpace.current.percentage += Number(space.slice(0, -1));
+    }
+
+    initialUsedSpace.current.amount += 1;
+    initialUsedSpace.current[columnUuid] = true;
+  }; // eslint-disable-next-line no-return-assign
+
+
+  const registerColumn = column => node => columns.current[column.uuid] = _objectSpread(_objectSpread({}, column), {}, {
+    node
+  });
+
+  const unregisterColumn = column => {
+    delete columns.current[column.property];
+  };
+
+  const setActualColumnsSizesFixed = () => {
+    const columnsArray = Object.values(columns.current);
+    columnsArray.forEach(column => {
+      const columnOffsetWidth = column.node.offsetWidth;
+      column.updateBodyHeaderWidth("".concat(columnOffsetWidth, "px"), "".concat(columnOffsetWidth, "px"));
+    });
+  };
+
+  const updateMissingWidths = totalWidth => {
+    if (totalWidth) {
+      previousTotalWidth.current = totalWidth;
+    }
+
+    const gridWidth = previousTotalWidth.current - 4;
+    const {
+      props: {
+        minColumnWidth,
+        expandable
+      },
+      resizedColumns,
+      decoratedColumns: columnDefinitions
+    } = instance.getInstance();
+    if (!initialUsedSpace.current) return;
+    const columnUuids = columnDefinitions.map(c => c.uuid);
+    const columnsArray = Object.values(columns.current).filter(c => columnUuids.includes(c.uuid)); // reset the initial space to the last columns
+
+    initialUsedSpace.current = {
+      space: 0,
+      amount: 0,
+      percentage: 0
+    };
+    columnsArray.forEach(column => {
+      if (column.width && column.width !== 'string' && !initialUsedSpace[column.uuid]) {
+        increaseUsedSpace(utils.getColumnWidthSize(column.width, minColumnWidth, column), column.uuid);
+      }
+    });
+    const nextColumnDict = {}; // eslint-disable-next-line max-statements
+
+    columnsArray.forEach(column => {
+      if (typeof column.width === 'number') {
+        nextColumnDict[column.uuid] = column;
+        return;
+      }
+
+      if (resizedColumns.current[column.uuid]) {
+        nextColumnDict[column.uuid] = column;
+        return;
+      }
+
+      const {
+        space: usedSpace,
+        amount: usedAmount,
+        percentage: usedPercentage
+      } = initialUsedSpace.current;
+      const percentValue = utils.getPercentageValue(column.width); // check if is percentage value
+
+      if (percentValue) {
+        const pxs = gridWidth * percentValue / 100;
+        const pxWidths = "".concat(utils.getColumnWidthSize(pxs, minColumnWidth, column), "px");
+        column.updateBodyHeaderWidth(pxWidths, pxWidths);
+        columns.current[column.uuid].computedWidth = pxs;
+
+        if (expandable && column.expandableColumn) {
+          setExpandableColumnWidth(pxs);
+        }
+      } else {
+        // otherwise the values are auto calculated from the total size
+        const columnFixWidth = (gridWidth * (1 - usedPercentage / 100) - usedSpace) / (columnsArray.length - usedAmount);
+        const percentWidth = columnFixWidth / gridWidth * 100;
+        const pxs = gridWidth * percentWidth / 100;
+        const actualWidthAfterChecks = utils.getColumnWidthSize(pxs, minColumnWidth, column);
+        column.updateBodyHeaderWidth("".concat(actualWidthAfterChecks, "px"), column.minWidth || minColumnWidth ? "".concat(column.minWidth || minColumnWidth, "px") : "".concat(pxs, "px"));
+        resizedColumns.current[column.uuid] = actualWidthAfterChecks;
+        columns.current[column.uuid].computedWidth = actualWidthAfterChecks;
+      }
+
+      nextColumnDict[column.uuid] = column;
+    });
+    columns.current = nextColumnDict;
+  };
+
+  React.useLayoutEffect(() => {
+    const totalWidth = computeColumnsTotalSize();
+    setExpandableGridDetailWidth(totalWidth - expandableColumnWidth);
+  }, [expandableColumnWidth]); // todo: make this incremental
+
+  const computeColumnsTotalSize = () => {
+    const columnsArray = Object.values(columns.current);
+    return columnsArray.reduce((totalSize, column) => totalSize + column.node.offsetWidth, 0);
+  };
+
+  return {
+    columns: columns.current,
+    expandedToContentColumns: expandedToContentColumns.current,
+    initialUsedSpace: initialUsedSpace.current,
+    increaseUsedSpace,
+    registerColumn,
+    unregisterColumn,
+    updateMissingWidths,
+    computeColumnsTotalSize,
+    setActualColumnsSizesFixed,
+    expandableGridDetailWidth,
+    expandableColumnWidth
+  };
+}
+
+module.exports = useColumnSizeService;

package/cjs/plugins/column-sizing/useStylesheetHelpers.js

@@ -0,0 +1,270 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/web.dom-collections.iterator.js');
+var stylesheet = require('stylesheet-helpers');
+var React = require('react');
+var dsUtilities = require('@elliemae/ds-utilities');
+var getColumnNameFromProperty = require('./getColumnNameFromProperty.js');
+var getScrollbarSize = require('../../utilities/getScrollbarSize.js');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var stylesheet__namespace = /*#__PURE__*/_interopNamespace(stylesheet);
+
+const SCROLLBAR_WIDTH = getScrollbarSize.getScrollbarWidth();
+const RowStylesheetHelper = _ref => {
+  let {
+    grid,
+    className
+  } = _ref;
+  const {
+    styleSheet,
+    styleSheetElement
+  } = stylesheet__namespace.create();
+
+  const update = width => {
+    const widths = typeof width === 'string' ? width : "".concat(width, "px");
+    stylesheet__namespace.updateProperties(window, styleSheet, className, width ? {
+      width: widths,
+      minWidth: widths,
+      maxWidth: widths
+    } : {
+      width: null,
+      minWidth: null,
+      maxWidth: null
+    });
+    const {
+      hasScroll
+    } = grid.getState();
+    const headerWidth = "".concat(width + (hasScroll ? SCROLLBAR_WIDTH : 0), "px");
+    stylesheet__namespace.updateProperties(window, styleSheet, "".concat(className, "-header"), width ? {
+      width: headerWidth,
+      minWidth: headerWidth,
+      maxWidth: headerWidth
+    } : {
+      width: null,
+      minWidth: null,
+      maxWidth: null
+    });
+  };
+
+  const remove = () => styleSheetElement.remove();
+
+  const getRowClassName = () => className;
+
+  return {
+    update,
+    remove,
+    getRowClassName
+  };
+};
+
+const getColumnClassName = _ref2 => {
+  let {
+    globalId,
+    column,
+    isHeader = false,
+    getId
+  } = _ref2;
+  return "column-".concat(globalId, "-").concat(getId(column)).concat(isHeader ? '-header' : '');
+};
+
+function setWidth(_ref3) {
+  let {
+    styleSheet,
+    className,
+    width,
+    minWidth
+  } = _ref3;
+  let widths;
+  if (typeof width === 'string') widths = width;
+  if (typeof width === 'number') widths = "".concat(width, "px");
+  let minWidths;
+  if (typeof minWidth === 'string') minWidths = minWidth;
+  if (typeof minWidth === 'number') minWidths = "".concat(minWidth, "px");
+  stylesheet__namespace.updateProperties(window, styleSheet, className, {
+    width: "".concat(widths || minWidths),
+    minWidth: "".concat(widths || minWidths),
+    // minWidth: `${minWidths || widths}`,
+    maxWidth: "".concat(widths || minWidths)
+  });
+}
+
+function updateStyle(_ref4) {
+  let {
+    styleSheet,
+    className,
+    style
+  } = _ref4;
+  stylesheet__namespace.updateProperties(window, styleSheet, className, style);
+}
+
+function columnSizesHelperImpl(_ref5) {
+  let {
+    globalId,
+    getId = _ref6 => {
+      let {
+        property
+      } = _ref6;
+      return getColumnNameFromProperty(property);
+    }
+  } = _ref5;
+  const {
+    styleSheetElement,
+    styleSheet
+  } = stylesheet__namespace.create();
+
+  const updateBodyHeaderWidth = _ref7 => {
+    let {
+      className,
+      headerClassName,
+      width,
+      minWidth
+    } = _ref7;
+    setWidth({
+      styleSheet,
+      className,
+      width,
+      minWidth
+    });
+    setWidth({
+      styleSheet,
+      className: headerClassName,
+      width,
+      minWidth,
+      isHeader: true
+    });
+  };
+
+  return {
+    decorateColumns: (columns, grid) => {
+      const {
+        props: {
+          minColumnWidth
+        }
+      } = grid.getInstance();
+      return columns.map(column => {
+        const cellClassName = getColumnClassName({
+          globalId,
+          getId,
+          column
+        });
+        const headerClassName = "".concat(cellClassName, "-header");
+        dsUtilities.set(column, 'header.props.className', headerClassName);
+        dsUtilities.set(column, 'cell.props.className', cellClassName);
+
+        column.updateBodyHeaderWidth = (width, minWidth) => {
+          updateBodyHeaderWidth({
+            className: cellClassName,
+            headerClassName,
+            width,
+            minWidth
+          });
+        };
+
+        column.updateWidth = (width, minWidth) => {
+          setWidth({
+            styleSheet,
+            className: cellClassName,
+            width,
+            minWidth
+          });
+        };
+
+        column.updateStyle = style => updateStyle({
+          styleSheet,
+          className: cellClassName,
+          style
+        });
+
+        column.headerHookEffects = [() => {
+          React.useEffect(() => {
+            const {
+              resizedColumns
+            } = grid.getInstance();
+            const resizedWidth = resizedColumns.current[column.uuid];
+            updateBodyHeaderWidth({
+              className: cellClassName,
+              headerClassName,
+              width: resizedWidth || column.width || minColumnWidth,
+              minWidth: resizedWidth || column.minWidth || minColumnWidth || column.width
+            });
+          }, [column.uuid]);
+        }];
+        return column;
+      });
+    },
+
+    getColumnCellClassName(column) {
+      return getColumnClassName({
+        globalId,
+        getId,
+        column
+      });
+    },
+
+    getColumnHeaderClassName(column) {
+      return "".concat(getColumnClassName({
+        globalId,
+        getId,
+        column
+      }), "-header");
+    },
+
+    cleanup() {
+      styleSheetElement.remove();
+    }
+
+  };
+}
+
+function useStylesheetHelpers(grid) {
+  const {
+    props: {
+      bindColumnsSizeTo,
+      bindRowSizeTo
+    }
+  } = grid;
+  const [columnsStylesheet] = React.useState(() => columnSizesHelperImpl({
+    globalId: bindColumnsSizeTo || grid.uuid,
+    getId: _ref8 => {
+      let {
+        uuid
+      } = _ref8;
+      return getColumnNameFromProperty(uuid);
+    }
+  }));
+  const rowClassName = "row-".concat(bindRowSizeTo || grid.uuid);
+  const [rowsStylesheet] = React.useState(() => RowStylesheetHelper({
+    grid,
+    className: rowClassName
+  }));
+  return {
+    columnsStylesheet,
+    rowsStylesheet,
+    rowClassName
+  };
+}
+
+exports.RowStylesheetHelper = RowStylesheetHelper;
+exports.useStylesheetHelpers = useStylesheetHelpers;

package/cjs/plugins/column-sizing/utils.js

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var dsUtilities = require('@elliemae/ds-utilities');
+
+function getScrollbarSizeFromHeaderAndBody(refs) {
+  const innerBodyOffsetWidth = dsUtilities.get(refs, ['innerBody', 'current', 'offsetWidth']);
+  const headerOffsetWidth = dsUtilities.get(refs, ['header', 'current', 'offsetWidth']);
+  return headerOffsetWidth - innerBodyOffsetWidth;
+}
+const isScrollbarVisible = element => element.scrollHeight > element.clientHeight;
+const getPercentageValue = percentString => {
+  if (typeof percentString !== 'string') return null;
+  const result = percentString.match(/(\d+|\d*[.,]\d{1,2})/);
+  return result && Number(result[0]);
+};
+const getColumnWidthSize = (width, minWidth, column) => {
+  if (column.special) {
+    return column.width;
+  }
+
+  if (minWidth && minWidth > width) return minWidth;
+  return width;
+};
+const calculateMinWidthForWrappedText = columns => {
+  let longestWord = 0;
+  columns.forEach(_ref => {
+    let {
+      label
+    } = _ref;
+    const localLongestWord = label.split(' ').sort((a, b) => b.length - a.length)[0].length;
+    if (localLongestWord > longestWord) longestWord = localLongestWord;
+  });
+  return longestWord * 8.5;
+};
+
+exports.calculateMinWidthForWrappedText = calculateMinWidthForWrappedText;
+exports.getColumnWidthSize = getColumnWidthSize;
+exports.getPercentageValue = getPercentageValue;
+exports.getScrollbarSizeFromHeaderAndBody = getScrollbarSizeFromHeaderAndBody;
+exports.isScrollbarVisible = isScrollbarVisible;

package/cjs/plugins/custom-cell-renderer/CustomRendererPlugin.js

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var createInstancePlugin = require('@elliemae/ds-shared/createDataInstance/createInstancePlugin');
+var addCustomRendererToCell = require('./addCustomRendererToCell.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var createInstancePlugin__default = /*#__PURE__*/_interopDefaultLegacy(createInstancePlugin);
+
+const decorateColumn = (column, grid) => addCustomRendererToCell["default"](grid)(column);
+
+const CustomRendererPlugin = createInstancePlugin__default["default"]('custom-renderer', {
+  decorateColumn
+});
+
+exports.CustomRendererPlugin = CustomRendererPlugin;

package/cjs/plugins/custom-cell-renderer/addCustomRendererToCell.js

@@ -0,0 +1,72 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var dsUtilities = require('@elliemae/ds-utilities');
+var initColumnDefinition = require('@elliemae/ds-shared/useDataGrid/initColumnDefinition');
+var getRendererComponent = require('./getRendererComponent.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const getRenderer = (renderer, grid, column) => (value, metaData) => {
+  const {
+    props: {
+      customHandlers,
+      parentRowData
+    }
+  } = grid.getInstance();
+
+  if (column && column.formatExpandable && value && value.props && value.props.children && value.props.children.length === 2) {
+    return [value.props.children[0], renderer({
+      value: value.props.children[1],
+      // apply custom render only to the original value not the arrow
+      metaData: _objectSpread(_objectSpread({}, metaData), {}, {
+        parentRowData
+      }),
+      customHandlers
+    })];
+  }
+
+  return renderer({
+    value,
+    metaData: _objectSpread(_objectSpread({}, metaData), {}, {
+      parentRowData
+    }),
+    customHandlers
+  });
+};
+
+const addCustomRendererToCell = grid => column => {
+  const {
+    customRenderer
+  } = column;
+  const customHeaderRenderer = dsUtilities.get(column, ['header', 'customRenderer']);
+  if (!customRenderer && !customHeaderRenderer) return column;
+
+  if (dsUtilities.isFunction(customHeaderRenderer)) {
+    column.header.formatters.push(getRenderer(customHeaderRenderer, grid));
+  }
+
+  if (dsUtilities.isFunction(customRenderer)) {
+    column = initColumnDefinition.appendCellFormatter(getRenderer(customRenderer, grid, column), column);
+  } else {
+    if (!customRenderer) return column;
+    column.cell.formatters.push((value, columnData) => getRendererComponent(grid, customRenderer, columnData));
+  }
+
+  return column;
+};
+
+exports["default"] = addCustomRendererToCell;
+exports.getRenderer = getRenderer;