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"],
|
||||
"guard-for-in": 0,
|
||||
"handle-callback-err": [2, "^(err|error|anySpecificError)$" ],
|
||||
"indent": [2, 2, { "SwitchCase": 1 }],
|
||||
"indent": [2, 4, { "SwitchCase": 1 }],
|
||||
"key-spacing": [2, { "beforeColon": false, "afterColon": true }],
|
||||
"keyword-spacing": [2, {"before": true, "after": true}],
|
||||
"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 : {};
|
||||
|
||||
/** Detect free variable `global` from Node.js. */
|
||||
var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
|
||||
|
||||
var _freeGlobal = freeGlobal;
|
||||
|
||||
/** Detect free variable `self`. */
|
||||
var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
|
||||
|
||||
/** Used as a reference to the global object. */
|
||||
@ -224,34 +222,16 @@ var root = _freeGlobal || freeSelf || Function('return this')();
|
||||
|
||||
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() {
|
||||
return _root.Date.now();
|
||||
};
|
||||
|
||||
var now_1 = now;
|
||||
|
||||
/** Built-in value references. */
|
||||
var Symbol = _root.Symbol;
|
||||
|
||||
var _Symbol = Symbol;
|
||||
|
||||
/** Used for built-in method references. */
|
||||
var objectProto = Object.prototype;
|
||||
|
||||
/** Used to check objects for own properties. */
|
||||
@ -319,7 +299,6 @@ function objectToString(value) {
|
||||
|
||||
var _objectToString = objectToString;
|
||||
|
||||
/** `Object#toString` result references. */
|
||||
var nullTag = '[object Null]';
|
||||
var undefinedTag = '[object Undefined]';
|
||||
|
||||
@ -374,7 +353,6 @@ function isObjectLike(value) {
|
||||
|
||||
var isObjectLike_1 = isObjectLike;
|
||||
|
||||
/** `Object#toString` result references. */
|
||||
var symbolTag = '[object Symbol]';
|
||||
|
||||
/**
|
||||
@ -401,7 +379,6 @@ function isSymbol(value) {
|
||||
|
||||
var isSymbol_1 = isSymbol;
|
||||
|
||||
/** Used as references for various `Number` constants. */
|
||||
var NAN = 0 / 0;
|
||||
|
||||
/** Used to match leading and trailing whitespace. */
|
||||
@ -465,7 +442,6 @@ function toNumber(value) {
|
||||
|
||||
var toNumber_1 = toNumber;
|
||||
|
||||
/** Error message constants. */
|
||||
var FUNC_ERROR_TEXT = 'Expected a function';
|
||||
|
||||
/* 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;
|
||||
|
||||
/** Error message constants. */
|
||||
var FUNC_ERROR_TEXT$1 = 'Expected a function';
|
||||
|
||||
/**
|
||||
@ -2676,232 +2651,233 @@ function getBodyHTML(rows) {
|
||||
}
|
||||
|
||||
class Style {
|
||||
constructor(instance) {
|
||||
this.instance = instance;
|
||||
constructor(instance) {
|
||||
this.instance = instance;
|
||||
|
||||
linkProperties(this, this.instance, [
|
||||
'options', 'datamanager', 'columnmanager',
|
||||
'header', 'bodyScrollable', 'getColumn'
|
||||
]);
|
||||
linkProperties(this, this.instance, [
|
||||
'options', 'datamanager', 'columnmanager',
|
||||
'header', 'bodyScrollable', 'getColumn'
|
||||
]);
|
||||
|
||||
this.scopeClass = 'datatable-instance-' + instance.constructor.instances;
|
||||
instance.datatableWrapper.classList.add(this.scopeClass);
|
||||
this.scopeClass = 'datatable-instance-' + instance.constructor.instances;
|
||||
instance.datatableWrapper.classList.add(this.scopeClass);
|
||||
|
||||
const styleEl = document.createElement('style');
|
||||
instance.wrapper.insertBefore(styleEl, instance.datatableWrapper);
|
||||
this.styleEl = styleEl;
|
||||
this.styleSheet = styleEl.sheet;
|
||||
const styleEl = document.createElement('style');
|
||||
instance.wrapper.insertBefore(styleEl, instance.datatableWrapper);
|
||||
this.styleEl = styleEl;
|
||||
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.refreshColumnWidth();
|
||||
this.setColumnStyle();
|
||||
this.setDefaultCellHeight();
|
||||
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;
|
||||
}
|
||||
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
|
||||
});
|
||||
}
|
||||
|
||||
setDimensions() {
|
||||
this.setHeaderStyle();
|
||||
$.style(this.header, {
|
||||
margin: 0
|
||||
});
|
||||
|
||||
this.setupMinWidth();
|
||||
this.setupNaturalColumnWidth();
|
||||
this.setupColumnWidth();
|
||||
// don't show resize cursor on nonResizable columns
|
||||
const nonResizableColumnsSelector = this.datamanager.getColumns()
|
||||
.filter(col => col.resizable === false)
|
||||
.map(col => col.colIndex)
|
||||
.map(i => `.data-table-header [data-col-index="${i}"]`)
|
||||
.join();
|
||||
|
||||
this.distributeRemainingWidth();
|
||||
this.setColumnStyle();
|
||||
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
|
||||
});
|
||||
this.setStyle(nonResizableColumnsSelector, {
|
||||
cursor: 'pointer'
|
||||
});
|
||||
}
|
||||
|
||||
$.style(this.header, {
|
||||
margin: 0
|
||||
});
|
||||
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);
|
||||
|
||||
// don't show resize cursor on nonResizable columns
|
||||
const nonResizableColumnsSelector = this.datamanager.getColumns()
|
||||
.filter(col => col.resizable === false)
|
||||
.map(col => col.colIndex)
|
||||
.map(i => `.data-table-header [data-col-index="${i}"]`)
|
||||
.join();
|
||||
|
||||
this.setStyle(nonResizableColumnsSelector, {
|
||||
cursor: 'pointer'
|
||||
});
|
||||
}
|
||||
|
||||
setupMinWidth() {
|
||||
$.each('.data-table-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;
|
||||
if (!column.minWidth) {
|
||||
// only set this once
|
||||
column.minWidth = width;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
setCellHeight(height) {
|
||||
this.setStyle('.data-table-col .content', {
|
||||
height: height + 'px'
|
||||
});
|
||||
this.setStyle('.data-table-col .edit-cell', {
|
||||
height: height + 'px'
|
||||
});
|
||||
}
|
||||
setupNaturalColumnWidth() {
|
||||
if (!$('.data-table-row')) return;
|
||||
|
||||
setColumnStyle() {
|
||||
// align columns
|
||||
this.datamanager.getColumns()
|
||||
.map(column => {
|
||||
// alignment
|
||||
if (['left', 'center', 'right'].includes(column.align)) {
|
||||
this.setStyle(`[data-col-index="${column.colIndex}"]`, {
|
||||
'text-align': column.align
|
||||
});
|
||||
// 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 > 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() {
|
||||
this.datamanager.getColumns()
|
||||
.map(column => {
|
||||
this.columnmanager.setColumnHeaderWidth(column.colIndex);
|
||||
this.columnmanager.setColumnWidth(column.colIndex);
|
||||
});
|
||||
}
|
||||
setCellHeight(height) {
|
||||
this.setStyle('.data-table-col .content', {
|
||||
height: height + 'px'
|
||||
});
|
||||
this.setStyle('.data-table-col .edit-cell', {
|
||||
height: height + 'px'
|
||||
});
|
||||
}
|
||||
|
||||
setBodyStyle() {
|
||||
const width = $.style(this.header, 'width');
|
||||
setColumnStyle() {
|
||||
// align columns
|
||||
this.datamanager.getColumns()
|
||||
.map(column => {
|
||||
// alignment
|
||||
if (['left', 'center', 'right'].includes(column.align)) {
|
||||
this.setStyle(`[data-col-index="${column.colIndex}"]`, {
|
||||
'text-align': column.align
|
||||
});
|
||||
}
|
||||
// width
|
||||
this.columnmanager.setColumnHeaderWidth(column.colIndex);
|
||||
this.columnmanager.setColumnWidth(column.colIndex);
|
||||
});
|
||||
this.setBodyStyle();
|
||||
}
|
||||
|
||||
$.style(this.bodyScrollable, {
|
||||
width: width + 'px'
|
||||
});
|
||||
refreshColumnWidth() {
|
||||
this.datamanager.getColumns()
|
||||
.map(column => {
|
||||
this.columnmanager.setColumnHeaderWidth(column.colIndex);
|
||||
this.columnmanager.setColumnWidth(column.colIndex);
|
||||
});
|
||||
}
|
||||
|
||||
$.style(this.bodyScrollable, {
|
||||
marginTop: $.style(this.header, 'height') + 'px'
|
||||
});
|
||||
setBodyStyle() {
|
||||
const width = $.style(this.header, 'width');
|
||||
|
||||
$.style($('table', this.bodyScrollable), {
|
||||
margin: 0
|
||||
});
|
||||
}
|
||||
$.style(this.bodyScrollable, {
|
||||
width: width + 'px'
|
||||
});
|
||||
|
||||
getColumnHeaderElement(colIndex) {
|
||||
colIndex = +colIndex;
|
||||
if (colIndex < 0) return null;
|
||||
return $(`.data-table-col[data-col-index="${colIndex}"]`, this.header);
|
||||
}
|
||||
$.style(this.bodyScrollable, {
|
||||
marginTop: $.style(this.header, 'height') + 'px'
|
||||
});
|
||||
|
||||
$.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 = {
|
||||
|
||||
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 : {};
|
||||
|
||||
/** Detect free variable `global` from Node.js. */
|
||||
var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
|
||||
|
||||
var _freeGlobal = freeGlobal;
|
||||
|
||||
/** Detect free variable `self`. */
|
||||
var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
|
||||
|
||||
/** Used as a reference to the global object. */
|
||||
@ -223,34 +221,16 @@ var root = _freeGlobal || freeSelf || Function('return this')();
|
||||
|
||||
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() {
|
||||
return _root.Date.now();
|
||||
};
|
||||
|
||||
var now_1 = now;
|
||||
|
||||
/** Built-in value references. */
|
||||
var Symbol = _root.Symbol;
|
||||
|
||||
var _Symbol = Symbol;
|
||||
|
||||
/** Used for built-in method references. */
|
||||
var objectProto = Object.prototype;
|
||||
|
||||
/** Used to check objects for own properties. */
|
||||
@ -318,7 +298,6 @@ function objectToString(value) {
|
||||
|
||||
var _objectToString = objectToString;
|
||||
|
||||
/** `Object#toString` result references. */
|
||||
var nullTag = '[object Null]';
|
||||
var undefinedTag = '[object Undefined]';
|
||||
|
||||
@ -373,7 +352,6 @@ function isObjectLike(value) {
|
||||
|
||||
var isObjectLike_1 = isObjectLike;
|
||||
|
||||
/** `Object#toString` result references. */
|
||||
var symbolTag = '[object Symbol]';
|
||||
|
||||
/**
|
||||
@ -400,7 +378,6 @@ function isSymbol(value) {
|
||||
|
||||
var isSymbol_1 = isSymbol;
|
||||
|
||||
/** Used as references for various `Number` constants. */
|
||||
var NAN = 0 / 0;
|
||||
|
||||
/** Used to match leading and trailing whitespace. */
|
||||
@ -464,7 +441,6 @@ function toNumber(value) {
|
||||
|
||||
var toNumber_1 = toNumber;
|
||||
|
||||
/** Error message constants. */
|
||||
var FUNC_ERROR_TEXT = 'Expected a function';
|
||||
|
||||
/* 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;
|
||||
|
||||
/** Error message constants. */
|
||||
var FUNC_ERROR_TEXT$1 = 'Expected a function';
|
||||
|
||||
/**
|
||||
@ -2675,232 +2650,233 @@ function getBodyHTML(rows) {
|
||||
}
|
||||
|
||||
class Style {
|
||||
constructor(instance) {
|
||||
this.instance = instance;
|
||||
constructor(instance) {
|
||||
this.instance = instance;
|
||||
|
||||
linkProperties(this, this.instance, [
|
||||
'options', 'datamanager', 'columnmanager',
|
||||
'header', 'bodyScrollable', 'getColumn'
|
||||
]);
|
||||
linkProperties(this, this.instance, [
|
||||
'options', 'datamanager', 'columnmanager',
|
||||
'header', 'bodyScrollable', 'getColumn'
|
||||
]);
|
||||
|
||||
this.scopeClass = 'datatable-instance-' + instance.constructor.instances;
|
||||
instance.datatableWrapper.classList.add(this.scopeClass);
|
||||
this.scopeClass = 'datatable-instance-' + instance.constructor.instances;
|
||||
instance.datatableWrapper.classList.add(this.scopeClass);
|
||||
|
||||
const styleEl = document.createElement('style');
|
||||
instance.wrapper.insertBefore(styleEl, instance.datatableWrapper);
|
||||
this.styleEl = styleEl;
|
||||
this.styleSheet = styleEl.sheet;
|
||||
const styleEl = document.createElement('style');
|
||||
instance.wrapper.insertBefore(styleEl, instance.datatableWrapper);
|
||||
this.styleEl = styleEl;
|
||||
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.refreshColumnWidth();
|
||||
this.setColumnStyle();
|
||||
this.setDefaultCellHeight();
|
||||
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;
|
||||
}
|
||||
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
|
||||
});
|
||||
}
|
||||
|
||||
setDimensions() {
|
||||
this.setHeaderStyle();
|
||||
$.style(this.header, {
|
||||
margin: 0
|
||||
});
|
||||
|
||||
this.setupMinWidth();
|
||||
this.setupNaturalColumnWidth();
|
||||
this.setupColumnWidth();
|
||||
// don't show resize cursor on nonResizable columns
|
||||
const nonResizableColumnsSelector = this.datamanager.getColumns()
|
||||
.filter(col => col.resizable === false)
|
||||
.map(col => col.colIndex)
|
||||
.map(i => `.data-table-header [data-col-index="${i}"]`)
|
||||
.join();
|
||||
|
||||
this.distributeRemainingWidth();
|
||||
this.setColumnStyle();
|
||||
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
|
||||
});
|
||||
this.setStyle(nonResizableColumnsSelector, {
|
||||
cursor: 'pointer'
|
||||
});
|
||||
}
|
||||
|
||||
$.style(this.header, {
|
||||
margin: 0
|
||||
});
|
||||
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);
|
||||
|
||||
// don't show resize cursor on nonResizable columns
|
||||
const nonResizableColumnsSelector = this.datamanager.getColumns()
|
||||
.filter(col => col.resizable === false)
|
||||
.map(col => col.colIndex)
|
||||
.map(i => `.data-table-header [data-col-index="${i}"]`)
|
||||
.join();
|
||||
|
||||
this.setStyle(nonResizableColumnsSelector, {
|
||||
cursor: 'pointer'
|
||||
});
|
||||
}
|
||||
|
||||
setupMinWidth() {
|
||||
$.each('.data-table-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;
|
||||
if (!column.minWidth) {
|
||||
// only set this once
|
||||
column.minWidth = width;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
setCellHeight(height) {
|
||||
this.setStyle('.data-table-col .content', {
|
||||
height: height + 'px'
|
||||
});
|
||||
this.setStyle('.data-table-col .edit-cell', {
|
||||
height: height + 'px'
|
||||
});
|
||||
}
|
||||
setupNaturalColumnWidth() {
|
||||
if (!$('.data-table-row')) return;
|
||||
|
||||
setColumnStyle() {
|
||||
// align columns
|
||||
this.datamanager.getColumns()
|
||||
.map(column => {
|
||||
// alignment
|
||||
if (['left', 'center', 'right'].includes(column.align)) {
|
||||
this.setStyle(`[data-col-index="${column.colIndex}"]`, {
|
||||
'text-align': column.align
|
||||
});
|
||||
// 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 > 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() {
|
||||
this.datamanager.getColumns()
|
||||
.map(column => {
|
||||
this.columnmanager.setColumnHeaderWidth(column.colIndex);
|
||||
this.columnmanager.setColumnWidth(column.colIndex);
|
||||
});
|
||||
}
|
||||
setCellHeight(height) {
|
||||
this.setStyle('.data-table-col .content', {
|
||||
height: height + 'px'
|
||||
});
|
||||
this.setStyle('.data-table-col .edit-cell', {
|
||||
height: height + 'px'
|
||||
});
|
||||
}
|
||||
|
||||
setBodyStyle() {
|
||||
const width = $.style(this.header, 'width');
|
||||
setColumnStyle() {
|
||||
// align columns
|
||||
this.datamanager.getColumns()
|
||||
.map(column => {
|
||||
// alignment
|
||||
if (['left', 'center', 'right'].includes(column.align)) {
|
||||
this.setStyle(`[data-col-index="${column.colIndex}"]`, {
|
||||
'text-align': column.align
|
||||
});
|
||||
}
|
||||
// width
|
||||
this.columnmanager.setColumnHeaderWidth(column.colIndex);
|
||||
this.columnmanager.setColumnWidth(column.colIndex);
|
||||
});
|
||||
this.setBodyStyle();
|
||||
}
|
||||
|
||||
$.style(this.bodyScrollable, {
|
||||
width: width + 'px'
|
||||
});
|
||||
refreshColumnWidth() {
|
||||
this.datamanager.getColumns()
|
||||
.map(column => {
|
||||
this.columnmanager.setColumnHeaderWidth(column.colIndex);
|
||||
this.columnmanager.setColumnWidth(column.colIndex);
|
||||
});
|
||||
}
|
||||
|
||||
$.style(this.bodyScrollable, {
|
||||
marginTop: $.style(this.header, 'height') + 'px'
|
||||
});
|
||||
setBodyStyle() {
|
||||
const width = $.style(this.header, 'width');
|
||||
|
||||
$.style($('table', this.bodyScrollable), {
|
||||
margin: 0
|
||||
});
|
||||
}
|
||||
$.style(this.bodyScrollable, {
|
||||
width: width + 'px'
|
||||
});
|
||||
|
||||
getColumnHeaderElement(colIndex) {
|
||||
colIndex = +colIndex;
|
||||
if (colIndex < 0) return null;
|
||||
return $(`.data-table-col[data-col-index="${colIndex}"]`, this.header);
|
||||
}
|
||||
$.style(this.bodyScrollable, {
|
||||
marginTop: $.style(this.header, 'height') + 'px'
|
||||
});
|
||||
|
||||
$.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 = {
|
||||
|
||||
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';
|
||||
|
||||
const dev = {
|
||||
input: 'src/index.js',
|
||||
output: {
|
||||
file: 'dist/frappe-datatable.js',
|
||||
format: 'iife',
|
||||
name: 'DataTable',
|
||||
globals: {
|
||||
sortablejs: 'Sortable',
|
||||
'clusterize.js': 'Clusterize'
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
json(),
|
||||
nodeResolve(),
|
||||
commonjs(),
|
||||
postcss({
|
||||
extract: 'dist/frappe-datatable.css',
|
||||
plugins: [
|
||||
nested(),
|
||||
cssnext()
|
||||
]
|
||||
})
|
||||
],
|
||||
external: ['sortablejs', 'clusterize.js']
|
||||
input: 'src/index.js',
|
||||
output: [{
|
||||
file: 'dist/frappe-datatable.js',
|
||||
format: 'iife',
|
||||
name: 'DataTable',
|
||||
globals: {
|
||||
sortablejs: 'Sortable',
|
||||
'clusterize.js': 'Clusterize'
|
||||
}
|
||||
}, {
|
||||
file: 'docs/frappe-datatable.js',
|
||||
format: 'iife',
|
||||
name: 'DataTable',
|
||||
globals: {
|
||||
sortablejs: 'Sortable',
|
||||
'clusterize.js': 'Clusterize'
|
||||
}
|
||||
}],
|
||||
plugins: [
|
||||
json(),
|
||||
nodeResolve(),
|
||||
commonjs(),
|
||||
postcss({
|
||||
extract: ['dist/frappe-datatable.css', 'docs/frappe-datatable.css'],
|
||||
plugins: [
|
||||
nested(),
|
||||
cssnext()
|
||||
]
|
||||
})
|
||||
],
|
||||
external: ['sortablejs', 'clusterize.js']
|
||||
};
|
||||
|
||||
export default [dev, Object.assign({}, dev, {
|
||||
output: {
|
||||
format: 'cjs',
|
||||
file: 'dist/frappe-datatable.cjs.js'
|
||||
}
|
||||
})];
|
||||
export default [
|
||||
dev,
|
||||
Object.assign({}, dev, {
|
||||
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 {
|
||||
camelCaseToDash,
|
||||
linkProperties,
|
||||
throttle
|
||||
camelCaseToDash,
|
||||
linkProperties,
|
||||
throttle
|
||||
} from './utils';
|
||||
|
||||
export default class Style {
|
||||
constructor(instance) {
|
||||
this.instance = instance;
|
||||
constructor(instance) {
|
||||
this.instance = instance;
|
||||
|
||||
linkProperties(this, this.instance, [
|
||||
'options', 'datamanager', 'columnmanager',
|
||||
'header', 'bodyScrollable', 'getColumn'
|
||||
]);
|
||||
linkProperties(this, this.instance, [
|
||||
'options', 'datamanager', 'columnmanager',
|
||||
'header', 'bodyScrollable', 'getColumn'
|
||||
]);
|
||||
|
||||
this.scopeClass = 'datatable-instance-' + instance.constructor.instances;
|
||||
instance.datatableWrapper.classList.add(this.scopeClass);
|
||||
this.scopeClass = 'datatable-instance-' + instance.constructor.instances;
|
||||
instance.datatableWrapper.classList.add(this.scopeClass);
|
||||
|
||||
const styleEl = document.createElement('style');
|
||||
instance.wrapper.insertBefore(styleEl, instance.datatableWrapper);
|
||||
this.styleEl = styleEl;
|
||||
this.styleSheet = styleEl.sheet;
|
||||
const styleEl = document.createElement('style');
|
||||
instance.wrapper.insertBefore(styleEl, instance.datatableWrapper);
|
||||
this.styleEl = styleEl;
|
||||
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.refreshColumnWidth();
|
||||
this.setColumnStyle();
|
||||
this.setDefaultCellHeight();
|
||||
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;
|
||||
}
|
||||
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
|
||||
});
|
||||
}
|
||||
|
||||
setDimensions() {
|
||||
this.setHeaderStyle();
|
||||
$.style(this.header, {
|
||||
margin: 0
|
||||
});
|
||||
|
||||
this.setupMinWidth();
|
||||
this.setupNaturalColumnWidth();
|
||||
this.setupColumnWidth();
|
||||
// don't show resize cursor on nonResizable columns
|
||||
const nonResizableColumnsSelector = this.datamanager.getColumns()
|
||||
.filter(col => col.resizable === false)
|
||||
.map(col => col.colIndex)
|
||||
.map(i => `.data-table-header [data-col-index="${i}"]`)
|
||||
.join();
|
||||
|
||||
this.distributeRemainingWidth();
|
||||
this.setColumnStyle();
|
||||
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
|
||||
});
|
||||
this.setStyle(nonResizableColumnsSelector, {
|
||||
cursor: 'pointer'
|
||||
});
|
||||
}
|
||||
|
||||
$.style(this.header, {
|
||||
margin: 0
|
||||
});
|
||||
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);
|
||||
|
||||
// don't show resize cursor on nonResizable columns
|
||||
const nonResizableColumnsSelector = this.datamanager.getColumns()
|
||||
.filter(col => col.resizable === false)
|
||||
.map(col => col.colIndex)
|
||||
.map(i => `.data-table-header [data-col-index="${i}"]`)
|
||||
.join();
|
||||
|
||||
this.setStyle(nonResizableColumnsSelector, {
|
||||
cursor: 'pointer'
|
||||
});
|
||||
}
|
||||
|
||||
setupMinWidth() {
|
||||
$.each('.data-table-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;
|
||||
if (!column.minWidth) {
|
||||
// only set this once
|
||||
column.minWidth = width;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
setCellHeight(height) {
|
||||
this.setStyle('.data-table-col .content', {
|
||||
height: height + 'px'
|
||||
});
|
||||
this.setStyle('.data-table-col .edit-cell', {
|
||||
height: height + 'px'
|
||||
});
|
||||
}
|
||||
setupNaturalColumnWidth() {
|
||||
if (!$('.data-table-row')) return;
|
||||
|
||||
setColumnStyle() {
|
||||
// align columns
|
||||
this.datamanager.getColumns()
|
||||
.map(column => {
|
||||
// alignment
|
||||
if (['left', 'center', 'right'].includes(column.align)) {
|
||||
this.setStyle(`[data-col-index="${column.colIndex}"]`, {
|
||||
'text-align': column.align
|
||||
});
|
||||
// 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 > 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() {
|
||||
this.datamanager.getColumns()
|
||||
.map(column => {
|
||||
this.columnmanager.setColumnHeaderWidth(column.colIndex);
|
||||
this.columnmanager.setColumnWidth(column.colIndex);
|
||||
});
|
||||
}
|
||||
setCellHeight(height) {
|
||||
this.setStyle('.data-table-col .content', {
|
||||
height: height + 'px'
|
||||
});
|
||||
this.setStyle('.data-table-col .edit-cell', {
|
||||
height: height + 'px'
|
||||
});
|
||||
}
|
||||
|
||||
setBodyStyle() {
|
||||
const width = $.style(this.header, 'width');
|
||||
setColumnStyle() {
|
||||
// align columns
|
||||
this.datamanager.getColumns()
|
||||
.map(column => {
|
||||
// alignment
|
||||
if (['left', 'center', 'right'].includes(column.align)) {
|
||||
this.setStyle(`[data-col-index="${column.colIndex}"]`, {
|
||||
'text-align': column.align
|
||||
});
|
||||
}
|
||||
// width
|
||||
this.columnmanager.setColumnHeaderWidth(column.colIndex);
|
||||
this.columnmanager.setColumnWidth(column.colIndex);
|
||||
});
|
||||
this.setBodyStyle();
|
||||
}
|
||||
|
||||
$.style(this.bodyScrollable, {
|
||||
width: width + 'px'
|
||||
});
|
||||
refreshColumnWidth() {
|
||||
this.datamanager.getColumns()
|
||||
.map(column => {
|
||||
this.columnmanager.setColumnHeaderWidth(column.colIndex);
|
||||
this.columnmanager.setColumnWidth(column.colIndex);
|
||||
});
|
||||
}
|
||||
|
||||
$.style(this.bodyScrollable, {
|
||||
marginTop: $.style(this.header, 'height') + 'px'
|
||||
});
|
||||
setBodyStyle() {
|
||||
const width = $.style(this.header, 'width');
|
||||
|
||||
$.style($('table', this.bodyScrollable), {
|
||||
margin: 0
|
||||
});
|
||||
}
|
||||
$.style(this.bodyScrollable, {
|
||||
width: width + 'px'
|
||||
});
|
||||
|
||||
getColumnHeaderElement(colIndex) {
|
||||
colIndex = +colIndex;
|
||||
if (colIndex < 0) return null;
|
||||
return $(`.data-table-col[data-col-index="${colIndex}"]`, this.header);
|
||||
}
|
||||
$.style(this.bodyScrollable, {
|
||||
marginTop: $.style(this.header, 'height') + 'px'
|
||||
});
|
||||
|
||||
$.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