Skip to content

Commit c4cb700

Browse files
colinautcolinaut
authored
Merge branch 'main' into edits-in-readme
2 parents 20d4ee9 + 88f70a4 commit c4cb700

18 files changed

+94
-34
lines changed

‎README.md

+2
Original file line numberDiff line numberDiff line change
@@ -158,6 +158,8 @@ Custom dual range slider element for filtering by number ranges. Can only be use
158158

159159
Just add `<input type="search name="column name" />` and action-table-filters will listen for input changes and filter the results. This uses "input" event as default but if you prefer blur then add `data-event="blur"` attribute to the input field.
160160

161+
If you want to search every column then use `name="action-table"`. By default this searches every column. You can limit this search by adding the columns to be searched as a comma separated string as such to the search input element. `data-cols="column,column2"`.
162+
161163
### Action Table Filter Reset
162164

163165
Just add a `<button type="reset" disabled>Reset</button>` and action-table-filters will trigger a reset for all filters on button press. The reset button will automatically be enabled/disabled based on whether the table is filtered.

‎dist/action-table-filters.js

+4-4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/action-table-filters.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/action-table.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/action-table.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/index.html

+4
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,10 @@ <h4>Action Table Filter Search</h4>
107107
<label for="action-table-search">Search Whole Table</label>
108108
<input id="action-table-search" name="action-table" type="search" placeholder="Search" size="14" />
109109
</div>
110+
<div>
111+
<label for="action-table-partial-search">Search Animal/Name Cols</label>
112+
<input id="action-table-partial-search" name="action-table" type="search" placeholder="Search" size="14" data-cols="Animal,Name" />
113+
</div>
110114
</div>
111115
<div class="w-full">
112116
<h4>Action Table Filter Range</h4>

‎docs/action-table-filters.js

+4-4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/action-table-filters.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/action-table.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/action-table.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/index.html

+4
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,10 @@ <h4>Action Table Filter Search</h4>
107107
<label for="action-table-search">Search Whole Table</label>
108108
<input id="action-table-search" name="action-table" type="search" placeholder="Search" size="14" />
109109
</div>
110+
<div>
111+
<label for="action-table-partial-search">Search Animal/Name Cols</label>
112+
<input id="action-table-partial-search" name="action-table" type="search" placeholder="Search" size="14" data-cols="Animal,Name" />
113+
</div>
110114
</div>
111115
<div class="w-full">
112116
<h4>Action Table Filter Range</h4>

‎index.html

