jingrow/datatable
1
0
Fork 0
Code Pull Requests Activity

Indent using 4 spaces

Browse Source
This commit is contained in:
Faris Ansari 2018-02-27 12:36:12 +05:30
parent d8fb48ba91
commit 6ee51038d0
13 changed files with 2237 additions and 2117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/body-renderer.js
View File

@ -1,6 +1,8 @@
import $ from './dom';
import Clusterize from 'clusterize.js';
import { promisify } from './utils';
import {
promisify
} from './utils';
export default class BodyRenderer {
constructor(instance) {
@ -27,7 +29,7 @@ export default class BodyRenderer {
this.bodyScrollable.innerHTML = `
<table class="data-table-body">
${getBodyHTML(rows)}
${this.getBodyHTML(rows)}
</table>
`;
this.instance.setDimensions();
@ -43,7 +45,7 @@ export default class BodyRenderer {
// empty body
this.bodyScrollable.innerHTML = `
<table class="data-table-body">
${getBodyHTML([])}
${this.getBodyHTML([])}
</table>
`;
@ -86,14 +88,14 @@ export default class BodyRenderer {
}
getDataForClusterize(rows) {
return rows.map((row) => this.rowmanager.getRowHTML(row, { rowIndex: row[0].rowIndex }));
return rows.map((row) => this.rowmanager.getRowHTML(row, row.meta));
}
};
export function getBodyHTML(rows) {
getBodyHTML(rows) {
return `
<tbody>
${rows.map(row => this.rowmanager.getRowHTML(row, { rowIndex: row[0].rowIndex })).join('')}
${rows.map(row => this.rowmanager.getRowHTML(row, row.meta)).join('')}
</tbody>
`;
}
};

84
src/cellmanager.js
View File

@ -4,7 +4,9 @@ import {
throttle
} from './utils';
import $ from './dom';
import { getDropdownHTML } from './columnmanager';
import {
getDropdownHTML
} from './columnmanager';
export default class CellManager {
constructor(instance) {
@ -80,7 +82,10 @@ export default class CellManager {
}
let $cell = this.$focusedCell;
const { rowIndex, colIndex } = $.data($cell);
const {
rowIndex,
colIndex
} = $.data($cell);
if (direction === 'left') {
$cell = this.getLeftMostCell$(rowIndex);
@ -111,7 +116,9 @@ export default class CellManager {
if (this.options.enableInlineFilters) {
this.keyboard.on('ctrl+f', (e) => {
const $cell = $.closest('.data-table-col', e.target);
let { colIndex } = $.data($cell);
let {
colIndex
} = $.data($cell);
this.activateFilter(colIndex);
return true;
@ -168,13 +175,18 @@ export default class CellManager {
$.on(this.bodyScrollable, 'mousemove', '.data-table-col', throttle(selectArea, 50));
}
focusCell($cell, { skipClearSelection = 0 } = {}) {
focusCell($cell, {
skipClearSelection = 0
} = {}) {
if (!$cell) return;
// don't focus if already editing cell
if ($cell === this.$editingCell) return;
const { colIndex, isHeader } = $.data($cell);
const {
colIndex,
isHeader
} = $.data($cell);
if (isHeader) {
return;
}
@ -205,7 +217,10 @@ export default class CellManager {
}
highlightRowColumnHeader($cell) {
const { colIndex, rowIndex } = $.data($cell);
const {
colIndex,
rowIndex
} = $.data($cell);
const _colIndex = this.datamanager.getColumnIndexById('_rowIndex');
const colHeaderSelector = `.data-table-header .data-table-col[data-col-index="${colIndex}"]`;
const rowHeaderSelector = `.data-table-col[data-row-index="${rowIndex}"][data-col-index="${_colIndex}"]`;
@ -226,7 +241,10 @@ export default class CellManager {
selectAreaOnClusterChanged() {
if (!(this.$focusedCell && this.$selectionCursor)) return;
const { colIndex, rowIndex } = $.data(this.$selectionCursor);
const {
colIndex,
rowIndex
} = $.data(this.$selectionCursor);
const $cell = this.getCell$(colIndex, rowIndex);
if (!$cell || $cell === this.$selectionCursor) return;
@ -241,14 +259,19 @@ export default class CellManager {
focusCellOnClusterChanged() {
if (!this.$focusedCell) return;
const { colIndex, rowIndex } = $.data(this.$focusedCell);
const {
colIndex,
rowIndex
} = $.data(this.$focusedCell);
const $cell = this.getCell$(colIndex, rowIndex);
if (!$cell) return;
// this function is called after selectAreaOnClusterChanged,
// focusCell calls clearSelection which resets the area selection
// so a flag to skip it
this.focusCell($cell, { skipClearSelection: 1 });
this.focusCell($cell, {
skipClearSelection: 1
});
}
selectArea($selectionCursor) {
@ -338,7 +361,10 @@ export default class CellManager {
activateEditing($cell) {
this.focusCell($cell);
const { rowIndex, colIndex } = $.data($cell);
const {
rowIndex,
colIndex
} = $.data($cell);
const col = this.columnmanager.getColumn(colIndex);
if (col && (col.editable === false || col.focusable === false)) {
@ -351,7 +377,10 @@ export default class CellManager {
}
if (this.$editingCell) {
const { _rowIndex, _colIndex } = $.data(this.$editingCell);
const {
_rowIndex,
_colIndex
} = $.data(this.$editingCell);
if (rowIndex === _rowIndex && colIndex === _colIndex) {
// editing the same cell
@ -412,7 +441,10 @@ export default class CellManager {
submitEditing() {
if (!this.$editingCell) return;
const $cell = this.$editingCell;
const { rowIndex, colIndex } = $.data($cell);
const {
rowIndex,
colIndex
} = $.data($cell);
const col = this.datamanager.getColumn(colIndex);
if ($cell) {
@ -443,7 +475,10 @@ export default class CellManager {
copyCellContents($cell1, $cell2) {
if (!$cell2 && $cell1) {
// copy only focusedCell
const { colIndex, rowIndex } = $.data($cell1);
const {
colIndex,
rowIndex
} = $.data($cell1);
const cell = this.getCell(colIndex, rowIndex);
copyTextToClipboard(cell.content);
return;
@ -504,14 +539,18 @@ export default class CellManager {
}
getAboveCell$($cell) {
const { colIndex } = $.data($cell);
const {
colIndex
} = $.data($cell);
const $aboveRow = $cell.parentElement.previousElementSibling;
return $(`[data-col-index="${colIndex}"]`, $aboveRow);
}
getBelowCell$($cell) {
const { colIndex } = $.data($cell);
const {
colIndex
} = $.data($cell);
const $belowRow = $cell.parentElement.nextElementSibling;
return $(`[data-col-index="${colIndex}"]`, $belowRow);
@ -556,7 +595,9 @@ export default class CellManager {
scrollToCell($cell) {
if ($.inViewport($cell, this.bodyScrollable)) return false;
const { rowIndex } = $.data($cell);
const {
rowIndex
} = $.data($cell);
this.rowmanager.scrollToRow(rowIndex);
return false;
}
@ -566,7 +607,12 @@ export default class CellManager {
}
getCellHTML(cell) {
const { rowIndex, colIndex, isHeader, isFilter } = cell;
const {
rowIndex,
colIndex,
isHeader,
isFilter
} = cell;
const dataAttr = makeDataAttributeString({
rowIndex,
colIndex,
@ -582,7 +628,9 @@ export default class CellManager {
}
getCellContent(cell) {
const { isHeader } = cell;
const {
isHeader
} = cell;
const editable = !isHeader && cell.editable !== false;
const editCellHTML = editable ? this.getEditCellHTML() : '';

73
src/columnmanager.js
View File

@ -1,6 +1,10 @@
import $ from './dom';
import Sortable from 'sortablejs';
import { getDefault, linkProperties, debounce } from './utils';
import {
getDefault,
linkProperties,
debounce
} from './utils';
export default class ColumnManager {
constructor(instance) {
@ -32,9 +36,13 @@ export default class ColumnManager {
if (!$('.data-table-col', this.header)) {
// insert html
let html = this.rowmanager.getRowHTML(columns, { isHeader: 1 });
let html = this.rowmanager.getRowHTML(columns, {
isHeader: 1
});
if (this.options.enableInlineFilters) {
html += this.rowmanager.getRowHTML(columns, { isFilter: 1 });
html += this.rowmanager.getRowHTML(columns, {
isFilter: 1
});
}
$('thead', this.header).innerHTML = html;
@ -52,7 +60,9 @@ export default class ColumnManager {
const $cols = $.each('.data-table-col', this.header);
if (columns.length < $cols.length) {
// deleted column
$('thead', this.header).innerHTML = this.rowmanager.getRowHTML(columns, { isHeader: 1 });
$('thead', this.header).innerHTML = this.rowmanager.getRowHTML(columns, {
isHeader: 1
});
return;
}
@ -105,8 +115,12 @@ export default class ColumnManager {
$.on(this.header, 'click', '.data-table-dropdown-list > div', (e, $item) => {
const $col = $.closest('.data-table-col', $item);
const { index } = $.data($item);
const { colIndex } = $.data($col);
const {
index
} = $.data($item);
const {
colIndex
} = $.data($col);
let callback = dropdownItems[index].action;
callback && callback.call(this.instance, this.getColumn(colIndex));
@ -126,7 +140,9 @@ export default class ColumnManager {
document.body.classList.add('data-table-resize');
const $cell = $handle.parentNode.parentNode;
$resizingCell = $cell;
const { colIndex } = $.data($resizingCell);
const {
colIndex
} = $.data($resizingCell);
const col = this.getColumn(colIndex);
if (col && col.resizable === false) {
@ -143,7 +159,9 @@ export default class ColumnManager {
if (!$resizingCell) return;
isDragging = false;
const { colIndex } = $.data($resizingCell);
const {
colIndex
} = $.data($resizingCell);
this.setColumnWidth(colIndex);
this.style.setBodyStyle();
$resizingCell = null;
@ -152,13 +170,17 @@ export default class ColumnManager {
$.on(document.body, 'mousemove', (e) => {
if (!isDragging) return;
const finalWidth = startWidth + (e.pageX - startX);
const { colIndex } = $.data($resizingCell);
const {
colIndex
} = $.data($resizingCell);
if (this.getColumnMinWidth(colIndex) > finalWidth) {
// don't resize past minWidth
return;
}
this.datamanager.updateColumn(colIndex, { width: finalWidth });
this.datamanager.updateColumn(colIndex, {
width: finalWidth
});
this.setColumnHeaderWidth(colIndex);
});
}
@ -178,9 +200,14 @@ export default class ColumnManager {
this.sortable = Sortable.create($parent, {
onEnd: (e) => {
const { oldIndex, newIndex } = e;
const {
oldIndex,
newIndex
} = e;
const $draggedCell = e.item;
const { colIndex } = $.data($draggedCell);
const {
colIndex
} = $.data($draggedCell);
if (+colIndex === newIndex) return;
this.switchColumn(oldIndex, newIndex);
@ -198,7 +225,10 @@ export default class ColumnManager {
$.on(this.header, 'click', '.data-table-col .column-title', (e, span) => {
const $cell = span.closest('.data-table-col');
let { colIndex, sortOrder } = $.data($cell);
let {
colIndex,
sortOrder
} = $.data($cell);
sortOrder = getDefault(sortOrder, 'none');
const col = this.getColumn(colIndex);
@ -309,11 +339,16 @@ export default class ColumnManager {
if (!this.options.enableInlineFilters) return;
const handler = e => {
const $filterCell = $.closest('.data-table-col', e.target);
const { colIndex } = $.data($filterCell);
const {
colIndex
} = $.data($filterCell);
const keyword = e.target.value;
this.datamanager.filterRows(keyword, colIndex)
.then(({ rowsToHide, rowsToShow }) => {
.then(({
rowsToHide,
rowsToShow
}) => {
rowsToHide.map(rowIndex => {
const $tr = $(`.data-table-row[data-row-index="${rowIndex}"]`, this.bodyScrollable);
$tr.classList.add('hide');
@ -343,7 +378,9 @@ export default class ColumnManager {
colIndex = +colIndex;
this._columnWidthMap = this._columnWidthMap || [];
const { width } = this.getColumn(colIndex);
const {
width
} = this.getColumn(colIndex);
let index = this._columnWidthMap[colIndex];
const selector = `[data-col-index="${colIndex}"] .content, [data-col-index="${colIndex}"] .edit-cell`;
@ -359,7 +396,9 @@ export default class ColumnManager {
colIndex = +colIndex;
this.$columnMap = this.$columnMap || [];
const selector = `.data-table-header [data-col-index="${colIndex}"] .content`;
const { width } = this.getColumn(colIndex);
const {
width
} = this.getColumn(colIndex);
let $column = this.$columnMap[colIndex];
if (!$column) {

52
src/datamanager.js
View File

@ -1,4 +1,7 @@
import { isNumeric, promisify } from './utils';
import {
isNumeric,
promisify
} from './utils';
export default class DataManager {
constructor(options) {
@ -72,16 +75,6 @@ export default class DataManager {
}
}
prepareRow(row, i) {
const baseRowCell = {
rowIndex: i
};
return row
.map((cell, i) => this.prepareCell(cell, i))
.map(cell => Object.assign({}, baseRowCell, cell));
}
prepareHeader() {
let columns = this.columns.concat(this.options.columns);
const baseCell = {
@ -165,7 +158,7 @@ export default class DataManager {
}
} else {
// row is a dict
// row is an object
for (let col of this.columns) {
if (col.id === '_checkbox') {
row.push(this.getCheckboxHTML());
@ -177,8 +170,24 @@ export default class DataManager {
}
}
return this.prepareRow(row, index);
return this.prepareRow(row, {
rowIndex: index
});
});
}
prepareRow(row, props) {
const baseRowCell = {
rowIndex: props.rowIndex
};
row = row
.map((cell, i) => this.prepareCell(cell, i))
.map(cell => Object.assign({}, baseRowCell, cell));
// monkey patched in array object
row.meta = props;
return row;
}
validateColumns() {
@ -296,8 +305,12 @@ export default class DataManager {
// update rows
this.rows = this.rows.map(row => {
const newCell1 = Object.assign({}, row[index1], { colIndex: index2 });
const newCell2 = Object.assign({}, row[index2], { colIndex: index1 });
const newCell1 = Object.assign({}, row[index1], {
colIndex: index2
});
const newCell2 = Object.assign({}, row[index2], {
colIndex: index1
});
let newRow = row.map(cell => {
// make object copy
@ -314,7 +327,9 @@ export default class DataManager {
removeColumn(index) {
index = +index;
const filter = cell => cell.colIndex !== index;
const map = (cell, i) => Object.assign({}, cell, { colIndex: i });
const map = (cell, i) => Object.assign({}, cell, {
colIndex: i
});
// update columns
this.columns = this.columns
.filter(filter)
@ -403,7 +418,10 @@ export default class DataManager {
}
});
return {rowsToHide, rowsToShow};
return {
rowsToHide,
rowsToShow
};
}
getRowCount() {

4
src/datatable.js
View File

@ -27,9 +27,7 @@ class DataTable {
DEFAULT_OPTIONS.headerDropdown
.concat(options.headerDropdown || []);
// custom user events
this.events = Object.assign(
{}, DEFAULT_OPTIONS.events, options.events || {}
);
this.events = Object.assign({}, DEFAULT_OPTIONS.events, options.events || {});
this.fireEvent = this.fireEvent.bind(this);
this.prepare();

15
src/dom.js
View File

@ -1,4 +1,3 @@
export default function $(expr, con) {
return typeof expr === 'string' ?
(con || document).querySelector(expr) :
@ -159,8 +158,18 @@ $.closest = (selector, element) => {
};
$.inViewport = (el, parentEl) => {
const { top, left, bottom, right } = el.getBoundingClientRect();
const { top: pTop, left: pLeft, bottom: pBottom, right: pRight } = parentEl.getBoundingClientRect();
const {
top,
left,
bottom,
right
} = el.getBoundingClientRect();
const {
top: pTop,
left: pLeft,
bottom: pBottom,
right: pRight
} = parentEl.getBoundingClientRect();
return top >= pTop && left >= pLeft && bottom <= pBottom && right <= pRight;
};

14
src/performance.js
View File

@ -1,14 +0,0 @@
class Performance {
start() {
this._start = window.performance.now();
}
end() {
this._end = window.performance.now();
console.log(this._end - this._start);
}
}
let perf = new Performance();
export default perf;

28
src/rowmanager.js
View File

@ -1,5 +1,8 @@
import $ from './dom';
import { makeDataAttributeString, promisify } from './utils';
import {
makeDataAttributeString,
promisify
} from './utils';
export default class RowManager {
constructor(instance) {
@ -32,7 +35,10 @@ export default class RowManager {
$.on(this.wrapper, 'click', '.data-table-col[data-col-index="0"] [type="checkbox"]', (e, $checkbox) => {
const $cell = $checkbox.closest('.data-table-col');
const { rowIndex, isHeader } = $.data($cell);
const {
rowIndex,
isHeader
} = $.data($cell);
const checked = $checkbox.checked;
if (isHeader) {
@ -80,11 +86,12 @@ export default class RowManager {
checkRow(rowIndex, toggle) {
const value = toggle ? 1 : 0;
const selector = rowIndex =>
`.data-table-col[data-row-index="${rowIndex}"][data-col-index="0"] [type="checkbox"]`;
// update internal map
this.checkMap[rowIndex] = value;
// set checkbox value explicitly
$.each(`.data-table-col[data-row-index="${rowIndex}"][data-col-index="0"] [type="checkbox"]`, this.bodyScrollable)
$.each(selector(rowIndex), this.bodyScrollable)
.map(input => {
input.checked = toggle;
});
@ -169,8 +176,13 @@ export default class RowManager {
const $row = this.getRow$(rowIndex);
if ($.inViewport($row, this.bodyScrollable)) return;
const { height } = $row.getBoundingClientRect();
const { top, bottom } = this.bodyScrollable.getBoundingClientRect();
const {
height
} = $row.getBoundingClientRect();
const {
top,
bottom
} = this.bodyScrollable.getBoundingClientRect();
const rowsInView = Math.floor((bottom - top) / height);
let offset = 0;
@ -189,7 +201,9 @@ export default class RowManager {
if (props.isFilter) {
row = row.map(cell => (Object.assign(cell, {
content: this.getFilterInput({ colIndex: cell.colIndex }),
content: this.getFilterInput({
colIndex: cell.colIndex
}),
isFilter: 1,
isHeader: undefined,
editable: false

1
src/style.css
View File

@ -1,3 +1,4 @@
/* This file is processed by postcss */
/* variables */
:root {

9
src/style.js
View File

@ -39,7 +39,7 @@ export default class Style {
this.styleEl.remove();
}
setStyle(rule, styleMap, index = -1) {
setStyle(selector, styleMap, index = -1) {
const styles = Object.keys(styleMap)
.map(prop => {
if (!prop.includes('-')) {
@ -48,7 +48,12 @@ export default class Style {
return `${prop}:${styleMap[prop]};`;
})
.join('');
let ruleString = `.${this.scopeClass} ${rule} { ${styles} }`;
let prefixedSelector = selector
.split(',')
.map(r => `.${this.scopeClass} ${r}`)
.join(',');
let ruleString = `${prefixedSelector} { ${styles} }`;
let _index = this.styleSheet.cssRules.length;
if (index !== -1) {