mirror of
https://github.com/koalyptus/TableFilter.git
synced 2026-03-18 08:29:50 +01:00
highlight each cell of an active column
This commit is contained in:
parent
e661005ff8
commit
68adc86cbc
13 changed files with 56 additions and 18 deletions
|
|
@ -27,6 +27,19 @@ export class MarkActiveColumns extends Feature {
|
|||
this.headerCssClass = defaultsStr(config.header_css_class,
|
||||
'activeHeader');
|
||||
|
||||
/**
|
||||
* Css class for filtered (active) column cells
|
||||
* @type {String}
|
||||
*/
|
||||
this.cellCssClass = defaultsStr(config.cell_css_class,
|
||||
'activeCell');
|
||||
|
||||
/**
|
||||
* Enable/disable column highlighting
|
||||
* @type {Boolean}
|
||||
*/
|
||||
this.highlightColumn = Boolean(config.highlight_column);
|
||||
|
||||
/**
|
||||
* Callback fired before a column is marked as filtered
|
||||
* @type {Function}
|
||||
|
|
@ -67,6 +80,14 @@ export class MarkActiveColumns extends Feature {
|
|||
let tf = this.tf;
|
||||
tf.eachCol((idx) => {
|
||||
removeClass(tf.getHeaderElement(idx), this.headerCssClass);
|
||||
|
||||
if (this.highlightColumn) {
|
||||
tf.dom()
|
||||
.querySelectorAll(`tbody td:nth-child(${idx + 1})`)
|
||||
.forEach((cell) => {
|
||||
removeClass(cell, this.cellCssClass);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -75,14 +96,24 @@ export class MarkActiveColumns extends Feature {
|
|||
* @param {Number} colIndex Column index
|
||||
*/
|
||||
markActiveColumn(colIndex) {
|
||||
let header = this.tf.getHeaderElement(colIndex);
|
||||
let tf = this.tf;
|
||||
let header = tf.getHeaderElement(colIndex);
|
||||
if (hasClass(header, this.headerCssClass)) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.onBeforeActiveColumn(this, colIndex);
|
||||
|
||||
addClass(header, this.headerCssClass);
|
||||
|
||||
if (this.highlightColumn) {
|
||||
tf.dom()
|
||||
.querySelectorAll(`tbody td:nth-child(${colIndex + 1})`)
|
||||
.forEach((cell) => {
|
||||
addClass(cell, this.cellCssClass);
|
||||
});
|
||||
}
|
||||
|
||||
this.onAfterActiveColumn(this, colIndex);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -260,7 +260,7 @@ export class PopupFilter extends Feature {
|
|||
this.fltSpans[i] = icon;
|
||||
this.fltIcons[i] = icon.firstChild;
|
||||
},
|
||||
// break condition function
|
||||
// continue condition function
|
||||
(i) => tf.getFilterType(i) === NONE
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2054,17 +2054,21 @@ export class TableFilter {
|
|||
}
|
||||
|
||||
/**
|
||||
* Column iterator invoking break condition callback if any and then
|
||||
* invoking the callback for each item
|
||||
* Column iterator invoking continue and break condition callbacks if any
|
||||
* then calling supplied callback for each item
|
||||
* @param {Function} [fn=EMPTY_FN] callback
|
||||
* @param {Function} [continueFn=EMPTY_FN] continue condition callback
|
||||
* @param {Function} [breakFn=EMPTY_FN] break condition callback
|
||||
*/
|
||||
eachCol(fn = EMPTY_FN, breakFn = EMPTY_FN) {
|
||||
eachCol(fn = EMPTY_FN, continueFn = EMPTY_FN, breakFn = EMPTY_FN) {
|
||||
let len = this.getCellsNb(this.refRow);
|
||||
for (let i = 0; i < len; i++) {
|
||||
if (breakFn(i) === true) {
|
||||
if (continueFn(i) === true) {
|
||||
continue;
|
||||
}
|
||||
if (breakFn(i) === true) {
|
||||
break;
|
||||
}
|
||||
fn(i);
|
||||
}
|
||||
}
|
||||
|
|
@ -2953,7 +2957,7 @@ export class TableFilter {
|
|||
let headerText = getFirstTextNode(header);
|
||||
headers.push(headerText);
|
||||
},
|
||||
// break condition function
|
||||
// continue condition function
|
||||
(j) => {
|
||||
if (excludeHiddenCols && this.hasExtension('colsVisibility')) {
|
||||
return this.extension('colsVisibility').isColHidden(j);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue