+ if (this.options.treeView && !(isHeader || isFilter) && cell.indent !== undefined) {
+ const nextRow = this.datamanager.getRow(cell.rowIndex + 1);
+ const addToggle = nextRow && nextRow.meta.indent > cell.indent;
+
+ // Add toggle and indent in the first column
+ const firstColumnIndex = this.datamanager.getColumnIndexById('_rowIndex') + 1;
+ if (firstColumnIndex === cell.colIndex) {
+ const padding = ((cell.indent || 0) + 1) * 1.5;
+ const toggleHTML = addToggle ?
+ `
` : '';
+ contentHTML = `
+ ${toggleHTML}${contentHTML}`;
+ }
+ }
+
+ const className = [
+ 'dt-cell__content',
+ isHeader ? `dt-cell__content--header-${colIndex}` : `dt-cell__content--col-${colIndex}`
+ ].join(' ');
+
+ return `
+
${contentHTML}
${sortIndicator}
${resizeColumn}
@@ -2640,1043 +2260,1433 @@ class CellManager {
${editCellHTML}
`;
+ }
+
+ getEditCellHTML(colIndex) {
+ return `
`;
+ }
+
+ selector(colIndex, rowIndex) {
+ return `.dt-cell--${colIndex}-${rowIndex}`;
+ }
}
- getEditCellHTML() {
- return `
-
- `;
- }
+ class ColumnManager {
+ constructor(instance) {
+ this.instance = instance;
- selector(colIndex, rowIndex) {
- return `.data-table-cell[data-col-index="${colIndex}"][data-row-index="${rowIndex}"]`;
- }
-}
+ linkProperties(this, this.instance, [
+ 'options',
+ 'fireEvent',
+ 'header',
+ 'datamanager',
+ 'style',
+ 'wrapper',
+ 'rowmanager',
+ 'bodyScrollable'
+ ]);
-class RowManager {
- constructor(instance) {
- this.instance = instance;
- linkProperties(this, this.instance, [
- 'options',
- 'fireEvent',
- 'wrapper',
- 'bodyScrollable',
- 'bodyRenderer'
- ]);
+ this.bindEvents();
+ }
- this.bindEvents();
- this.refreshRows = nextTick(this.refreshRows, this);
- }
+ renderHeader() {
+ this.header.innerHTML = '
';
+ this.refreshHeader();
+ }
- get datamanager() {
- return this.instance.datamanager;
- }
+ refreshHeader() {
+ const columns = this.datamanager.getColumns();
+ const $cols = $.each('.dt-cell--header', this.header);
- get cellmanager() {
- return this.instance.cellmanager;
- }
+ const refreshHTML =
+ // first init
+ !$('.dt-cell', this.header) ||
+ // deleted column
+ columns.length < $cols.length;
- bindEvents() {
- this.bindCheckbox();
- }
+ if (refreshHTML) {
+ // refresh html
+ $('thead', this.header).innerHTML = this.getHeaderHTML(columns);
- bindCheckbox() {
- if (!this.options.checkboxColumn) return;
+ this.$filterRow = $('.dt-row[data-is-filter]', this.header);
+ if (this.$filterRow) {
+ $.style(this.$filterRow, { display: 'none' });
+ }
+ } else {
+ // update data-attributes
+ $cols.map(($col, i) => {
+ const column = columns[i];
+ // column sorted or order changed
+ // update colIndex of each header cell
+ $.data($col, {
+ colIndex: column.colIndex
+ });
- // map of checked rows
- this.checkMap = [];
+ // refresh sort indicator
+ const sortIndicator = $('.sort-indicator', $col);
+ if (sortIndicator) {
+ sortIndicator.innerHTML = this.options.sortIndicator[column.sortOrder];
+ }
+ });
+ }
+ // reset columnMap
+ this.$columnMap = [];
+ }
- $.on(this.wrapper, 'click', '.data-table-cell[data-col-index="0"] [type="checkbox"]', (e, $checkbox) => {
- const $cell = $checkbox.closest('.data-table-cell');
+ getHeaderHTML(columns) {
+ let html = this.rowmanager.getRowHTML(columns, {
+ isHeader: 1
+ });
+ if (this.options.inlineFilters) {
+ html += this.rowmanager.getRowHTML(columns, {
+ isFilter: 1
+ });
+ }
+ return html;
+ }
+
+ bindEvents() {
+ this.bindDropdown();
+ this.bindResizeColumn();
+ this.bindMoveColumn();
+ this.bindFilter();
+ }
+
+ bindDropdown() {
+ let $activeDropdown;
+ let activeClass = 'dt-dropdown--active';
+ let toggleClass = '.dt-dropdown__toggle';
+
+ $.on(this.header, 'click', toggleClass, (e, $button) => {
+ const $dropdown = $.closest('.dt-dropdown', $button);
+
+ if (!$dropdown.classList.contains(activeClass)) {
+ deactivateDropdown();
+ $dropdown.classList.add(activeClass);
+ $activeDropdown = $dropdown;
+ } else {
+ deactivateDropdown();
+ }
+ });
+
+ $.on(document.body, 'click', (e) => {
+ if (e.target.matches(toggleClass)) return;
+ deactivateDropdown();
+ });
+
+ const dropdownItems = this.options.headerDropdown;
+
+ $.on(this.header, 'click', '.dt-dropdown__list-item', (e, $item) => {
+ const $col = $.closest('.dt-cell', $item);
+ const {
+ index
+ } = $.data($item);
+ const {
+ colIndex
+ } = $.data($col);
+ let callback = dropdownItems[index].action;
+
+ callback && callback.call(this.instance, this.getColumn(colIndex));
+ });
+
+ function deactivateDropdown(e) {
+ $activeDropdown && $activeDropdown.classList.remove(activeClass);
+ $activeDropdown = null;
+ }
+ }
+
+ bindResizeColumn() {
+ let isDragging = false;
+ let $resizingCell, startWidth, startX;
+
+ $.on(this.header, 'mousedown', '.dt-cell .dt-cell__resize-handle', (e, $handle) => {
+ document.body.classList.add('dt-resize');
+ const $cell = $handle.parentNode.parentNode;
+ $resizingCell = $cell;
+ const {
+ colIndex
+ } = $.data($resizingCell);
+ const col = this.getColumn(colIndex);
+
+ if (col && col.resizable === false) {
+ return;
+ }
+
+ isDragging = true;
+ startWidth = $.style($('.dt-cell__content', $resizingCell), 'width');
+ startX = e.pageX;
+ });
+
+ $.on(document.body, 'mouseup', (e) => {
+ document.body.classList.remove('dt-resize');
+ if (!$resizingCell) return;
+ isDragging = false;
+
+ const {
+ colIndex
+ } = $.data($resizingCell);
+ this.setColumnWidth(colIndex);
+ this.style.setBodyStyle();
+ $resizingCell = null;
+ });
+
+ $.on(document.body, 'mousemove', (e) => {
+ if (!isDragging) return;
+ const finalWidth = startWidth + (e.pageX - startX);
+ const {
+ colIndex
+ } = $.data($resizingCell);
+
+ if (this.getColumnMinWidth(colIndex) > finalWidth) {
+ // don't resize past minWidth
+ return;
+ }
+ this.datamanager.updateColumn(colIndex, {
+ width: finalWidth
+ });
+ this.setColumnHeaderWidth(colIndex);
+ });
+ }
+
+ bindMoveColumn() {
+ let initialized;
+
+ const initialize = () => {
+ if (initialized) {
+ $.off(document.body, 'mousemove', initialize);
+ return;
+ }
+ const ready = $('.dt-cell', this.header);
+ if (!ready) return;
+
+ const $parent = $('.dt-row', this.header);
+
+ this.sortable = Sortable.create($parent, {
+ onEnd: (e) => {
+ const {
+ oldIndex,
+ newIndex
+ } = e;
+ const $draggedCell = e.item;
+ const {
+ colIndex
+ } = $.data($draggedCell);
+ if (+colIndex === newIndex) return;
+
+ this.switchColumn(oldIndex, newIndex);
+ },
+ preventOnFilter: false,
+ filter: '.dt-cell__resize-handle, .dt-dropdown',
+ chosenClass: 'dt-cell--dragging',
+ animation: 150
+ });
+ };
+
+ $.on(document.body, 'mousemove', initialize);
+ }
+
+ sortColumn(colIndex, nextSortOrder) {
+ this.instance.freeze();
+ this.sortRows(colIndex, nextSortOrder)
+ .then(() => {
+ this.refreshHeader();
+ return this.rowmanager.refreshRows();
+ })
+ .then(() => this.instance.unfreeze())
+ .then(() => {
+ this.fireEvent('onSortColumn', this.getColumn(colIndex));
+ });
+ }
+
+ removeColumn(colIndex) {
+ const removedCol = this.getColumn(colIndex);
+ this.instance.freeze();
+ this.datamanager.removeColumn(colIndex)
+ .then(() => {
+ this.refreshHeader();
+ return this.rowmanager.refreshRows();
+ })
+ .then(() => this.instance.unfreeze())
+ .then(() => {
+ this.fireEvent('onRemoveColumn', removedCol);
+ });
+ }
+
+ switchColumn(oldIndex, newIndex) {
+ this.instance.freeze();
+ this.datamanager.switchColumn(oldIndex, newIndex)
+ .then(() => {
+ this.refreshHeader();
+ return this.rowmanager.refreshRows();
+ })
+ .then(() => {
+ this.setColumnWidth(oldIndex);
+ this.setColumnWidth(newIndex);
+ this.instance.unfreeze();
+ })
+ .then(() => {
+ this.fireEvent('onSwitchColumn',
+ this.getColumn(oldIndex), this.getColumn(newIndex)
+ );
+ });
+ }
+
+ toggleFilter(flag) {
+ let showFilter;
+ if (flag === undefined) {
+ showFilter = !this.isFilterShown;
+ } else {
+ showFilter = flag;
+ }
+
+ if (showFilter) {
+ $.style(this.$filterRow, { display: '' });
+ } else {
+ $.style(this.$filterRow, { display: 'none' });
+ }
+
+ this.isFilterShown = showFilter;
+ this.style.setBodyStyle();
+ }
+
+ focusFilter(colIndex) {
+ if (!this.isFilterShown) return;
+
+ const $filterInput = $(`[data-col-index="${colIndex}"] .dt-filter`, this.$filterRow);
+ $filterInput.focus();
+ }
+
+ bindFilter() {
+ if (!this.options.inlineFilters) return;
+ const handler = e => {
+ const $filterCell = $.closest('.dt-cell', e.target);
+ const {
+ colIndex
+ } = $.data($filterCell);
+ const keyword = e.target.value;
+
+ this.datamanager.filterRows(keyword, colIndex)
+ .then(({
+ rowsToHide,
+ rowsToShow
+ }) => {
+ this.rowmanager.hideRows(rowsToHide);
+ this.rowmanager.showRows(rowsToShow);
+ });
+ };
+ $.on(this.header, 'keydown', '.dt-filter', debounce$1(handler, 300));
+ }
+
+ sortRows(colIndex, sortOrder) {
+ return this.datamanager.sortRows(colIndex, sortOrder);
+ }
+
+ getColumn(colIndex) {
+ return this.datamanager.getColumn(colIndex);
+ }
+
+ getColumns() {
+ return this.datamanager.getColumns();
+ }
+
+ setColumnWidth(colIndex, width) {
+ colIndex = +colIndex;
+ this._columnWidthMap = this._columnWidthMap || [];
+
+ let columnWidth = width || this.getColumn(colIndex).width;
+
+ let index = this._columnWidthMap[colIndex];
+ const selector = [
+ `.dt-cell__content--col-${colIndex}`,
+ `.dt-cell__edit--col-${colIndex}`
+ ].join(', ');
+
+ const styles = {
+ width: columnWidth + 'px'
+ };
+
+ index = this.style.setStyle(selector, styles, index);
+
+ if (index !== undefined) {
+ this._columnWidthMap[colIndex] = index;
+ }
+ }
+
+ setColumnHeaderWidth(colIndex) {
+ colIndex = +colIndex;
+ this.$columnMap = this.$columnMap || [];
+ const selector = `.dt-cell__content--header-${colIndex}`;
const {
- rowIndex,
- isHeader
- } = $.data($cell);
- const checked = $checkbox.checked;
+ width
+ } = this.getColumn(colIndex);
- if (isHeader) {
- this.checkAll(checked);
- } else {
- this.checkRow(rowIndex, checked);
+ let $column = this.$columnMap[colIndex];
+ if (!$column) {
+ $column = this.header.querySelector(selector);
+ this.$columnMap[colIndex] = $column;
}
- });
- }
- refreshRows() {
- this.instance.renderBody();
- this.instance.setDimensions();
- }
-
- refreshRow(row, rowIndex) {
- const _row = this.datamanager.updateRow(row, rowIndex);
-
- _row.forEach(cell => {
- this.cellmanager.refreshCell(cell);
- });
- }
-
- getCheckedRows() {
- if (!this.checkMap) {
- return [];
+ $column.style.width = width + 'px';
}
- let out = [];
- for (let rowIndex in this.checkMap) {
- const checked = this.checkMap[rowIndex];
- if (checked === 1) {
- out.push(rowIndex);
- }
+ getColumnMinWidth(colIndex) {
+ colIndex = +colIndex;
+ return this.getColumn(colIndex).minWidth || 24;
}
- return out;
+ getFirstColumnIndex() {
+ return this.datamanager.getColumnIndexById('_rowIndex') + 1;
+ }
+
+ getHeaderCell$(colIndex) {
+ return $(`.dt-cell--header-${colIndex}`, this.header);
+ }
+
+ getLastColumnIndex() {
+ return this.datamanager.getColumnCount() - 1;
+ }
+
+ getDropdownHTML() {
+ const { dropdownButton, headerDropdown: dropdownItems } = this.options;
+
+ return `
+
+
${dropdownButton}
+
+ ${dropdownItems.map((d, i) => `
+
${d.label}
+ `).join('')}
+
+
+ `;
+ }
}
- highlightCheckedRows() {
- this.getCheckedRows()
- .map(rowIndex => this.checkRow(rowIndex, true));
- }
+ class RowManager {
+ constructor(instance) {
+ this.instance = instance;
+ linkProperties(this, this.instance, [
+ 'options',
+ 'fireEvent',
+ 'wrapper',
+ 'bodyScrollable',
+ 'bodyRenderer'
+ ]);
- checkRow(rowIndex, toggle) {
- const value = toggle ? 1 : 0;
- const selector = rowIndex =>
- `.data-table-cell[data-row-index="${rowIndex}"][data-col-index="0"] [type="checkbox"]`;
- // update internal map
- this.checkMap[rowIndex] = value;
- // set checkbox value explicitly
- $.each(selector(rowIndex), this.bodyScrollable)
- .map(input => {
- input.checked = toggle;
- });
- // highlight row
- this.highlightRow(rowIndex, toggle);
- this.showCheckStatus();
- this.fireEvent('onCheckRow', this.datamanager.getRow(rowIndex));
- }
+ this.bindEvents();
+ this.refreshRows = nextTick(this.refreshRows, this);
+ }
- checkAll(toggle) {
- const value = toggle ? 1 : 0;
+ get datamanager() {
+ return this.instance.datamanager;
+ }
- // update internal map
- if (toggle) {
- this.checkMap = Array.from(Array(this.getTotalRows())).map(c => value);
- } else {
+ get cellmanager() {
+ return this.instance.cellmanager;
+ }
+
+ bindEvents() {
+ this.bindCheckbox();
+ }
+
+ bindCheckbox() {
+ if (!this.options.checkboxColumn) return;
+
+ // map of checked rows
this.checkMap = [];
- }
- // set checkbox value
- $.each('.data-table-cell[data-col-index="0"] [type="checkbox"]', this.bodyScrollable)
- .map(input => {
- input.checked = toggle;
+
+ $.on(this.wrapper, 'click', '.dt-cell[data-col-index="0"] [type="checkbox"]', (e, $checkbox) => {
+ const $cell = $checkbox.closest('.dt-cell');
+ const {
+ rowIndex,
+ isHeader
+ } = $.data($cell);
+ const checked = $checkbox.checked;
+
+ if (isHeader) {
+ this.checkAll(checked);
+ } else {
+ this.checkRow(rowIndex, checked);
+ }
});
- // highlight all
- this.highlightAll(toggle);
- this.showCheckStatus();
- }
-
- showCheckStatus() {
- if (!this.options.checkedRowStatus) return;
- const checkedRows = this.getCheckedRows();
- const count = checkedRows.length;
- if (count > 0) {
- this.bodyRenderer.showToastMessage(`${count} row${count > 1 ? 's' : ''} selected`);
- } else {
- this.bodyRenderer.clearToastMessage();
- }
- }
-
- highlightRow(rowIndex, toggle = true) {
- const $row = this.getRow$(rowIndex);
- if (!$row) return;
-
- if (!toggle && this.bodyScrollable.classList.contains('row-highlight-all')) {
- $row.classList.add('row-unhighlight');
- return;
}
- if (toggle && $row.classList.contains('row-unhighlight')) {
- $row.classList.remove('row-unhighlight');
+ refreshRows() {
+ this.instance.renderBody();
+ this.instance.setDimensions();
}
- this._highlightedRows = this._highlightedRows || {};
+ refreshRow(row, rowIndex) {
+ const _row = this.datamanager.updateRow(row, rowIndex);
- if (toggle) {
- $row.classList.add('row-highlight');
- this._highlightedRows[rowIndex] = $row;
- } else {
- $row.classList.remove('row-highlight');
- delete this._highlightedRows[rowIndex];
+ _row.forEach(cell => {
+ this.cellmanager.refreshCell(cell);
+ });
}
- }
- highlightAll(toggle = true) {
- if (toggle) {
- this.bodyScrollable.classList.add('row-highlight-all');
- } else {
- this.bodyScrollable.classList.remove('row-highlight-all');
- for (const rowIndex in this._highlightedRows) {
- const $row = this._highlightedRows[rowIndex];
- $row.classList.remove('row-highlight');
+ getCheckedRows() {
+ if (!this.checkMap) {
+ return [];
}
- this._highlightedRows = {};
+
+ let out = [];
+ for (let rowIndex in this.checkMap) {
+ const checked = this.checkMap[rowIndex];
+ if (checked === 1) {
+ out.push(rowIndex);
+ }
+ }
+
+ return out;
}
- }
- hideRows(rowIndices) {
- rowIndices = ensureArray(rowIndices);
- rowIndices.map(rowIndex => {
- const $tr = this.getRow$(rowIndex);
- $tr.classList.add('hide');
- });
- }
+ highlightCheckedRows() {
+ this.getCheckedRows()
+ .map(rowIndex => this.checkRow(rowIndex, true));
+ }
- showRows(rowIndices) {
- rowIndices = ensureArray(rowIndices);
- rowIndices.map(rowIndex => {
- const $tr = this.getRow$(rowIndex);
- $tr.classList.remove('hide');
- });
- }
+ checkRow(rowIndex, toggle) {
+ const value = toggle ? 1 : 0;
+ const selector = rowIndex =>
+ `.dt-cell[data-row-index="${rowIndex}"][data-col-index="0"] [type="checkbox"]`;
+ // update internal map
+ this.checkMap[rowIndex] = value;
+ // set checkbox value explicitly
+ $.each(selector(rowIndex), this.bodyScrollable)
+ .map(input => {
+ input.checked = toggle;
+ });
+ // highlight row
+ this.highlightRow(rowIndex, toggle);
+ this.showCheckStatus();
+ this.fireEvent('onCheckRow', this.datamanager.getRow(rowIndex));
+ }
- openSingleNode(rowIndex) {
- const rowsToShow = this.datamanager.getImmediateChildren(rowIndex);
- this.showRows(rowsToShow);
- this.cellmanager.toggleTreeButton(rowIndex, true);
- }
+ checkAll(toggle) {
+ const value = toggle ? 1 : 0;
- closeSingleNode(rowIndex) {
- const children = this.datamanager.getImmediateChildren(rowIndex);
- children.forEach(childIndex => {
- const row = this.datamanager.getRow(childIndex);
- if (row.meta.isLeaf) {
- // close
- this.hideRows(childIndex);
- this.cellmanager.toggleTreeButton(childIndex, false);
+ // update internal map
+ if (toggle) {
+ this.checkMap = Array.from(Array(this.getTotalRows())).map(c => value);
} else {
- this.closeSingleNode(childIndex);
- this.hideRows(childIndex);
+ this.checkMap = [];
}
- });
- this.cellmanager.toggleTreeButton(rowIndex, false);
- }
-
- getRow$(rowIndex) {
- return $(this.selector(rowIndex), this.bodyScrollable);
- }
-
- getTotalRows() {
- return this.datamanager.getRowCount();
- }
-
- getFirstRowIndex() {
- return 0;
- }
-
- getLastRowIndex() {
- return this.datamanager.getRowCount() - 1;
- }
-
- scrollToRow(rowIndex) {
- rowIndex = +rowIndex;
- this._lastScrollTo = this._lastScrollTo || 0;
- const $row = this.getRow$(rowIndex);
- if ($.inViewport($row, this.bodyScrollable)) return;
-
- const {
- height
- } = $row.getBoundingClientRect();
- const {
- top,
- bottom
- } = this.bodyScrollable.getBoundingClientRect();
- const rowsInView = Math.floor((bottom - top) / height);
-
- let offset = 0;
- if (rowIndex > this._lastScrollTo) {
- offset = height * ((rowIndex + 1) - rowsInView);
- } else {
- offset = height * ((rowIndex + 1) - 1);
+ // set checkbox value
+ $.each('.dt-cell[data-col-index="0"] [type="checkbox"]', this.bodyScrollable)
+ .map(input => {
+ input.checked = toggle;
+ });
+ // highlight all
+ this.highlightAll(toggle);
+ this.showCheckStatus();
}
- this._lastScrollTo = rowIndex;
- $.scrollTop(this.bodyScrollable, offset);
- }
-
- getRowHTML(row, props) {
- const dataAttr = makeDataAttributeString(props);
-
- if (props.isFilter) {
- row = row.map(cell => (Object.assign({}, cell, {
- content: this.getFilterInput({
- colIndex: cell.colIndex
- }),
- isFilter: 1,
- isHeader: undefined,
- editable: false
- })));
+ showCheckStatus() {
+ if (!this.options.checkedRowStatus) return;
+ const checkedRows = this.getCheckedRows();
+ const count = checkedRows.length;
+ if (count > 0) {
+ this.bodyRenderer.showToastMessage(`${count} row${count > 1 ? 's' : ''} selected`);
+ } else {
+ this.bodyRenderer.clearToastMessage();
+ }
}
- return `
-
+ highlightRow(rowIndex, toggle = true) {
+ const $row = this.getRow$(rowIndex);
+ if (!$row) return;
+
+ if (!toggle && this.bodyScrollable.classList.contains('dt-scrollable--highlight-all')) {
+ $row.classList.add('dt-row--unhighlight');
+ return;
+ }
+
+ if (toggle && $row.classList.contains('dt-row--unhighlight')) {
+ $row.classList.remove('dt-row--unhighlight');
+ }
+
+ this._highlightedRows = this._highlightedRows || {};
+
+ if (toggle) {
+ $row.classList.add('dt-row--highlight');
+ this._highlightedRows[rowIndex] = $row;
+ } else {
+ $row.classList.remove('dt-row--highlight');
+ delete this._highlightedRows[rowIndex];
+ }
+ }
+
+ highlightAll(toggle = true) {
+ if (toggle) {
+ this.bodyScrollable.classList.add('dt-scrollable--highlight-all');
+ } else {
+ this.bodyScrollable.classList.remove('dt-scrollable--highlight-all');
+ for (const rowIndex in this._highlightedRows) {
+ const $row = this._highlightedRows[rowIndex];
+ $row.classList.remove('dt-row--highlight');
+ }
+ this._highlightedRows = {};
+ }
+ }
+
+ hideRows(rowIndices) {
+ rowIndices = ensureArray(rowIndices);
+ rowIndices.map(rowIndex => {
+ const $tr = this.getRow$(rowIndex);
+ $tr.classList.add('dt-row--hide');
+ });
+ }
+
+ showRows(rowIndices) {
+ rowIndices = ensureArray(rowIndices);
+ rowIndices.map(rowIndex => {
+ const $tr = this.getRow$(rowIndex);
+ $tr.classList.remove('dt-row--hide');
+ });
+ }
+
+ openSingleNode(rowIndex) {
+ const rowsToShow = this.datamanager.getImmediateChildren(rowIndex);
+ this.showRows(rowsToShow);
+ this.cellmanager.toggleTreeButton(rowIndex, true);
+ }
+
+ closeSingleNode(rowIndex) {
+ const children = this.datamanager.getImmediateChildren(rowIndex);
+ children.forEach(childIndex => {
+ const row = this.datamanager.getRow(childIndex);
+ if (row.meta.isLeaf) {
+ // close
+ this.hideRows(childIndex);
+ this.cellmanager.toggleTreeButton(childIndex, false);
+ } else {
+ this.closeSingleNode(childIndex);
+ this.hideRows(childIndex);
+ }
+ });
+ this.cellmanager.toggleTreeButton(rowIndex, false);
+ }
+
+ getRow$(rowIndex) {
+ return $(this.selector(rowIndex), this.bodyScrollable);
+ }
+
+ getTotalRows() {
+ return this.datamanager.getRowCount();
+ }
+
+ getFirstRowIndex() {
+ return 0;
+ }
+
+ getLastRowIndex() {
+ return this.datamanager.getRowCount() - 1;
+ }
+
+ scrollToRow(rowIndex) {
+ rowIndex = +rowIndex;
+ this._lastScrollTo = this._lastScrollTo || 0;
+ const $row = this.getRow$(rowIndex);
+ if ($.inViewport($row, this.bodyScrollable)) return;
+
+ const {
+ height
+ } = $row.getBoundingClientRect();
+ const {
+ top,
+ bottom
+ } = this.bodyScrollable.getBoundingClientRect();
+ const rowsInView = Math.floor((bottom - top) / height);
+
+ let offset = 0;
+ if (rowIndex > this._lastScrollTo) {
+ offset = height * ((rowIndex + 1) - rowsInView);
+ } else {
+ offset = height * ((rowIndex + 1) - 1);
+ }
+
+ this._lastScrollTo = rowIndex;
+ $.scrollTop(this.bodyScrollable, offset);
+ }
+
+ getRowHTML(row, props) {
+ const dataAttr = makeDataAttributeString(props);
+
+ if (props.isFilter) {
+ row = row.map(cell => (Object.assign({}, cell, {
+ content: this.getFilterInput({
+ colIndex: cell.colIndex
+ }),
+ isFilter: 1,
+ isHeader: undefined,
+ editable: false
+ })));
+ }
+
+ return `
+
${row.map(cell => this.cellmanager.getCellHTML(cell)).join('')}
`;
- }
+ }
- getFilterInput(props) {
- const dataAttr = makeDataAttributeString(props);
- return `
`;
- }
+ getFilterInput(props) {
+ const dataAttr = makeDataAttributeString(props);
+ return `
`;
+ }
- selector(rowIndex) {
- return `.data-table-row[data-row-index="${rowIndex}"]`;
- }
-}
-
-class BodyRenderer {
- constructor(instance) {
- this.instance = instance;
- this.options = instance.options;
- this.datamanager = instance.datamanager;
- this.rowmanager = instance.rowmanager;
- this.cellmanager = instance.cellmanager;
- this.bodyScrollable = instance.bodyScrollable;
- this.log = instance.log;
- this.appendRemainingData = nextTick(this.appendRemainingData, this);
- }
-
- render() {
- if (this.options.clusterize) {
- this.renderBodyWithClusterize();
- } else {
- this.renderBodyHTML();
+ selector(rowIndex) {
+ return `.dt-row[data-row-index="${rowIndex}"]`;
}
}
- renderBodyHTML() {
- const rows = this.datamanager.getRowsForView();
+ class BodyRenderer {
+ constructor(instance) {
+ this.instance = instance;
+ this.options = instance.options;
+ this.datamanager = instance.datamanager;
+ this.rowmanager = instance.rowmanager;
+ this.cellmanager = instance.cellmanager;
+ this.bodyScrollable = instance.bodyScrollable;
+ this.log = instance.log;
+ this.appendRemainingData = nextTick(this.appendRemainingData, this);
+ }
- this.bodyScrollable.innerHTML = `
-
- ${this.getBodyHTML(rows)}
+ render() {
+ if (this.options.clusterize) {
+ this.renderBodyWithClusterize();
+ } else {
+ this.renderBodyHTML();
+ }
+ }
+
+ renderBodyHTML() {
+ const rows = this.datamanager.getRowsForView();
+
+ this.bodyScrollable.innerHTML = this.getBodyHTML(rows);
+ this.instance.setDimensions();
+ this.restoreState();
+ }
+
+ renderBodyWithClusterize() {
+ // first page
+ const rows = this.datamanager.getRowsForView(0, 20);
+ let initialData = this.getDataForClusterize(rows);
+
+ if (initialData.length === 0) {
+ initialData = [this.getNoDataHTML()];
+ }
+
+ if (!this.clusterize) {
+ // empty body
+ this.bodyScrollable.innerHTML = this.getBodyHTML([]);
+
+ // first 20 rows will appended
+ // rest of them in nextTick
+ this.clusterize = new Clusterize({
+ rows: initialData,
+ scrollElem: this.bodyScrollable,
+ contentElem: $('tbody', this.bodyScrollable),
+ callbacks: {
+ clusterChanged: () => this.restoreState()
+ },
+ /* eslint-disable */
+ show_no_data_row: false,
+ /* eslint-enable */
+ });
+
+ // setDimensions requires atleast 1 row to exist in dom
+ this.instance.setDimensions();
+ } else {
+ this.clusterize.update(initialData);
+ }
+
+ this.appendRemainingData();
+ }
+
+ restoreState() {
+ this.rowmanager.highlightCheckedRows();
+ this.cellmanager.selectAreaOnClusterChanged();
+ this.cellmanager.focusCellOnClusterChanged();
+ }
+
+ appendRemainingData() {
+ const rows = this.datamanager.getRowsForView(20);
+ const data = this.getDataForClusterize(rows);
+ this.clusterize.append(data);
+ }
+
+ showToastMessage(message, hideAfter) {
+ this.instance.toastMessage.innerHTML = this.getToastMessageHTML(message);
+
+ if (hideAfter) {
+ setTimeout(() => {
+ this.clearToastMessage();
+ }, hideAfter * 1000);
+ }
+ }
+
+ clearToastMessage() {
+ this.instance.toastMessage.innerHTML = '';
+ }
+
+ getDataForClusterize(rows) {
+ return rows.map(row => this.rowmanager.getRowHTML(row, row.meta));
+ }
+
+ getBodyHTML(rows) {
+ return `
+
+
+ ${rows.map(row => this.rowmanager.getRowHTML(row, row.meta)).join('')}
+
`;
- this.instance.setDimensions();
- this.restoreState();
- }
-
- renderBodyWithClusterize() {
- // first page
- const rows = this.datamanager.getRowsForView(0, 20);
- let initialData = this.getDataForClusterize(rows);
-
- if (initialData.length === 0) {
- initialData = [`| ${this.options.noDataMessage} |
`];
}
- if (!this.clusterize) {
- // empty body
- this.bodyScrollable.innerHTML = `
-
- ${this.getBodyHTML([])}
-
- `;
+ getNoDataHTML() {
+ return `${this.options.noDataMessage}
`;
+ }
- // first 20 rows will appended
- // rest of them in nextTick
- this.clusterize = new Clusterize({
- rows: initialData,
- scrollElem: this.bodyScrollable,
- contentElem: $('tbody', this.bodyScrollable),
- callbacks: {
- clusterChanged: () => {
- this.restoreState();
+ getToastMessageHTML(message) {
+ return `${message}`;
+ }
+ }
+
+ class Style {
+ constructor(instance) {
+ this.instance = instance;
+
+ linkProperties(this, this.instance, [
+ 'options', 'datamanager', 'columnmanager',
+ 'header', 'bodyScrollable', 'datatableWrapper',
+ 'getColumn'
+ ]);
+
+ this.scopeClass = 'dt-instance-' + instance.constructor.instances;
+ instance.datatableWrapper.classList.add(this.scopeClass);
+
+ const styleEl = document.createElement('style');
+ instance.wrapper.insertBefore(styleEl, instance.datatableWrapper);
+ this.styleEl = styleEl;
+
+ this.bindResizeWindow();
+ }
+
+ get stylesheet() {
+ return this.styleEl.sheet;
+ }
+
+ bindResizeWindow() {
+ if (this.options.layout === 'fluid') {
+ $.on(window, 'resize', throttle$1(() => {
+ this.distributeRemainingWidth();
+ this.refreshColumnWidth();
+ this.compensateScrollbarWidth();
+ this.setBodyStyle();
+ }, 300));
+ }
+ }
+
+ destroy() {
+ this.styleEl.remove();
+ }
+
+ setStyle(selector, styleMap, index = -1) {
+ const styles = Object.keys(styleMap)
+ .map(prop => {
+ if (!prop.includes('-')) {
+ prop = camelCaseToDash(prop);
}
- },
- /* eslint-disable */
- show_no_data_row: false,
- /* eslint-enable */
- });
-
- // setDimensions requires atleast 1 row to exist in dom
- this.instance.setDimensions();
- } else {
- this.clusterize.update(initialData);
- }
-
- this.appendRemainingData();
- }
-
- restoreState() {
- this.rowmanager.highlightCheckedRows();
- this.cellmanager.selectAreaOnClusterChanged();
- this.cellmanager.focusCellOnClusterChanged();
- }
-
- appendRemainingData() {
- const rows = this.datamanager.getRowsForView(20);
- const data = this.getDataForClusterize(rows);
- this.clusterize.append(data);
- }
-
- showToastMessage(message) {
- this.instance.toastMessage.innerHTML = `${message}`;
- }
-
- clearToastMessage() {
- this.instance.toastMessage.innerHTML = '';
- }
-
- getDataForClusterize(rows) {
- return rows.map((row) => this.rowmanager.getRowHTML(row, row.meta));
- }
-
- getBodyHTML(rows) {
- return `
-
- ${rows.map(row => this.rowmanager.getRowHTML(row, row.meta)).join('')}
-
- `;
- }
-}
-
-class Style {
- constructor(instance) {
- this.instance = instance;
-
- linkProperties(this, this.instance, [
- 'options', 'datamanager', 'columnmanager',
- 'header', 'bodyScrollable', 'datatableWrapper',
- 'getColumn'
- ]);
-
- this.scopeClass = 'datatable-instance-' + instance.constructor.instances;
- instance.datatableWrapper.classList.add(this.scopeClass);
-
- const styleEl = document.createElement('style');
- instance.wrapper.insertBefore(styleEl, instance.datatableWrapper);
- this.styleEl = styleEl;
-
- this.bindResizeWindow();
- }
-
- get stylesheet() {
- return this.styleEl.sheet;
- }
-
- bindResizeWindow() {
- if (this.options.layout === 'fluid') {
- $.on(window, 'resize', throttle$1(() => {
- this.distributeRemainingWidth();
- this.refreshColumnWidth();
- this.compensateScrollbarWidth();
- this.setBodyStyle();
- }, 300));
- }
- }
-
- destroy() {
- this.styleEl.remove();
- }
-
- setStyle(selector, styleMap, index = -1) {
- const styles = Object.keys(styleMap)
- .map(prop => {
- if (!prop.includes('-')) {
- prop = camelCaseToDash(prop);
- }
- return `${prop}:${styleMap[prop]};`;
- })
- .join('');
- let prefixedSelector = selector
- .split(',')
- .map(r => `.${this.scopeClass} ${r}`)
- .join(',');
-
- let ruleString = `${prefixedSelector} { ${styles} }`;
-
- if (!this.stylesheet) return;
-
- let _index = this.stylesheet.cssRules.length;
- if (index !== -1) {
- this.stylesheet.deleteRule(index);
- _index = index;
- }
-
- this.stylesheet.insertRule(ruleString, _index);
- return _index; // eslint-disable-line
- }
-
- setDimensions() {
- this.setHeaderStyle();
-
- this.setupMinWidth();
- this.setupNaturalColumnWidth();
- this.setupColumnWidth();
- this.distributeRemainingWidth();
- this.setColumnStyle();
- this.compensateScrollbarWidth();
-
- this.setDefaultCellHeight();
- this.setBodyStyle();
- }
-
- setHeaderStyle() {
- if (this.options.layout === 'fluid') {
- // setting width as 0 will ensure that the
- // header doesn't take the available space
- $.style(this.header, {
- width: 0
- });
- }
-
- $.style(this.header, {
- margin: 0
- });
-
- // don't show resize cursor on nonResizable columns
- const nonResizableColumnsSelector = this.datamanager.getColumns()
- .filter(col => col.resizable === false)
- .map(col => col.colIndex)
- .map(i => `.data-table-header [data-col-index="${i}"]`)
- .join();
-
- this.setStyle(nonResizableColumnsSelector, {
- cursor: 'pointer'
- });
- }
-
- setupMinWidth() {
- $.each('.data-table-cell[data-is-header]', this.header).map(col => {
- const width = $.style($('.content', col), 'width');
- const {
- colIndex
- } = $.data(col);
- const column = this.getColumn(colIndex);
-
- if (!column.minWidth) {
- // only set this once
- column.minWidth = width;
- }
- });
- }
-
- setupNaturalColumnWidth() {
- if (!$('.data-table-row')) return;
-
- // set initial width as naturally calculated by table's first row
- $.each('.data-table-row[data-row-index="0"] .data-table-cell', this.bodyScrollable).map($cell => {
- const {
- colIndex
- } = $.data($cell);
- const column = this.datamanager.getColumn(colIndex);
-
- let naturalWidth = $.style($('.content', $cell), 'width');
-
- if (column.id === '_rowIndex') {
- naturalWidth = this.getRowIndexColumnWidth(naturalWidth);
- column.width = naturalWidth;
- }
-
- column.naturalWidth = naturalWidth;
- });
- }
-
- setupColumnWidth() {
- if (this.options.layout === 'ratio') {
- let totalWidth = $.style(this.datatableWrapper, 'width');
-
- if (this.options.serialNoColumn) {
- const rowIndexColumn = this.datamanager.getColumnById('_rowIndex');
- totalWidth = totalWidth - rowIndexColumn.width - 1;
- }
-
- if (this.options.checkboxColumn) {
- const rowIndexColumn = this.datamanager.getColumnById('_checkbox');
- totalWidth = totalWidth - rowIndexColumn.width - 1;
- }
-
- const totalParts = this.datamanager.getColumns()
- .map(column => {
- if (column.id === '_rowIndex' || column.id === '_checkbox') {
- return 0;
- }
- if (!column.width) {
- column.width = 1;
- }
- column.ratioWidth = parseInt(column.width, 10);
- return column.ratioWidth;
+ return `${prop}:${styleMap[prop]};`;
})
- .reduce((a, c) => a + c);
+ .join('');
+ let prefixedSelector = selector
+ .split(',')
+ .map(r => `.${this.scopeClass} ${r}`)
+ .join(',');
- const onePart = totalWidth / totalParts;
+ let ruleString = `${prefixedSelector} { ${styles} }`;
- this.datamanager.getColumns()
- .map(column => {
- if (column.id === '_rowIndex' || column.id === '_checkbox') return;
- column.width = Math.floor(onePart * column.ratioWidth) - 1;
- });
- } else {
- this.datamanager.getColumns()
- .map(column => {
- if (!column.width) {
- column.width = column.naturalWidth;
- }
- if (column.width < column.minWidth) {
- column.width = column.minWidth;
- }
- });
+ if (!this.stylesheet) return;
+
+ let _index = this.stylesheet.cssRules.length;
+ if (index !== -1) {
+ this.stylesheet.deleteRule(index);
+ _index = index;
+ }
+
+ this.stylesheet.insertRule(ruleString, _index);
+ return _index; // eslint-disable-line
}
- }
- compensateScrollbarWidth() {
- const scrollbarWidth = $.scrollbarWidth();
- const lastCol = this.datamanager.getColumn(-1);
- const width = lastCol.width - scrollbarWidth;
- this.columnmanager.setColumnWidth(lastCol.colIndex, width);
- }
+ setDimensions() {
+ this.setHeaderStyle();
- distributeRemainingWidth() {
- if (this.options.layout !== 'fluid') return;
+ this.setupMinWidth();
+ this.setupNaturalColumnWidth();
+ this.setupColumnWidth();
+ this.distributeRemainingWidth();
+ this.setColumnStyle();
+ this.compensateScrollbarWidth();
- const wrapperWidth = $.style(this.instance.datatableWrapper, 'width');
- const headerWidth = $.style(this.header, 'width');
- const resizableColumns = this.datamanager.getColumns().filter(col => col.resizable);
- const deltaWidth = (wrapperWidth - headerWidth) / resizableColumns.length;
+ this.setDefaultCellHeight();
+ this.setBodyStyle();
+ }
- resizableColumns.map(col => {
- const width = $.style(this.getColumnHeaderElement(col.colIndex), 'width');
- let finalWidth = Math.floor(width + deltaWidth) - 2;
+ setHeaderStyle() {
+ if (this.options.layout === 'fluid') {
+ // setting width as 0 will ensure that the
+ // header doesn't take the available space
+ $.style(this.header, {
+ width: 0
+ });
+ }
- this.datamanager.updateColumn(col.colIndex, {
- width: finalWidth
+ $.style(this.header, {
+ margin: 0
});
- });
- }
-
- setDefaultCellHeight() {
- if (this.options.dynamicRowHeight) return;
- if (this.__cellHeightSet) return;
- const $firstCell = $('.data-table-cell[data-is-header]', this.instance.header);
- if (!$firstCell) return;
-
- const height = this.options.cellHeight || $.style($firstCell, 'height');
- if (height) {
- this.setCellHeight(height);
- this.__cellHeightSet = true;
}
- }
- setCellHeight(height) {
- this.setStyle('.data-table-cell .content', {
- height: height + 'px'
- });
- this.setStyle('.data-table-cell .edit-cell', {
- height: height + 'px'
- });
- }
+ setupMinWidth() {
+ $.each('.dt-cell[data-is-header]', this.header).map(col => {
+ const { colIndex } = $.data(col);
+ const column = this.getColumn(colIndex);
- setColumnStyle() {
- // align columns
- this.datamanager.getColumns()
- .map(column => {
- // alignment
- if (['left', 'center', 'right'].includes(column.align)) {
- this.setStyle(`[data-col-index="${column.colIndex}"]`, {
- 'text-align': column.align
+ if (!column.minWidth) {
+ const width = $.style($('.dt-cell__content', col), 'width');
+ // only set this once
+ column.minWidth = width;
+ }
+ });
+ }
+
+ setupNaturalColumnWidth() {
+ if (!$('.dt-row')) return;
+
+ // set initial width as naturally calculated by table's first row
+ $.each('.dt-row[data-row-index="0"] .dt-cell', this.bodyScrollable).map($cell => {
+ const {
+ colIndex
+ } = $.data($cell);
+ const column = this.datamanager.getColumn(colIndex);
+
+ let naturalWidth = $.style($('.dt-cell__content', $cell), 'width');
+
+ if (column.id === '_rowIndex') {
+ naturalWidth = this.getRowIndexColumnWidth(naturalWidth);
+ column.width = naturalWidth;
+ }
+
+ column.naturalWidth = naturalWidth;
+ });
+ }
+
+ setupColumnWidth() {
+ if (this.options.layout === 'ratio') {
+ let totalWidth = $.style(this.datatableWrapper, 'width');
+
+ if (this.options.serialNoColumn) {
+ const rowIndexColumn = this.datamanager.getColumnById('_rowIndex');
+ totalWidth = totalWidth - rowIndexColumn.width - 1;
+ }
+
+ if (this.options.checkboxColumn) {
+ const rowIndexColumn = this.datamanager.getColumnById('_checkbox');
+ totalWidth = totalWidth - rowIndexColumn.width - 1;
+ }
+
+ const totalParts = this.datamanager.getColumns()
+ .map(column => {
+ if (column.id === '_rowIndex' || column.id === '_checkbox') {
+ return 0;
+ }
+ if (!column.width) {
+ column.width = 1;
+ }
+ column.ratioWidth = parseInt(column.width, 10);
+ return column.ratioWidth;
+ })
+ .reduce((a, c) => a + c);
+
+ const onePart = totalWidth / totalParts;
+
+ this.datamanager.getColumns()
+ .map(column => {
+ if (column.id === '_rowIndex' || column.id === '_checkbox') return;
+ column.width = Math.floor(onePart * column.ratioWidth) - 1;
+ });
+ } else {
+ this.datamanager.getColumns()
+ .map(column => {
+ if (!column.width) {
+ column.width = column.naturalWidth;
+ }
+ if (column.width < column.minWidth) {
+ column.width = column.minWidth;
+ }
+ });
+ }
+ }
+
+ compensateScrollbarWidth() {
+ requestAnimationFrame(() => {
+ const scrollbarWidth = $.scrollbarWidth();
+ const lastCol = this.datamanager.getColumn(-1);
+ const width = lastCol.width - scrollbarWidth;
+ this.columnmanager.setColumnWidth(lastCol.colIndex, width);
+ });
+ }
+
+ distributeRemainingWidth() {
+ if (this.options.layout !== 'fluid') return;
+
+ const wrapperWidth = $.style(this.instance.datatableWrapper, 'width');
+ const headerWidth = $.style(this.header, 'width');
+ const resizableColumns = this.datamanager.getColumns().filter(col => col.resizable);
+ const deltaWidth = (wrapperWidth - headerWidth) / resizableColumns.length;
+
+ resizableColumns.map(col => {
+ const width = $.style(this.getColumnHeaderElement(col.colIndex), 'width');
+ let finalWidth = Math.floor(width + deltaWidth) - 2;
+
+ this.datamanager.updateColumn(col.colIndex, {
+ width: finalWidth
+ });
+ });
+ }
+
+ setDefaultCellHeight() {
+ if (this.options.dynamicRowHeight) return;
+ if (this.__cellHeightSet) return;
+ const $firstCell = $('.dt-cell[data-is-header]', this.instance.header);
+ if (!$firstCell) return;
+
+ const height = this.options.cellHeight || $.style($firstCell, 'height');
+ if (height) {
+ this.setCellHeight(height);
+ this.__cellHeightSet = true;
+ }
+ }
+
+ setCellHeight(height) {
+ this.setStyle('.dt-cell__content, .dt-cell__edit', {
+ height: height + 'px'
+ });
+ }
+
+ setColumnStyle() {
+ // align columns
+ this.datamanager.getColumns()
+ .map(column => {
+ // alignment
+ if (['left', 'center', 'right'].includes(column.align)) {
+ this.setStyle(`.dt-cell--col-${column.colIndex}`, {
+ 'text-align': column.align
+ });
+ }
+ // width
+ this.columnmanager.setColumnHeaderWidth(column.colIndex);
+ this.columnmanager.setColumnWidth(column.colIndex);
+ });
+ this.setBodyStyle();
+ }
+
+ refreshColumnWidth() {
+ this.datamanager.getColumns()
+ .map(column => {
+ this.columnmanager.setColumnHeaderWidth(column.colIndex);
+ this.columnmanager.setColumnWidth(column.colIndex);
+ });
+ }
+
+ setBodyStyle() {
+ requestAnimationFrame(() => {
+ const width = $.style(this.header, 'width');
+
+ $.style(this.bodyScrollable, {
+ width: width + 'px'
+ });
+
+ const $body = $('.dt-body', this.bodyScrollable);
+
+ if ($body) {
+ $.style($body, {
+ height: '0px'
});
}
- // width
- this.columnmanager.setColumnHeaderWidth(column.colIndex);
- this.columnmanager.setColumnWidth(column.colIndex);
- });
- this.setBodyStyle();
- }
- refreshColumnWidth() {
- this.datamanager.getColumns()
- .map(column => {
- this.columnmanager.setColumnHeaderWidth(column.colIndex);
- this.columnmanager.setColumnWidth(column.colIndex);
- });
- }
+ $.style(this.bodyScrollable, {
+ marginTop: $.style(this.header, 'height') + 'px'
+ });
- setBodyStyle() {
- const width = $.style(this.header, 'width');
-
- $.style(this.bodyScrollable, {
- width: width + 'px'
- });
-
- const $body = $('.data-table-body', this.bodyScrollable);
-
- if ($body) {
- $.style($body, {
- height: '0px'
+ $.style($('table', this.bodyScrollable), {
+ margin: 0,
+ width: '100%'
+ });
});
}
- $.style(this.bodyScrollable, {
- marginTop: $.style(this.header, 'height') + 'px'
- });
-
- $.style($('table', this.bodyScrollable), {
- margin: 0,
- width: '100%'
- });
- }
-
- getColumnHeaderElement(colIndex) {
- colIndex = +colIndex;
- if (colIndex < 0) return null;
- return $(`.data-table-cell[data-col-index="${colIndex}"]`, this.header);
- }
-
- getRowIndexColumnWidth(baseWidth) {
- this._rowIndexColumnWidthMap = this._rowIndexColumnWidthMap || {};
- const rowCount = this.datamanager.getRowCount();
- const digits = (rowCount + '').length;
-
- if (!this._rowIndexColumnWidthMap[digits]) {
- // add 8px for each unit
- this._rowIndexColumnWidthMap[digits] = baseWidth + ((digits - 1) * 8);
+ getColumnHeaderElement(colIndex) {
+ colIndex = +colIndex;
+ if (colIndex < 0) return null;
+ return $(`.dt-cell[data-col-index="${colIndex}"]`, this.header);
}
- return this._rowIndexColumnWidthMap[digits];
- }
-}
+ getRowIndexColumnWidth(baseWidth) {
+ this._rowIndexColumnWidthMap = this._rowIndexColumnWidthMap || {};
+ const rowCount = this.datamanager.getRowCount();
+ const digits = (rowCount + '').length;
-const KEYCODES = {
- 13: 'enter',
- 91: 'meta',
- 16: 'shift',
- 17: 'ctrl',
- 18: 'alt',
- 37: 'left',
- 38: 'up',
- 39: 'right',
- 40: 'down',
- 9: 'tab',
- 27: 'esc',
- 67: 'c',
- 70: 'f'
-};
+ if (!this._rowIndexColumnWidthMap[digits]) {
+ // add 8px for each unit
+ this._rowIndexColumnWidthMap[digits] = baseWidth + ((digits - 1) * 8);
+ }
-class Keyboard {
- constructor(element) {
- this.listeners = {};
- $.on(element, 'keydown', this.handler.bind(this));
+ return this._rowIndexColumnWidthMap[digits];
+ }
}
- handler(e) {
- let key = KEYCODES[e.keyCode];
+ const KEYCODES = {
+ 13: 'enter',
+ 91: 'meta',
+ 16: 'shift',
+ 17: 'ctrl',
+ 18: 'alt',
+ 37: 'left',
+ 38: 'up',
+ 39: 'right',
+ 40: 'down',
+ 9: 'tab',
+ 27: 'esc',
+ 67: 'c',
+ 70: 'f',
+ 86: 'v'
+ };
- if (e.shiftKey && key !== 'shift') {
- key = 'shift+' + key;
+ class Keyboard {
+ constructor(element) {
+ this.listeners = {};
+ $.on(element, 'keydown', this.handler.bind(this));
}
- if ((e.ctrlKey && key !== 'ctrl') || (e.metaKey && key !== 'meta')) {
- key = 'ctrl+' + key;
- }
+ handler(e) {
+ let key = KEYCODES[e.keyCode];
- const listeners = this.listeners[key];
+ if (e.shiftKey && key !== 'shift') {
+ key = 'shift+' + key;
+ }
- if (listeners && listeners.length > 0) {
- for (let listener of listeners) {
- const preventBubbling = listener(e);
- if (preventBubbling === undefined || preventBubbling === true) {
- e.preventDefault();
+ if ((e.ctrlKey && key !== 'ctrl') || (e.metaKey && key !== 'meta')) {
+ key = 'ctrl+' + key;
+ }
+
+ const listeners = this.listeners[key];
+
+ if (listeners && listeners.length > 0) {
+ for (let listener of listeners) {
+ const preventBubbling = listener(e);
+ if (preventBubbling === undefined || preventBubbling === true) {
+ e.preventDefault();
+ }
}
}
}
+
+ on(key, listener) {
+ const keys = key.split(',').map(k => k.trim());
+
+ keys.map(key => {
+ this.listeners[key] = this.listeners[key] || [];
+ this.listeners[key].push(listener);
+ });
+ }
}
- on(key, listener) {
- const keys = key.split(',').map(k => k.trim());
-
- keys.map(key => {
- this.listeners[key] = this.listeners[key] || [];
- this.listeners[key].push(listener);
- });
- }
-}
-
-var DEFAULT_OPTIONS = {
- columns: [],
- data: [],
- dropdownButton: '▼',
- headerDropdown: [
- {
- label: 'Sort Ascending',
- action: function (column) {
- this.sortColumn(column.colIndex, 'asc');
+ var DEFAULT_OPTIONS = {
+ columns: [],
+ data: [],
+ dropdownButton: '▼',
+ headerDropdown: [
+ {
+ label: 'Sort Ascending',
+ action: function (column) {
+ this.sortColumn(column.colIndex, 'asc');
+ }
+ },
+ {
+ label: 'Sort Descending',
+ action: function (column) {
+ this.sortColumn(column.colIndex, 'desc');
+ }
+ },
+ {
+ label: 'Reset sorting',
+ action: function (column) {
+ this.sortColumn(column.colIndex, 'none');
+ }
+ },
+ {
+ label: 'Remove column',
+ action: function (column) {
+ this.removeColumn(column.colIndex);
+ }
}
+ ],
+ events: {
+ onRemoveColumn(column) {},
+ onSwitchColumn(column1, column2) {},
+ onSortColumn(column) {},
+ onCheckRow(row) {}
},
- {
- label: 'Sort Descending',
- action: function (column) {
- this.sortColumn(column.colIndex, 'desc');
- }
+ sortIndicator: {
+ asc: '↑',
+ desc: '↓',
+ none: ''
},
- {
- label: 'Reset sorting',
- action: function (column) {
- this.sortColumn(column.colIndex, 'none');
+ freezeMessage: '',
+ getEditor: null,
+ serialNoColumn: true,
+ checkboxColumn: false,
+ clusterize: true,
+ logs: false,
+ layout: 'fixed', // fixed, fluid, ratio
+ noDataMessage: 'No Data',
+ cellHeight: null,
+ inlineFilters: false,
+ treeView: false,
+ checkedRowStatus: true,
+ dynamicRowHeight: false,
+ pasteFromClipboard: false
+ };
+
+ class DataTable {
+ constructor(wrapper, options) {
+ DataTable.instances++;
+
+ if (typeof wrapper === 'string') {
+ // css selector
+ wrapper = document.querySelector(wrapper);
}
- },
- {
- label: 'Remove column',
- action: function (column) {
- this.removeColumn(column.colIndex);
+ this.wrapper = wrapper;
+ if (!(this.wrapper instanceof HTMLElement)) {
+ throw new Error('Invalid argument given for `wrapper`');
+ }
+
+ this.buildOptions(options);
+ this.prepare();
+
+ this.style = new Style(this);
+ this.keyboard = new Keyboard(this.wrapper);
+ this.datamanager = new DataManager(this.options);
+ this.rowmanager = new RowManager(this);
+ this.columnmanager = new ColumnManager(this);
+ this.cellmanager = new CellManager(this);
+ this.bodyRenderer = new BodyRenderer(this);
+
+ if (this.options.data) {
+ this.refresh();
}
}
- ],
- events: {
- onRemoveColumn(column) {},
- onSwitchColumn(column1, column2) {},
- onSortColumn(column) {},
- onCheckRow(row) {}
- },
- sortIndicator: {
- asc: '↑',
- desc: '↓',
- none: ''
- },
- freezeMessage: '',
- getEditor: null,
- serialNoColumn: true,
- checkboxColumn: false,
- clusterize: true,
- logs: false,
- layout: 'fixed', // fixed, fluid, ratio
- noDataMessage: 'No Data',
- cellHeight: null,
- inlineFilters: false,
- treeView: false,
- checkedRowStatus: true,
- dynamicRowHeight: false
-};
-class DataTable {
- constructor(wrapper, options) {
- DataTable.instances++;
+ buildOptions(options) {
+ this.options = this.options || {};
- if (typeof wrapper === 'string') {
- // css selector
- wrapper = document.querySelector(wrapper);
- }
- this.wrapper = wrapper;
- if (!(this.wrapper instanceof HTMLElement)) {
- throw new Error('Invalid argument given for `wrapper`');
+ this.options = Object.assign(
+ {}, DEFAULT_OPTIONS,
+ this.options || {}, options
+ );
+
+ options.headerDropdown = options.headerDropdown || [];
+ this.options.headerDropdown = [
+ ...DEFAULT_OPTIONS.headerDropdown,
+ ...options.headerDropdown
+ ];
+
+ // custom user events
+ this.events = Object.assign(
+ {}, DEFAULT_OPTIONS.events,
+ this.options.events || {},
+ options.events || {}
+ );
+ this.fireEvent = this.fireEvent.bind(this);
}
- this.buildOptions(options);
- this.prepare();
-
- this.style = new Style(this);
- this.keyboard = new Keyboard(this.wrapper);
- this.datamanager = new DataManager(this.options);
- this.rowmanager = new RowManager(this);
- this.columnmanager = new ColumnManager(this);
- this.cellmanager = new CellManager(this);
- this.bodyRenderer = new BodyRenderer(this);
-
- if (this.options.data) {
- this.refresh();
+ prepare() {
+ this.prepareDom();
+ this.unfreeze();
}
- }
- buildOptions(options) {
- this.options = this.options || {};
-
- this.options = Object.assign(
- {}, DEFAULT_OPTIONS,
- this.options || {}, options
- );
-
- this.options.headerDropdown
- .push(...(options.headerDropdown || []));
-
- // custom user events
- this.events = Object.assign(
- {}, DEFAULT_OPTIONS.events,
- this.options.events || {},
- options.events || {}
- );
- this.fireEvent = this.fireEvent.bind(this);
- }
-
- prepare() {
- this.prepareDom();
- this.unfreeze();
- }
-
- prepareDom() {
- this.wrapper.innerHTML = `
-
-