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;
|
||||
}
|
||||
32
dist/frappe-datatable.cjs.js
vendored
32
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';
|
||||
|
||||
/**
|
||||
@ -2799,8 +2774,8 @@ class Style {
|
||||
// width based on rowCount
|
||||
const rowCount = this.datamanager.getRowCount();
|
||||
const digits = (rowCount + '').length;
|
||||
if (digits > 2) {
|
||||
naturalWidth = naturalWidth + ((digits - 2) * 8);
|
||||
if (digits > 1) {
|
||||
naturalWidth = naturalWidth + ((digits - 1) * 8);
|
||||
}
|
||||
}
|
||||
|
||||
@ -2840,7 +2815,8 @@ class Style {
|
||||
|
||||
setDefaultCellHeight() {
|
||||
if (this.__cellHeightSet) return;
|
||||
const height = this.options.cellHeight || $.style($('.data-table-col', this.instance.datatableWrapper), 'height');
|
||||
const height = this.options.cellHeight ||
|
||||
$.style($('.data-table-col', this.instance.datatableWrapper), 'height');
|
||||
if (height) {
|
||||
this.setCellHeight(height);
|
||||
this.__cellHeightSet = true;
|
||||
|
||||
32
dist/frappe-datatable.js
vendored
32
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';
|
||||
|
||||
/**
|
||||
@ -2798,8 +2773,8 @@ class Style {
|
||||
// width based on rowCount
|
||||
const rowCount = this.datamanager.getRowCount();
|
||||
const digits = (rowCount + '').length;
|
||||
if (digits > 2) {
|
||||
naturalWidth = naturalWidth + ((digits - 2) * 8);
|
||||
if (digits > 1) {
|
||||
naturalWidth = naturalWidth + ((digits - 1) * 8);
|
||||
}
|
||||
}
|
||||
|
||||
@ -2839,7 +2814,8 @@ class Style {
|
||||
|
||||
setDefaultCellHeight() {
|
||||
if (this.__cellHeightSet) return;
|
||||
const height = this.options.cellHeight || $.style($('.data-table-col', this.instance.datatableWrapper), 'height');
|
||||
const height = this.options.cellHeight ||
|
||||
$.style($('.data-table-col', this.instance.datatableWrapper), 'height');
|
||||
if (height) {
|
||||
this.setCellHeight(height);
|
||||
this.__cellHeightSet = true;
|
||||
|
||||
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 };
|
||||
}
|
||||
@ -9,7 +9,7 @@ import cssnext from 'postcss-cssnext';
|
||||
|
||||
const dev = {
|
||||
input: 'src/index.js',
|
||||
output: {
|
||||
output: [{
|
||||
file: 'dist/frappe-datatable.js',
|
||||
format: 'iife',
|
||||
name: 'DataTable',
|
||||
@ -17,13 +17,21 @@ const dev = {
|
||||
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',
|
||||
extract: ['dist/frappe-datatable.css', 'docs/frappe-datatable.css'],
|
||||
plugins: [
|
||||
nested(),
|
||||
cssnext()
|
||||
@ -33,9 +41,12 @@ const dev = {
|
||||
external: ['sortablejs', 'clusterize.js']
|
||||
};
|
||||
|
||||
export default [dev, Object.assign({}, dev, {
|
||||
export default [
|
||||
dev,
|
||||
Object.assign({}, dev, {
|
||||
output: {
|
||||
format: 'cjs',
|
||||
file: 'dist/frappe-datatable.cjs.js'
|
||||
}
|
||||
})];
|
||||
})
|
||||
];
|
||||
|
||||
@ -129,8 +129,8 @@ export default class Style {
|
||||
// width based on rowCount
|
||||
const rowCount = this.datamanager.getRowCount();
|
||||
const digits = (rowCount + '').length;
|
||||
if (digits > 2) {
|
||||
naturalWidth = naturalWidth + ((digits - 2) * 8);
|
||||
if (digits > 1) {
|
||||
naturalWidth = naturalWidth + ((digits - 1) * 8);
|
||||
}
|
||||
}
|
||||
|
||||
@ -170,7 +170,8 @@ export default class Style {
|
||||
|
||||
setDefaultCellHeight() {
|
||||
if (this.__cellHeightSet) return;
|
||||
const height = this.options.cellHeight || $.style($('.data-table-col', this.instance.datatableWrapper), 'height');
|
||||
const height = this.options.cellHeight ||
|
||||
$.style($('.data-table-col', this.instance.datatableWrapper), 'height');
|
||||
if (height) {
|
||||
this.setCellHeight(height);
|
||||
this.__cellHeightSet = true;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user