(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define("ReGrid", [], factory);
else if(typeof exports === 'object')
exports["ReGrid"] = factory();
else
root["ReGrid"] = factory();
})(this, function() {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _regrid = __webpack_require__(1);
var _regrid2 = _interopRequireDefault(_regrid);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _regrid2.default;
module.exports = exports['default'];
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); /* globals $, Clusterize */
// import $ from 'jQuery';
// import Clusterize from 'clusterize.js';
var _utils = __webpack_require__(2);
__webpack_require__(5);
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var ReGrid = function () {
function ReGrid(_ref) {
var wrapper = _ref.wrapper,
events = _ref.events,
data = _ref.data,
editing = _ref.editing,
addSerialNoColumn = _ref.addSerialNoColumn,
enableClusterize = _ref.enableClusterize,
enableLogs = _ref.enableLogs;
_classCallCheck(this, ReGrid);
this.wrapper = $(wrapper);
if (this.wrapper.length === 0) {
throw new Error('Invalid argument given for `wrapper`');
}
this.events = (0, _utils.getDefault)(events, {});
this.addSerialNoColumn = (0, _utils.getDefault)(addSerialNoColumn, false);
this.enableClusterize = (0, _utils.getDefault)(enableClusterize, false);
this.enableLogs = (0, _utils.getDefault)(enableLogs, true);
this.editing = (0, _utils.getDefault)(editing, {});
if (data) {
this.refresh(data);
}
}
_createClass(ReGrid, [{
key: 'makeDom',
value: function makeDom() {
this.wrapper.html('\n
\n ');
this.header = this.wrapper.find('.data-table-header');
this.bodyScrollable = this.wrapper.find('.body-scrollable');
// this.body = this.wrapper.find('.data-table-body');
this.footer = this.wrapper.find('.data-table-footer');
}
}, {
key: 'refresh',
value: function refresh(data) {
this.data = this.prepareData(data);
this.render();
}
}, {
key: 'render',
value: function render() {
if (this.wrapper.find('.data-table').length === 0) {
this.makeDom();
this.makeStyle();
this.bindEvents();
}
this.renderHeader();
this.renderBody();
this.setDimensions();
}
}, {
key: 'renderHeader',
value: function renderHeader() {
// fixed header
this.header.html((0, _utils.getHeaderHTML)(this.data.columns));
}
}, {
key: 'renderBody',
value: function renderBody() {
if (this.enableClusterize) {
this.renderBodyWithClusterize();
} else {
this.renderBodyHTML();
}
}
}, {
key: 'renderBodyHTML',
value: function renderBodyHTML() {
// scrollable body
this.bodyScrollable.html('\n \n ' + (0, _utils.getBodyHTML)(this.data.rows) + '\n
\n ');
}
}, {
key: 'renderBodyWithClusterize',
value: function renderBodyWithClusterize() {
// empty body
this.bodyScrollable.html('\n \n ' + (0, _utils.getBodyHTML)([]) + '\n
\n ');
this.start = 0;
this.pageLength = 1000;
this.end = this.start + this.pageLength;
var initialData = this.getDataForClusterize(
// only append ${this.pageLength} rows in the beginning
// defer remaining rows
this.data.rows.slice(this.start, this.end));
this.clusterize = new Clusterize({
rows: initialData,
scrollElem: this.bodyScrollable.get(0),
contentElem: this.bodyScrollable.find('tbody').get(0)
});
this.log('dataAppended', this.pageLength);
this.appendRemainingData();
}
}, {
key: 'appendRemainingData',
value: function appendRemainingData() {
var dataAppended = this.pageLength;
var promises = [];
while (dataAppended + this.pageLength < this.data.rows.length) {
this.start = this.end;
this.end = this.start + this.pageLength;
promises.push(this.appendNextPagePromise(this.start, this.end));
dataAppended += this.pageLength;
}
if (this.data.rows.length % this.pageLength > 0) {
// last page
this.start = this.end;
this.end = this.start + this.pageLength;
promises.push(this.appendNextPagePromise(this.start, this.end));
}
return promises.reduce(function (prev, cur) {
return prev.then(cur);
}, Promise.resolve());
}
}, {
key: 'appendNextPagePromise',
value: function appendNextPagePromise(start, end) {
var _this = this;
return new Promise(function (resolve) {
setTimeout(function () {
var rows = _this.data.rows.slice(start, end);
var data = _this.getDataForClusterize(rows);
_this.clusterize.append(data);
_this.log('dataAppended', rows.length);
resolve();
}, 0);
});
}
}, {
key: 'getDataForClusterize',
value: function getDataForClusterize(rows) {
return rows.map(function (row) {
return (0, _utils.getRowHTML)(row, { rowIndex: row[0].rowIndex });
});
}
}, {
key: 'updateCell',
value: function updateCell(rowIndex, colIndex, value) {
var row = this.getRow(rowIndex);
var cell = row.find(function (cell) {
return cell.col_index === colIndex;
});
cell.data = value;
this.refreshCell(cell);
}
}, {
key: 'refreshRows',
value: function refreshRows() {
this.renderBody();
this.setDimensions();
}
}, {
key: 'refreshCell',
value: function refreshCell(cell) {
var selector = '.data-table-col[data-row-index="' + cell.row_index + '"][data-col-index="' + cell.col_index + '"]';
var $cell = this.body.find(selector);
var $newCell = $((0, _utils.getColumnHTML)(cell));
$cell.replaceWith($newCell);
}
}, {
key: 'prepareData',
value: function prepareData(data) {
// cache original data passed
this._data = data;
var columns = data.columns,
rows = data.rows;
if (this.addSerialNoColumn) {
var serialNoColumn = {
content: 'Sr. No',
resizable: false
};
columns = [serialNoColumn].concat(columns);
rows = rows.map(function (row, i) {
var val = i + 1 + '';
return [val].concat(row);
});
}
var _columns = (0, _utils.prepareRowHeader)(columns);
var _rows = (0, _utils.prepareRows)(rows);
return {
columns: _columns,
rows: _rows
};
}
}, {
key: 'bindEvents',
value: function bindEvents() {
this.bindFocusCell();
this.bindEditCell();
this.bindResizeColumn();
this.bindSortColumn();
}
}, {
key: 'setDimensions',
value: function setDimensions() {
var self = this;
// setting width as 0 will ensure that the
// header doesn't take the available space
this.header.css({
width: 0,
margin: 0
});
// cache minWidth for each column
this.minWidthMap = (0, _utils.getDefault)(this.minWidthMap, []);
this.header.find('.data-table-col').each(function () {
var col = $(this);
var width = parseInt(col.find('.content').css('width'), 10);
var colIndex = col.attr('data-col-index');
if (!self.minWidthMap[colIndex]) {
// only set this once
self.minWidthMap[colIndex] = width;
}
});
// set initial width as naturally calculated by table's first row
this.bodyScrollable.find('.data-table-row[data-row-index="0"] .data-table-col').each(function () {
var $cell = $(this);
var width = parseInt($cell.find('.content').css('width'), 10);
var height = parseInt($cell.find('.content').css('height'), 10);
var _self$getCellAttr = self.getCellAttr($cell),
colIndex = _self$getCellAttr.colIndex;
self.setColumnWidth(colIndex, width);
self.setDefaultCellHeight(height);
});
this.setBodyWidth();
this.setStyle('.data-table .body-scrollable', {
'margin-top': this.header.height() + 1 + 'px'
});
// hide edit cells by default
this.setStyle('.data-table .body-scrollable .edit-cell', {
display: 'none'
});
this.bodyScrollable.find('.table').css('margin', 0);
}
}, {
key: 'bindFocusCell',
value: function bindFocusCell() {
var self = this;
this.$focusedCell = null;
this.bodyScrollable.on('click', '.data-table-col', function () {
var $cell = $(this);
self.$focusedCell = $cell;
self.bodyScrollable.find('.data-table-col').removeClass('selected');
$cell.addClass('selected');
});
}
}, {
key: 'bindEditCell',
value: function bindEditCell() {
var _this2 = this;
var self = this;
this.$editingCell = null;
// if (!self.events.onCellEdit) return;
this.bodyScrollable.on('dblclick', '.data-table-col', function () {
self.activateEditing($(this));
});
$(document.body).on('keypress', function (e) {
// enter keypress on focused cell
if (e.which === 13 && _this2.$focusedCell) {
self.activateEditing(_this2.$focusedCell);
}
});
$(document.body).on('click', function (e) {
if ($(e.target).is('.edit-cell, .edit-cell *')) return;
self.bodyScrollable.find('.edit-cell').hide();
});
}
}, {
key: 'activateEditing',
value: function activateEditing($cell) {
var _getCellAttr = this.getCellAttr($cell),
rowIndex = _getCellAttr.rowIndex,
colIndex = _getCellAttr.colIndex;
if (this.$editingCell) {
var _getCellAttr2 = this.getCellAttr(this.$editingCell),
_rowIndex = _getCellAttr2._rowIndex,
_colIndex = _getCellAttr2._colIndex;
if (rowIndex === _rowIndex && colIndex === _colIndex) {
// editing the same cell
return;
}
}
this.$editingCell = $cell;
var $editCell = $cell.find('.edit-cell').empty();
var cell = this.getCell(rowIndex, colIndex);
var render = this.renderEditingInput(colIndex, cell.content, $editCell);
if (render) {
$editCell.show();
}
// showing the popup is the responsibility of event handler
// self.events.onCellEdit(
// $cell.get(0),
// $editPopup,
// rowIndex,
// colIndex
// );
}
}, {
key: 'renderEditingInput',
value: function renderEditingInput(colIndex, value, parent) {
if (this.editing.renderInput) {
return this.editing.renderInput(colIndex, value, parent);
}
// render fallback
var $input = $('');
parent.append($input);
$input.val(value);
$input.select();
return true;
}
}, {
key: 'bindResizeColumn',
value: function bindResizeColumn() {
var self = this;
var isDragging = false;
var $currCell = void 0,
startWidth = void 0,
startX = void 0;
this.header.on('mousedown', '.data-table-col', function (e) {
$currCell = $(this);
var colIndex = $currCell.attr('data-col-index');
var col = self.getColumn(colIndex);
if (col && col.resizable === false) {
return;
}
isDragging = true;
startWidth = $currCell.find('.content').width();
startX = e.pageX;
});
$('body').on('mouseup', function (e) {
if (!$currCell) return;
isDragging = false;
var colIndex = $currCell.attr('data-col-index');
if ($currCell) {
var width = parseInt($currCell.find('.content').css('width'), 10);
self.setColumnWidth(colIndex, width);
self.setBodyWidth();
$currCell = null;
}
});
$('body').on('mousemove', function (e) {
if (!isDragging) return;
var finalWidth = startWidth + (e.pageX - startX);
var colIndex = $currCell.attr('data-col-index');
if (self.getColumnMinWidth(colIndex) > finalWidth) {
// don't resize past minWidth
return;
}
self.setColumnHeaderWidth(colIndex, finalWidth);
});
}
}, {
key: 'bindSortColumn',
value: function bindSortColumn() {
var self = this;
this.header.on('click', '.data-table-col .content span', function () {
var $cell = $(this).closest('.data-table-col');
var sortAction = (0, _utils.getDefault)($cell.attr('data-sort-action'), 'none');
var colIndex = $cell.attr('data-col-index');
// reset sort indicator
self.header.find('.sort-indicator').text('');
self.header.find('.data-table-col').attr('data-sort-action', 'none');
if (sortAction === 'none') {
$cell.attr('data-sort-action', 'asc');
$cell.find('.sort-indicator').text('▲');
} else if (sortAction === 'asc') {
$cell.attr('data-sort-action', 'desc');
$cell.find('.sort-indicator').text('▼');
} else if (sortAction === 'desc') {
$cell.attr('data-sort-action', 'none');
$cell.find('.sort-indicator').text('');
}
// sortWith this action
var sortWith = $cell.attr('data-sort-action');
if (self.events.onSort) {
self.events.onSort(colIndex, sortWith);
} else {
self.sortRows(colIndex, sortWith);
self.refreshRows();
}
});
}
}, {
key: 'sortRows',
value: function sortRows(colIndex) {
var sortAction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'none';
colIndex = +colIndex;
this.data.rows.sort(function (a, b) {
var _aIndex = a[0].rowIndex;
var _bIndex = b[0].rowIndex;
var _a = a[colIndex].content;
var _b = b[colIndex].content;
if (sortAction === 'none') {
return _aIndex - _bIndex;
} else if (sortAction === 'asc') {
if (_a < _b) return -1;
if (_a > _b) return 1;
if (_a === _b) return 0;
} else if (sortAction === 'desc') {
if (_a < _b) return 1;
if (_a > _b) return -1;
if (_a === _b) return 0;
}
return 0;
});
}
}, {
key: 'setColumnWidth',
value: function setColumnWidth(colIndex, width) {
// set width for content
this.setStyle('[data-col-index="' + colIndex + '"] .content', {
width: width + 'px'
});
// set width for edit cell
this.setStyle('[data-col-index="' + colIndex + '"] .edit-cell', {
width: width + 'px'
});
}
}, {
key: 'setColumnHeaderWidth',
value: function setColumnHeaderWidth(colIndex, width) {
this.setStyle('[data-col-index="' + colIndex + '"][data-is-header] .content', {
width: width + 'px'
});
}
}, {
key: 'setDefaultCellHeight',
value: function setDefaultCellHeight(height) {
this.setStyle('.data-table-col .content', {
height: height + 'px'
});
}
}, {
key: 'setRowHeight',
value: function setRowHeight(rowIndex, height) {
this.setStyle('[data-row-index="' + rowIndex + '"] .content', {
height: height + 'px'
});
}
}, {
key: 'setColumnWidths',
value: function setColumnWidths() {
var _this3 = this;
var availableWidth = this.wrapper.width();
var headerWidth = this.header.width();
if (headerWidth > availableWidth) {
// don't resize, horizontal scroll takes place
return;
}
var deltaWidth = (availableWidth - headerWidth) / this.data.columns.length;
this.data.columns.map(function (col) {
var width = _this3.getColumnHeaderElement(col.colIndex).width();
var finalWidth = width + deltaWidth - 16;
if (_this3.addSerialNoColumn && col.colIndex === 0) {
return;
}
_this3.setColumnHeaderWidth(col.colIndex, finalWidth);
_this3.setColumnWidth(col.colIndex, finalWidth);
});
this.setBodyWidth();
}
}, {
key: 'setBodyWidth',
value: function setBodyWidth() {
this.bodyScrollable.css('width', parseInt(this.header.css('width'), 10) + 1);
}
}, {
key: 'setStyle',
value: function setStyle(rule, styleMap) {
var styles = this.$style.text();
styles = (0, _utils.buildCSSRule)(rule, styleMap, styles);
this.$style.html(styles);
}
}, {
key: 'makeStyle',
value: function makeStyle() {
this.$style = $('').prependTo(this.wrapper);
}
}, {
key: 'getColumn',
value: function getColumn(colIndex) {
colIndex = +colIndex;
return this.data.columns.find(function (col) {
return col.colIndex === colIndex;
});
}
}, {
key: 'getRow',
value: function getRow(rowIndex) {
rowIndex = +rowIndex;
return this.data.rows.find(function (row) {
return row[0].rowIndex === rowIndex;
});
}
}, {
key: 'getCell',
value: function getCell(rowIndex, colIndex) {
rowIndex = +rowIndex;
colIndex = +colIndex;
return this.data.rows.find(function (row) {
return row[0].rowIndex === rowIndex;
})[colIndex];
}
}, {
key: 'getColumnHeaderElement',
value: function getColumnHeaderElement(colIndex) {
colIndex = +colIndex;
if (colIndex < 0) return null;
return this.wrapper.find('.data-table-col[data-is-header][data-col-index="' + colIndex + '"]');
}
}, {
key: 'getColumnMinWidth',
value: function getColumnMinWidth(colIndex) {
colIndex = +colIndex;
return this.minWidthMap && this.minWidthMap[colIndex];
}
}, {
key: 'getCellAttr',
value: function getCellAttr($cell) {
return $cell.data();
}
}, {
key: 'log',
value: function log() {
if (this.enableLogs) {
console.log.apply(console, arguments);
}
}
}]);
return ReGrid;
}();
exports.default = ReGrid;
module.exports = exports['default'];
/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function camelCaseToDash(str) {
return str.replace(/([A-Z])/g, function (g) {
return '-' + g[0].toLowerCase();
});
}
function makeDataAttributeString(props) {
var keys = Object.keys(props);
return keys.map(function (key) {
var _key = camelCaseToDash(key);
var val = props[key];
if (val === undefined) return '';
return 'data-' + _key + '="' + val + '" ';
}).join('').trim();
}
function getEditCellHTML() {
return '\n \n ';
}
function getColumnHTML(column) {
var rowIndex = column.rowIndex,
colIndex = column.colIndex,
isHeader = column.isHeader;
var dataAttr = makeDataAttributeString({
rowIndex: rowIndex,
colIndex: colIndex,
isHeader: isHeader
});
var editCellHTML = isHeader ? '' : getEditCellHTML();
return '\n \n \n ' + (column.format ? column.format(column.content) : column.content) + '\n \n \n ' + editCellHTML + '\n | \n ';
}
function getRowHTML(columns, props) {
var dataAttr = makeDataAttributeString(props);
return '\n \n ' + columns.map(getColumnHTML).join('') + '\n
\n ';
}
function getHeaderHTML(columns) {
var $header = '\n \n ' + getRowHTML(columns, { isHeader: 1, rowIndex: -1 }) + '\n \n ';
// columns.map(col => {
// if (!col.width) return;
// const $cellContent = $header.find(
// `.data-table-col[data-col-index="${col.colIndex}"] .content`
// );
// $cellContent.width(col.width);
// });
return $header;
}
function getBodyHTML(rows) {
return '\n \n ' + rows.map(function (row) {
return getRowHTML(row, { rowIndex: row[0].rowIndex });
}).join('') + '\n \n ';
}
function prepareColumn(col, i) {
if (typeof col === 'string') {
col = {
content: col
};
}
return Object.assign(col, {
colIndex: i
});
}
function prepareColumns(columns) {
var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var _columns = columns.map(prepareColumn);
return _columns.map(function (col) {
return Object.assign(col, props);
});
}
function prepareRowHeader(columns) {
return prepareColumns(columns, {
rowIndex: -1,
isHeader: 1,
format: function format(content) {
return '' + content + '';
}
});
}
function prepareRow(row, i) {
return prepareColumns(row, {
rowIndex: i
});
}
function prepareRows(rows) {
return rows.map(prepareRow);
}
function getDefault(a, b) {
return a !== undefined ? a : b;
}
function escapeRegExp(str) {
// https://stackoverflow.com/a/6969486
return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
}
function getCSSString(styleMap) {
var style = '';
for (var prop in styleMap) {
if (styleMap.hasOwnProperty(prop)) {
style += prop + ': ' + styleMap[prop] + '; ';
}
}
return style.trim();
}
function getCSSRuleBlock(rule, styleMap) {
return rule + ' { ' + getCSSString(styleMap) + ' }';
}
function namespaceSelector(selector) {
return '.data-table ' + selector;
}
function buildCSSRule(rule, styleMap) {
var cssRulesString = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
// build css rules efficiently,
// append new rule if doesnt exist,
// update existing ones
var rulePatternStr = escapeRegExp(rule) + ' {([^}]*)}';
var rulePattern = new RegExp(rulePatternStr, 'g');
if (cssRulesString && cssRulesString.match(rulePattern)) {
var _loop = function _loop(property) {
var value = styleMap[property];
var propPattern = new RegExp(escapeRegExp(property) + ':([^;]*);');
cssRulesString = cssRulesString.replace(rulePattern, function (match, propertyStr) {
if (propertyStr.match(propPattern)) {
// property exists, replace value with new value
propertyStr = propertyStr.replace(propPattern, function (match, valueStr) {
return property + ': ' + value + ';';
});
}
propertyStr = propertyStr.trim();
var replacer = rule + ' { ' + propertyStr + ' }';
return replacer;
});
};
for (var property in styleMap) {
_loop(property);
}
return cssRulesString;
}
// no match, append new rule block
return '' + cssRulesString + getCSSRuleBlock(rule, styleMap);
}
exports.default = {
getHeaderHTML: getHeaderHTML,
getBodyHTML: getBodyHTML,
getRowHTML: getRowHTML,
getColumnHTML: getColumnHTML,
getEditCellHTML: getEditCellHTML,
prepareRowHeader: prepareRowHeader,
prepareRows: prepareRows,
namespaceSelector: namespaceSelector,
getCSSString: getCSSString,
buildCSSRule: buildCSSRule,
makeDataAttributeString: makeDataAttributeString,
getDefault: getDefault,
escapeRegExp: escapeRegExp
};
module.exports = exports['default'];
/***/ }),
/* 3 */,
/* 4 */,
/* 5 */
/***/ (function(module, exports, __webpack_require__) {
// style-loader: Adds some css to the DOM by adding a