@wix/design-system/dist/esm/Table/DataTable/docs/ExampleWithPopoverMenu.js

@wix/design-system

import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/esm/Table/DataTable/docs/ExampleWithPopoverMenu.jsx";
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
import React from 'react';
import DataTable from '..';
import TableActionCell from '../../../TableActionCell/TableActionCell';
import { Star, Delete } from '@wix/wix-ui-icons-common';
var style = {
  width: '966px'
};
var baseData = [{
  firstName: 'Meghan',
  lastName: 'Bishop'
}, {
  firstName: 'Sara',
  lastName: 'Porter'
}, {
  firstName: 'Deborah',
  lastName: 'Rhodes'
}, {
  firstName: 'Walter',
  lastName: 'Jenning'
}];
var ExampleWithStickyActionCell = /*#__PURE__*/function (_React$Component) {
  function ExampleWithStickyActionCell() {
    _classCallCheck(this, ExampleWithStickyActionCell);
    return _callSuper(this, ExampleWithStickyActionCell, arguments);
  }
  _inherits(ExampleWithStickyActionCell, _React$Component);
  return _createClass(ExampleWithStickyActionCell, [{
    key: "render",
    value: function render() {
      var _this = this;
      return /*#__PURE__*/React.createElement("div", {
        style: style,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 20,
          columnNumber: 7
        }
      }, /*#__PURE__*/React.createElement(DataTable, {
        dataHook: "story-data-table-with-hidden-header",
        hideHeaderAccessible: true,
        data: baseData,
        columns: [{
          title: 'Row Number',
          render: function render(row, rowNum) {
            return '#' + (rowNum + 1);
          },
          width: '20%',
          important: true
        }, {
          title: 'First Name',
          render: function render(row) {
            return /*#__PURE__*/React.createElement("span", {
              __self: _this,
              __source: {
                fileName: _jsxFileName,
                lineNumber: 34,
                columnNumber: 30
              }
            }, row.firstName);
          },
          width: '40%'
        }, {
          title: 'Last Name',
          render: function render(row) {
            return /*#__PURE__*/React.createElement("span", {
              __self: _this,
              __source: {
                fileName: _jsxFileName,
                lineNumber: 39,
                columnNumber: 30
              }
            }, row.lastName);
          },
          width: '40%'
        }, {
          stickyActionCell: true,
          render: function render() {
            return /*#__PURE__*/React.createElement(TableActionCell, {
              onClick: function onClick() {},
              primaryAction: {
                text: 'View'
              },
              numOfVisibleSecondaryActions: 1,
              secondaryActions: [{
                text: 'Star',
                icon: /*#__PURE__*/React.createElement(Star, {
                  __self: _this,
                  __source: {
                    fileName: _jsxFileName,
                    lineNumber: 54,
                    columnNumber: 29
                  }
                })
              }, {
                divider: true
              }, {
                text: 'Delete',
                icon: /*#__PURE__*/React.createElement(Delete, {
                  __self: _this,
                  __source: {
                    fileName: _jsxFileName,
                    lineNumber: 59,
                    columnNumber: 29
                  }
                }),
                skin: 'destructive'
              }],
              __self: _this,
              __source: {
                fileName: _jsxFileName,
                lineNumber: 45,
                columnNumber: 17
              }
            });
          }
        }],
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 21,
          columnNumber: 9
        }
      }));
    }
  }]);
}(React.Component);
export default ExampleWithStickyActionCell;