+4
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,10 @@ <h4>Action Table Filter Search</h4>
104104
<label for="action-table-search">Search Whole Table</label>
105105
<input id="action-table-search" name="action-table" type="search" placeholder="Search" size="14" />
106106
</div>
107+
<div>
108+
<label for="action-table-partial-search">Search Animal/Name Cols</label>
109+
<input id="action-table-partial-search" name="action-table" type="search" placeholder="Search" size="14" data-cols="Animal,Name" />
110+
</div>
107111
</div>
108112
<div class="w-full">
109113
<h4>Action Table Filter Range</h4>

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@colinaut/action-table",
3-
"version": "2.4.16",
3+
"version": "2.4.18",
44
"description": "",
55
"keywords": [
66
"web components",

‎src/action-table-filter-menu.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export class ActionTableFilterMenu extends HTMLElement {
3232
// 8. Review all cells for filter values
3333
Array.from(cells).forEach((cell) => {
3434
const subItems = cell.querySelectorAll(`span, ul > li`) as NodeListOf<HTMLElement>;
35-
if (subItems?.length > 0) {
35+
if (!cell.dataset.filter && subItems?.length > 0) {
3636
// 8.3 If subitems exist, get all options in subitems
3737
const subOptions = Array.from(subItems).map((item) => item.textContent || "");
3838
options = options.concat(subOptions);

‎src/action-table-filters.ts

+15-7
Original file line numberDiff line numberDiff line change
@@ -40,18 +40,22 @@ export class ActionTableFilters extends HTMLElement {
4040
/* -------------------------------------------------------------------------- */
4141

4242
private addEventListeners(): void {
43+
const hasAttr = (el: HTMLElement, attr: string) => {
44+
return el.hasAttribute(attr) || !!el.closest(`[${attr}]`);
45+
};
4346
/* ------------ Event Listeners for select/checkbox/radio ------------ */
4447
this.addEventListener("input", (e) => {
4548
const el = e.target;
4649
if (el instanceof HTMLSelectElement || el instanceof HTMLInputElement) {
47-
const exclusive = el.hasAttribute("exclusive") || !!el.closest("[exclusive]");
48-
const regex = el.hasAttribute("regex") || !!el.closest("[regex]");
49-
const exact = el.hasAttribute("exact") || !!el.closest("[exact]");
50+
const exclusive = hasAttr(el, "exclusive");
51+
const regex = hasAttr(el, "regex");
52+
const exact = hasAttr(el, "exact");
53+
const cols = el.dataset.cols ? el.dataset.cols.toLowerCase().split(",") : undefined;
5054
const columnName = el.name.toLowerCase();
5155
if (el instanceof HTMLSelectElement) {
5256
this.toggleHighlight(el);
5357
const selectedOptions = Array.from(el.selectedOptions).map((option) => option.value);
54-
this.dispatch({ [columnName]: { values: selectedOptions, exclusive, regex, exact } });
58+
this.dispatch({ [columnName]: { values: selectedOptions, exclusive, regex, exact, cols } });
5559
}
5660
if (el instanceof HTMLInputElement) {
5761
if (el.type === "checkbox") {
@@ -62,10 +66,10 @@ export class ActionTableFilters extends HTMLElement {
6266
return e.checked;
6367
})
6468
.map((checkbox) => checkbox.value);
65-
this.dispatch({ [columnName]: { values: checkboxValues, exclusive, regex, exact } });
69+
this.dispatch({ [columnName]: { values: checkboxValues, exclusive, regex, exact, cols } });
6670
}
6771
if (el.type === "radio") {
68-
this.dispatch({ [columnName]: { values: [el.value], exclusive, regex, exact } });
72+
this.dispatch({ [columnName]: { values: [el.value], exclusive, regex, exact, cols } });
6973
}
7074
if (el.type === "range") {
7175
const sliders = this.querySelectorAll("input[type=range][name='" + el.name + "']") as NodeListOf<HTMLInputElement>;
@@ -107,7 +111,11 @@ export class ActionTableFilters extends HTMLElement {
107111
const event = el.dataset.event || "input";
108112
el.addEventListener(event, () => {
109113
this.toggleHighlight(el);
110-
const debouncedFilter = debounce(() => this.dispatch({ [el.name]: { values: [el.value] } }));
114+
const exclusive = hasAttr(el, "exclusive");
115+
const regex = hasAttr(el, "regex");
116+
const exact = hasAttr(el, "exact");
117+
const cols = el.dataset.cols ? el.dataset.cols.toLowerCase().split(",") : undefined;
118+
const debouncedFilter = debounce(() => this.dispatch({ [el.name]: { values: [el.value], exclusive, regex, exact, cols } }));
111119
debouncedFilter();
112120
});
113121
});

‎src/action-table.ts

+20-11
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,8 @@ export class ActionTable extends HTMLElement {
153153
// casting type as we know it exists due to querySelector above
154154
this.tbody = table.querySelector("tbody") as HTMLTableSectionElement;
155155
this.rows = Array.from(this.tbody.querySelectorAll("tr")) as Array<HTMLTableRowElement>;
156+
// add each row to rowsSet
157+
this.rowsSet = new Set(this.rows);
156158
} else {
157159
throw new Error("Could not find table with thead and tbody");
158160
}
@@ -167,7 +169,7 @@ export class ActionTable extends HTMLElement {
167169
this.addObserver();
168170

169171
console.timeEnd("Connected Callback");
170-
console.log(this.store);
172+
console.log("store:", this.store);
171173
}
172174

173175
/* -------------------------------------------------------------------------- */
@@ -373,7 +375,7 @@ export class ActionTable extends HTMLElement {
373375
/* -------------------------------------------------------------------------- */
374376

375377
private getColumns(): void {
376-
console.time("getColumns");
378+
// console.time("getColumns");
377379
// 1. Get column headers
378380
// casting type as we know what it is from selector
379381
const ths = this.table.querySelectorAll("thead th") as NodeListOf<HTMLTableCellElement>;
@@ -410,7 +412,7 @@ export class ActionTable extends HTMLElement {
410412
}
411413
// console.log("action-table cols", this.cols);
412414
// 8. Return cols array
413-
console.timeEnd("getColumns");
415+
// console.timeEnd("getColumns");
414416
}
415417

416418
/* -------------------------------------------------------------------------- */
@@ -453,8 +455,8 @@ export class ActionTable extends HTMLElement {
453455
// @ts-expect-error has checks for data
454456
return this.tableContent.get(cell);
455457
} else {
456-
// console.log("getCellValues: Set");
457458
const cellValues = this.setCellValues(cell);
459+
// console.log("getCellValues: Set", cellValues);
458460
return cellValues;
459461
}
460462
}
@@ -541,9 +543,14 @@ export class ActionTable extends HTMLElement {
541543
if (filterForWholeRow) {
542544
// 3.3.1 build string of all td data-filter values, ignoring checkboxes
543545
// console.log("filterForWholeRow");
544-
const content = Array.from(cells)
545-
.map((cell) => (cell.querySelector('input[type="checkbox"]') ? "" : this.getCellValues(cell).filter))
546-
.join(" ");
546+
// TODO: add ability to only filter some columns data-ignore with name or index or data-only attribute
547+
const cellsFiltered = Array.from(cells).filter((_c, i) => {
548+
console.log("🚀 ~ ActionTable ~ this.cols[i].name:", this.filters["action-table"].cols, this.cols[i].name);
549+
return this.filters["action-table"].cols ? this.filters["action-table"].cols.includes(this.cols[i].name.toLowerCase()) : true;
550+
});
551+
console.log("🚀 ~ ActionTable ~ this.rows.forEach ~ cellsFiltered:", cellsFiltered);
552+
553+
const content = cellsFiltered.map((cell) => (cell.querySelector('input[type="checkbox"]') ? "" : this.getCellValues(cell).filter)).join(" ");
547554

548555
if (this.shouldHide(filterForWholeRow, content)) {
549556
hide = true;
@@ -621,7 +628,7 @@ export class ActionTable extends HTMLElement {
621628
private sortTable(columnName = this.sort, direction = this.direction) {
622629
if (!this.sort || !direction) return;
623630
// eslint-disable-next-line no-console
624-
console.time("sortTable");
631+
// console.time("sortTable");
625632
columnName = columnName.toLowerCase();
626633
// 1. Get column index from column name
627634
const columnIndex = this.cols.findIndex((col) => col.name === columnName);
@@ -650,6 +657,8 @@ export class ActionTable extends HTMLElement {
650657
const a: string = checkSortOrder(this.getCellValues(r1.children[columnIndex] as HTMLTableCellElement).sort);
651658
const b: string = checkSortOrder(this.getCellValues(r2.children[columnIndex] as HTMLTableCellElement).sort);
652659

660+
// console.log("a", a, "b", b);
661+
653662
return this.alphaNumSort(a, b);
654663
});
655664

@@ -671,7 +680,7 @@ export class ActionTable extends HTMLElement {
671680
});
672681
}
673682
// eslint-disable-next-line no-console
674-
console.timeEnd("sortTable");
683+
// console.timeEnd("sortTable");
675684
}
676685

677686
/* --------------------------- Public Sort Method --------------------------- */
@@ -701,7 +710,7 @@ export class ActionTable extends HTMLElement {
701710
/* --------- Sets row visibility based on sort,filter and pagination -------- */
702711

703712
private appendRows(): void {
704-
// console.time("appendRows");
713+
console.time("appendRows");
705714

706715
// Helper function for hiding rows based on pagination
707716
const isActivePage = (i: number): boolean => {
@@ -737,7 +746,7 @@ export class ActionTable extends HTMLElement {
737746

738747
this.tbody.prepend(fragment);
739748

740-
// console.timeEnd("appendRows");
749+
console.timeEnd("appendRows");
741750

742751
if (this.pagination > 0) {
743752
// If page is greater than number of pages, set page to number of pages

‎src/types.ts

+1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ export type SingleFilterObject = {
66
regex?: boolean;
77
exact?: boolean;
88
range?: boolean;
9+
cols?: string[];
910
};
1011

1112
export type FiltersObject = {

‎test.html

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<html lang="en">
2+
<head>
3+
<title>Action</title>
4+
<script type="module" src="/src/main.ts"></script>
5+
</head>
6+
<body>
7+
<action-table>
8+
<table>
9+
<thead>
10+
<tr>
11+
<th>A</th>
12+
<th>B</th>
13+
</tr>
14+
</thead>
15+
<tbody>
16+
<tr>
17+
<td>2</td>
18+
<td>4</td>
19+
</tr>
20+
<tr>
21+
<td>1</td>
22+
<td>5</td>
23+
</tr>
24+
</tbody>
25+
</table>
26+
</action-table>
27+
</body>
28+
</html>

0 commit comments

Comments
 (0)