Create docs folder, add index.html
This commit is contained in:
Faris Ansari
parent
e1c2ef7e6b
commit
d8fb48ba91
@ -55,7 +55,7 @@
|
|||||||
"generator-star-spacing": [2, "both"],
|
"generator-star-spacing": [2, "both"],
|
||||||
"guard-for-in": 0,
|
"guard-for-in": 0,
|
||||||
"handle-callback-err": [2, "^(err|error|anySpecificError)$" ],
|
"handle-callback-err": [2, "^(err|error|anySpecificError)$" ],
|
||||||
"indent": [2, 2, { "SwitchCase": 1 }],
|
"indent": [2, 4, { "SwitchCase": 1 }],
|
||||||
"key-spacing": [2, { "beforeColon": false, "afterColon": true }],
|
"key-spacing": [2, { "beforeColon": false, "afterColon": true }],
|
||||||
"keyword-spacing": [2, {"before": true, "after": true}],
|
"keyword-spacing": [2, {"before": true, "after": true}],
|
||||||
"linebreak-style": 0,
|
"linebreak-style": 0,
|
||||||
|
|||||||
254
dist/frappe-datatable.cjs.css
vendored
Normal file
254
dist/frappe-datatable.cjs.css
vendored
Normal file
@ -0,0 +1,254 @@
|
|||||||
|
/* variables */
|
||||||
|
|
||||||
|
.data-table {
|
||||||
|
|
||||||
|
/* styling */
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* resets */
|
||||||
|
|
||||||
|
.data-table *, .data-table *::after, .data-table *::before {
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table button, .data-table input {
|
||||||
|
overflow: visible;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
line-height: inherit;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table .input-style {
|
||||||
|
outline: none;
|
||||||
|
width: 100%;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table *, .data-table *:focus {
|
||||||
|
outline: none;
|
||||||
|
border-radius: 0px;
|
||||||
|
-webkit-box-shadow: none;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table table td {
|
||||||
|
padding: 0;
|
||||||
|
border: 1px solid #d1d8dd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table thead td {
|
||||||
|
border-bottom-width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table .freeze-container {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-ms-flex-line-pack: center;
|
||||||
|
align-content: center;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
opacity: 0.5;
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table .freeze-container span {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
-webkit-transform: translateY(-50%);
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table .trash-container {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 30%;
|
||||||
|
right: 30%;
|
||||||
|
height: 70px;
|
||||||
|
background: palevioletred;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table .hide {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.body-scrollable {
|
||||||
|
max-height: 500px;
|
||||||
|
overflow: auto;
|
||||||
|
border-bottom: 1px solid #d1d8dd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.body-scrollable.row-highlight-all .data-table-row:not(.row-unhighlight) {
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table-header {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background-color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table-header .content span:not(.column-resizer) {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table-header .column-resizer {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 4px;
|
||||||
|
width: 0.25rem;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgb(82, 146, 247);
|
||||||
|
cursor: col-resize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table-header .data-table-dropdown {
|
||||||
|
position: absolute;
|
||||||
|
right: 10px;
|
||||||
|
display: -webkit-inline-box;
|
||||||
|
display: -ms-inline-flexbox;
|
||||||
|
display: inline-flex;
|
||||||
|
vertical-align: top;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table-header .data-table-dropdown.is-active .data-table-dropdown-list {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table-header .data-table-dropdown.is-active .data-table-dropdown-toggle {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table-header .data-table-dropdown-toggle {
|
||||||
|
display: none;
|
||||||
|
background-color: transparent;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table-header .data-table-dropdown-list {
|
||||||
|
display: none;
|
||||||
|
font-weight: normal;
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
min-width: 128px;
|
||||||
|
min-width: 8rem;
|
||||||
|
top: 100%;
|
||||||
|
right: 0;
|
||||||
|
z-index: 1;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 3px;
|
||||||
|
-webkit-box-shadow: 0 2px 3px rgba(10, 10, 10, .1), 0 0 0 1px rgba(10, 10, 10, .1);
|
||||||
|
box-shadow: 0 2px 3px rgba(10, 10, 10, .1), 0 0 0 1px rgba(10, 10, 10, .1);
|
||||||
|
padding-bottom: 8px;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
padding-top: 8px;
|
||||||
|
padding-top: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table-header .data-table-dropdown-list> div {
|
||||||
|
padding: 8px 16px;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table-header .data-table-dropdown-list> div:hover {
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table-header .data-table-col.remove-column {
|
||||||
|
background-color: #FD8B8B;
|
||||||
|
-webkit-transition: 300ms background-color ease-in-out;
|
||||||
|
transition: 300ms background-color ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table-header .data-table-col.sortable-chosen {
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table-col {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table-col .content {
|
||||||
|
padding: 8px;
|
||||||
|
padding: 0.5rem;
|
||||||
|
border: 2px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table-col .content.ellipsis {
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table-col .edit-cell {
|
||||||
|
display: none;
|
||||||
|
padding: 8px;
|
||||||
|
padding: 0.5rem;
|
||||||
|
background: #fff;
|
||||||
|
z-index: 1;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table-col.selected .content {
|
||||||
|
border: 2px solid rgb(82, 146, 247);
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table-col.editing .content {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table-col.editing .edit-cell {
|
||||||
|
border: 2px solid rgb(82, 146, 247);
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table-col.highlight {
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table-col:hover .column-resizer {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table-col:hover .data-table-dropdown-toggle {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table-row.row-highlight {
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.noselect {
|
||||||
|
-webkit-touch-callout: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.data-table-resize {
|
||||||
|
cursor: col-resize;
|
||||||
|
}
|
||||||
428
dist/frappe-datatable.cjs.js
vendored
428
dist/frappe-datatable.cjs.js
vendored
@ -211,12 +211,10 @@ var isObject_1 = isObject;
|
|||||||
|
|
||||||
var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
||||||
|
|
||||||
/** Detect free variable `global` from Node.js. */
|
|
||||||
var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
|
var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
|
||||||
|
|
||||||
var _freeGlobal = freeGlobal;
|
var _freeGlobal = freeGlobal;
|
||||||
|
|
||||||
/** Detect free variable `self`. */
|
|
||||||
var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
|
var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
|
||||||
|
|
||||||
/** Used as a reference to the global object. */
|
/** Used as a reference to the global object. */
|
||||||
@ -224,34 +222,16 @@ var root = _freeGlobal || freeSelf || Function('return this')();
|
|||||||
|
|
||||||
var _root = root;
|
var _root = root;
|
||||||
|
|
||||||
/**
|
|
||||||
* Gets the timestamp of the number of milliseconds that have elapsed since
|
|
||||||
* the Unix epoch (1 January 1970 00:00:00 UTC).
|
|
||||||
*
|
|
||||||
* @static
|
|
||||||
* @memberOf _
|
|
||||||
* @since 2.4.0
|
|
||||||
* @category Date
|
|
||||||
* @returns {number} Returns the timestamp.
|
|
||||||
* @example
|
|
||||||
*
|
|
||||||
* _.defer(function(stamp) {
|
|
||||||
* console.log(_.now() - stamp);
|
|
||||||
* }, _.now());
|
|
||||||
* // => Logs the number of milliseconds it took for the deferred invocation.
|
|
||||||
*/
|
|
||||||
var now = function() {
|
var now = function() {
|
||||||
return _root.Date.now();
|
return _root.Date.now();
|
||||||
};
|
};
|
||||||
|
|
||||||
var now_1 = now;
|
var now_1 = now;
|
||||||
|
|
||||||
/** Built-in value references. */
|
|
||||||
var Symbol = _root.Symbol;
|
var Symbol = _root.Symbol;
|
||||||
|
|
||||||
var _Symbol = Symbol;
|
var _Symbol = Symbol;
|
||||||
|
|
||||||
/** Used for built-in method references. */
|
|
||||||
var objectProto = Object.prototype;
|
var objectProto = Object.prototype;
|
||||||
|
|
||||||
/** Used to check objects for own properties. */
|
/** Used to check objects for own properties. */
|
||||||
@ -319,7 +299,6 @@ function objectToString(value) {
|
|||||||
|
|
||||||
var _objectToString = objectToString;
|
var _objectToString = objectToString;
|
||||||
|
|
||||||
/** `Object#toString` result references. */
|
|
||||||
var nullTag = '[object Null]';
|
var nullTag = '[object Null]';
|
||||||
var undefinedTag = '[object Undefined]';
|
var undefinedTag = '[object Undefined]';
|
||||||
|
|
||||||
@ -374,7 +353,6 @@ function isObjectLike(value) {
|
|||||||
|
|
||||||
var isObjectLike_1 = isObjectLike;
|
var isObjectLike_1 = isObjectLike;
|
||||||
|
|
||||||
/** `Object#toString` result references. */
|
|
||||||
var symbolTag = '[object Symbol]';
|
var symbolTag = '[object Symbol]';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -401,7 +379,6 @@ function isSymbol(value) {
|
|||||||
|
|
||||||
var isSymbol_1 = isSymbol;
|
var isSymbol_1 = isSymbol;
|
||||||
|
|
||||||
/** Used as references for various `Number` constants. */
|
|
||||||
var NAN = 0 / 0;
|
var NAN = 0 / 0;
|
||||||
|
|
||||||
/** Used to match leading and trailing whitespace. */
|
/** Used to match leading and trailing whitespace. */
|
||||||
@ -465,7 +442,6 @@ function toNumber(value) {
|
|||||||
|
|
||||||
var toNumber_1 = toNumber;
|
var toNumber_1 = toNumber;
|
||||||
|
|
||||||
/** Error message constants. */
|
|
||||||
var FUNC_ERROR_TEXT = 'Expected a function';
|
var FUNC_ERROR_TEXT = 'Expected a function';
|
||||||
|
|
||||||
/* Built-in method references for those with the same name as other `lodash` methods. */
|
/* Built-in method references for those with the same name as other `lodash` methods. */
|
||||||
@ -652,7 +628,6 @@ function debounce(func, wait, options) {
|
|||||||
|
|
||||||
var debounce_1 = debounce;
|
var debounce_1 = debounce;
|
||||||
|
|
||||||
/** Error message constants. */
|
|
||||||
var FUNC_ERROR_TEXT$1 = 'Expected a function';
|
var FUNC_ERROR_TEXT$1 = 'Expected a function';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -2676,232 +2651,233 @@ function getBodyHTML(rows) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
class Style {
|
class Style {
|
||||||
constructor(instance) {
|
constructor(instance) {
|
||||||
this.instance = instance;
|
this.instance = instance;
|
||||||
|
|
||||||
linkProperties(this, this.instance, [
|
linkProperties(this, this.instance, [
|
||||||
'options', 'datamanager', 'columnmanager',
|
'options', 'datamanager', 'columnmanager',
|
||||||
'header', 'bodyScrollable', 'getColumn'
|
'header', 'bodyScrollable', 'getColumn'
|
||||||
]);
|
]);
|
||||||
|
|
||||||
this.scopeClass = 'datatable-instance-' + instance.constructor.instances;
|
this.scopeClass = 'datatable-instance-' + instance.constructor.instances;
|
||||||
instance.datatableWrapper.classList.add(this.scopeClass);
|
instance.datatableWrapper.classList.add(this.scopeClass);
|
||||||
|
|
||||||
const styleEl = document.createElement('style');
|
const styleEl = document.createElement('style');
|
||||||
instance.wrapper.insertBefore(styleEl, instance.datatableWrapper);
|
instance.wrapper.insertBefore(styleEl, instance.datatableWrapper);
|
||||||
this.styleEl = styleEl;
|
this.styleEl = styleEl;
|
||||||
this.styleSheet = styleEl.sheet;
|
this.styleSheet = styleEl.sheet;
|
||||||
|
|
||||||
this.bindResizeWindow();
|
this.bindResizeWindow();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
bindResizeWindow() {
|
||||||
|
if (this.options.layout === 'fluid') {
|
||||||
|
$.on(window, 'resize', throttle$1(() => {
|
||||||
|
this.distributeRemainingWidth();
|
||||||
|
this.refreshColumnWidth();
|
||||||
|
this.setBodyStyle();
|
||||||
|
}, 300));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
destroy() {
|
||||||
|
this.styleEl.remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
setStyle(rule, styleMap, index = -1) {
|
||||||
|
const styles = Object.keys(styleMap)
|
||||||
|
.map(prop => {
|
||||||
|
if (!prop.includes('-')) {
|
||||||
|
prop = camelCaseToDash(prop);
|
||||||
|
}
|
||||||
|
return `${prop}:${styleMap[prop]};`;
|
||||||
|
})
|
||||||
|
.join('');
|
||||||
|
let ruleString = `.${this.scopeClass} ${rule} { ${styles} }`;
|
||||||
|
|
||||||
|
let _index = this.styleSheet.cssRules.length;
|
||||||
|
if (index !== -1) {
|
||||||
|
this.styleSheet.deleteRule(index);
|
||||||
|
_index = index;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.styleSheet.insertRule(ruleString, _index);
|
||||||
|
return _index;
|
||||||
|
}
|
||||||
|
|
||||||
|
setDimensions() {
|
||||||
|
this.setHeaderStyle();
|
||||||
|
|
||||||
|
this.setupMinWidth();
|
||||||
|
this.setupNaturalColumnWidth();
|
||||||
|
this.setupColumnWidth();
|
||||||
|
|
||||||
bindResizeWindow() {
|
|
||||||
if (this.options.layout === 'fluid') {
|
|
||||||
$.on(window, 'resize', throttle$1(() => {
|
|
||||||
this.distributeRemainingWidth();
|
this.distributeRemainingWidth();
|
||||||
this.refreshColumnWidth();
|
this.setColumnStyle();
|
||||||
|
this.setDefaultCellHeight();
|
||||||
this.setBodyStyle();
|
this.setBodyStyle();
|
||||||
}, 300));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
destroy() {
|
|
||||||
this.styleEl.remove();
|
|
||||||
}
|
|
||||||
|
|
||||||
setStyle(rule, styleMap, index = -1) {
|
|
||||||
const styles = Object.keys(styleMap)
|
|
||||||
.map(prop => {
|
|
||||||
if (!prop.includes('-')) {
|
|
||||||
prop = camelCaseToDash(prop);
|
|
||||||
}
|
|
||||||
return `${prop}:${styleMap[prop]};`;
|
|
||||||
})
|
|
||||||
.join('');
|
|
||||||
let ruleString = `.${this.scopeClass} ${rule} { ${styles} }`;
|
|
||||||
|
|
||||||
let _index = this.styleSheet.cssRules.length;
|
|
||||||
if (index !== -1) {
|
|
||||||
this.styleSheet.deleteRule(index);
|
|
||||||
_index = index;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
this.styleSheet.insertRule(ruleString, _index);
|
setHeaderStyle() {
|
||||||
return _index;
|
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
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
setDimensions() {
|
$.style(this.header, {
|
||||||
this.setHeaderStyle();
|
margin: 0
|
||||||
|
});
|
||||||
|
|
||||||
this.setupMinWidth();
|
// don't show resize cursor on nonResizable columns
|
||||||
this.setupNaturalColumnWidth();
|
const nonResizableColumnsSelector = this.datamanager.getColumns()
|
||||||
this.setupColumnWidth();
|
.filter(col => col.resizable === false)
|
||||||
|
.map(col => col.colIndex)
|
||||||
|
.map(i => `.data-table-header [data-col-index="${i}"]`)
|
||||||
|
.join();
|
||||||
|
|
||||||
this.distributeRemainingWidth();
|
this.setStyle(nonResizableColumnsSelector, {
|
||||||
this.setColumnStyle();
|
cursor: 'pointer'
|
||||||
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, {
|
setupMinWidth() {
|
||||||
margin: 0
|
$.each('.data-table-col[data-is-header]', this.header).map(col => {
|
||||||
});
|
const width = $.style($('.content', col), 'width');
|
||||||
|
const {
|
||||||
|
colIndex
|
||||||
|
} = $.data(col);
|
||||||
|
const column = this.getColumn(colIndex);
|
||||||
|
|
||||||
// don't show resize cursor on nonResizable columns
|
if (!column.minWidth) {
|
||||||
const nonResizableColumnsSelector = this.datamanager.getColumns()
|
// only set this once
|
||||||
.filter(col => col.resizable === false)
|
column.minWidth = width;
|
||||||
.map(col => col.colIndex)
|
}
|
||||||
.map(i => `.data-table-header [data-col-index="${i}"]`)
|
});
|
||||||
.join();
|
|
||||||
|
|
||||||
this.setStyle(nonResizableColumnsSelector, {
|
|
||||||
cursor: 'pointer'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
setupMinWidth() {
|
|
||||||
$.each('.data-table-col[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-col', this.bodyScrollable).map($cell => {
|
|
||||||
const {
|
|
||||||
colIndex
|
|
||||||
} = $.data($cell);
|
|
||||||
const column = this.datamanager.getColumn(colIndex);
|
|
||||||
|
|
||||||
let naturalWidth = $.style($('.content', $cell), 'width');
|
|
||||||
|
|
||||||
if (column.id === '_rowIndex') {
|
|
||||||
// width based on rowCount
|
|
||||||
const rowCount = this.datamanager.getRowCount();
|
|
||||||
const digits = (rowCount + '').length;
|
|
||||||
if (digits > 2) {
|
|
||||||
naturalWidth = naturalWidth + ((digits - 2) * 8);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
column.naturalWidth = naturalWidth;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
setupColumnWidth() {
|
|
||||||
this.datamanager.getColumns()
|
|
||||||
.map(column => {
|
|
||||||
if (!column.width) {
|
|
||||||
column.width = column.naturalWidth;
|
|
||||||
}
|
|
||||||
if (column.width < column.minWidth) {
|
|
||||||
column.width = column.minWidth;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
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.__cellHeightSet) return;
|
|
||||||
const height = this.options.cellHeight || $.style($('.data-table-col', this.instance.datatableWrapper), 'height');
|
|
||||||
if (height) {
|
|
||||||
this.setCellHeight(height);
|
|
||||||
this.__cellHeightSet = true;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
setCellHeight(height) {
|
setupNaturalColumnWidth() {
|
||||||
this.setStyle('.data-table-col .content', {
|
if (!$('.data-table-row')) return;
|
||||||
height: height + 'px'
|
|
||||||
});
|
|
||||||
this.setStyle('.data-table-col .edit-cell', {
|
|
||||||
height: height + 'px'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
setColumnStyle() {
|
// set initial width as naturally calculated by table's first row
|
||||||
// align columns
|
$.each('.data-table-row[data-row-index="0"] .data-table-col', this.bodyScrollable).map($cell => {
|
||||||
this.datamanager.getColumns()
|
const {
|
||||||
.map(column => {
|
colIndex
|
||||||
// alignment
|
} = $.data($cell);
|
||||||
if (['left', 'center', 'right'].includes(column.align)) {
|
const column = this.datamanager.getColumn(colIndex);
|
||||||
this.setStyle(`[data-col-index="${column.colIndex}"]`, {
|
|
||||||
'text-align': column.align
|
let naturalWidth = $.style($('.content', $cell), 'width');
|
||||||
});
|
|
||||||
|
if (column.id === '_rowIndex') {
|
||||||
|
// width based on rowCount
|
||||||
|
const rowCount = this.datamanager.getRowCount();
|
||||||
|
const digits = (rowCount + '').length;
|
||||||
|
if (digits > 1) {
|
||||||
|
naturalWidth = naturalWidth + ((digits - 1) * 8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
column.naturalWidth = naturalWidth;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
setupColumnWidth() {
|
||||||
|
this.datamanager.getColumns()
|
||||||
|
.map(column => {
|
||||||
|
if (!column.width) {
|
||||||
|
column.width = column.naturalWidth;
|
||||||
|
}
|
||||||
|
if (column.width < column.minWidth) {
|
||||||
|
column.width = column.minWidth;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
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.__cellHeightSet) return;
|
||||||
|
const height = this.options.cellHeight ||
|
||||||
|
$.style($('.data-table-col', this.instance.datatableWrapper), 'height');
|
||||||
|
if (height) {
|
||||||
|
this.setCellHeight(height);
|
||||||
|
this.__cellHeightSet = true;
|
||||||
}
|
}
|
||||||
// width
|
}
|
||||||
this.columnmanager.setColumnHeaderWidth(column.colIndex);
|
|
||||||
this.columnmanager.setColumnWidth(column.colIndex);
|
|
||||||
});
|
|
||||||
this.setBodyStyle();
|
|
||||||
}
|
|
||||||
|
|
||||||
refreshColumnWidth() {
|
setCellHeight(height) {
|
||||||
this.datamanager.getColumns()
|
this.setStyle('.data-table-col .content', {
|
||||||
.map(column => {
|
height: height + 'px'
|
||||||
this.columnmanager.setColumnHeaderWidth(column.colIndex);
|
});
|
||||||
this.columnmanager.setColumnWidth(column.colIndex);
|
this.setStyle('.data-table-col .edit-cell', {
|
||||||
});
|
height: height + 'px'
|
||||||
}
|
});
|
||||||
|
}
|
||||||
|
|
||||||
setBodyStyle() {
|
setColumnStyle() {
|
||||||
const width = $.style(this.header, 'width');
|
// 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
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// width
|
||||||
|
this.columnmanager.setColumnHeaderWidth(column.colIndex);
|
||||||
|
this.columnmanager.setColumnWidth(column.colIndex);
|
||||||
|
});
|
||||||
|
this.setBodyStyle();
|
||||||
|
}
|
||||||
|
|
||||||
$.style(this.bodyScrollable, {
|
refreshColumnWidth() {
|
||||||
width: width + 'px'
|
this.datamanager.getColumns()
|
||||||
});
|
.map(column => {
|
||||||
|
this.columnmanager.setColumnHeaderWidth(column.colIndex);
|
||||||
|
this.columnmanager.setColumnWidth(column.colIndex);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
$.style(this.bodyScrollable, {
|
setBodyStyle() {
|
||||||
marginTop: $.style(this.header, 'height') + 'px'
|
const width = $.style(this.header, 'width');
|
||||||
});
|
|
||||||
|
|
||||||
$.style($('table', this.bodyScrollable), {
|
$.style(this.bodyScrollable, {
|
||||||
margin: 0
|
width: width + 'px'
|
||||||
});
|
});
|
||||||
}
|
|
||||||
|
|
||||||
getColumnHeaderElement(colIndex) {
|
$.style(this.bodyScrollable, {
|
||||||
colIndex = +colIndex;
|
marginTop: $.style(this.header, 'height') + 'px'
|
||||||
if (colIndex < 0) return null;
|
});
|
||||||
return $(`.data-table-col[data-col-index="${colIndex}"]`, this.header);
|
|
||||||
}
|
$.style($('table', this.bodyScrollable), {
|
||||||
|
margin: 0
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
getColumnHeaderElement(colIndex) {
|
||||||
|
colIndex = +colIndex;
|
||||||
|
if (colIndex < 0) return null;
|
||||||
|
return $(`.data-table-col[data-col-index="${colIndex}"]`, this.header);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const KEYCODES = {
|
const KEYCODES = {
|
||||||
|
|||||||
428
dist/frappe-datatable.js
vendored
428
dist/frappe-datatable.js
vendored
@ -210,12 +210,10 @@ var isObject_1 = isObject;
|
|||||||
|
|
||||||
var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
||||||
|
|
||||||
/** Detect free variable `global` from Node.js. */
|
|
||||||
var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
|
var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
|
||||||
|
|
||||||
var _freeGlobal = freeGlobal;
|
var _freeGlobal = freeGlobal;
|
||||||
|
|
||||||
/** Detect free variable `self`. */
|
|
||||||
var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
|
var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
|
||||||
|
|
||||||
/** Used as a reference to the global object. */
|
/** Used as a reference to the global object. */
|
||||||
@ -223,34 +221,16 @@ var root = _freeGlobal || freeSelf || Function('return this')();
|
|||||||
|
|
||||||
var _root = root;
|
var _root = root;
|
||||||
|
|
||||||
/**
|
|
||||||
* Gets the timestamp of the number of milliseconds that have elapsed since
|
|
||||||
* the Unix epoch (1 January 1970 00:00:00 UTC).
|
|
||||||
*
|
|
||||||
* @static
|
|
||||||
* @memberOf _
|
|
||||||
* @since 2.4.0
|
|
||||||
* @category Date
|
|
||||||
* @returns {number} Returns the timestamp.
|
|
||||||
* @example
|
|
||||||
*
|
|
||||||
* _.defer(function(stamp) {
|
|
||||||
* console.log(_.now() - stamp);
|
|
||||||
* }, _.now());
|
|
||||||
* // => Logs the number of milliseconds it took for the deferred invocation.
|
|
||||||
*/
|
|
||||||
var now = function() {
|
var now = function() {
|
||||||
return _root.Date.now();
|
return _root.Date.now();
|
||||||
};
|
};
|
||||||
|
|
||||||
var now_1 = now;
|
var now_1 = now;
|
||||||
|
|
||||||
/** Built-in value references. */
|
|
||||||
var Symbol = _root.Symbol;
|
var Symbol = _root.Symbol;
|
||||||
|
|
||||||
var _Symbol = Symbol;
|
var _Symbol = Symbol;
|
||||||
|
|
||||||
/** Used for built-in method references. */
|
|
||||||
var objectProto = Object.prototype;
|
var objectProto = Object.prototype;
|
||||||
|
|
||||||
/** Used to check objects for own properties. */
|
/** Used to check objects for own properties. */
|
||||||
@ -318,7 +298,6 @@ function objectToString(value) {
|
|||||||
|
|
||||||
var _objectToString = objectToString;
|
var _objectToString = objectToString;
|
||||||
|
|
||||||
/** `Object#toString` result references. */
|
|
||||||
var nullTag = '[object Null]';
|
var nullTag = '[object Null]';
|
||||||
var undefinedTag = '[object Undefined]';
|
var undefinedTag = '[object Undefined]';
|
||||||
|
|
||||||
@ -373,7 +352,6 @@ function isObjectLike(value) {
|
|||||||
|
|
||||||
var isObjectLike_1 = isObjectLike;
|
var isObjectLike_1 = isObjectLike;
|
||||||
|
|
||||||
/** `Object#toString` result references. */
|
|
||||||
var symbolTag = '[object Symbol]';
|
var symbolTag = '[object Symbol]';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -400,7 +378,6 @@ function isSymbol(value) {
|
|||||||
|
|
||||||
var isSymbol_1 = isSymbol;
|
var isSymbol_1 = isSymbol;
|
||||||
|
|
||||||
/** Used as references for various `Number` constants. */
|
|
||||||
var NAN = 0 / 0;
|
var NAN = 0 / 0;
|
||||||
|
|
||||||
/** Used to match leading and trailing whitespace. */
|
/** Used to match leading and trailing whitespace. */
|
||||||
@ -464,7 +441,6 @@ function toNumber(value) {
|
|||||||
|
|
||||||
var toNumber_1 = toNumber;
|
var toNumber_1 = toNumber;
|
||||||
|
|
||||||
/** Error message constants. */
|
|
||||||
var FUNC_ERROR_TEXT = 'Expected a function';
|
var FUNC_ERROR_TEXT = 'Expected a function';
|
||||||
|
|
||||||
/* Built-in method references for those with the same name as other `lodash` methods. */
|
/* Built-in method references for those with the same name as other `lodash` methods. */
|
||||||
@ -651,7 +627,6 @@ function debounce(func, wait, options) {
|
|||||||
|
|
||||||
var debounce_1 = debounce;
|
var debounce_1 = debounce;
|
||||||
|
|
||||||
/** Error message constants. */
|
|
||||||
var FUNC_ERROR_TEXT$1 = 'Expected a function';
|
var FUNC_ERROR_TEXT$1 = 'Expected a function';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -2675,232 +2650,233 @@ function getBodyHTML(rows) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
class Style {
|
class Style {
|
||||||
constructor(instance) {
|
constructor(instance) {
|
||||||
this.instance = instance;
|
this.instance = instance;
|
||||||
|
|
||||||
linkProperties(this, this.instance, [
|
linkProperties(this, this.instance, [
|
||||||
'options', 'datamanager', 'columnmanager',
|
'options', 'datamanager', 'columnmanager',
|
||||||
'header', 'bodyScrollable', 'getColumn'
|
'header', 'bodyScrollable', 'getColumn'
|
||||||
]);
|
]);
|
||||||
|
|
||||||
this.scopeClass = 'datatable-instance-' + instance.constructor.instances;
|
this.scopeClass = 'datatable-instance-' + instance.constructor.instances;
|
||||||
instance.datatableWrapper.classList.add(this.scopeClass);
|
instance.datatableWrapper.classList.add(this.scopeClass);
|
||||||
|
|
||||||
const styleEl = document.createElement('style');
|
const styleEl = document.createElement('style');
|
||||||
instance.wrapper.insertBefore(styleEl, instance.datatableWrapper);
|
instance.wrapper.insertBefore(styleEl, instance.datatableWrapper);
|
||||||
this.styleEl = styleEl;
|
this.styleEl = styleEl;
|
||||||
this.styleSheet = styleEl.sheet;
|
this.styleSheet = styleEl.sheet;
|
||||||
|
|
||||||
this.bindResizeWindow();
|
this.bindResizeWindow();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
bindResizeWindow() {
|
||||||
|
if (this.options.layout === 'fluid') {
|
||||||
|
$.on(window, 'resize', throttle$1(() => {
|
||||||
|
this.distributeRemainingWidth();
|
||||||
|
this.refreshColumnWidth();
|
||||||
|
this.setBodyStyle();
|
||||||
|
}, 300));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
destroy() {
|
||||||
|
this.styleEl.remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
setStyle(rule, styleMap, index = -1) {
|
||||||
|
const styles = Object.keys(styleMap)
|
||||||
|
.map(prop => {
|
||||||
|
if (!prop.includes('-')) {
|
||||||
|
prop = camelCaseToDash(prop);
|
||||||
|
}
|
||||||
|
return `${prop}:${styleMap[prop]};`;
|
||||||
|
})
|
||||||
|
.join('');
|
||||||
|
let ruleString = `.${this.scopeClass} ${rule} { ${styles} }`;
|
||||||
|
|
||||||
|
let _index = this.styleSheet.cssRules.length;
|
||||||
|
if (index !== -1) {
|
||||||
|
this.styleSheet.deleteRule(index);
|
||||||
|
_index = index;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.styleSheet.insertRule(ruleString, _index);
|
||||||
|
return _index;
|
||||||
|
}
|
||||||
|
|
||||||
|
setDimensions() {
|
||||||
|
this.setHeaderStyle();
|
||||||
|
|
||||||
|
this.setupMinWidth();
|
||||||
|
this.setupNaturalColumnWidth();
|
||||||
|
this.setupColumnWidth();
|
||||||
|
|
||||||
bindResizeWindow() {
|
|
||||||
if (this.options.layout === 'fluid') {
|
|
||||||
$.on(window, 'resize', throttle$1(() => {
|
|
||||||
this.distributeRemainingWidth();
|
this.distributeRemainingWidth();
|
||||||
this.refreshColumnWidth();
|
this.setColumnStyle();
|
||||||
|
this.setDefaultCellHeight();
|
||||||
this.setBodyStyle();
|
this.setBodyStyle();
|
||||||
}, 300));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
destroy() {
|
|
||||||
this.styleEl.remove();
|
|
||||||
}
|
|
||||||
|
|
||||||
setStyle(rule, styleMap, index = -1) {
|
|
||||||
const styles = Object.keys(styleMap)
|
|
||||||
.map(prop => {
|
|
||||||
if (!prop.includes('-')) {
|
|
||||||
prop = camelCaseToDash(prop);
|
|
||||||
}
|
|
||||||
return `${prop}:${styleMap[prop]};`;
|
|
||||||
})
|
|
||||||
.join('');
|
|
||||||
let ruleString = `.${this.scopeClass} ${rule} { ${styles} }`;
|
|
||||||
|
|
||||||
let _index = this.styleSheet.cssRules.length;
|
|
||||||
if (index !== -1) {
|
|
||||||
this.styleSheet.deleteRule(index);
|
|
||||||
_index = index;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
this.styleSheet.insertRule(ruleString, _index);
|
setHeaderStyle() {
|
||||||
return _index;
|
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
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
setDimensions() {
|
$.style(this.header, {
|
||||||
this.setHeaderStyle();
|
margin: 0
|
||||||
|
});
|
||||||
|
|
||||||
this.setupMinWidth();
|
// don't show resize cursor on nonResizable columns
|
||||||
this.setupNaturalColumnWidth();
|
const nonResizableColumnsSelector = this.datamanager.getColumns()
|
||||||
this.setupColumnWidth();
|
.filter(col => col.resizable === false)
|
||||||
|
.map(col => col.colIndex)
|
||||||
|
.map(i => `.data-table-header [data-col-index="${i}"]`)
|
||||||
|
.join();
|
||||||
|
|
||||||
this.distributeRemainingWidth();
|
this.setStyle(nonResizableColumnsSelector, {
|
||||||
this.setColumnStyle();
|
cursor: 'pointer'
|
||||||
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, {
|
setupMinWidth() {
|
||||||
margin: 0
|
$.each('.data-table-col[data-is-header]', this.header).map(col => {
|
||||||
});
|
const width = $.style($('.content', col), 'width');
|
||||||
|
const {
|
||||||
|
colIndex
|
||||||
|
} = $.data(col);
|
||||||
|
const column = this.getColumn(colIndex);
|
||||||
|
|
||||||
// don't show resize cursor on nonResizable columns
|
if (!column.minWidth) {
|
||||||
const nonResizableColumnsSelector = this.datamanager.getColumns()
|
// only set this once
|
||||||
.filter(col => col.resizable === false)
|
column.minWidth = width;
|
||||||
.map(col => col.colIndex)
|
}
|
||||||
.map(i => `.data-table-header [data-col-index="${i}"]`)
|
});
|
||||||
.join();
|
|
||||||
|
|
||||||
this.setStyle(nonResizableColumnsSelector, {
|
|
||||||
cursor: 'pointer'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
setupMinWidth() {
|
|
||||||
$.each('.data-table-col[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-col', this.bodyScrollable).map($cell => {
|
|
||||||
const {
|
|
||||||
colIndex
|
|
||||||
} = $.data($cell);
|
|
||||||
const column = this.datamanager.getColumn(colIndex);
|
|
||||||
|
|
||||||
let naturalWidth = $.style($('.content', $cell), 'width');
|
|
||||||
|
|
||||||
if (column.id === '_rowIndex') {
|
|
||||||
// width based on rowCount
|
|
||||||
const rowCount = this.datamanager.getRowCount();
|
|
||||||
const digits = (rowCount + '').length;
|
|
||||||
if (digits > 2) {
|
|
||||||
naturalWidth = naturalWidth + ((digits - 2) * 8);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
column.naturalWidth = naturalWidth;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
setupColumnWidth() {
|
|
||||||
this.datamanager.getColumns()
|
|
||||||
.map(column => {
|
|
||||||
if (!column.width) {
|
|
||||||
column.width = column.naturalWidth;
|
|
||||||
}
|
|
||||||
if (column.width < column.minWidth) {
|
|
||||||
column.width = column.minWidth;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
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.__cellHeightSet) return;
|
|
||||||
const height = this.options.cellHeight || $.style($('.data-table-col', this.instance.datatableWrapper), 'height');
|
|
||||||
if (height) {
|
|
||||||
this.setCellHeight(height);
|
|
||||||
this.__cellHeightSet = true;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
setCellHeight(height) {
|
setupNaturalColumnWidth() {
|
||||||
this.setStyle('.data-table-col .content', {
|
if (!$('.data-table-row')) return;
|
||||||
height: height + 'px'
|
|
||||||
});
|
|
||||||
this.setStyle('.data-table-col .edit-cell', {
|
|
||||||
height: height + 'px'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
setColumnStyle() {
|
// set initial width as naturally calculated by table's first row
|
||||||
// align columns
|
$.each('.data-table-row[data-row-index="0"] .data-table-col', this.bodyScrollable).map($cell => {
|
||||||
this.datamanager.getColumns()
|
const {
|
||||||
.map(column => {
|
colIndex
|
||||||
// alignment
|
} = $.data($cell);
|
||||||
if (['left', 'center', 'right'].includes(column.align)) {
|
const column = this.datamanager.getColumn(colIndex);
|
||||||
this.setStyle(`[data-col-index="${column.colIndex}"]`, {
|
|
||||||
'text-align': column.align
|
let naturalWidth = $.style($('.content', $cell), 'width');
|
||||||
});
|
|
||||||
|
if (column.id === '_rowIndex') {
|
||||||
|
// width based on rowCount
|
||||||
|
const rowCount = this.datamanager.getRowCount();
|
||||||
|
const digits = (rowCount + '').length;
|
||||||
|
if (digits > 1) {
|
||||||
|
naturalWidth = naturalWidth + ((digits - 1) * 8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
column.naturalWidth = naturalWidth;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
setupColumnWidth() {
|
||||||
|
this.datamanager.getColumns()
|
||||||
|
.map(column => {
|
||||||
|
if (!column.width) {
|
||||||
|
column.width = column.naturalWidth;
|
||||||
|
}
|
||||||
|
if (column.width < column.minWidth) {
|
||||||
|
column.width = column.minWidth;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
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.__cellHeightSet) return;
|
||||||
|
const height = this.options.cellHeight ||
|
||||||
|
$.style($('.data-table-col', this.instance.datatableWrapper), 'height');
|
||||||
|
if (height) {
|
||||||
|
this.setCellHeight(height);
|
||||||
|
this.__cellHeightSet = true;
|
||||||
}
|
}
|
||||||
// width
|
}
|
||||||
this.columnmanager.setColumnHeaderWidth(column.colIndex);
|
|
||||||
this.columnmanager.setColumnWidth(column.colIndex);
|
|
||||||
});
|
|
||||||
this.setBodyStyle();
|
|
||||||
}
|
|
||||||
|
|
||||||
refreshColumnWidth() {
|
setCellHeight(height) {
|
||||||
this.datamanager.getColumns()
|
this.setStyle('.data-table-col .content', {
|
||||||
.map(column => {
|
height: height + 'px'
|
||||||
this.columnmanager.setColumnHeaderWidth(column.colIndex);
|
});
|
||||||
this.columnmanager.setColumnWidth(column.colIndex);
|
this.setStyle('.data-table-col .edit-cell', {
|
||||||
});
|
height: height + 'px'
|
||||||
}
|
});
|
||||||
|
}
|
||||||
|
|
||||||
setBodyStyle() {
|
setColumnStyle() {
|
||||||
const width = $.style(this.header, 'width');
|
// 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
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// width
|
||||||
|
this.columnmanager.setColumnHeaderWidth(column.colIndex);
|
||||||
|
this.columnmanager.setColumnWidth(column.colIndex);
|
||||||
|
});
|
||||||
|
this.setBodyStyle();
|
||||||
|
}
|
||||||
|
|
||||||
$.style(this.bodyScrollable, {
|
refreshColumnWidth() {
|
||||||
width: width + 'px'
|
this.datamanager.getColumns()
|
||||||
});
|
.map(column => {
|
||||||
|
this.columnmanager.setColumnHeaderWidth(column.colIndex);
|
||||||
|
this.columnmanager.setColumnWidth(column.colIndex);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
$.style(this.bodyScrollable, {
|
setBodyStyle() {
|
||||||
marginTop: $.style(this.header, 'height') + 'px'
|
const width = $.style(this.header, 'width');
|
||||||
});
|
|
||||||
|
|
||||||
$.style($('table', this.bodyScrollable), {
|
$.style(this.bodyScrollable, {
|
||||||
margin: 0
|
width: width + 'px'
|
||||||
});
|
});
|
||||||
}
|
|
||||||
|
|
||||||
getColumnHeaderElement(colIndex) {
|
$.style(this.bodyScrollable, {
|
||||||
colIndex = +colIndex;
|
marginTop: $.style(this.header, 'height') + 'px'
|
||||||
if (colIndex < 0) return null;
|
});
|
||||||
return $(`.data-table-col[data-col-index="${colIndex}"]`, this.header);
|
|
||||||
}
|
$.style($('table', this.bodyScrollable), {
|
||||||
|
margin: 0
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
getColumnHeaderElement(colIndex) {
|
||||||
|
colIndex = +colIndex;
|
||||||
|
if (colIndex < 0) return null;
|
||||||
|
return $(`.data-table-col[data-col-index="${colIndex}"]`, this.header);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const KEYCODES = {
|
const KEYCODES = {
|
||||||
|
|||||||
254
docs/frappe-datatable.css
Normal file
254
docs/frappe-datatable.css
Normal file
@ -0,0 +1,254 @@
|
|||||||
|
/* variables */
|
||||||
|
|
||||||
|
.data-table {
|
||||||
|
|
||||||
|
/* styling */
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* resets */
|
||||||
|
|
||||||
|
.data-table *, .data-table *::after, .data-table *::before {
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table button, .data-table input {
|
||||||
|
overflow: visible;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
line-height: inherit;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table .input-style {
|
||||||
|
outline: none;
|
||||||
|
width: 100%;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table *, .data-table *:focus {
|
||||||
|
outline: none;
|
||||||
|
border-radius: 0px;
|
||||||
|
-webkit-box-shadow: none;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table table td {
|
||||||
|
padding: 0;
|
||||||
|
border: 1px solid #d1d8dd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table thead td {
|
||||||
|
border-bottom-width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table .freeze-container {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-ms-flex-line-pack: center;
|
||||||
|
align-content: center;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
opacity: 0.5;
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table .freeze-container span {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
-webkit-transform: translateY(-50%);
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table .trash-container {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 30%;
|
||||||
|
right: 30%;
|
||||||
|
height: 70px;
|
||||||
|
background: palevioletred;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table .hide {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.body-scrollable {
|
||||||
|
max-height: 500px;
|
||||||
|
overflow: auto;
|
||||||
|
border-bottom: 1px solid #d1d8dd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.body-scrollable.row-highlight-all .data-table-row:not(.row-unhighlight) {
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table-header {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background-color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table-header .content span:not(.column-resizer) {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table-header .column-resizer {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 4px;
|
||||||
|
width: 0.25rem;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgb(82, 146, 247);
|
||||||
|
cursor: col-resize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table-header .data-table-dropdown {
|
||||||
|
position: absolute;
|
||||||
|
right: 10px;
|
||||||
|
display: -webkit-inline-box;
|
||||||
|
display: -ms-inline-flexbox;
|
||||||
|
display: inline-flex;
|
||||||
|
vertical-align: top;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table-header .data-table-dropdown.is-active .data-table-dropdown-list {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table-header .data-table-dropdown.is-active .data-table-dropdown-toggle {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table-header .data-table-dropdown-toggle {
|
||||||
|
display: none;
|
||||||
|
background-color: transparent;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table-header .data-table-dropdown-list {
|
||||||
|
display: none;
|
||||||
|
font-weight: normal;
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
min-width: 128px;
|
||||||
|
min-width: 8rem;
|
||||||
|
top: 100%;
|
||||||
|
right: 0;
|
||||||
|
z-index: 1;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 3px;
|
||||||
|
-webkit-box-shadow: 0 2px 3px rgba(10, 10, 10, .1), 0 0 0 1px rgba(10, 10, 10, .1);
|
||||||
|
box-shadow: 0 2px 3px rgba(10, 10, 10, .1), 0 0 0 1px rgba(10, 10, 10, .1);
|
||||||
|
padding-bottom: 8px;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
padding-top: 8px;
|
||||||
|
padding-top: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table-header .data-table-dropdown-list> div {
|
||||||
|
padding: 8px 16px;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table-header .data-table-dropdown-list> div:hover {
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table-header .data-table-col.remove-column {
|
||||||
|
background-color: #FD8B8B;
|
||||||
|
-webkit-transition: 300ms background-color ease-in-out;
|
||||||
|
transition: 300ms background-color ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table-header .data-table-col.sortable-chosen {
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table-col {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table-col .content {
|
||||||
|
padding: 8px;
|
||||||
|
padding: 0.5rem;
|
||||||
|
border: 2px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table-col .content.ellipsis {
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table-col .edit-cell {
|
||||||
|
display: none;
|
||||||
|
padding: 8px;
|
||||||
|
padding: 0.5rem;
|
||||||
|
background: #fff;
|
||||||
|
z-index: 1;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table-col.selected .content {
|
||||||
|
border: 2px solid rgb(82, 146, 247);
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table-col.editing .content {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table-col.editing .edit-cell {
|
||||||
|
border: 2px solid rgb(82, 146, 247);
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table-col.highlight {
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table-col:hover .column-resizer {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table-col:hover .data-table-dropdown-toggle {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table-row.row-highlight {
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.noselect {
|
||||||
|
-webkit-touch-callout: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.data-table-resize {
|
||||||
|
cursor: col-resize;
|
||||||
|
}
|
||||||
3188
docs/frappe-datatable.js
Normal file
3188
docs/frappe-datatable.js
Normal file
File diff suppressed because it is too large
Load Diff
32
docs/index.css
Normal file
32
docs/index.css
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
*, *::after, *::before {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 3rem;
|
||||||
|
margin: 1rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 4rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero p {
|
||||||
|
font-size: 2rem;
|
||||||
|
margin: 1rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datatable-1 {
|
||||||
|
width: 735px;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
22
docs/index.html
Normal file
22
docs/index.html
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
|
<title>Frappe DataTable - A simple, modern datatable library for the web</title>
|
||||||
|
<link href="frappe-datatable.css" rel="stylesheet">
|
||||||
|
<link href="index.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<section class="hero">
|
||||||
|
<h1>Frappe DataTable</h1>
|
||||||
|
<p>A simple, modern and interactive datatable for the web</p>
|
||||||
|
<div class="datatable-1"></div>
|
||||||
|
</section>
|
||||||
|
<script src="../node_modules/clusterize.js/clusterize.js"></script>
|
||||||
|
<script src="../node_modules/sortablejs/Sortable.js"></script>
|
||||||
|
<script src="frappe-datatable.js"></script>
|
||||||
|
<script src="index.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
81
docs/index.js
Normal file
81
docs/index.js
Normal file
@ -0,0 +1,81 @@
|
|||||||
|
/* global DataTable */
|
||||||
|
|
||||||
|
const { columns, data } = getSampleData();
|
||||||
|
|
||||||
|
let datatable1 = new DataTable('.datatable-1', {
|
||||||
|
columns,
|
||||||
|
data
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log(datatable1);
|
||||||
|
|
||||||
|
function getSampleData(multiplier) {
|
||||||
|
let columns = ['Name', 'Position', 'Office', 'Extn.', 'Start Date', 'Salary'];
|
||||||
|
let data = [
|
||||||
|
['Tiger Nixon', 'System Architect', 'Edinburgh', '5421', '2011/04/25', '$320,800'],
|
||||||
|
['Garrett Winters', 'Accountant', 'Tokyo', '8422', '2011/07/25', '$170,750'],
|
||||||
|
['Ashton Cox', 'Junior Technical Author', 'San Francisco', '1562', '2009/01/12', '$86,000'],
|
||||||
|
['Cedric Kelly', 'Senior Javascript Developer', 'Edinburgh', '6224', '2012/03/29', '$433,060'],
|
||||||
|
['Airi Satou', 'Accountant', 'Tokyo', '5407', '2008/11/28', '$162,700'],
|
||||||
|
['Brielle Williamson', 'Integration Specialist', 'New York', '4804', '2012/12/02', '$372,000'],
|
||||||
|
['Herrod Chandler', 'Sales Assistant', 'San Francisco', '9608', '2012/08/06', '$137,500'],
|
||||||
|
['Rhona Davidson', 'Integration Specialist', 'Tokyo', '6200', '2010/10/14', '$327,900'],
|
||||||
|
['Colleen Hurst', 'Javascript Developer', 'San Francisco', '2360', '2009/09/15', '$205,500'],
|
||||||
|
['Sonya Frost', 'Software Engineer', 'Edinburgh', '1667', '2008/12/13', '$103,600'],
|
||||||
|
['Jena Gaines', 'Office Manager', 'London', '3814', '2008/12/19', '$90,560'],
|
||||||
|
['Quinn Flynn', 'Support Lead', 'Edinburgh', '9497', '2013/03/03', '$342,000'],
|
||||||
|
['Charde Marshall', 'Regional Director', 'San Francisco', '6741', '2008/10/16', '$470,600'],
|
||||||
|
['Haley Kennedy', 'Senior Marketing Designer', 'London', '3597', '2012/12/18', '$313,500'],
|
||||||
|
['Tatyana Fitzpatrick', 'Regional Director', 'London', '1965', '2010/03/17', '$385,750'],
|
||||||
|
['Michael Silva', 'Marketing Designer', 'London', '1581', '2012/11/27', '$198,500'],
|
||||||
|
['Paul Byrd', 'Chief Financial Officer (CFO)', 'New York', '3059', '2010/06/09', '$725,000'],
|
||||||
|
['Gloria Little', 'Systems Administrator', 'New York', '1721', '2009/04/10', '$237,500'],
|
||||||
|
['Bradley Greer', 'Software Engineer', 'London', '2558', '2012/10/13', '$132,000'],
|
||||||
|
['Dai Rios', 'Personnel Lead', 'Edinburgh', '2290', '2012/09/26', '$217,500'],
|
||||||
|
['Jenette Caldwell', 'Development Lead', 'New York', '1937', '2011/09/03', '$345,000'],
|
||||||
|
['Yuri Berry', 'Chief Marketing Officer (CMO)', 'New York', '6154', '2009/06/25', '$675,000'],
|
||||||
|
['Caesar Vance', 'Pre-Sales Support', 'New York', '8330', '2011/12/12', '$106,450'],
|
||||||
|
['Doris Wilder', 'Sales Assistant', 'Sidney', '3023', '2010/09/20', '$85,600'],
|
||||||
|
['Angelica Ramos', 'Chief Executive Officer (CEO)', 'London', '5797', '2009/10/09', '$1,200,000'],
|
||||||
|
['Gavin Joyce', 'Developer', 'Edinburgh', '8822', '2010/12/22', '$92,575'],
|
||||||
|
['Jennifer Chang', 'Regional Director', 'Singapore', '9239', '2010/11/14', '$357,650'],
|
||||||
|
['Brenden Wagner', 'Software Engineer', 'San Francisco', '1314', '2011/06/07', '$206,850'],
|
||||||
|
['Fiona Green', 'Chief Operating Officer (COO)', 'San Francisco', '2947', '2010/03/11', '$850,000'],
|
||||||
|
['Shou Itou', 'Regional Marketing', 'Tokyo', '8899', '2011/08/14', '$163,000'],
|
||||||
|
['Michelle House', 'Integration Specialist', 'Sidney', '2769', '2011/06/02', '$95,400'],
|
||||||
|
['Suki Burks', 'Developer', 'London', '6832', '2009/10/22', '$114,500'],
|
||||||
|
['Prescott Bartlett', 'Technical Author', 'London', '3606', '2011/05/07', '$145,000'],
|
||||||
|
['Gavin Cortez', 'Team Leader', 'San Francisco', '2860', '2008/10/26', '$235,500'],
|
||||||
|
['Martena Mccray', 'Post-Sales support', 'Edinburgh', '8240', '2011/03/09', '$324,050'],
|
||||||
|
['Unity Butler', 'Marketing Designer', 'San Francisco', '5384', '2009/12/09', '$85,675'],
|
||||||
|
['Howard Hatfield', 'Office Manager', 'San Francisco', '7031', '2008/12/16', '$164,500'],
|
||||||
|
['Hope Fuentes', 'Secretary', 'San Francisco', '6318', '2010/02/12', '$109,850'],
|
||||||
|
['Vivian Harrell', 'Financial Controller', 'San Francisco', '9422', '2009/02/14', '$452,500'],
|
||||||
|
['Timothy Mooney', 'Office Manager', 'London', '7580', '2008/12/11', '$136,200'],
|
||||||
|
['Jackson Bradshaw', 'Director', 'New York', '1042', '2008/09/26', '$645,750'],
|
||||||
|
['Olivia Liang', 'Support Engineer', 'Singapore', '2120', '2011/02/03', '$234,500'],
|
||||||
|
['Bruno Nash', 'Software Engineer', 'London', '6222', '2011/05/03', '$163,500'],
|
||||||
|
['Sakura Yamamoto', 'Support Engineer', 'Tokyo', '9383', '2009/08/19', '$139,575'],
|
||||||
|
['Thor Walton', 'Developer', 'New York', '8327', '2013/08/11', '$98,540'],
|
||||||
|
['Finn Camacho', 'Support Engineer', 'San Francisco', '2927', '2009/07/07', '$87,500'],
|
||||||
|
['Serge Baldwin', 'Data Coordinator', 'Singapore', '8352', '2012/04/09', '$138,575'],
|
||||||
|
['Zenaida Frank', 'Software Engineer', 'New York', '7439', '2010/01/04', '$125,250'],
|
||||||
|
['Zorita Serrano', 'Software Engineer', 'San Francisco', '4389', '2012/06/01', '$115,000'],
|
||||||
|
['Jennifer Acosta', 'Junior Javascript Developer', 'Edinburgh', '3431', '2013/02/01', '$75,650'],
|
||||||
|
['Cara Stevens', 'Sales Assistant', 'New York', '3990', '2011/12/06', '$145,600'],
|
||||||
|
['Hermione Butler', 'Regional Director', 'London', '1016', '2011/03/21', '$356,250'],
|
||||||
|
['Lael Greer', 'Systems Administrator', 'London', '6733', '2009/02/27', '$103,500'],
|
||||||
|
['Jonas Alexander', 'Developer', 'San Francisco', '8196', '2010/07/14', '$86,500'],
|
||||||
|
['Shad Decker', 'Regional Director', 'Edinburgh', '6373', '2008/11/13', '$183,000'],
|
||||||
|
['Michael Bruce', 'Javascript Developer', 'Singapore', '5384', '2011/06/27', '$183,000'],
|
||||||
|
['Donna Snider', 'Customer Support', 'New York', '4226', '2011/01/25', '$112,000']
|
||||||
|
];
|
||||||
|
|
||||||
|
if (multiplier) {
|
||||||
|
Array.from(new Array(multiplier - 1)).forEach(d => {
|
||||||
|
data = data.concat(data);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return { columns, data };
|
||||||
|
}
|
||||||
@ -8,34 +8,45 @@ import cssnext from 'postcss-cssnext';
|
|||||||
// import cssnano from 'cssnano';
|
// import cssnano from 'cssnano';
|
||||||
|
|
||||||
const dev = {
|
const dev = {
|
||||||
input: 'src/index.js',
|
input: 'src/index.js',
|
||||||
output: {
|
output: [{
|
||||||
file: 'dist/frappe-datatable.js',
|
file: 'dist/frappe-datatable.js',
|
||||||
format: 'iife',
|
format: 'iife',
|
||||||
name: 'DataTable',
|
name: 'DataTable',
|
||||||
globals: {
|
globals: {
|
||||||
sortablejs: 'Sortable',
|
sortablejs: 'Sortable',
|
||||||
'clusterize.js': 'Clusterize'
|
'clusterize.js': 'Clusterize'
|
||||||
}
|
}
|
||||||
},
|
}, {
|
||||||
plugins: [
|
file: 'docs/frappe-datatable.js',
|
||||||
json(),
|
format: 'iife',
|
||||||
nodeResolve(),
|
name: 'DataTable',
|
||||||
commonjs(),
|
globals: {
|
||||||
postcss({
|
sortablejs: 'Sortable',
|
||||||
extract: 'dist/frappe-datatable.css',
|
'clusterize.js': 'Clusterize'
|
||||||
plugins: [
|
}
|
||||||
nested(),
|
}],
|
||||||
cssnext()
|
plugins: [
|
||||||
]
|
json(),
|
||||||
})
|
nodeResolve(),
|
||||||
],
|
commonjs(),
|
||||||
external: ['sortablejs', 'clusterize.js']
|
postcss({
|
||||||
|
extract: ['dist/frappe-datatable.css', 'docs/frappe-datatable.css'],
|
||||||
|
plugins: [
|
||||||
|
nested(),
|
||||||
|
cssnext()
|
||||||
|
]
|
||||||
|
})
|
||||||
|
],
|
||||||
|
external: ['sortablejs', 'clusterize.js']
|
||||||
};
|
};
|
||||||
|
|
||||||
export default [dev, Object.assign({}, dev, {
|
export default [
|
||||||
output: {
|
dev,
|
||||||
format: 'cjs',
|
Object.assign({}, dev, {
|
||||||
file: 'dist/frappe-datatable.cjs.js'
|
output: {
|
||||||
}
|
format: 'cjs',
|
||||||
})];
|
file: 'dist/frappe-datatable.cjs.js'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
];
|
||||||
|
|||||||
409
src/style.js
409
src/style.js
@ -1,235 +1,236 @@
|
|||||||
import $ from './dom';
|
import $ from './dom';
|
||||||
import {
|
import {
|
||||||
camelCaseToDash,
|
camelCaseToDash,
|
||||||
linkProperties,
|
linkProperties,
|
||||||
throttle
|
throttle
|
||||||
} from './utils';
|
} from './utils';
|
||||||
|
|
||||||
export default class Style {
|
export default class Style {
|
||||||
constructor(instance) {
|
constructor(instance) {
|
||||||
this.instance = instance;
|
this.instance = instance;
|
||||||
|
|
||||||
linkProperties(this, this.instance, [
|
linkProperties(this, this.instance, [
|
||||||
'options', 'datamanager', 'columnmanager',
|
'options', 'datamanager', 'columnmanager',
|
||||||
'header', 'bodyScrollable', 'getColumn'
|
'header', 'bodyScrollable', 'getColumn'
|
||||||
]);
|
]);
|
||||||
|
|
||||||
this.scopeClass = 'datatable-instance-' + instance.constructor.instances;
|
this.scopeClass = 'datatable-instance-' + instance.constructor.instances;
|
||||||
instance.datatableWrapper.classList.add(this.scopeClass);
|
instance.datatableWrapper.classList.add(this.scopeClass);
|
||||||
|
|
||||||
const styleEl = document.createElement('style');
|
const styleEl = document.createElement('style');
|
||||||
instance.wrapper.insertBefore(styleEl, instance.datatableWrapper);
|
instance.wrapper.insertBefore(styleEl, instance.datatableWrapper);
|
||||||
this.styleEl = styleEl;
|
this.styleEl = styleEl;
|
||||||
this.styleSheet = styleEl.sheet;
|
this.styleSheet = styleEl.sheet;
|
||||||
|
|
||||||
this.bindResizeWindow();
|
this.bindResizeWindow();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
bindResizeWindow() {
|
||||||
|
if (this.options.layout === 'fluid') {
|
||||||
|
$.on(window, 'resize', throttle(() => {
|
||||||
|
this.distributeRemainingWidth();
|
||||||
|
this.refreshColumnWidth();
|
||||||
|
this.setBodyStyle();
|
||||||
|
}, 300));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
destroy() {
|
||||||
|
this.styleEl.remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
setStyle(rule, styleMap, index = -1) {
|
||||||
|
const styles = Object.keys(styleMap)
|
||||||
|
.map(prop => {
|
||||||
|
if (!prop.includes('-')) {
|
||||||
|
prop = camelCaseToDash(prop);
|
||||||
|
}
|
||||||
|
return `${prop}:${styleMap[prop]};`;
|
||||||
|
})
|
||||||
|
.join('');
|
||||||
|
let ruleString = `.${this.scopeClass} ${rule} { ${styles} }`;
|
||||||
|
|
||||||
|
let _index = this.styleSheet.cssRules.length;
|
||||||
|
if (index !== -1) {
|
||||||
|
this.styleSheet.deleteRule(index);
|
||||||
|
_index = index;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.styleSheet.insertRule(ruleString, _index);
|
||||||
|
return _index;
|
||||||
|
}
|
||||||
|
|
||||||
|
setDimensions() {
|
||||||
|
this.setHeaderStyle();
|
||||||
|
|
||||||
|
this.setupMinWidth();
|
||||||
|
this.setupNaturalColumnWidth();
|
||||||
|
this.setupColumnWidth();
|
||||||
|
|
||||||
bindResizeWindow() {
|
|
||||||
if (this.options.layout === 'fluid') {
|
|
||||||
$.on(window, 'resize', throttle(() => {
|
|
||||||
this.distributeRemainingWidth();
|
this.distributeRemainingWidth();
|
||||||
this.refreshColumnWidth();
|
this.setColumnStyle();
|
||||||
|
this.setDefaultCellHeight();
|
||||||
this.setBodyStyle();
|
this.setBodyStyle();
|
||||||
}, 300));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
destroy() {
|
|
||||||
this.styleEl.remove();
|
|
||||||
}
|
|
||||||
|
|
||||||
setStyle(rule, styleMap, index = -1) {
|
|
||||||
const styles = Object.keys(styleMap)
|
|
||||||
.map(prop => {
|
|
||||||
if (!prop.includes('-')) {
|
|
||||||
prop = camelCaseToDash(prop);
|
|
||||||
}
|
|
||||||
return `${prop}:${styleMap[prop]};`;
|
|
||||||
})
|
|
||||||
.join('');
|
|
||||||
let ruleString = `.${this.scopeClass} ${rule} { ${styles} }`;
|
|
||||||
|
|
||||||
let _index = this.styleSheet.cssRules.length;
|
|
||||||
if (index !== -1) {
|
|
||||||
this.styleSheet.deleteRule(index);
|
|
||||||
_index = index;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
this.styleSheet.insertRule(ruleString, _index);
|
setHeaderStyle() {
|
||||||
return _index;
|
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
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
setDimensions() {
|
$.style(this.header, {
|
||||||
this.setHeaderStyle();
|
margin: 0
|
||||||
|
});
|
||||||
|
|
||||||
this.setupMinWidth();
|
// don't show resize cursor on nonResizable columns
|
||||||
this.setupNaturalColumnWidth();
|
const nonResizableColumnsSelector = this.datamanager.getColumns()
|
||||||
this.setupColumnWidth();
|
.filter(col => col.resizable === false)
|
||||||
|
.map(col => col.colIndex)
|
||||||
|
.map(i => `.data-table-header [data-col-index="${i}"]`)
|
||||||
|
.join();
|
||||||
|
|
||||||
this.distributeRemainingWidth();
|
this.setStyle(nonResizableColumnsSelector, {
|
||||||
this.setColumnStyle();
|
cursor: 'pointer'
|
||||||
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, {
|
setupMinWidth() {
|
||||||
margin: 0
|
$.each('.data-table-col[data-is-header]', this.header).map(col => {
|
||||||
});
|
const width = $.style($('.content', col), 'width');
|
||||||
|
const {
|
||||||
|
colIndex
|
||||||
|
} = $.data(col);
|
||||||
|
const column = this.getColumn(colIndex);
|
||||||
|
|
||||||
// don't show resize cursor on nonResizable columns
|
if (!column.minWidth) {
|
||||||
const nonResizableColumnsSelector = this.datamanager.getColumns()
|
// only set this once
|
||||||
.filter(col => col.resizable === false)
|
column.minWidth = width;
|
||||||
.map(col => col.colIndex)
|
}
|
||||||
.map(i => `.data-table-header [data-col-index="${i}"]`)
|
});
|
||||||
.join();
|
|
||||||
|
|
||||||
this.setStyle(nonResizableColumnsSelector, {
|
|
||||||
cursor: 'pointer'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
setupMinWidth() {
|
|
||||||
$.each('.data-table-col[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-col', this.bodyScrollable).map($cell => {
|
|
||||||
const {
|
|
||||||
colIndex
|
|
||||||
} = $.data($cell);
|
|
||||||
const column = this.datamanager.getColumn(colIndex);
|
|
||||||
|
|
||||||
let naturalWidth = $.style($('.content', $cell), 'width');
|
|
||||||
|
|
||||||
if (column.id === '_rowIndex') {
|
|
||||||
// width based on rowCount
|
|
||||||
const rowCount = this.datamanager.getRowCount();
|
|
||||||
const digits = (rowCount + '').length;
|
|
||||||
if (digits > 2) {
|
|
||||||
naturalWidth = naturalWidth + ((digits - 2) * 8);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
column.naturalWidth = naturalWidth;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
setupColumnWidth() {
|
|
||||||
this.datamanager.getColumns()
|
|
||||||
.map(column => {
|
|
||||||
if (!column.width) {
|
|
||||||
column.width = column.naturalWidth;
|
|
||||||
}
|
|
||||||
if (column.width < column.minWidth) {
|
|
||||||
column.width = column.minWidth;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
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.__cellHeightSet) return;
|
|
||||||
const height = this.options.cellHeight || $.style($('.data-table-col', this.instance.datatableWrapper), 'height');
|
|
||||||
if (height) {
|
|
||||||
this.setCellHeight(height);
|
|
||||||
this.__cellHeightSet = true;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
setCellHeight(height) {
|
setupNaturalColumnWidth() {
|
||||||
this.setStyle('.data-table-col .content', {
|
if (!$('.data-table-row')) return;
|
||||||
height: height + 'px'
|
|
||||||
});
|
|
||||||
this.setStyle('.data-table-col .edit-cell', {
|
|
||||||
height: height + 'px'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
setColumnStyle() {
|
// set initial width as naturally calculated by table's first row
|
||||||
// align columns
|
$.each('.data-table-row[data-row-index="0"] .data-table-col', this.bodyScrollable).map($cell => {
|
||||||
this.datamanager.getColumns()
|
const {
|
||||||
.map(column => {
|
colIndex
|
||||||
// alignment
|
} = $.data($cell);
|
||||||
if (['left', 'center', 'right'].includes(column.align)) {
|
const column = this.datamanager.getColumn(colIndex);
|
||||||
this.setStyle(`[data-col-index="${column.colIndex}"]`, {
|
|
||||||
'text-align': column.align
|
let naturalWidth = $.style($('.content', $cell), 'width');
|
||||||
});
|
|
||||||
|
if (column.id === '_rowIndex') {
|
||||||
|
// width based on rowCount
|
||||||
|
const rowCount = this.datamanager.getRowCount();
|
||||||
|
const digits = (rowCount + '').length;
|
||||||
|
if (digits > 1) {
|
||||||
|
naturalWidth = naturalWidth + ((digits - 1) * 8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
column.naturalWidth = naturalWidth;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
setupColumnWidth() {
|
||||||
|
this.datamanager.getColumns()
|
||||||
|
.map(column => {
|
||||||
|
if (!column.width) {
|
||||||
|
column.width = column.naturalWidth;
|
||||||
|
}
|
||||||
|
if (column.width < column.minWidth) {
|
||||||
|
column.width = column.minWidth;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
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.__cellHeightSet) return;
|
||||||
|
const height = this.options.cellHeight ||
|
||||||
|
$.style($('.data-table-col', this.instance.datatableWrapper), 'height');
|
||||||
|
if (height) {
|
||||||
|
this.setCellHeight(height);
|
||||||
|
this.__cellHeightSet = true;
|
||||||
}
|
}
|
||||||
// width
|
}
|
||||||
this.columnmanager.setColumnHeaderWidth(column.colIndex);
|
|
||||||
this.columnmanager.setColumnWidth(column.colIndex);
|
|
||||||
});
|
|
||||||
this.setBodyStyle();
|
|
||||||
}
|
|
||||||
|
|
||||||
refreshColumnWidth() {
|
setCellHeight(height) {
|
||||||
this.datamanager.getColumns()
|
this.setStyle('.data-table-col .content', {
|
||||||
.map(column => {
|
height: height + 'px'
|
||||||
this.columnmanager.setColumnHeaderWidth(column.colIndex);
|
});
|
||||||
this.columnmanager.setColumnWidth(column.colIndex);
|
this.setStyle('.data-table-col .edit-cell', {
|
||||||
});
|
height: height + 'px'
|
||||||
}
|
});
|
||||||
|
}
|
||||||
|
|
||||||
setBodyStyle() {
|
setColumnStyle() {
|
||||||
const width = $.style(this.header, 'width');
|
// 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
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// width
|
||||||
|
this.columnmanager.setColumnHeaderWidth(column.colIndex);
|
||||||
|
this.columnmanager.setColumnWidth(column.colIndex);
|
||||||
|
});
|
||||||
|
this.setBodyStyle();
|
||||||
|
}
|
||||||
|
|
||||||
$.style(this.bodyScrollable, {
|
refreshColumnWidth() {
|
||||||
width: width + 'px'
|
this.datamanager.getColumns()
|
||||||
});
|
.map(column => {
|
||||||
|
this.columnmanager.setColumnHeaderWidth(column.colIndex);
|
||||||
|
this.columnmanager.setColumnWidth(column.colIndex);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
$.style(this.bodyScrollable, {
|
setBodyStyle() {
|
||||||
marginTop: $.style(this.header, 'height') + 'px'
|
const width = $.style(this.header, 'width');
|
||||||
});
|
|
||||||
|
|
||||||
$.style($('table', this.bodyScrollable), {
|
$.style(this.bodyScrollable, {
|
||||||
margin: 0
|
width: width + 'px'
|
||||||
});
|
});
|
||||||
}
|
|
||||||
|
|
||||||
getColumnHeaderElement(colIndex) {
|
$.style(this.bodyScrollable, {
|
||||||
colIndex = +colIndex;
|
marginTop: $.style(this.header, 'height') + 'px'
|
||||||
if (colIndex < 0) return null;
|
});
|
||||||
return $(`.data-table-col[data-col-index="${colIndex}"]`, this.header);
|
|
||||||
}
|
$.style($('table', this.bodyScrollable), {
|
||||||
|
margin: 0
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
getColumnHeaderElement(colIndex) {
|
||||||
|
colIndex = +colIndex;
|
||||||
|
if (colIndex < 0) return null;
|
||||||
|
return $(`.data-table-col[data-col-index="${colIndex}"]`, this.header);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user