jingrow/datatable
1
0
Fork 0
Code Pull Requests Activity

Show sort indicator

Browse Source
This commit is contained in:
Faris Ansari 2017-11-28 18:14:43 +05:30
parent ba0e339d2c
commit 6751dbc070
9 changed files with 60 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored Normal file
View File

Binary file not shown.

11
index.html
View File

File diff suppressed because one or more lines are too long

32
lib/frappe-datatable.js
View File

@ -1249,16 +1249,19 @@ function getCellContent(column) {
var isHeader = column.isHeader; var isHeader = column.isHeader;
var editable = !isHeader && column.editable; var editable = !isHeader && column.editable !== false;
var editCellHTML = editable ? getEditCellHTML() : ''; var editCellHTML = editable ? getEditCellHTML() : '';
var sortable = isHeader && column.sortable !== false;
var sortIndicator = sortable ? '<span class="sort-indicator"></span>' : '';
var resizable = isHeader && column.resizable !== false; var resizable = isHeader && column.resizable !== false;
var resizeColumn = resizable ? '<span class="column-resizer"></span>' : ''; var resizeColumn = resizable ? '<span class="column-resizer"></span>' : '';
var hasDropdown = isHeader && column.dropdown !== false; var hasDropdown = isHeader && column.dropdown !== false;
var dropdown = hasDropdown ? '<div class="data-table-dropdown">' + (0, _columnmanager.getDropdownHTML)() + '</div>' : ''; var dropdown = hasDropdown ? '<div class="data-table-dropdown">' + (0, _columnmanager.getDropdownHTML)() + '</div>' : '';
return '\n <div class="content ellipsis">\n ' + (column.format ? column.format(column.content) : column.content) + '\n ' + resizeColumn + '\n ' + dropdown + '\n </div>\n ' + editCellHTML + '\n '; return '\n <div class="content ellipsis">\n ' + (column.format ? column.format(column.content) : column.content) + '\n ' + sortIndicator + '\n ' + resizeColumn + '\n ' + dropdown + '\n </div>\n ' + editCellHTML + '\n ';
} }
function getEditCellHTML() { function getEditCellHTML() {
@ -1584,6 +1587,11 @@ var DEFAULT_OPTIONS = {
this.removeColumn(column.colIndex); this.removeColumn(column.colIndex);
} }
}], }],
sortIndicator: {
asc: '↑',
desc: '↓',
none: ''
},
freezeMessage: 'Loading...', freezeMessage: 'Loading...',
editing: null, editing: null,
addSerialNoColumn: true, addSerialNoColumn: true,
@ -1893,7 +1901,7 @@ var DataManager = function () {
this.options = options; this.options = options;
this.currentSort = { this.currentSort = {
sortBy: -1, // colIndex colIndex: -1,
sortOrder: 'none' // asc, desc, none sortOrder: 'none' // asc, desc, none
}; };
this.sortRows = (0, _utils.promisify)(this.sortRows, this); this.sortRows = (0, _utils.promisify)(this.sortRows, this);
@ -2375,20 +2383,27 @@ var ColumnManager = function () {
// insert html // insert html
(0, _dom2.default)('thead', this.header).innerHTML = (0, _rowmanager.getRowHTML)(columns, { isHeader: 1 }); (0, _dom2.default)('thead', this.header).innerHTML = (0, _rowmanager.getRowHTML)(columns, { isHeader: 1 });
} else { } else {
// refresh dom state
var $cols = _dom2.default.each('.data-table-col', this.header); var $cols = _dom2.default.each('.data-table-col', this.header);
if (columns.length < $cols.length) { if (columns.length < $cols.length) {
// deleted column // deleted column
(0, _dom2.default)('thead', this.header).innerHTML = (0, _rowmanager.getRowHTML)(columns, { isHeader: 1 }); (0, _dom2.default)('thead', this.header).innerHTML = (0, _rowmanager.getRowHTML)(columns, { isHeader: 1 });
return; return;
} }
// column sorted or order changed
// update colIndex of each header cell // update colIndex of each header cell
$cols.map(function ($col, i) { $cols.map(function ($col, i) {
_dom2.default.data($col, { _dom2.default.data($col, {
colIndex: columns[i].colIndex colIndex: columns[i].colIndex
}); });
}); });
// show sort indicator
var sortColIndex = this.datamanager.currentSort.colIndex;
if (sortColIndex !== -1) {
var order = this.datamanager.currentSort.sortOrder;
(0, _dom2.default)('.sort-indicator', $cols[sortColIndex]).innerHTML = this.options.sortIndicator[order];
}
} }
// reset columnMap // reset columnMap
this.$columnMap = []; this.$columnMap = [];
@ -2407,7 +2422,7 @@ var ColumnManager = function () {
var $activeDropdown = void 0; var $activeDropdown = void 0;
_dom2.default.on(this.header, 'click', '.data-table-dropdown-toggle', function (e, $button) { _dom2.default.on(this.header, 'click', '.data-table-dropdown-toggle', function (e, $button) {
var $dropdown = $button.parentNode; var $dropdown = _dom2.default.closest('.data-table-dropdown', $button);
if (!$dropdown.classList.contains('is-active')) { if (!$dropdown.classList.contains('is-active')) {
deactivateDropdown(); deactivateDropdown();
@ -2565,7 +2580,7 @@ var ColumnManager = function () {
}); });
}, },
preventOnFilter: false, preventOnFilter: false,
filter: '.column-resizer, .sort-indicator', filter: '.column-resizer, .data-table-dropdown',
animation: 150 animation: 150
}); });
}; };
@ -2631,6 +2646,7 @@ var ColumnManager = function () {
this.instance.freeze(); this.instance.freeze();
this.sortRows(colIndex, nextSortOrder).then(function () { this.sortRows(colIndex, nextSortOrder).then(function () {
_this5.refreshHeader();
return _this5.rowmanager.refreshRows(); return _this5.rowmanager.refreshRows();
}).then(function () { }).then(function () {
return _this5.instance.unfreeze(); return _this5.instance.unfreeze();
@ -3012,7 +3028,7 @@ exports = module.exports = __webpack_require__(19)(undefined);
// module // module
exports.push([module.i, "/* variables */\n.data-table {\n --border-color: #d1d8dd;\n --primary-color: #5292f7;\n --light-bg: #f5f7fa;\n --light-red: #FD8B8B; }\n\n/* resets */\n*, *::after, *::before {\n box-sizing: border-box; }\n\nbutton, input {\n overflow: visible;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n margin: 0; }\n\n/* styling */\n.data-table * {\n outline: none; }\n\n.data-table {\n width: 100%;\n position: relative;\n overflow: auto; }\n .data-table table {\n border-collapse: collapse; }\n .data-table table td {\n padding: 0;\n border: 1px solid var(--border-color); }\n .data-table thead td {\n border-bottom-width: 2px; }\n .data-table .freeze-container {\n display: flex;\n justify-content: center;\n align-content: center;\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n background-color: var(--light-bg);\n opacity: 0.5;\n font-size: 2em; }\n .data-table .freeze-container span {\n position: absolute;\n top: 50%;\n transform: translateY(-50%); }\n .data-table .trash-container {\n position: absolute;\n bottom: 0;\n left: 30%;\n right: 30%;\n height: 70px;\n background: palevioletred;\n opacity: 0.5; }\n\n.body-scrollable {\n max-height: 500px;\n overflow: auto;\n border-bottom: 1px solid var(--border-color); }\n .body-scrollable.row-highlight-all .data-table-row:not(.row-unhighlight) {\n background-color: var(--light-bg); }\n\n.data-table-header {\n position: absolute;\n top: 0;\n left: 0;\n background-color: white;\n font-weight: bold; }\n .data-table-header .content span:not(.column-resizer) {\n cursor: pointer; }\n .data-table-header .sort-indicator {\n position: absolute;\n right: 8px;\n top: 9px; }\n .data-table-header .column-resizer {\n display: none;\n position: absolute;\n right: 0;\n top: 0;\n width: 4px;\n height: 100%;\n background-color: var(--primary-color);\n cursor: col-resize; }\n .data-table-header .data-table-dropdown {\n position: absolute;\n right: 10px;\n display: inline-flex;\n vertical-align: top;\n text-align: left; }\n .data-table-header .data-table-dropdown.is-active .data-table-dropdown-list {\n display: block; }\n .data-table-header .data-table-dropdown.is-active .data-table-dropdown-toggle {\n display: block; }\n .data-table-header .data-table-dropdown-toggle {\n display: none;\n background-color: transparent;\n border: none; }\n .data-table-header .data-table-dropdown-list {\n display: none;\n font-weight: normal;\n position: absolute;\n min-width: 8rem;\n top: 100%;\n right: 0;\n z-index: 1;\n background-color: white;\n border-radius: 3px;\n box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);\n padding-bottom: 0.5rem;\n padding-top: 0.5rem; }\n .data-table-header .data-table-dropdown-list > div {\n padding: 5px 10px; }\n .data-table-header .data-table-dropdown-list > div:hover {\n background-color: var(--light-bg); }\n .data-table-header .data-table-col.remove-column {\n background-color: var(--light-red);\n transition: 300ms background-color ease-in-out; }\n .data-table-header .data-table-col.sortable-chosen {\n background-color: var(--light-bg); }\n\n.data-table-col {\n position: relative; }\n .data-table-col .content {\n padding: 8px;\n border: 2px solid transparent; }\n .data-table-col .content.ellipsis {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden; }\n .data-table-col .edit-cell {\n display: none;\n padding: 8px;\n background: #fff;\n z-index: 1;\n height: 100%; }\n .data-table-col .edit-cell input {\n outline: none;\n width: 100%;\n border: none;\n height: 1em; }\n .data-table-col.selected .content {\n border: 2px solid var(--primary-color); }\n .data-table-col.editing .content {\n display: none; }\n .data-table-col.editing .edit-cell {\n border: 2px solid var(--primary-color);\n display: block; }\n .data-table-col.highlight {\n background-color: var(--light-bg); }\n .data-table-col:hover .column-resizer {\n display: inline-block; }\n .data-table-col:hover .data-table-dropdown-toggle {\n display: block; }\n\n.data-table-row.row-highlight {\n background-color: var(--light-bg); }\n\n.noselect {\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -khtml-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none; }\n", ""]); exports.push([module.i, "/* variables */\n.data-table {\n --border-color: #d1d8dd;\n --primary-color: #5292f7;\n --light-bg: #f5f7fa;\n --light-red: #FD8B8B; }\n\n/* resets */\n*, *::after, *::before {\n box-sizing: border-box; }\n\nbutton, input {\n overflow: visible;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n margin: 0; }\n\n/* styling */\n.data-table * {\n outline: none; }\n\n.data-table {\n width: 100%;\n position: relative;\n overflow: auto; }\n .data-table table {\n border-collapse: collapse; }\n .data-table table td {\n padding: 0;\n border: 1px solid var(--border-color); }\n .data-table thead td {\n border-bottom-width: 2px; }\n .data-table .freeze-container {\n display: flex;\n justify-content: center;\n align-content: center;\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n background-color: var(--light-bg);\n opacity: 0.5;\n font-size: 2em; }\n .data-table .freeze-container span {\n position: absolute;\n top: 50%;\n transform: translateY(-50%); }\n .data-table .trash-container {\n position: absolute;\n bottom: 0;\n left: 30%;\n right: 30%;\n height: 70px;\n background: palevioletred;\n opacity: 0.5; }\n\n.body-scrollable {\n max-height: 500px;\n overflow: auto;\n border-bottom: 1px solid var(--border-color); }\n .body-scrollable.row-highlight-all .data-table-row:not(.row-unhighlight) {\n background-color: var(--light-bg); }\n\n.data-table-header {\n position: absolute;\n top: 0;\n left: 0;\n background-color: white;\n font-weight: bold; }\n .data-table-header .content span:not(.column-resizer) {\n cursor: pointer; }\n .data-table-header .column-resizer {\n display: none;\n position: absolute;\n right: 0;\n top: 0;\n width: 4px;\n height: 100%;\n background-color: var(--primary-color);\n cursor: col-resize; }\n .data-table-header .data-table-dropdown {\n position: absolute;\n right: 10px;\n display: inline-flex;\n vertical-align: top;\n text-align: left; }\n .data-table-header .data-table-dropdown.is-active .data-table-dropdown-list {\n display: block; }\n .data-table-header .data-table-dropdown.is-active .data-table-dropdown-toggle {\n display: block; }\n .data-table-header .data-table-dropdown-toggle {\n display: none;\n background-color: transparent;\n border: none; }\n .data-table-header .data-table-dropdown-list {\n display: none;\n font-weight: normal;\n position: absolute;\n min-width: 8rem;\n top: 100%;\n right: 0;\n z-index: 1;\n background-color: white;\n border-radius: 3px;\n box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);\n padding-bottom: 0.5rem;\n padding-top: 0.5rem; }\n .data-table-header .data-table-dropdown-list > div {\n padding: 5px 10px; }\n .data-table-header .data-table-dropdown-list > div:hover {\n background-color: var(--light-bg); }\n .data-table-header .data-table-col.remove-column {\n background-color: var(--light-red);\n transition: 300ms background-color ease-in-out; }\n .data-table-header .data-table-col.sortable-chosen {\n background-color: var(--light-bg); }\n\n.data-table-col {\n position: relative; }\n .data-table-col .content {\n padding: 8px;\n border: 2px solid transparent; }\n .data-table-col .content.ellipsis {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden; }\n .data-table-col .edit-cell {\n display: none;\n padding: 8px;\n background: #fff;\n z-index: 1;\n height: 100%; }\n .data-table-col .edit-cell input {\n outline: none;\n width: 100%;\n border: none;\n height: 1em; }\n .data-table-col.selected .content {\n border: 2px solid var(--primary-color); }\n .data-table-col.editing .content {\n display: none; }\n .data-table-col.editing .edit-cell {\n border: 2px solid var(--primary-color);\n display: block; }\n .data-table-col.highlight {\n background-color: var(--light-bg); }\n .data-table-col:hover .column-resizer {\n display: inline-block; }\n .data-table-col:hover .data-table-dropdown-toggle {\n display: block; }\n\n.data-table-row.row-highlight {\n background-color: var(--light-bg); }\n\n.noselect {\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -khtml-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none; }\n", ""]);
// exports // exports

2
lib/frappe-datatable.js.map
View File

File diff suppressed because one or more lines are too long

6
src/cellmanager.js
View File

@ -591,9 +591,12 @@ export function getCellHTML(column) {
export function getCellContent(column) { export function getCellContent(column) {
const { isHeader } = column; const { isHeader } = column;
const editable = !isHeader && column.editable; const editable = !isHeader && column.editable !== false;
const editCellHTML = editable ? getEditCellHTML() : ''; const editCellHTML = editable ? getEditCellHTML() : '';
const sortable = isHeader && column.sortable !== false;
const sortIndicator = sortable ? '<span class="sort-indicator"></span>' : '';
const resizable = isHeader && column.resizable !== false; const resizable = isHeader && column.resizable !== false;
const resizeColumn = resizable ? '<span class="column-resizer"></span>' : ''; const resizeColumn = resizable ? '<span class="column-resizer"></span>' : '';
@ -603,6 +606,7 @@ export function getCellContent(column) {
return ` return `
<div class="content ellipsis"> <div class="content ellipsis">
${column.format ? column.format(column.content) : column.content} ${column.format ? column.format(column.content) : column.content}
${sortIndicator}
${resizeColumn} ${resizeColumn}
${dropdown} ${dropdown}
</div> </div>

20
src/columnmanager.js
View File

@ -29,20 +29,27 @@ export default class ColumnManager {
// insert html // insert html
$('thead', this.header).innerHTML = getRowHTML(columns, { isHeader: 1 }); $('thead', this.header).innerHTML = getRowHTML(columns, { isHeader: 1 });
} else { } else {
// refresh dom state
const $cols = $.each('.data-table-col', this.header); const $cols = $.each('.data-table-col', this.header);
if (columns.length < $cols.length) { if (columns.length < $cols.length) {
// deleted column // deleted column
$('thead', this.header).innerHTML = getRowHTML(columns, { isHeader: 1 }); $('thead', this.header).innerHTML = getRowHTML(columns, { isHeader: 1 });
return; return;
} }
// column sorted or order changed
// update colIndex of each header cell // update colIndex of each header cell
$cols.map(($col, i) => { $cols.map(($col, i) => {
$.data($col, { $.data($col, {
colIndex: columns[i].colIndex colIndex: columns[i].colIndex
}); });
}); });
// show sort indicator
const sortColIndex = this.datamanager.currentSort.colIndex;
if (sortColIndex !== -1) {
const order = this.datamanager.currentSort.sortOrder;
$('.sort-indicator', $cols[sortColIndex]).innerHTML = this.options.sortIndicator[order];
}
} }
// reset columnMap // reset columnMap
this.$columnMap = []; this.$columnMap = [];
@ -57,7 +64,7 @@ export default class ColumnManager {
bindDropdown() { bindDropdown() {
let $activeDropdown; let $activeDropdown;
$.on(this.header, 'click', '.data-table-dropdown-toggle', (e, $button) => { $.on(this.header, 'click', '.data-table-dropdown-toggle', (e, $button) => {
const $dropdown = $button.parentNode; const $dropdown = $.closest('.data-table-dropdown', $button);
if (!$dropdown.classList.contains('is-active')) { if (!$dropdown.classList.contains('is-active')) {
deactivateDropdown(); deactivateDropdown();
@ -192,7 +199,7 @@ export default class ColumnManager {
.then(() => this.instance.unfreeze()); .then(() => this.instance.unfreeze());
}, },
preventOnFilter: false, preventOnFilter: false,
filter: '.column-resizer, .sort-indicator', filter: '.column-resizer, .data-table-dropdown',
animation: 150 animation: 150
}); });
}; };
@ -248,7 +255,10 @@ export default class ColumnManager {
sortColumn(colIndex, nextSortOrder) { sortColumn(colIndex, nextSortOrder) {
this.instance.freeze(); this.instance.freeze();
this.sortRows(colIndex, nextSortOrder) this.sortRows(colIndex, nextSortOrder)
.then(() => this.rowmanager.refreshRows()) .then(() => {
this.refreshHeader();
return this.rowmanager.refreshRows();
})
.then(() => this.instance.unfreeze()); .then(() => this.instance.unfreeze());
} }

2
src/datamanager.js
View File

@ -4,7 +4,7 @@ export default class DataManager {
constructor(options) { constructor(options) {
this.options = options; this.options = options;
this.currentSort = { this.currentSort = {
sortBy: -1, // colIndex colIndex: -1,
sortOrder: 'none' // asc, desc, none sortOrder: 'none' // asc, desc, none
}; };
this.sortRows = promisify(this.sortRows, this); this.sortRows = promisify(this.sortRows, this);

5
src/datatable.js
View File

@ -43,6 +43,11 @@ const DEFAULT_OPTIONS = {
} }
} }
], ],
sortIndicator: {
asc: '↑',
desc: '↓',
none: ''
},
freezeMessage: 'Loading...', freezeMessage: 'Loading...',
editing: null, editing: null,
addSerialNoColumn: true, addSerialNoColumn: true,

6
src/style.scss
View File

@ -96,12 +96,6 @@ button, input {
cursor: pointer; cursor: pointer;
} }
.sort-indicator {
position: absolute;
right: 8px;
top: 9px;
}
.column-resizer { .column-resizer {
display: none; display: none;
position: absolute; position: absolute;