${contentHTML}
${sortIndicator}
${resizeColumn}
@@ -2640,14 +2201,403 @@ class CellManager {
`;
}
- getEditCellHTML() {
- return `
-
- `;
+ getEditCellHTML(colIndex) {
+ return `
`;
}
selector(colIndex, rowIndex) {
- return `.data-table-cell[data-col-index="${colIndex}"][data-row-index="${rowIndex}"]`;
+ return `.dt-cell--${colIndex}-${rowIndex}`;
+ }
+}
+
+class ColumnManager {
+ constructor(instance) {
+ this.instance = instance;
+
+ linkProperties(this, this.instance, [
+ 'options',
+ 'fireEvent',
+ 'header',
+ 'datamanager',
+ 'style',
+ 'wrapper',
+ 'rowmanager',
+ 'bodyScrollable'
+ ]);
+
+ this.bindEvents();
+ }
+
+ renderHeader() {
+ this.header.innerHTML = '
';
+ this.refreshHeader();
+ }
+
+ refreshHeader() {
+ const columns = this.datamanager.getColumns();
+ const $cols = $.each('.dt-cell--header', this.header);
+
+ const refreshHTML =
+ // first init
+ !$('.dt-cell', this.header) ||
+ // deleted column
+ columns.length < $cols.length;
+
+ if (refreshHTML) {
+ // refresh html
+ $('thead', this.header).innerHTML = this.getHeaderHTML(columns);
+
+ 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
+ });
+
+ // refresh sort indicator
+ const sortIndicator = $('.sort-indicator', $col);
+ if (sortIndicator) {
+ sortIndicator.innerHTML = this.options.sortIndicator[column.sortOrder];
+ }
+ });
+ }
+ // reset columnMap
+ this.$columnMap = [];
+ }
+
+ 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$2(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 {
+ width
+ } = this.getColumn(colIndex);
+
+ let $column = this.$columnMap[colIndex];
+ if (!$column) {
+ $column = this.header.querySelector(selector);
+ this.$columnMap[colIndex] = $column;
+ }
+
+ $column.style.width = width + 'px';
+ }
+
+ getColumnMinWidth(colIndex) {
+ colIndex = +colIndex;
+ return this.getColumn(colIndex).minWidth || 24;
+ }
+
+ 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('')}
+
+
+ `;
}
}
@@ -2684,8 +2634,8 @@ class RowManager {
// map of checked rows
this.checkMap = [];
- $.on(this.wrapper, 'click', '.data-table-cell[data-col-index="0"] [type="checkbox"]', (e, $checkbox) => {
- const $cell = $checkbox.closest('.data-table-cell');
+ $.on(this.wrapper, 'click', '.dt-cell[data-col-index="0"] [type="checkbox"]', (e, $checkbox) => {
+ const $cell = $checkbox.closest('.dt-cell');
const {
rowIndex,
isHeader
@@ -2737,7 +2687,7 @@ class RowManager {
checkRow(rowIndex, toggle) {
const value = toggle ? 1 : 0;
const selector = rowIndex =>
- `.data-table-cell[data-row-index="${rowIndex}"][data-col-index="0"] [type="checkbox"]`;
+ `.dt-cell[data-row-index="${rowIndex}"][data-col-index="0"] [type="checkbox"]`;
// update internal map
this.checkMap[rowIndex] = value;
// set checkbox value explicitly
@@ -2761,7 +2711,7 @@ class RowManager {
this.checkMap = [];
}
// set checkbox value
- $.each('.data-table-cell[data-col-index="0"] [type="checkbox"]', this.bodyScrollable)
+ $.each('.dt-cell[data-col-index="0"] [type="checkbox"]', this.bodyScrollable)
.map(input => {
input.checked = toggle;
});
@@ -2785,34 +2735,34 @@ class RowManager {
const $row = this.getRow$(rowIndex);
if (!$row) return;
- if (!toggle && this.bodyScrollable.classList.contains('row-highlight-all')) {
- $row.classList.add('row-unhighlight');
+ if (!toggle && this.bodyScrollable.classList.contains('dt-scrollable--highlight-all')) {
+ $row.classList.add('dt-row--unhighlight');
return;
}
- if (toggle && $row.classList.contains('row-unhighlight')) {
- $row.classList.remove('row-unhighlight');
+ if (toggle && $row.classList.contains('dt-row--unhighlight')) {
+ $row.classList.remove('dt-row--unhighlight');
}
this._highlightedRows = this._highlightedRows || {};
if (toggle) {
- $row.classList.add('row-highlight');
+ $row.classList.add('dt-row--highlight');
this._highlightedRows[rowIndex] = $row;
} else {
- $row.classList.remove('row-highlight');
+ $row.classList.remove('dt-row--highlight');
delete this._highlightedRows[rowIndex];
}
}
highlightAll(toggle = true) {
if (toggle) {
- this.bodyScrollable.classList.add('row-highlight-all');
+ this.bodyScrollable.classList.add('dt-scrollable--highlight-all');
} else {
- this.bodyScrollable.classList.remove('row-highlight-all');
+ this.bodyScrollable.classList.remove('dt-scrollable--highlight-all');
for (const rowIndex in this._highlightedRows) {
const $row = this._highlightedRows[rowIndex];
- $row.classList.remove('row-highlight');
+ $row.classList.remove('dt-row--highlight');
}
this._highlightedRows = {};
}
@@ -2822,7 +2772,7 @@ class RowManager {
rowIndices = ensureArray(rowIndices);
rowIndices.map(rowIndex => {
const $tr = this.getRow$(rowIndex);
- $tr.classList.add('hide');
+ $tr.classList.add('dt-row--hide');
});
}
@@ -2830,7 +2780,7 @@ class RowManager {
rowIndices = ensureArray(rowIndices);
rowIndices.map(rowIndex => {
const $tr = this.getRow$(rowIndex);
- $tr.classList.remove('hide');
+ $tr.classList.remove('dt-row--hide');
});
}
@@ -2913,7 +2863,7 @@ class RowManager {
}
return `
-
+
${row.map(cell => this.cellmanager.getCellHTML(cell)).join('')}
`;
@@ -2921,11 +2871,11 @@ class RowManager {
getFilterInput(props) {
const dataAttr = makeDataAttributeString(props);
- return `
`;
+ return `
`;
}
selector(rowIndex) {
- return `.data-table-row[data-row-index="${rowIndex}"]`;
+ return `.dt-row[data-row-index="${rowIndex}"]`;
}
}
@@ -2952,11 +2902,7 @@ class BodyRenderer {
renderBodyHTML() {
const rows = this.datamanager.getRowsForView();
- this.bodyScrollable.innerHTML = `
-
- ${this.getBodyHTML(rows)}
-
- `;
+ this.bodyScrollable.innerHTML = this.getBodyHTML(rows);
this.instance.setDimensions();
this.restoreState();
}
@@ -2967,16 +2913,12 @@ class BodyRenderer {
let initialData = this.getDataForClusterize(rows);
if (initialData.length === 0) {
- initialData = [`
| ${this.options.noDataMessage} |
`];
+ initialData = [this.getNoDataHTML()];
}
if (!this.clusterize) {
// empty body
- this.bodyScrollable.innerHTML = `
-
- ${this.getBodyHTML([])}
-
- `;
+ this.bodyScrollable.innerHTML = this.getBodyHTML([]);
// first 20 rows will appended
// rest of them in nextTick
@@ -3013,8 +2955,14 @@ class BodyRenderer {
this.clusterize.append(data);
}
- showToastMessage(message) {
- this.instance.toastMessage.innerHTML = `
${message}`;
+ showToastMessage(message, hideAfter) {
+ this.instance.toastMessage.innerHTML = this.getToastMessageHTML(message);
+
+ if (hideAfter) {
+ setTimeout(() => {
+ this.clearToastMessage();
+ }, hideAfter * 1000);
+ }
}
clearToastMessage() {
@@ -3027,11 +2975,21 @@ class BodyRenderer {
getBodyHTML(rows) {
return `
-
- ${rows.map(row => this.rowmanager.getRowHTML(row, row.meta)).join('')}
-
+
+
+ ${rows.map(row => this.rowmanager.getRowHTML(row, row.meta)).join('')}
+
+
`;
}
+
+ getNoDataHTML() {
+ return `
${this.options.noDataMessage}
`;
+ }
+
+ getToastMessageHTML(message) {
+ return `
${message}`;
+ }
}
class Style {
@@ -3044,7 +3002,7 @@ class Style {
'getColumn'
]);
- this.scopeClass = 'datatable-instance-' + instance.constructor.instances;
+ this.scopeClass = 'dt-instance-' + instance.constructor.instances;
instance.datatableWrapper.classList.add(this.scopeClass);
const styleEl = document.createElement('style');
@@ -3127,28 +3085,15 @@ class Style {
$.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);
+ $.each('.dt-cell[data-is-header]', this.header).map(col => {
+ const { colIndex } = $.data(col);
const column = this.getColumn(colIndex);
if (!column.minWidth) {
+ const width = $.style($('.dt-cell__content', col), 'width');
// only set this once
column.minWidth = width;
}
@@ -3156,16 +3101,16 @@ class Style {
}
setupNaturalColumnWidth() {
- if (!$('.data-table-row')) return;
+ if (!$('.dt-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 => {
+ $.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($('.content', $cell), 'width');
+ let naturalWidth = $.style($('.dt-cell__content', $cell), 'width');
if (column.id === '_rowIndex') {
naturalWidth = this.getRowIndexColumnWidth(naturalWidth);
@@ -3224,10 +3169,12 @@ class Style {
}
compensateScrollbarWidth() {
- const scrollbarWidth = $.scrollbarWidth();
- const lastCol = this.datamanager.getColumn(-1);
- const width = lastCol.width - scrollbarWidth;
- this.columnmanager.setColumnWidth(lastCol.colIndex, width);
+ requestAnimationFrame(() => {
+ const scrollbarWidth = $.scrollbarWidth();
+ const lastCol = this.datamanager.getColumn(-1);
+ const width = lastCol.width - scrollbarWidth;
+ this.columnmanager.setColumnWidth(lastCol.colIndex, width);
+ });
}
distributeRemainingWidth() {
@@ -3251,7 +3198,7 @@ class Style {
setDefaultCellHeight() {
if (this.options.dynamicRowHeight) return;
if (this.__cellHeightSet) return;
- const $firstCell = $('.data-table-cell[data-is-header]', this.instance.header);
+ const $firstCell = $('.dt-cell[data-is-header]', this.instance.header);
if (!$firstCell) return;
const height = this.options.cellHeight || $.style($firstCell, 'height');
@@ -3262,10 +3209,7 @@ class Style {
}
setCellHeight(height) {
- this.setStyle('.data-table-cell .content', {
- height: height + 'px'
- });
- this.setStyle('.data-table-cell .edit-cell', {
+ this.setStyle('.dt-cell__content, .dt-cell__edit', {
height: height + 'px'
});
}
@@ -3276,7 +3220,7 @@ class Style {
.map(column => {
// alignment
if (['left', 'center', 'right'].includes(column.align)) {
- this.setStyle(`[data-col-index="${column.colIndex}"]`, {
+ this.setStyle(`.dt-cell--col-${column.colIndex}`, {
'text-align': column.align
});
}
@@ -3296,34 +3240,36 @@ class Style {
}
setBodyStyle() {
- const width = $.style(this.header, 'width');
+ requestAnimationFrame(() => {
+ 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(this.bodyScrollable, {
+ width: width + 'px'
});
- }
- $.style(this.bodyScrollable, {
- marginTop: $.style(this.header, 'height') + 'px'
- });
+ const $body = $('.dt-body', this.bodyScrollable);
- $.style($('table', this.bodyScrollable), {
- margin: 0,
- width: '100%'
+ if ($body) {
+ $.style($body, {
+ height: '0px'
+ });
+ }
+
+ $.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);
+ return $(`.dt-cell[data-col-index="${colIndex}"]`, this.header);
}
getRowIndexColumnWidth(baseWidth) {
@@ -3507,25 +3453,25 @@ class DataTable {
prepareDom() {
this.wrapper.innerHTML = `
-
-