@devexpress/dx-react-grid-bootstrap4/dist/dx-react-grid-bootstrap4.umd.cjs

Bootstrap 4 templates for DevExtreme React Grid component

/**
 * Bundle of @devexpress/dx-react-grid-bootstrap4
 * Generated: 2025-05-05
 * Version: 4.0.11
 * License: https://js.devexpress.com/Licensing
 */

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('@devexpress/dx-react-grid'), require('clsx'), require('@devexpress/dx-react-core'), require('react-dom'), require('react-popper'), require('@devexpress/dx-grid-core')) :
  typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@devexpress/dx-react-grid', 'clsx', '@devexpress/dx-react-core', 'react-dom', 'react-popper', '@devexpress/dx-grid-core'], factory) :
  (global = global || self, factory((global.DevExpress = global.DevExpress || {}, global.DevExpress.DXReactGridBootstrap4 = {}), global.React, global.PropTypes, global.dxReactGrid, global.classNames, global.dxReactCore, global.ReactDOM, global.reactPopper, global.dxGridCore));
}(this, (function (exports, React, PropTypes, dxReactGrid, classNames, dxReactCore, ReactDOM, reactPopper, dxGridCore) { 'use strict';

  if (typeof process === "undefined") { var process = { env: {} }; }

  PropTypes = PropTypes && Object.prototype.hasOwnProperty.call(PropTypes, 'default') ? PropTypes['default'] : PropTypes;
  classNames = classNames && Object.prototype.hasOwnProperty.call(classNames, 'default') ? classNames['default'] : classNames;

  function _extends() {
    _extends = Object.assign || function (target) {
      for (var i = 1; i < arguments.length; i++) {
        var source = arguments[i];

        for (var key in source) {
          if (Object.prototype.hasOwnProperty.call(source, key)) {
            target[key] = source[key];
          }
        }
      }

      return target;
    };

    return _extends.apply(this, arguments);
  }

  const BodyColorContext = /*#__PURE__*/React.createContext();

  const getBodyColor = () => {
    const body = document.getElementsByTagName('body')[0];
    const {
      backgroundColor
    } = window.getComputedStyle(body);
    return backgroundColor;
  };

  class Root extends React.PureComponent {
    constructor(props) {
      super(props);
      this.state = {
        backgroundColor: undefined
      };
    }

    componentDidMount() {
      this.setState({
        backgroundColor: getBodyColor()
      });
    }

    render() {
      const {
        children,
        className,
        rootRef,
        ...restProps
      } = this.props;
      const {
        backgroundColor
      } = this.state;
      return /*#__PURE__*/React.createElement("div", _extends({
        className: classNames('d-flex flex-column', className),
        ref: rootRef
      }, restProps), /*#__PURE__*/React.createElement(BodyColorContext.Provider, {
        value: backgroundColor
      }, children));
    }

  }
  process.env.NODE_ENV !== "production" ? Root.propTypes = {
    className: PropTypes.string,
    children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
    rootRef: PropTypes.object
  } : void 0;
  Root.defaultProps = {
    className: undefined,
    children: undefined,
    rootRef: undefined
  };

  const Grid = ({
    children,
    ...props
  }) => /*#__PURE__*/React.createElement(dxReactGrid.Grid, _extends({
    rootComponent: Root
  }, props), children);
  Grid.Root = Root;
  process.env.NODE_ENV !== "production" ? Grid.propTypes = {
    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
  } : void 0;

  const DefaultArrowComponent = /*#__PURE__*/React.forwardRef(({
    placement,
    ...restProps
  }, ref) => /*#__PURE__*/React.createElement("div", _extends({
    className: "arrow",
    ref: ref
  }, restProps)));
  DefaultArrowComponent.propTypes = {
    placement: PropTypes.string.isRequired
  };
  class Popover extends React.PureComponent {
    constructor(props) {
      super(props); // These two fields should be created only if `isOpen && toggle` condition is true
      // and destroyed when condition turns false.
      // But it would require usage of `this.state` and other code complications.
      // So let's not change it for now. Maybe a better solution would be found.

      this.contentRef = /*#__PURE__*/React.createRef();
      this.handleClick = this.handleClick.bind(this);
    }

    componentDidMount() {
      const {
        isOpen,
        toggle
      } = this.props;

      if (isOpen && toggle) {
        this.attachDocumentEvents();
      }
    }

    componentDidUpdate() {
      const {
        isOpen,
        toggle
      } = this.props;

      if (isOpen && toggle) {
        this.attachDocumentEvents();
      } else {
        this.detachDocumentEvents();
      }
    }

    componentWillUnmount() {
      this.detachDocumentEvents();
    }

    handleClick(e) {
      const {
        target: eventTarget
      } = e;
      const {
        current: contentNode
      } = this.contentRef;
      const {
        toggle,
        target
      } = this.props;

      if (contentNode && !contentNode.contains(eventTarget) && !target.contains(eventTarget)) {
        toggle();
      }
    }

    attachDocumentEvents() {
      if (!this.listenersAttached) {
        this.toggleDocumentEvents('addEventListener');
        this.listenersAttached = true;
      }
    }

    detachDocumentEvents() {
      if (this.listenersAttached) {
        this.toggleDocumentEvents('removeEventListener');
        this.listenersAttached = false;
      }
    }

    toggleDocumentEvents(method) {
      ['click', 'touchstart'].forEach(eventType => {
        document[method](eventType, this.handleClick, true);
      });
    }

    renderPopper() {
      const {
        children,
        target,
        renderInBody,
        arrowComponent: ArrowComponent,
        modifiers = [],
        ...restProps
      } = this.props;
      const popperModifiers = [{
        name: 'offset',
        options: {
          offset: [0, 8]
        }
      }, ...modifiers];
      return /*#__PURE__*/React.createElement(reactPopper.Popper, _extends({
        referenceElement: target,
        modifiers: popperModifiers
      }, restProps), ({
        ref,
        style,
        arrowProps,
        placement
      }) => /*#__PURE__*/React.createElement("div", {
        className: `popover show bs-popover-${placement}`,
        ref: ref,
        style: style
      }, /*#__PURE__*/React.createElement("div", {
        className: "popover-inner",
        ref: this.contentRef
      }, children), /*#__PURE__*/React.createElement(ArrowComponent, _extends({}, arrowProps, {
        placement: restProps.placement
      }))));
    }

    render() {
      const {
        isOpen,
        renderInBody
      } = this.props;
      if (!isOpen) return null;
      return renderInBody ? /*#__PURE__*/ReactDOM.createPortal(this.renderPopper(), document.body) : this.renderPopper();
    }

  }
  process.env.NODE_ENV !== "production" ? Popover.propTypes = {
    renderInBody: PropTypes.bool,
    placement: PropTypes.string,
    isOpen: PropTypes.bool,
    children: PropTypes.node.isRequired,
    target: PropTypes.oneOfType([PropTypes.instanceOf(typeof Element !== 'undefined' ? Element : Object), PropTypes.object]),
    toggle: PropTypes.func,
    arrowComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
  } : void 0;
  Popover.defaultProps = {
    target: null,
    renderInBody: true,
    isOpen: false,
    placement: 'auto',
    toggle: undefined,
    arrowComponent: DefaultArrowComponent
  };

  const Overlay = ({
    visible,
    children,
    target,
    onHide,
    ...restProps
  }) => {
    const handleToggle = () => {
      if (visible) onHide();
    };

    return target ? /*#__PURE__*/React.createElement(Popover, _extends({
      placement: "bottom",
      isOpen: visible,
      target: target,
      renderInBody: false,
      toggle: handleToggle
    }, restProps), children) : null;
  };
  process.env.NODE_ENV !== "production" ? Overlay.propTypes = {
    children: PropTypes.node.isRequired,
    onHide: PropTypes.func.isRequired,
    visible: PropTypes.bool,
    target: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
  } : void 0;
  Overlay.defaultProps = {
    visible: false,
    target: null
  };

  const Container = ({
    children,
    className,
    ...restProps
  }) => /*#__PURE__*/React.createElement("div", _extends({
    className: classNames('py-2', className)
  }, restProps), children);
  process.env.NODE_ENV !== "production" ? Container.propTypes = {
    children: PropTypes.node.isRequired,
    className: PropTypes.string
  } : void 0;
  Container.defaultProps = {
    className: undefined
  };

  const handleMouseDown = e => {
    e.currentTarget.style.outline = 'none';
  };

  const handleBlur = e => {
    e.currentTarget.style.outline = '';
  };

  const Item = ({
    item: {
      column,
      hidden
    },
    onToggle,
    className,
    disabled,
    ...restProps
  }) => /*#__PURE__*/React.createElement("button", _extends({
    className: classNames({
      'dropdown-item dx-g-bs4-column-chooser-item': true,
      'dx-g-bs4-cursor-pointer': !disabled
    }, className),
    type: "button",
    onClick: onToggle,
    onMouseDown: handleMouseDown,
    onBlur: handleBlur,
    disabled: disabled
  }, restProps), /*#__PURE__*/React.createElement("input", {
    type: "checkbox",
    className: classNames({
      'dx-g-bs4-cursor-pointer': !disabled,
      'dx-g-bs4-column-chooser-checkbox': true
    }),
    tabIndex: -1,
    checked: !hidden,
    disabled: disabled,
    onChange: onToggle,
    onClick: e => e.stopPropagation()
  }), column.title || column.name);
  process.env.NODE_ENV !== "production" ? Item.propTypes = {
    item: PropTypes.shape({
      column: PropTypes.shape({
        name: PropTypes.string,
        title: PropTypes.string
      }),
      hidden: PropTypes.bool
    }).isRequired,
    onToggle: PropTypes.func,
    className: PropTypes.string,
    disabled: PropTypes.bool
  } : void 0;
  Item.defaultProps = {
    onToggle: () => {},
    className: undefined,
    disabled: false
  };

  const ToggleButton = ({
    onToggle,
    className,
    getMessage,
    buttonRef,
    active,
    ...restProps
  }) => {
    const buttonClasses = classNames({
      btn: true,
      'btn-outline-secondary': true,
      'border-0': true,
      active
    }, className);
    return /*#__PURE__*/React.createElement("button", _extends({
      type: "button",
      className: buttonClasses,
      onClick: onToggle,
      ref: buttonRef
    }, restProps), /*#__PURE__*/React.createElement("span", {
      className: "oi oi-eye"
    }));
  };
  process.env.NODE_ENV !== "production" ? ToggleButton.propTypes = {
    onToggle: PropTypes.func.isRequired,
    getMessage: PropTypes.func.isRequired,
    buttonRef: PropTypes.func.isRequired,
    className: PropTypes.string,
    active: PropTypes.bool
  } : void 0;
  ToggleButton.defaultProps = {
    className: undefined,
    active: false
  };

  const ColumnChooser = dxReactCore.withComponents({
    Container,
    Item,
    Overlay,
    ToggleButton
  })(dxReactGrid.ColumnChooser);

  const Container$1 = ({
    clientOffset,
    style,
    className,
    children,
    ...restProps
  }) => /*#__PURE__*/React.createElement("ul", _extends({
    className: classNames('list-group d-inline-block position-fixed dx-g-bs4-drag-drop', className),
    style: {
      transform: `translate(calc(${clientOffset.x}px - 50%), calc(${clientOffset.y}px - 50%))`,
      msTransform: `translateX(${clientOffset.x}px) translateX(-50%) translateY(${clientOffset.y}px) translateY(-50%)`,
      zIndex: 1000,
      left: 0,
      top: 0,
      ...style
    }
  }, restProps), children);
  process.env.NODE_ENV !== "production" ? Container$1.propTypes = {
    clientOffset: PropTypes.shape({
      x: PropTypes.number.isRequired,
      y: PropTypes.number.isRequired
    }).isRequired,
    style: PropTypes.object,
    className: PropTypes.string,
    children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)])
  } : void 0;
  Container$1.defaultProps = {
    style: {},
    className: undefined,
    children: undefined
  };
  const Column = /*#__PURE__*/React.memo(({
    column,
    className,
    ...restProps
  }) => /*#__PURE__*/React.createElement("li", _extends({
    className: classNames('list-group-item', className)
  }, restProps), column.title));
  Column.propTypes = {
    column: PropTypes.object.isRequired,
    className: PropTypes.string
  };
  Column.defaultProps = {
    className: undefined
  };

  const DragDropProvider = dxReactCore.withComponents({
    Container: Container$1,
    Column
  })(dxReactGrid.DragDropProvider);

  const PaginationLink = ({
    previous,
    next,
    children,
    ...restProps
  }) => {
    let ariaLabel = '';
    let content = children;

    if (next || previous) {
      let angleQuote;

      if (next) {
        angleQuote = '\u00bb';
        ariaLabel = 'Next';
      }

      if (previous) {
        angleQuote = '\u00ab';
        ariaLabel = 'Previous';
      }

      content = [/*#__PURE__*/React.createElement("span", {
        "aria-hidden": "true",
        key: "caret"
      }, children || angleQuote), /*#__PURE__*/React.createElement("span", {
        className: "sr-only",
        key: "sr"
      }, ariaLabel)];
    }

    return /*#__PURE__*/React.createElement("a", _extends({
      className: "page-link",
      "aria-label": ariaLabel
    }, restProps), content);
  };
  process.env.NODE_ENV !== "production" ? PaginationLink.propTypes = {
    previous: PropTypes.bool,
    next: PropTypes.bool,
    children: PropTypes.node
  } : void 0;
  PaginationLink.defaultProps = {
    previous: false,
    next: false,
    children: undefined
  };

  const PaginationItem = ({
    active,
    disabled,
    ...restProps
  }) => /*#__PURE__*/React.createElement("li", _extends({
    className: classNames('page-item', {
      active,
      disabled
    })
  }, restProps));
  process.env.NODE_ENV !== "production" ? PaginationItem.propTypes = {
    active: PropTypes.bool,
    disabled: PropTypes.bool
  } : void 0;
  PaginationItem.defaultProps = {
    active: false,
    disabled: false
  };

  const Pagination = ({
    className,
    listClassName,
    ...restProps
  }) => /*#__PURE__*/React.createElement("nav", {
    className: className
  }, /*#__PURE__*/React.createElement("ul", _extends({
    className: classNames('pagination', listClassName)
  }, restProps)));
  process.env.NODE_ENV !== "production" ? Pagination.propTypes = {
    className: PropTypes.string,
    listClassName: PropTypes.string
  } : void 0;
  Pagination.defaultProps = {
    className: undefined,
    listClassName: undefined
  };

  const PageSizeSelector = ({
    pageSize,
    onPageSizeChange,
    pageSizes,
    getMessage
  }) => {
    const showAll = getMessage('showAll');
    return /*#__PURE__*/React.createElement("div", {
      className: "d-inline-block"
    }, /*#__PURE__*/React.createElement("select", {
      className: "form-control d-sm-none",
      value: pageSize,
      onChange: e => onPageSizeChange(parseInt(e.target.value, 10))
    }, pageSizes.map(val => /*#__PURE__*/React.createElement("option", {
      key: val,
      value: val
    }, val || showAll))), /*#__PURE__*/React.createElement(Pagination, {
      className: "d-none d-sm-flex",
      listClassName: "m-0"
    }, pageSizes.map(item => /*#__PURE__*/React.createElement(PaginationItem, {
      key: item,
      active: item === pageSize && true
    }, /*#__PURE__*/React.createElement(PaginationLink, {
      href: "#",
      onClick: e => {
        e.preventDefault();
        onPageSizeChange(item);
      }
    }, item || showAll)))));
  };
  process.env.NODE_ENV !== "production" ? PageSizeSelector.propTypes = {
    pageSize: PropTypes.number.isRequired,
    onPageSizeChange: PropTypes.func.isRequired,
    pageSizes: PropTypes.arrayOf(PropTypes.number).isRequired,
    getMessage: PropTypes.func.isRequired
  } : void 0;

  const renderPageButtons = (currentPage, totalPageCount, currentPageChange) => {
    const pageButtons = [];
    const maxButtonCount = 3;
    let startPage = 1;
    let endPage = totalPageCount || 1; // NOTE: take into account last button and ellipsis (T1004797)

    if (maxButtonCount < totalPageCount - 2) {
      startPage = dxGridCore.calculateStartPage(currentPage + 1, maxButtonCount, totalPageCount);
      endPage = startPage + maxButtonCount - 1;
    }

    if (startPage > 1) {
      pageButtons.push( /*#__PURE__*/React.createElement(PaginationItem, {
        key: 1
      }, /*#__PURE__*/React.createElement(PaginationLink, {
        href: "#",
        onClick: e => currentPageChange(e, 0)
      }, 1)));

      if (startPage > 2) {
        pageButtons.push( /*#__PURE__*/React.createElement(PaginationItem, {
          key: "ellipsisStart",
          disabled: true
        }, /*#__PURE__*/React.createElement(PaginationLink, null, '...')));
      }
    }

    for (let page = startPage; page <= endPage; page += 1) {
      pageButtons.push( /*#__PURE__*/React.createElement(PaginationItem, {
        key: page,
        active: page === currentPage + 1,
        disabled: startPage === endPage
      }, /*#__PURE__*/React.createElement(PaginationLink, {
        href: "#",
        onClick: e => currentPageChange(e, page - 1)
      }, page)));
    }

    if (endPage < totalPageCount) {
      if (endPage < totalPageCount - 1) {
        pageButtons.push( /*#__PURE__*/React.createElement(PaginationItem, {
          key: "ellipsisEnd",
          disabled: true
        }, /*#__PURE__*/React.createElement(PaginationLink, null, '...')));
      }

      pageButtons.push( /*#__PURE__*/React.createElement(PaginationItem, {
        key: totalPageCount
      }, /*#__PURE__*/React.createElement(PaginationLink, {
        href: "#",
        onClick: e => currentPageChange(e, totalPageCount - 1)
      }, totalPageCount)));
    }

    return pageButtons;
  };

  const Pagination$1 = ({
    totalPages,
    currentPage,
    onCurrentPageChange,
    totalCount,
    pageSize,
    getMessage
  }) => {
    const from = dxGridCore.firstRowOnPage(currentPage, pageSize, totalCount);
    const to = dxGridCore.lastRowOnPage(currentPage, pageSize, totalCount);

    const currentPageChange = (e, nextPage) => {
      e.preventDefault();
      onCurrentPageChange(nextPage);
    };

    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pagination, {
      className: "float-right d-none d-sm-flex",
      listClassName: "m-0"
    }, /*#__PURE__*/React.createElement(PaginationItem, {
      disabled: currentPage === 0
    }, /*#__PURE__*/React.createElement(PaginationLink, {
      previous: true,
      href: "#",
      onClick: e => currentPageChange(e, currentPage - 1)
    })), renderPageButtons(currentPage, totalPages, currentPageChange), /*#__PURE__*/React.createElement(PaginationItem, {
      disabled: currentPage === totalPages - 1 || totalCount === 0
    }, /*#__PURE__*/React.createElement(PaginationLink, {
      next: true,
      href: "#",
      onClick: e => currentPageChange(e, currentPage + 1)
    }))), /*#__PURE__*/React.createElement(Pagination, {
      className: "float-right d-sm-none",
      listClassName: "m-0"
    }, /*#__PURE__*/React.createElement(PaginationItem, {
      disabled: currentPage === 0
    }, /*#__PURE__*/React.createElement(PaginationLink, {
      previous: true,
      href: "#",
      onClick: e => currentPageChange(e, currentPage - 1)
    })), "\xA0", /*#__PURE__*/React.createElement(PaginationItem, {
      disabled: currentPage === totalPages - 1 || totalCount === 0
    }, /*#__PURE__*/React.createElement(PaginationLink, {
      next: true,
      href: "#",
      onClick: e => currentPageChange(e, currentPage + 1)
    }))), /*#__PURE__*/React.createElement("span", {
      className: "float-right d-sm-none mr-4"
    }, /*#__PURE__*/React.createElement("span", {
      className: "d-inline-block align-middle"
    }, getMessage('info', {
      from,
      to,
      count: totalCount
    }))));
  };
  process.env.NODE_ENV !== "production" ? Pagination$1.propTypes = {
    totalPages: PropTypes.number.isRequired,
    currentPage: PropTypes.number.isRequired,
    onCurrentPageChange: PropTypes.func.isRequired,
    totalCount: PropTypes.number.isRequired,
    pageSize: PropTypes.number.isRequired,
    getMessage: PropTypes.func.isRequired
  } : void 0;

  const PagerBase = ({
    currentPage,
    onCurrentPageChange,
    totalPages,
    pageSize,
    onPageSizeChange,
    pageSizes,
    totalCount,
    getMessage,
    className,
    forwardedRef,
    ...restProps
  }) => /*#__PURE__*/React.createElement("div", _extends({
    className: classNames('clearfix card-footer dx-g-bs4-paging-panel', className),
    ref: forwardedRef
  }, restProps), !!pageSizes.length && /*#__PURE__*/React.createElement(PageSizeSelector, {
    pageSize: pageSize,
    onPageSizeChange: onPageSizeChange,
    pageSizes: pageSizes,
    getMessage: getMessage
  }), /*#__PURE__*/React.createElement(Pagination$1, {
    totalPages: totalPages,
    totalCount: totalCount,
    currentPage: currentPage,
    onCurrentPageChange: page => onCurrentPageChange(page),
    pageSize: pageSize,
    getMessage: getMessage
  }));

  process.env.NODE_ENV !== "production" ? PagerBase.propTypes = {
    currentPage: PropTypes.number.isRequired,
    onCurrentPageChange: PropTypes.func.isRequired,
    totalPages: PropTypes.number.isRequired,
    pageSize: PropTypes.number.isRequired,
    onPageSizeChange: PropTypes.func.isRequired,
    pageSizes: PropTypes.arrayOf(PropTypes.number).isRequired,
    totalCount: PropTypes.number.isRequired,
    getMessage: PropTypes.func.isRequired,
    className: PropTypes.string,
    forwardedRef: PropTypes.func
  } : void 0;
  PagerBase.defaultProps = {
    className: undefined,
    forwardedRef: undefined
  };
  const Pager = dxReactGrid.withKeyboardNavigation('paging', 'none')(PagerBase);

  const PagingPanel = dxReactCore.withComponents({
    Container: Pager
  })(dxReactGrid.PagingPanel);

  const GroupPanelContainer = ({
    children,
    className,
    forwardedRef,
    ...restProps
  }) => /*#__PURE__*/React.createElement("div", _extends({
    ref: forwardedRef,
    className: classNames('w-100 mt-1', className)
  }, restProps), children);
  process.env.NODE_ENV !== "production" ? GroupPanelContainer.propTypes = {
    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
    className: PropTypes.string,
    forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
  } : void 0;
  GroupPanelContainer.defaultProps = {
    children: null,
    className: undefined,
    forwardedRef: undefined
  };

  const SortingIndicator = /*#__PURE__*/React.memo(({
    direction,
    className
  }) => /*#__PURE__*/React.createElement("span", {
    className: classNames({
      'oi dx-g-bs4-sorting-indicator mx-2': true,
      'oi-arrow-thick-bottom': direction === 'desc',
      'oi-arrow-thick-top': direction !== 'desc',
      invisible: !direction
    }, className)
  }));
  SortingIndicator.propTypes = {
    direction: PropTypes.oneOf(['asc', 'desc']),
    className: PropTypes.string
  };
  SortingIndicator.defaultProps = {
    direction: null,
    className: undefined
  };

  const ENTER_KEY_CODE = 13;
  const SPACE_KEY_CODE = 32;

  const isActionKey = keyCode => keyCode === ENTER_KEY_CODE || keyCode === SPACE_KEY_CODE;

  const GroupPanelItem = ({
    item: {
      column,
      draft
    },
    onGroup,
    showGroupingControls,
    showSortingControls,
    sortingDirection,
    onSort,
    className,
    groupingEnabled,
    sortingEnabled,
    forwardedRef,
    ...restProps
  }) => {
    const handleSortingChange = e => {
      const isActionKeyDown = isActionKey(e.keyCode);
      const isMouseClick = e.keyCode === undefined;
      if (!showSortingControls || !sortingEnabled || !(isActionKeyDown || isMouseClick)) return;
      const cancelSortingRelatedKey = e.metaKey || e.ctrlKey;
      const direction = (isMouseClick || isActionKeyDown) && cancelSortingRelatedKey ? null : undefined;
      e.preventDefault();
      onSort({
        direction,
        keepOther: cancelSortingRelatedKey
      });
    };

    const handleUngroup = e => {
      if (!groupingEnabled) return;
      const isActionKeyDown = isActionKey(e.keyCode);
      const isMouseClick = e.keyCode === undefined;
      if (!isActionKeyDown && !isMouseClick) return;
      onGroup();
    };

    return /*#__PURE__*/React.createElement("div", _extends({
      ref: forwardedRef,
      className: classNames({
        'btn-group mb-1 mr-1': true,
        'dx-g-bs4-inactive': draft
      }, className)
    }, restProps), /*#__PURE__*/React.createElement("span", _extends({
      className: classNames({
        'btn btn-outline-secondary': true,
        disabled: !sortingEnabled && (showSortingControls || !groupingEnabled)
      }),
      onClick: handleSortingChange,
      onKeyDown: handleSortingChange
    }, sortingEnabled ? {
      tabIndex: 0
    } : null), column.title || column.name, showSortingControls && sortingDirection && /*#__PURE__*/React.createElement("span", null, "\xA0", /*#__PURE__*/React.createElement(SortingIndicator, {
      direction: sortingDirection
    }))), showGroupingControls && /*#__PURE__*/React.createElement("span", {
      className: classNames({
        'btn btn-outline-secondary': true,
        disabled: !groupingEnabled
      }),
      onClick: handleUngroup
    }, "\xA0", /*#__PURE__*/React.createElement("span", {
      className: "oi oi-x dx-g-bs4-group-panel-item-icon"
    })));
  };
  process.env.NODE_ENV !== "production" ? GroupPanelItem.propTypes = {
    item: PropTypes.shape({
      column: PropTypes.shape({
        name: PropTypes.string,
        title: PropTypes.string
      }).isRequired,
      draft: PropTypes.bool
    }).isRequired,
    showSortingControls: PropTypes.bool,
    sortingDirection: PropTypes.oneOf(['asc', 'desc', null]),
    className: PropTypes.string,
    onSort: PropTypes.func,
    onGroup: PropTypes.func,
    showGroupingControls: PropTypes.bool,
    groupingEnabled: PropTypes.bool,
    sortingEnabled: PropTypes.bool,
    forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
  } : void 0;
  GroupPanelItem.defaultProps = {
    showSortingControls: false,
    sortingDirection: undefined,
    className: undefined,
    onSort: undefined,
    onGroup: undefined,
    showGroupingControls: false,
    sortingEnabled: false,
    groupingEnabled: false,
    forwardedRef: undefined
  };

  const GroupPanelEmptyMessage = ({
    getMessage,
    className,
    forwardedRef,
    ...restProps
  }) => /*#__PURE__*/React.createElement("div", _extends({
    ref: forwardedRef,
    className: classNames('dx-g-bs4-group-panel-empty-message', className)
  }, restProps), getMessage('groupByColumn'));
  process.env.NODE_ENV !== "production" ? GroupPanelEmptyMessage.propTypes = {
    getMessage: PropTypes.func.isRequired,
    className: PropTypes.string,
    forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
  } : void 0;
  GroupPanelEmptyMessage.defaultProps = {
    className: undefined,
    forwardedRef: undefined
  };

  const GroupingPanel = dxReactCore.withComponents({
    Container: GroupPanelContainer,
    Item: GroupPanelItem,
    EmptyMessage: GroupPanelEmptyMessage
  })(dxReactGrid.GroupingPanel);

  const ENTER_KEY_CODE$1 = 13;
  const SPACE_KEY_CODE$1 = 32;

  const handleMouseDown$1 = e => {
    e.target.style.outline = 'none';
  };

  const handleBlur$1 = e => {
    e.target.style.outline = '';
  };

  const ExpandButton = ({
    visible,
    expanded,
    onToggle,
    className,
    ...restProps
  }) => {
    const fireToggle = () => {
      if (!visible) return;
      onToggle(!expanded);
    };

    const handleClick = e => {
      e.stopPropagation();
      fireToggle();
    };

    const handleKeyDown = e => {
      if (e.keyCode === ENTER_KEY_CODE$1 || e.keyCode === SPACE_KEY_CODE$1) {
        e.preventDefault();
        fireToggle();
      }
    };

    return /*#__PURE__*/React.createElement("i", _extends({
      className: classNames({
        'oi p-2 text-center dx-g-bs4-toggle-button': true,
        'oi-chevron-bottom': expanded,
        'oi-chevron-right': !expanded,
        'dx-g-bs4-toggle-button-hidden': !visible
      }, className),
      tabIndex: visible ? 0 : undefined // eslint-disable-line jsx-a11y/no-noninteractive-tabindex
      ,
      onKeyDown: handleKeyDown,
      onMouseDown: handleMouseDown$1,
      onBlur: handleBlur$1,
      onClick: handleClick
    }, restProps));
  };
  process.env.NODE_ENV !== "production" ? ExpandButton.propTypes = {
    visible: PropTypes.bool,
    expanded: PropTypes.bool,
    onToggle: PropTypes.func,
    className: PropTypes.string
  } : void 0;
  ExpandButton.defaultProps = {
    visible: true,
    expanded: false,
    onToggle: () => {},
    className: undefined
  };

  const TableDetailToggleCell = ({
    expanded,
    onToggle,
    tableColumn,
    tableRow,
    row,
    className,
    forwardedRef,
    ...restProps
  }) => /*#__PURE__*/React.createElement("td", _extends({
    className: classNames('text-center align-middle', className),
    ref: forwardedRef
  }, restProps), /*#__PURE__*/React.createElement(ExpandButton, {
    expanded: expanded,
    onToggle: onToggle
  }));
  process.env.NODE_ENV !== "production" ? TableDetailToggleCell.propTypes = {
    className: PropTypes.string,
    expanded: PropTypes.bool,
    onToggle: PropTypes.func,
    tableColumn: PropTypes.object,
    tableRow: PropTypes.object,
    row: PropTypes.any,
    forwardedRef: PropTypes.func
  } : void 0;
  TableDetailToggleCell.defaultProps = {
    className: undefined,
    expanded: false,
    onToggle: () => {},
    tableColumn: undefined,
    tableRow: undefined,
    row: undefined,
    forwardedRef: undefined
  };

  const TableDetailCell = ({
    colSpan,
    children,
    className,
    tableColumn,
    tableRow,
    row,
    forwardedRef,
    ...restProps
  }) => /*#__PURE__*/React.createElement("td", _extends({
    colSpan: colSpan,
    ref: forwardedRef,
    className: classNames('table-active', className)
  }, restProps), children);
  process.env.NODE_ENV !== "production" ? TableDetailCell.propTypes = {
    style: PropTypes.object,
    colSpan: PropTypes.number,
    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
    className: PropTypes.string,
    tableColumn: PropTypes.object,
    tableRow: PropTypes.object,
    row: PropTypes.any,
    forwardedRef: PropTypes.func
  } : void 0;
  TableDetailCell.defaultProps = {
    style: null,
    colSpan: 1,
    className: undefined,
    tableColumn: undefined,
    tableRow: undefined,
    row: undefined,
    children: undefined,
    forwardedRef: undefined
  };

  const TableRow = ({
    children,
    row,
    tableRow,
    forwardedRef,
    ...restProps
  }) => /*#__PURE__*/React.createElement("tr", _extends({
    ref: forwardedRef
  }, restProps), children);
  process.env.NODE_ENV !== "production" ? TableRow.propTypes = {
    children: PropTypes.node,
    row: PropTypes.any,
    tableRow: PropTypes.object,
    forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
  } : void 0;
  TableRow.defaultProps = {
    children: null,
    row: undefined,
    tableRow: undefined,
    forwardedRef: undefined
  };

  const TableRowDetailWithWidth = props => /*#__PURE__*/React.createElement(dxReactGrid.TableRowDetail, _extends({
    toggleColumnWidth: 40
  }, props));

  TableRowDetailWithWidth.components = dxReactGrid.TableRowDetail.components;
  const TableRowDetail = dxReactCore.withComponents({
    Row: TableRow,
    Cell: TableDetailCell,
    ToggleCell: TableDetailToggleCell
  })(TableRowDetailWithWidth);
  TableRowDetail.COLUMN_TYPE = dxReactGrid.TableRowDetail.COLUMN_TYPE;
  TableRowDetail.ROW_TYPE = dxReactGrid.TableRowDetail.ROW_TYPE;

  const Cell = ({
    className,
    colSpan,
    row,
    column,
    expanded,
    onToggle,
    children,
    tableRow,
    tableColumn,
    iconComponent: Icon,
    contentComponent: Content,
    inlineSummaryComponent: InlineSummary,
    inlineSummaryItemComponent: InlineSummaryItem,
    inlineSummaries,
    getMessage,
    containerComponent: Container,
    side,
    position,
    forwardedRef,
    ...restProps
  }) => {
    const handleClick = () => onToggle();

    return /*#__PURE__*/React.createElement("td", _extends({
      colSpan: colSpan,
      className: classNames({
        'dx-g-bs4-group-cell': true,
        'text-nowrap': !(tableColumn && tableColumn.wordWrapEnabled)
      }, className),
      ref: forwardedRef,
      onClick: handleClick
    }, restProps), /*#__PURE__*/React.createElement(Container, {
      side: side,
      position: position
    }, /*#__PURE__*/React.createElement(Icon, {
      expanded: expanded,
      onToggle: onToggle,
      className: "mr-2"
    }), /*#__PURE__*/React.createElement(Content, {
      column: column,
      row: row
    }, children), inlineSummaries.length ? /*#__PURE__*/React.createElement(InlineSummary, {
      inlineSummaries: inlineSummaries,
      getMessage: getMessage,
      inlineSummaryItemComponent: InlineSummaryItem
    }) : null));
  };
  process.env.NODE_ENV !== "production" ? Cell.propTypes = {
    contentComponent: PropTypes.func.isRequired,
    iconComponent: PropTypes.func.isRequired,
    containerComponent: PropTypes.func.isRequired,
    inlineSummaryComponent: PropTypes.func.isRequired,
    inlineSummaryItemComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
    inlineSummaries: PropTypes.array,
    row: PropTypes.any,
    column: PropTypes.object,
    expanded: PropTypes.bool,
    className: PropTypes.string,
    colSpan: PropTypes.number,
    getMessage: PropTypes.func.isRequired,
    onToggle: PropTypes.func,
    children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
    tableRow: PropTypes.object,
    tableColumn: PropTypes.object,
    side: PropTypes.string,
    position: PropTypes.string,
    forwardedRef: PropTypes.func
  } : void 0;
  Cell.defaultProps = {
    row: {},
    column: {},
    expanded: false,
    inlineSummaries: [],
    className: undefined,
    colSpan: 1,
    onToggle: () => {},
    children: undefined,
    tableRow: undefined,
    tableColumn: undefined,
    side: 'left',
    position: '',
    forwardedRef: undefined
  };

  const Content = ({
    column,
    row,
    children,
    ...restProps
  }) => /*#__PURE__*/React.createElement("span", restProps, /*#__PURE__*/React.createElement("strong", null, column.title || column.name, ":", ' '), children || String(row.value));
  process.env.NODE_ENV !== "production" ? Content.propTypes = {
    row: PropTypes.any,
    column: PropTypes.object,
    children: PropTypes.node
  } : void 0;
  Content.defaultProps = {
    row: {},
    column: {},
    children: undefined
  };

  const Container$2 = ({
    children,
    className,
    style,
    side,
    position,
    ...restProps
  }) => /*#__PURE__*/React.createElement("div", _extends({
    className: classNames('position-sticky dx-g-bs4-fixed-group-cell', className),
    style: { ...style,
      [side]: position
    }
  }, restProps), children);
  process.env.NODE_ENV !== "production" ? Container$2.propTypes = {
    children: PropTypes.node,
    className: PropTypes.string,
    style: PropTypes.object,
    side: PropTypes.string,
    position: PropTypes.string
  } : void 0;
  Container$2.defaultProps = {
    children: undefined,
    className: undefined,
    style: null,
    side: 'left',
    position: ''
  };

  const IndentCell = ({
    tableRow,
    tableColumn,
    row,
    column,
    style,
    className,
    position,
    side,
    forwardedRef,
    ...restProps
  }) => /*#__PURE__*/React.createElement("td", _extends({
    className: classNames('position-sticky dx-g-bs4-fixed-cell', className),
    style: { ...style,
      [side]: position
    },
    ref: forwardedRef
  }, restProps));
  process.env.NODE_ENV !== "production" ? IndentCell.propTypes = {
    tableRow: PropTypes.object,
    tableColumn: PropTypes.object,
    row: PropTypes.any,
    column: PropTypes.object,
    className: PropTypes.string,
    style: PropTypes.object,
    side: PropTypes.string,
    position: PropTypes.number,
    forwardedRef: PropTypes.func
  } : void 0;
  IndentCell.defaultProps = {
    tableRow: undefined,
    tableColumn: undefined,
    row: {},
    column: {},
    className: undefined,
    style: null,
    side: 'left',
    position: undefined,
    forwardedRef: undefined
  };

  const Row = ({
    children,
    className,
    ...restProps
  }) => /*#__PURE__*/React.createElement(TableRow, _extends({}, restProps, {
    className: classNames('dx-g-bs4-cursor-pointer', className)
  }), children);
  process.env.NODE_ENV !== "production" ? Row.propTypes = {
    children: PropTypes.node,
    className: PropTypes.string
  } : void 0;
  Row.defaultProps = {
    children: null,
    className: undefined
  };

  const InlineSummary = ({
    inlineSummaries,
    getMessage,
    inlineSummaryItemComponent: InlineSummaryItem,
    className,
    ...restProps
  }) => /*#__PURE__*/React.createElement("span", _extends({
    className: classNames('ml-2', className)
  }, restProps), '(', inlineSummaries.map(s => /*#__PURE__*/React.createElement(InlineSummaryItem, {
    key: s.type,
    summary: s,
    getMessage: getMessage
  })).reduce((acc, summary) => acc.concat(summary, ', '), []).slice(0, -1), ')');
  process.env.NODE_ENV !== "production" ? InlineSummary.propTypes = {
    className: PropTypes.string,
    getMessage: PropTypes.func.isRequired,
    inlineSummaries: PropTypes.array,
    inlineSummaryItemComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired
  } : void 0;
  InlineSummary.defaultProps = {
    className: undefined,
    inlineSummaries: []
  };

  const TableCell = ({
    column,
    value,
    children,
    tableRow,
    tableColumn,
    row,
    forwardedRef,
    className,
    ...restProps
  }) => /*#__PURE__*/React.createElement("td", _extends({
    className: classNames({
      'dx-g-bs4-table-cell': true,
      'text-nowrap': !(tableColumn && tableColumn.wordWrapEnabled),
      'text-right': tableColumn && tableColumn.align === 'right',
      'text-center': tableColumn && tableColumn.align === 'center'
    }, className),
    ref: forwardedRef
  }, restProps), children || value);
  process.env.NODE_ENV !== "production" ? TableCell.propTypes = {
    value: PropTypes.any,
    column: PropTypes.object,
    row: PropTypes.any,
    children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
    tableRow: PropTypes.object,
    tableColumn: PropTypes.object,
    className: PropTypes.string,
    forwardedRef: PropTypes.func
  } : void 0;
  TableCell.defaultProps = {
    value: undefined,
    column: undefined,
    row: undefined,
    children: undefined,
    tableRow: undefined,
    tableColumn: undefined,
    className: undefined,
    forwardedRef: undefined
  };

  const SummaryCell = ({
    onToggle,
    ...restProps
  }) => /*#__PURE__*/React.createElement(TableCell, _extends({}, restProps, {
    onClick: onToggle
  }));
  process.env.NODE_ENV !== "production" ? SummaryCell.propTypes = {
    onToggle: PropTypes.func
  } : void 0;
  SummaryCell.defaultProps = {
    onToggle: () => {}
  };

  const TableSummaryItem = ({
    children,
    type,
    value,
    getMessage,
    className,
    tagName: Tag,
    ...restProps
  }) => /*#__PURE__*/React.createElement(Tag, _extends({
    className: classNames('dx-g-bs4-table-summary-item', className)
  }, restProps), /*#__PURE__*/React.createElement(React.Fragment, null, getMessage(type), ":\xA0\xA0", children));
  process.env.NODE_ENV !== "production" ? TableSummaryItem.propTypes = {
    tagName: PropTypes.string,
    value: PropTypes.number,
    type: PropTypes.string.isRequired,
    getMessage: PropTypes.func.isRequired,
    className: PropTypes.string,
    children: PropTypes.node
  } : void 0;
  TableSummaryItem.defaultProps = {
    tagName: 'div',
    value: null,
    className: undefined,
    children: undefined
  };

  const TableGroupRowWithIndent = props => /*#__PURE__*/React.createElement(dxReactGrid.TableGroupRow, _extends({
    indentColumnWidth: 33,
    contentCellPadding: "0.75rem"
  }, props));

  TableGroupRowWithIndent.components = dxReactGrid.TableGroupRow.components;
  const StubCell = SummaryCell;
  const TableGroupRow = dxReactCore.withComponents({
    Row,
    Cell,
    IndentCell,
    Container: Container$2,
    Content,
    Icon: ExpandButton,
    InlineSummary,
    InlineSummaryItem: dxReactGrid.InlineSummaryItem,
    SummaryCell,
    SummaryItem: TableSummaryItem,
    StubCell
  })(TableGroupRowWithIndent);
  TableGroupRow.COLUMN_TYPE = dxReactGrid.TableGroupRow.COLUMN_TYPE;
  TableGroupRow.ROW_TYPE = dxReactGrid.TableGroupRow.ROW_TYPE;

  const SelectionControl = ({
    disabled,
    checked,
    indeterminate,
    onChange,
    className,
    ...restProps
  }) => /*#__PURE__*/React.createElement("input", _extends({
    className: classNames({
      'd-inline-block': true,
      'dx-g-bs4-cursor-pointer': !disabled
    }, className),
    type: "checkbox",
    disabled: disabled,
    checked: checked,
    ref: ref => {
      if (ref) {
        ref.indeterminate = indeterminate; // eslint-disable-line no-param-reassign
      }
    },
    onChange: () => {
      if (disabled) return;
      onChange();
    },
    onClick: e => e.stopPropagation()
  }, restProps));
  process.env.NODE_ENV !== "production" ? SelectionControl.propTypes = {
    disabled: PropTypes.bool,
    checked: PropTypes.bool,
    indeterminate: PropTypes.bool,
    onChange: PropTypes.func,
    className: PropTypes.string
  } : void 0;
  SelectionControl.defaultProps = {
    disabled: false,
    checked: false,
    indeterminate: false,
    onChange: () => {},
    className: undefined
  };

  const TableSelectAllCell = ({
    className,
    allSelected,
    someSelected,
    disabled,
    onToggle,
    tableColumn,
    tableRow,
    rowSpan,
    forwardedRef,
    ...restProps
  }) => /*#__PURE__*/React.createElement("th", _extends({
    className: classNames({
      'text-center': true,
      'align-middle': !rowSpan,
      'align-bottom': !!rowSpan
    }, className),
    rowSpan: rowSpan,
    ref: forwardedRef
  }, restProps), /*#__PURE__*/React.createElement(SelectionControl, {
    disabled: disabled,
    checked: allSelected,
    indeterminate: someSelected,
    onChange: onToggle
  }));
  process.env.NODE_ENV !== "production" ? TableSelectAllCell.propTypes = {
    className: PropTypes.string,
    allSelected: PropTypes.bool,
    someSelected: PropTypes.bool,
    disabled: PropTypes.bool,
    onToggle: PropTypes.func,
    tableRow: PropTypes.object,
    tableColumn: PropTypes.object,
    rowSpan: PropTypes.number,
    forwardedRef: PropTypes.func
  } : void 0;
  TableSelectAllCell.defaultProps = {
    className: undefined,
    allSelected: false,
    someSelected: false,
    disabled: false,
    onToggle: () => {},
    tableRow: undefined,
    tableColumn: undefined,
    rowSpan: undefined,
    forwardedRef: undefined
  };

  const TableSelectCell = ({
    className,
    selected,
    onToggle,
    row,
    tableRow,
    tableColumn,
    forwardedRef,
    ...restProps
  }) => /*#__PURE__*/React.createElement("td", _extends({
    className: classNames('text-center align-middle', className),
    ref: forwardedRef
  }, restProps), /*#__PURE__*/React.createElement(SelectionControl, {
    checked: selected,
    onChange: onToggle
  }));
  process.env.NODE_ENV !== "production" ? TableSelectCell.propTypes = {
    className: PropTypes.string,
    selected: PropTypes.bool,
    onToggle: PropTypes.func,
    row: PropTypes.any,
    tableRow: PropTypes.object,
    tableColumn: PropTypes.object,
    forwardedRef: PropTypes.func
  } : void 0;
  TableSelectCell.defaultProps = {
    className: undefined,
    selected: false,
    onToggle: () => {},
    row: undefined,
    tableRow: undefined,
    tableColumn: undefined,
    forwardedRef: undefined
  };

  const TableSelectRow = ({
    highlighted,
    children,
    style,
    onToggle,
    selectByRowClick,
    className,
    tableRow,
    forwardedRef,
    ...restProps
  }) => /*#__PURE__*/React.createElement("tr", _extends({
    ref: forwardedRef,
    style: style,
    className: classNames({
      'table-active': highlighted
    }, className),
    onClick: e => {
      if (!selectByRowClick) return;
      e.stopPropagation();
      onToggle();
    }
  }, restProps), children);
  process.env.NODE_ENV !== "production" ? TableSelectRow.propTypes = {
    children: PropTypes.node,
    className: PropTypes.string,
    onToggle: PropTypes.func,
    selectByRowClick: PropTypes.bool,
    highlighted: PropTypes.bool,
    style: PropTypes.object,
    tableRow: PropTypes.object,
    forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
  } : void 0;
  TableSelectRow.defaultProps = {
    children: null,
    className: undefined,
    onToggle: () => {},
    selectByRowClick: false,
    highlighted: false,
    style: null,
    tableRow: undefined,
    forwardedRef: undefined
  };

  const TableSelectionWithWidth = props => /*#__PURE__*/React.createElement(dxReactGrid.TableSelection, _extends({
    selectionColumnWidth: 40
  }, props));

  TableSelectionWithWidth.components = dxReactGrid.TableSelection.components;
  const TableSelection = dxReactCore.withComponents({
    Row: TableSelectRow,
    Cell: TableSelectCell,
    HeaderCell: TableSelectAllCell
  })(TableSelectionWithWidth);
  TableSelection.COLUMN_TYPE = dxReactGrid.TableSelection.COLUMN_TYPE;

  const TableHead = ({
    isFixed,
    className,
    style,
    ...restProps
  }) => {
    const backgroundColor = React.useContext(BodyColorContext);
    return /*#__PURE__*/React.createElement("thead", _extends({
      className: classNames({
        'dx-g-bs4-fixed-header': isFixed,
        'dx-g-bs4-table-sticky': isFixed
      }, className),
      style: { ...(isFixed && {
          backgroundColor
        }),
        ...style
      }
    }, restProps));
  };
  process.env.NODE_ENV !== "production" ? TableHead.propTypes = {
    className: PropTypes.string,
    isFixed: PropTypes.bool,
    style: PropTypes.object
  } : void 0;
  TableHead.defaultProps = {
    isFixed: undefined,
    style: undefined,
    className: undefined
  };
  const TableBody = ({
    isFixed,
    ...restProps
  }) => /*#__PURE__*/React.createElement("tbody", restProps);
  process.env.NODE_ENV !== "production" ? TableBody.propTypes = {
    isFixed: PropTypes.bool
  } : void 0;
  TableBody.defaultProps = {
    isFixed: undefined
  };
  const TableFooter = ({
    isFixed,
    ...restProps
  }) => {
    const backgroundColor = React.useContext(BodyColorContext);
    return /*#__PURE__*/React.createElement("tfoot", _extends({
      className: classNames({
        'dx-g-bs4-fixed-footer': isFixed,
        'dx-g-bs4-table-sticky': isFixed
      }),
      style: { ...(isFixed && {
          backgroundColor
        })
      }
    }, restProps));
  };
  process.env.NODE_ENV !== "production" ? TableFooter.propTypes = {
    isFixed: PropTypes.bool
  } : void 0;
  TableFooter.defaultProps = {
    isFixed: undefined
  };

  const MINIMAL_COLUMN_WIDTH = 150;
  const TableLayout = props => /*#__PURE__*/React.createElement(dxReactGrid.TableLayout, _extends({
    layoutComponent: dxReactGrid.StaticTableLayout,
    minColumnWidth: MINIMAL_COLUMN_WIDTH
  }, props));

  const TableStubCell = ({
    className,
    tableRow,
    tableColumn,
    forwardedRef,
    ...restProps
  }) => /*#__PURE__*/React.createElement("td", _extends({
    ref: forwardedRef,
    className: classNames('p-0', className)
  }, restProps));
  process.env.NODE_ENV !== "production" ? TableStubCell.propTypes = {
    className: PropTypes.string,
    tableRow: PropTypes.object,
    tableColumn: PropTypes.object,
    forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
  } : void 0;
  TableStubCell.defaultProps = {
    className: undefined,
    tableRow: undefined,
    tableColumn: undefined,
    forwardedRef: undefined
  };

  const TableStubHeaderCell = ({
    className,
    tableRow,
    tableColumn,
    forwardedRef,
    ...restProps
  }) => /*#__PURE__*/React.createElement("th", _extends({
    className: classNames({
      'p-0': true
    }, className),
    ref: forwardedRef
  }, restProps));
  process.env.NODE_ENV !== "production" ? TableStubHeaderCell.propTypes = {
    className: PropTypes.string,
    tableRow: PropTypes.object,
    tableColumn: PropTypes.object,
    forwardedRef: PropTypes.func
  } : void 0;
  TableStubHeaderCell.defaultProps = {
    className: undefined,
    tableRow: undefined,
    tableColumn: undefined,
    forwardedRef: undefined
  };

  const TableNoDataCell = ({
    className,
    colSpan,
    getMessage,
    tableRow,
    tableColumn,
    ...restProps
  }) => /*#__PURE__*/React.createElement("td", _extends({
    className: classNames('py-5 dx-g-bs4-no-data-cell', className),
    colSpan: colSpan
  }, restProps), /*#__PURE__*/React.createElement("div", {
    className: "dx-g-bs4-fixed-block"
  }, /*#__PURE__*/React.createElement("big", {
    className: "text-muted"
  }, getMessage('noData'))));
  process.env.NODE_ENV !== "production" ? TableNoDataCell.propTypes = {
    colSpan: PropTypes.number,
    getMessage: PropTypes.func.isRequired,
    tableRow: PropTypes.object,
    tableColumn: PropTypes.object,
    className: PropTypes.string
  } : void 0;
  TableNoDataCell.defaultProps = {
    className: undefined,
    colSpan: 1,
    tableRow: