@oscarpalmer/tabela 0.11.0 → 0.12.0

package/dist/tabela.full.js

@@ -319,9 +319,9 @@ new Set([
 * @returns `true` if the value is nullable or a whitespace-only string, otherwise `false`
 */
 function isNullableOrWhitespace$1(value) {
-	return value == null || EXPRESSION_WHITESPACE$2.test(getString$1(value));
+	return value == null || EXPRESSION_WHITESPACE$1.test(getString$1(value));
 }
-var EXPRESSION_WHITESPACE$2 = /^\s*$/;
+var EXPRESSION_WHITESPACE$1 = /^\s*$/;
 function setElementValue(element, first, second, third, callback) {
 	if (!isHTMLOrSVGElement(element)) return;
 	if (typeof first === "string") setElementValues(element, first, second, third, callback);
@@ -349,52 +349,9 @@ function updateElementValue(element, key, value, set, remove, isBoolean, json) {
 	if (isBoolean ? value == null : isNullableOrWhitespace$1(value)) remove.call(element, key);
 	else set.call(element, key, json ? JSON.stringify(value) : String(value));
 }
-function badAttributeHandler(name, value) {
-	if (typeof name !== "string" || name.trim().length === 0 || typeof value !== "string") return true;
-	if (EXPRESSION_CLOBBERED_NAME.test(name) && (value in document || value in formElement) || EXPRESSION_EVENT_NAME.test(name)) return true;
-	if (EXPRESSION_SKIP_NAME.test(name) || EXPRESSION_URI_VALUE.test(value) || isValidSourceAttribute(name, value)) return false;
-	return EXPRESSION_DATA_OR_SCRIPT.test(value);
-}
-function booleanAttributeHandler(name, value) {
-	if (typeof name !== "string" || name.trim().length === 0 || typeof value !== "string") return true;
-	const normalizedName = name.toLowerCase();
-	if (!booleanAttributesSet.has(normalizedName)) return false;
-	const normalized = value.toLowerCase();
-	return !(normalized.length === 0 || normalized === normalizedName);
-}
-function decodeAttribute(value) {
-	textArea ??= document.createElement("textarea");
-	textArea.innerHTML = value;
-	return decodeURIComponent(textArea.value);
-}
-function handleAttribute(callback, decode, first, second) {
-	let name;
-	let value;
-	if (isAttribute(first)) {
-		name = first.name;
-		value = String(first.value);
-	} else if (typeof first === "string" && typeof second === "string") {
-		name = first;
-		value = second;
-	}
-	if (decode && value != null) value = decodeAttribute(value);
-	return callback(name, value?.replace(EXPRESSION_WHITESPACE$1, ""));
-}
 function isAttribute(value) {
 	return value instanceof Attr || isPlainObject$1(value) && typeof value.name === "string" && "value" in value;
 }
-function _isBadAttribute(first, second, decode) {
-	return handleAttribute(badAttributeHandler, decode, first, second);
-}
-function _isEmptyNonBooleanAttribute(first, second, decode) {
-	return handleAttribute((name, value) => name != null && value != null && !booleanAttributesSet.has(name) && value.trim().length === 0, decode, first, second);
-}
-function _isInvalidBooleanAttribute(first, second, decode) {
-	return handleAttribute(booleanAttributeHandler, decode, first, second);
-}
-function isValidSourceAttribute(name, value) {
-	return EXPRESSION_SOURCE_NAME.test(name) && EXPRESSION_SOURCE_VALUE.test(value);
-}
 function updateAttribute(element, name, value, dispatch) {
 	const normalizedName = name.toLowerCase();
 	const isBoolean = booleanAttributesSet.has(normalizedName);
@@ -408,14 +365,6 @@ function updateProperty(element, name, value, dispatch) {
 	const event = dispatch !== false && elementEvents[element.tagName]?.[name];
 	if (typeof event === "string") element.dispatchEvent(new Event(event, { bubbles: true }));
 }
-var EXPRESSION_CLOBBERED_NAME = /^(id|name)$/i;
-var EXPRESSION_DATA_OR_SCRIPT = /^(?:data|\w+script):/i;
-var EXPRESSION_EVENT_NAME = /^on/i;
-var EXPRESSION_SKIP_NAME = /^(aria-[-\w]+|data-[-\w.\u00B7-\uFFFF]+)$/i;
-var EXPRESSION_SOURCE_NAME = /^src$/i;
-var EXPRESSION_SOURCE_VALUE = /^data:/i;
-var EXPRESSION_URI_VALUE = /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp|matrix):|[^a-z]|[a-z+.-]+(?:[^a-z+.\-:]|$))/i;
-var EXPRESSION_WHITESPACE$1 = /[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g;
 /**
 * List of boolean attributes
 */
@@ -455,8 +404,7 @@ var elementEvents = {
 	SELECT: { value: "change" },
 	TEXTAREA: { value: "input" }
 };
-var formElement = document.createElement("form");
-var textArea;
+document.createElement("form");
 function setAttribute(element, first, second, third) {
 	setElementValue(element, first, second, third, updateAttribute);
 }
@@ -560,7 +508,7 @@ function createRow() {
 	return createElement("div", {
 		className: "tabela__row",
 		role: "row"
-	}, {}, {});
+	}, {}, { height: "32px" });
 }
 function createFaker() {
 	return createElement("div", { className: "tabela__faker" }, {}, {});
@@ -637,13 +585,13 @@ var HeaderComponent = class {
 var ColumnComponent = class {
 	elements;
 	options;
-	constructor(options) {
-		const width = Number.parseInt(getComputedStyle(document.body).fontSize, 10) * (options.width ?? options.title.length * 1.5);
+	constructor(column) {
+		const width = Number.parseInt(getComputedStyle(document.body).fontSize, 10) * (column.width ?? column.title.length * 1.5);
 		this.options = {
-			...options,
+			...column,
 			width
 		};
-		this.elements = createHeading(options.field, options.title, width);
+		this.elements = createHeading(this.options.field, this.options.title, width);
 	}
 	destroy() {
 		this.elements.content.remove();
@@ -864,35 +812,8 @@ function compact(array, strict) {
 	}
 	return compacted;
 }
-function insertChunkedValues(type, array, items, start, deleteCount) {
-	const actualDeleteCount = deleteCount < 0 ? 0 : deleteCount;
-	const actualStart = Math.min(Math.max(0, start), array.length);
-	const chunked = chunk(items);
-	const lastIndex = chunked.length - 1;
-	let index = Number(chunked.length);
-	let returned;
-	while (index > 0) {
-		index -= 1;
-		const spliced = array.splice(actualStart, index === lastIndex ? actualDeleteCount : 0, ...chunked[index]);
-		if (returned == null) returned = spliced;
-		else returned.push(...spliced);
-	}
-	if (type === "insert") return array;
-	return type === "splice" ? returned : array.length;
-}
-function insertValues(type, array, items, start, deleteCount) {
-	const spliceArray = type === "insert" || type === "splice";
-	if (!Array.isArray(array) || typeof start !== "number" || !Array.isArray(items) || items.length === 0) return spliceArray ? [] : 0;
-	return insertChunkedValues(type, array, items, start, spliceArray ? deleteCount : 0);
-}
-/**
-* Push items into an array _(at the end)_
-* @param array Original array
-* @param pushed Pushed items
-* @returns New length of the array
-*/
-function push(array, pushed) {
-	return insertValues("push", array, pushed, array.length, 0);
+function select(array, ...parameters) {
+	return findValues("all", array, parameters, parameters.pop()).matched;
 }
 function aggregate(type, array, key) {
 	const length = Array.isArray(array) ? array.length : 0;
@@ -1159,6 +1080,172 @@ toMap.arrays = toMapArrays;
 function toMapArrays(array, first, second) {
 	return getMapValues(array, first, second, true);
 }
+function groupValues(array, key, value, arrays) {
+	if (!Array.isArray(array) || array.length === 0) return {};
+	const { length } = array;
+	const callbacks = getArrayCallbacks(void 0, key, value);
+	const record = {};
+	for (let index = 0; index < length; index += 1) {
+		const item = array[index];
+		const keyed = callbacks?.keyed?.(item, index, array) ?? index;
+		const valued = callbacks?.value?.(item, index, array) ?? item;
+		if (arrays) {
+			const existing = record[keyed];
+			if (existing == null) record[keyed] = [valued];
+			else existing.push(valued);
+		} else record[keyed] = valued;
+	}
+	return record;
+}
+function toRecord(array, first, second) {
+	return groupValues(array, first, second, false);
+}
+toRecord.arrays = toRecordArrays;
+function toRecordArrays(array, first, second) {
+	return groupValues(array, first, second, true);
+}
+var GroupComponent = class {
+	element;
+	expanded = true;
+	filtered = 0;
+	selected = 0;
+	total = 0;
+	constructor(key, label, value) {
+		this.key = key;
+		this.label = label;
+		this.value = value;
+	}
+};
+function renderGroup(state, component) {
+	component.element ??= createElement("div", {
+		className: "tabela__row tabela__row--group",
+		innerHTML: `<div class="tabela__cell tabela__cell--group" role="cell">
+	<button class="tabela__button tabela__button--group" data-event="group" data-key="${component.key}" type="button">
+		<span aria-hidden="true"></span>
+		<span>Open/close</span>
+	</button>
+	<p>${component.label}</p>
+</div>`,
+		role: "row"
+	}, {}, { height: `${state.options.rowHeight}px` });
+}
+var SortManager = class {
+	handlers = Object.freeze({
+		add: (field, direction) => this.add(field, direction),
+		flip: (field) => this.flip(field),
+		clear: () => this.clear(),
+		remove: (field) => this.remove(field),
+		set: (items) => this.set(items)
+	});
+	items = [];
+	constructor(state) {
+		this.state = state;
+	}
+	add(field, direction) {
+		if (this.items.findIndex((item) => item.key === field) > -1) return;
+		this.items.push({
+			key: field,
+			direction: direction ?? "ascending"
+		});
+		this.sort();
+	}
+	addOrSet(event, field) {
+		if (event.ctrlKey || event.metaKey) this.add(field);
+		else this.set([{
+			field,
+			direction: "ascending"
+		}]);
+	}
+	clear() {
+		if (this.items.length > 0) {
+			this.items.length = 0;
+			this.sort();
+		}
+	}
+	destroy() {
+		this.handlers = void 0;
+		this.items = void 0;
+		this.state = void 0;
+	}
+	flip(field) {
+		const item = this.items.find((item) => item.key === field);
+		if (item == null) return;
+		item.direction = item.direction === "ascending" ? "descending" : "ascending";
+		this.sort();
+	}
+	remove(field) {
+		const index = this.items.findIndex((item) => item.key === field);
+		if (index > -1) {
+			this.items.splice(index, 1);
+			this.sort();
+		}
+	}
+	removeOrClear(event, field) {
+		if (event.ctrlKey || event.metaKey) this.remove(field);
+		else this.clear();
+	}
+	set(items) {
+		this.items.splice(0, this.items.length, ...items.map((item) => ({
+			key: item.field,
+			direction: item.direction
+		})));
+		this.sort();
+	}
+	sort() {
+		const { items, state } = this;
+		const { length } = state.managers.column.items;
+		for (let index = 0; index < length; index += 1) {
+			const column = state.managers.column.items[index];
+			const sorterIndex = items.findIndex((item) => item.key === column.options.field);
+			const sorterItem = items[sorterIndex];
+			setAttributes(column.elements.wrapper, {
+				"aria-sort": sorterItem == null ? "none" : items.length > 1 ? "other" : sorterItem.direction,
+				"data-sort-direction": sorterItem == null ? void 0 : sorterItem.direction
+			});
+			setAttribute(column.elements.sorter, "data-sort-position", sorterIndex > -1 && items.length > 1 ? sorterIndex + 1 : void 0);
+		}
+		state.managers.data.values.keys.active = items.length === 0 ? void 0 : getSortedKeys(state, items);
+		state.managers.render.update(true, true);
+	}
+	toggle(event, field, direction) {
+		switch (direction) {
+			case "ascending":
+				this.flip(field);
+				return;
+			case "descending":
+				this.removeOrClear(event, field);
+				return;
+			default:
+				this.addOrSet(event, field);
+				return;
+		}
+	}
+};
+function getSortedKeys(state, sorters) {
+	const data = state.managers.data.values.keys.active?.map((key) => key instanceof GroupComponent ? key : state.managers.data.values.objects.mapped.get(key)) ?? state.managers.data.values.objects.array.slice();
+	if (!state.managers.group.enabled) return sort(data, sorters).map((item) => item[state.key]);
+	return sortWithGroups(state, data, sorters).map((item) => item instanceof GroupComponent ? item : item[state.key]);
+}
+function sortWithGroups(state, data, sorters) {
+	const { length } = sorters;
+	return data.sort((first, second) => {
+		const firstValue = first instanceof GroupComponent ? first.value : first[state.managers.group.field];
+		const secondValue = second instanceof GroupComponent ? second.value : second[state.managers.group.field];
+		const firstOrder = state.managers.group.order[firstValue];
+		const secondOrder = state.managers.group.order[secondValue];
+		const groupComparison = compare(firstOrder, secondOrder);
+		if (groupComparison !== 0) return groupComparison;
+		const firstIsGroup = first instanceof GroupComponent;
+		const secondIsGroup = second instanceof GroupComponent;
+		if (firstIsGroup || secondIsGroup) return firstIsGroup && secondIsGroup ? 0 : firstIsGroup ? -1 : 1;
+		for (let index = 0; index < length; index += 1) {
+			const sorter = sorters[index];
+			const comparison = compare(first[sorter.key], second[sorter.key]);
+			if (comparison !== 0) return comparison * (sorter.direction === "ascending" ? 1 : -1);
+		}
+		return 0;
+	});
+}
 /**
 * Is the value `undefined`, `null`, or a whitespace-only string?
 * @param value Value to check
@@ -1184,17 +1271,41 @@ var DataManager = class {
 			array: []
 		}
 	};
+	get keys() {
+		return this.values.keys.active ?? this.values.keys.original;
+	}
 	get size() {
-		return this.values.keys.active?.length ?? this.values.keys.original.length;
+		return this.keys.length;
 	}
 	constructor(state) {
 		this.state = state;
 	}
 	async add(data, render) {
 		const { state, values } = this;
-		push(values.objects.array, data);
-		values.objects.mapped = toMap(values.objects.array, state.key);
-		if (render) this.render();
+		const { length } = data;
+		const updates = [];
+		for (let index = 0; index < length; index += 1) {
+			const item = data[index];
+			const key = item[state.key];
+			if (values.objects.mapped.has(key)) {
+				updates.push(item);
+				continue;
+			}
+			values.objects.array.push(item);
+			values.objects.mapped.set(key, item);
+			if (!state.managers.group.enabled) continue;
+			const groupKey = item[state.managers.group.field];
+			let group = state.managers.group.get(groupKey);
+			if (group == null) {
+				group = new GroupComponent(String(groupKey), String(groupKey), groupKey);
+				values.objects.array.push(group);
+				state.managers.group.add(group);
+			}
+			if (!group.expanded) state.managers.group.collapsed.add(key);
+			group.total += 1;
+		}
+		if (updates.length > 0) this.update(updates);
+		else if (render) this.render();
 	}
 	clear() {
 		if (this.values.objects.array.length > 0) this.set([]);
@@ -1211,11 +1322,10 @@ var DataManager = class {
 	}
 	get(active) {
 		const { values } = this;
-		return active ?? false ? values.keys.active?.map((key) => values.objects.mapped.get(key)) ?? [] : values.objects.array;
+		return active ?? false ? select(values.keys.active ?? [], (key) => !(key instanceof GroupComponent), (key) => values.objects.mapped.get(key)) : values.objects.array.filter((item) => !(item instanceof GroupComponent));
 	}
 	getIndex(key) {
-		const { values } = this;
-		return (values.keys.active ?? values.keys.original).indexOf(key);
+		return this.keys.indexOf(key);
 	}
 	async remove(items, render) {
 		const { state, values } = this;
@@ -1225,24 +1335,59 @@ var DataManager = class {
 		for (let keyIndex = 0; keyIndex < length; keyIndex += 1) {
 			const key = keys[keyIndex];
 			values.objects.mapped.delete(key);
-			const arrayIndex = values.objects.array.findIndex((object) => object[state.key] === key);
-			if (arrayIndex > -1) values.objects.array.splice(arrayIndex, 1);
+			const arrayIndex = values.objects.array.findIndex((item) => !(item instanceof GroupComponent) && item[state.key] === key);
+			let item;
+			if (arrayIndex > -1) [item] = values.objects.array.splice(arrayIndex, 1);
 			values.keys.original.splice(values.keys.original.indexOf(key), 1);
 			state.managers.row.remove(key);
+			if (!state.managers.group.enabled || item == null) continue;
+			state.managers.group.collapsed.delete(key);
+			const groupKey = item[state.managers.group.field];
+			const group = state.managers.group.get(groupKey);
+			if (group == null) continue;
+			group.total -= 1;
+			if (group.total > 0) continue;
+			const groupIndex = values.objects.array.findIndex((item) => item instanceof GroupComponent && item.value === groupKey);
+			if (groupIndex > -1) values.objects.array.splice(groupIndex, 1);
+			state.managers.group.remove(group);
 		}
 		if (render) this.render();
 	}
 	render() {
 		const { state, values } = this;
-		values.keys.original = sort(values.objects.array.map((item) => item[state.key]));
+		if (state.managers.group.enabled) sortWithGroups(state, values.objects.array, [{
+			direction: "ascending",
+			key: state.key
+		}]);
+		else sort(values.objects.array, [{
+			direction: "ascending",
+			key: state.key
+		}]);
+		values.keys.original = values.objects.array.map((item) => item instanceof GroupComponent ? item : item[state.key]);
+		values.objects.mapped = toMap(values.objects.array.filter((item) => !(item instanceof GroupComponent)), (item) => item[state.key]);
 		if (Object.keys(state.managers.filter.items).length > 0) state.managers.filter.filter();
 		else if (state.managers.sort.items.length > 0) state.managers.sort.sort();
-		else state.managers.render.update(true);
+		else state.managers.render.update(true, true);
 	}
 	set(data) {
 		const { state, values } = this;
-		values.objects.mapped = toMap(data, state.key);
-		values.objects.array = data;
+		const array = data.slice();
+		if (state.managers.group.enabled) {
+			const grouped = toRecord.arrays(data, state.managers.group.field);
+			const entries = Object.entries(grouped);
+			const { length } = entries;
+			const groups = [];
+			for (let index = 0; index < length; index += 1) {
+				const [value, items] = entries[index];
+				const key = String(value);
+				const group = new GroupComponent(key, key, value);
+				group.total = items.length;
+				groups.push(group);
+				array.push(group);
+			}
+			state.managers.group.set(groups);
+		}
+		values.objects.array = array;
 		this.render();
 	}
 	async synchronize(data, remove) {
@@ -1260,7 +1405,7 @@ var DataManager = class {
 		}
 		if (keys.size === 0) return;
 		if (remove ?? false) {
-			const toRemove = values.keys.original.filter((key) => !keys.has(key));
+			const toRemove = values.keys.original.filter((key) => !(key instanceof GroupComponent) && !keys.has(key));
 			if (toRemove.length > 0) await this.remove(toRemove, false);
 		}
 		await this.update(updated);
@@ -1450,6 +1595,9 @@ function onClick(event) {
 	const manager = mapped$1.get(table);
 	if (manager == null) return;
 	switch (target?.getAttribute("data-event")) {
+		case "group":
+			manager.state.managers.group.handle(target);
+			break;
 		case "heading":
 			manager.onSort(event, target);
 			break;
@@ -1906,6 +2054,10 @@ var FilterManager = class {
 		const keysLength = state.managers.data.values.keys.original.length;
 		rowLoop: for (let keyIndex = 0; keyIndex < keysLength; keyIndex += 1) {
 			const key = state.managers.data.values.keys.original[keyIndex];
+			if (key instanceof GroupComponent) {
+				filtered.push(key);
+				continue;
+			}
 			const row = state.managers.data.values.objects.mapped.get(key);
 			if (row == null) continue;
 			filterLoop: for (let filterIndex = 0; filterIndex < filters.length; filterIndex += 1) {
@@ -1959,6 +2111,48 @@ const comparators = {
 	"starts-with": (row, filter) => startsWith(getString(row), getString(filter), true)
 };
 const equalizer = equal.initialize({ ignoreCase: true });
+var GroupManager = class {
+	collapsed = /* @__PURE__ */ new Set();
+	enabled = false;
+	field;
+	items = [];
+	order = {};
+	constructor(state) {
+		this.state = state;
+		if (isNullableOrWhitespace(state.options.grouping)) return;
+		this.enabled = true;
+		this.field = state.options.grouping;
+	}
+	add(group) {
+		this.set([...this.items, group]);
+	}
+	get(value) {
+		return this.items.find((item) => item.value === value);
+	}
+	handle(button) {
+		const key = button.dataset.key;
+		const group = this.get(key);
+		if (group == null) return;
+		const { collapsed, items, state } = this;
+		group.expanded = !group.expanded;
+		const index = items.indexOf(group);
+		let first = state.managers.data.values.keys.original.indexOf(items[index]) + 1;
+		const last = items[index + 1] == null ? state.managers.data.keys.length - 1 : state.managers.data.values.keys.original.indexOf(items[index + 1]) - 1;
+		for (; first <= last; first += 1) {
+			const key = state.managers.data.values.keys.original[first];
+			if (group.expanded) collapsed.delete(key);
+			else collapsed.add(key);
+		}
+		state.managers.render.update(true, true);
+	}
+	remove(group) {
+		this.set(this.items.filter((item) => item !== group));
+	}
+	set(items) {
+		this.items = sort(items, (item) => item.label);
+		this.order = toRecord(items, "value", (_, index) => index);
+	}
+};
 function getKey(value) {
 	if (typeof value === "number") return value;
 	if (typeof value !== "string") return;
@@ -1978,7 +2172,7 @@ var NavigationManager = class {
 		event.preventDefault();
 		const { components, id, managers } = this.state;
 		const activeDescendant = components.body.elements.group.getAttribute("aria-activedescendant");
-		const keys = managers.data.values.keys.active ?? managers.data.values.keys.original;
+		const { keys } = managers.data;
 		const { length } = keys;
 		let next;
 		if (isNullableOrWhitespace(activeDescendant)) next = getDefaultIndex(event.key, length);
@@ -2079,16 +2273,17 @@ var RowComponent = class {
 		this.key = key;
 	}
 };
-function getRange(down) {
-	const { components, managers, options } = this.state;
+function getRange(state, down) {
+	const { components, managers, options } = state;
 	const { clientHeight, scrollTop } = components.body.elements.group;
+	const { keys } = managers.data;
 	const first = Math.floor(scrollTop / options.rowHeight);
-	const last = Math.min((managers.data.values.keys.active?.length ?? managers.data.values.keys.original.length) - 1, Math.ceil((scrollTop + clientHeight) / options.rowHeight) - 1);
+	const last = Math.min(keys.length - managers.group.collapsed.size - 1, Math.ceil((scrollTop + clientHeight) / options.rowHeight) - 1);
 	const before = Math.ceil(clientHeight / options.rowHeight) * (down ? 1 : 2);
 	const after = Math.ceil(clientHeight / options.rowHeight) * (down ? 2 : 1);
 	const start = Math.max(0, first - before);
 	return {
-		end: Math.min((managers.data.values.keys.active?.length ?? managers.data.values.keys.original.length) - 1, last + after),
+		end: Math.min(keys.length - managers.group.collapsed.size - 1, last + after),
 		start
 	};
 }
@@ -2138,6 +2333,7 @@ var RenderManager = class {
 		const { length } = fields;
 		for (let index = 0; index < length; index += 1) delete pool.cells[fields[index]];
 		for (const [, key] of visible) {
+			if (key instanceof GroupComponent) continue;
 			const row = state.managers.row.get(key);
 			if (row == null || row.element == null) continue;
 			for (let index = 0; index < length; index += 1) {
@@ -2155,31 +2351,53 @@ var RenderManager = class {
 	update(down, rerender) {
 		const { state, pool, visible } = this;
 		const { components, managers, options } = state;
-		components.body.elements.faker.style.height = `${managers.data.size * options.rowHeight}px`;
+		components.body.elements.faker.style.height = `${(managers.data.size - managers.group.collapsed.size) * options.rowHeight}px`;
 		const indices = /* @__PURE__ */ new Set();
-		const range = getRange.call(this, down);
+		const range = getRange(state, down);
 		for (let index = range.start; index <= range.end; index += 1) indices.add(index);
 		let remove = rerender ?? false;
 		for (const [index, key] of visible) {
+			if (key instanceof GroupComponent) {
+				if (remove || !indices.has(index)) {
+					visible.delete(index);
+					key.element?.remove();
+				}
+				continue;
+			}
 			const row = managers.row.get(key);
-			if (remove || row == null || !indices.has(index)) {
+			if (remove || row == null || !indices.has(index) || managers.group.collapsed.has(key)) {
 				visible.delete(index);
 				if (row != null) removeRow(pool, row);
 			}
 		}
 		const fragment = this.getFragment();
-		const keys = managers.data.values.keys.active ?? managers.data.values.keys.original;
+		const { keys } = managers.data;
 		let count = 0;
-		for (let index = range.start; index <= range.end; index += 1) {
+		let offset = 0;
+		for (let index = range.start; index <= range.end + offset; index += 1) {
 			if (visible.has(index)) continue;
 			const key = keys[index];
+			if (key instanceof GroupComponent) {
+				count += 1;
+				renderGroup(state, key);
+				visible.set(index, key);
+				if (key.element != null) {
+					key.element.style.transform = `translateY(${(index - offset) * options.rowHeight}px)`;
+					fragment.append(key.element);
+				}
+				continue;
+			}
 			const row = managers.row.get(key);
 			if (row == null) continue;
+			if (managers.group.collapsed.has(key)) {
+				offset += 1;
+				continue;
+			}
 			count += 1;
 			renderRow(state, row);
 			visible.set(index, key);
 			if (row.element != null) {
-				row.element.style.transform = `translateY(${index * options.rowHeight}px)`;
+				row.element.style.transform = `translateY(${(index - offset) * options.rowHeight}px)`;
 				fragment.append(row.element);
 			}
 		}
@@ -2222,181 +2440,16 @@ var RowManager = class {
 		if (row != null) renderRow(this.state, row);
 	}
 };
-function isInert(item) {
-	return (item.element.inert ?? false) || EXPRESSION_TRUEISH.test(item.element.getAttribute(ATTRIBUTE_INERT)) || item.element.parentElement != null && isInert({
-		element: item.element.parentElement,
-		tabIndex: TABINDEX_DEFAULT
-	});
-}
-var ATTRIBUTE_INERT = "inert";
-var EXPRESSION_TRUEISH = /^(|true)$/i;
-[
-	"[contenteditable]:not([contenteditable=\"false\"])",
-	"[tabindex]:not(slot)",
-	"a[href]",
-	"audio[controls]",
-	"button",
-	"details",
-	"details > summary:first-of-type",
-	"input",
-	"select",
-	"textarea",
-	"video[controls]"
-].map((selector) => `${selector}:not([inert])`).join(",");
-var TABINDEX_DEFAULT = -1;
-function handleElement(element, depth) {
-	if (depth === 0) {
-		const removable = element.querySelectorAll(REMOVE_SELECTOR);
-		for (const item of removable) item.remove();
-	}
-	sanitizeAttributes(element, [...element.attributes]);
-}
-/**
-* Is the element clobbered?
-*
-* Thanks, DOMPurify _(https://github.com/cure53/DOMPurify)_
-*/
-function isClobbered(value) {
-	return value instanceof HTMLFormElement && (typeof value.nodeName !== "string" || typeof value.textContent !== "string" || typeof value.removeChild !== "function" || !(value.attributes instanceof NamedNodeMap) || typeof value.removeAttribute !== "function" || typeof value.setAttribute !== "function" || typeof value.namespaceURI !== "string" || typeof value.insertBefore !== "function" || typeof value.hasChildNodes !== "function");
-}
-function removeNode(node) {
-	if (typeof node.remove === "function") node.remove();
-}
-function sanitizeAttributes(element, attributes) {
-	const { length } = attributes;
-	for (let index = 0; index < length; index += 1) {
-		const { name, value } = attributes[index];
-		if (_isBadAttribute(name, value, false) || _isEmptyNonBooleanAttribute(name, value, false)) element.removeAttribute(name);
-		else if (_isInvalidBooleanAttribute(name, value, false)) setAttribute(element, name, true);
-	}
-}
-function sanitizeNodes(nodes, depth) {
-	const actual = nodes.filter((node) => node instanceof Node);
-	let { length } = nodes;
-	for (let index = 0; index < length; index += 1) {
-		const node = actual[index];
-		let remove = isClobbered(node);
-		if (!remove) switch (node.nodeType) {
-			case Node.ELEMENT_NODE:
-				handleElement(node, depth);
-				break;
-			case Node.COMMENT_NODE:
-				remove = COMMENT_HARMFUL.test(node.data);
-				break;
-			case Node.DOCUMENT_TYPE_NODE:
-			case Node.PROCESSING_INSTRUCTION_NODE:
-				remove = true;
-				break;
-		}
-		if (remove) {
-			removeNode(node);
-			actual.splice(index, 1);
-			index -= 1;
-			length -= 1;
-			continue;
-		}
-		if (node.hasChildNodes()) sanitizeNodes([...node.childNodes], depth + 1);
-	}
-	return nodes;
-}
-var COMMENT_HARMFUL = /<[/\w]/g;
-var REMOVE_SELECTOR = "script, toretto-temporary";
-function createHtml(value) {
-	const parsed = getParser().parseFromString(getHtml(value), PARSE_TYPE_HTML);
-	parsed.body.normalize();
-	sanitizeNodes([parsed.body], 0);
-	return parsed.body.innerHTML;
-}
-function createTemplate(value, options) {
-	const template = document.createElement(TEMPLATE_TAG);
-	template.innerHTML = createHtml(value);
-	if (typeof value === "string" && options.cache) templates[value] = template;
-	return template;
-}
-function getHtml(value) {
-	return `${TEMPORARY_ELEMENT}${typeof value === "string" ? value : value.innerHTML}${TEMPORARY_ELEMENT}`;
-}
-function getNodes(value, options) {
-	if (typeof value !== "string" && !(value instanceof HTMLTemplateElement)) return [];
-	const template = getTemplate(value, options);
-	return template == null ? [] : [...template.content.cloneNode(true).childNodes];
-}
-function getOptions(input) {
-	const options = isPlainObject$1(input) ? input : {};
-	options.cache = typeof options.cache === "boolean" ? options.cache : true;
-	return options;
-}
-function getParser() {
-	parser ??= new DOMParser();
-	return parser;
-}
-function getTemplate(value, options) {
-	if (value instanceof HTMLTemplateElement) return createTemplate(value, options);
-	if (value.trim().length === 0) return;
-	let template = templates[value];
-	if (template != null) return template;
-	const element = EXPRESSION_ID.test(value) ? document.querySelector(`#${value}`) : null;
-	return createTemplate(element instanceof HTMLTemplateElement ? element : value, options);
-}
-var html = ((value, options) => {
-	return getNodes(value, getOptions(options));
-});
-html.clear = () => {
-	templates = {};
-};
-html.remove = (template) => {
-	if (typeof template !== "string" || templates[template] == null) return;
-	const keys = Object.keys(templates);
-	const { length } = keys;
-	const updated = {};
-	for (let index = 0; index < length; index += 1) {
-		const key = keys[index];
-		if (key !== template) updated[key] = templates[key];
-	}
-	templates = updated;
-};
-var EXPRESSION_ID = /^[a-z][\w-]*$/i;
-var PARSE_TYPE_HTML = "text/html";
-var TEMPLATE_TAG = "template";
-var TEMPORARY_ELEMENT = "<toretto-temporary></toretto-temporary>";
-var parser;
-var templates = {};
-function getSupport() {
-	if (window == null || navigator == null) return false;
-	if ("matchMedia" in window) {
-		const media = matchMedia?.("(pointer: coarse)");
-		if (typeof media?.matches === "boolean" && media.matches) return true;
-	}
-	if ("ontouchstart" in window) return true;
-	if (typeof navigator.maxTouchPoints === "number" && navigator.maxTouchPoints > 0) return true;
-	if (typeof navigator.msMaxTouchPoints === "number" && navigator.msMaxTouchPoints > 0) return true;
-	return false;
-}
-(() => {
-	let support = getSupport();
-	const instance = Object.create({
-		get() {
-			return support;
-		},
-		update() {
-			support = getSupport();
-			return support;
-		}
-	});
-	Object.defineProperty(instance, "value", { get() {
-		return support;
-	} });
-	return instance;
-})();
 const dragStyling = toggleStyles(document.body, {
 	userSelect: "none",
 	webkitUserSelect: "none"
 });
 var SelectionManager = class {
 	handlers = Object.freeze({
+		add: (keys) => this.add(keys),
 		clear: () => this.clear(),
-		deselect: (keys) => this.deselect(keys),
-		select: (keys) => this.select(keys),
+		remove: (keys) => this.remove(keys),
+		set: (keys) => this.set(keys),
 		toggle: () => this.toggle()
 	});
 	items = /* @__PURE__ */ new Set();
@@ -2405,21 +2458,24 @@ var SelectionManager = class {
 		this.state = state;
 		mapped.set(state.element, this);
 	}
+	add(keys) {
+		const { length } = keys;
+		let update = false;
+		for (let index = 0; index < length; index += 1) {
+			const key = keys[index];
+			if (!this.items.has(key)) {
+				this.items.add(key);
+				update = true;
+			}
+		}
+		if (update) this.update([]);
+	}
 	clear() {
 		if (this.items.size === 0) return;
 		const removed = [...this.items];
 		this.items.clear();
 		this.update(removed);
 	}
-	deselect(keys) {
-		const { length } = keys;
-		const removed = [];
-		for (let index = 0; index < length; index += 1) {
-			const key = keys[index];
-			if (this.items.delete(key)) removed.push(key);
-		}
-		if (removed.length > 0) this.update(removed);
-	}
 	destroy() {
 		mapped.delete(this.state.element);
 		this.handlers = void 0;
@@ -2439,8 +2495,8 @@ var SelectionManager = class {
 		this.last = key;
 		this.state.managers.navigation.setActive(key, false);
 		if (event.ctrlKey || event.metaKey) {
-			if (items.has(key)) this.deselect([key]);
-			else this.select([key]);
+			if (items.has(key)) this.remove([key]);
+			else this.add([key]);
 			return;
 		}
 		this.set([key]);
@@ -2451,29 +2507,29 @@ var SelectionManager = class {
 		const fromKey = keyed ? from : getKey(from.getAttribute("data-key"));
 		const toKey = keyed ? to : getKey(to.getAttribute("data-key"));
 		if (fromKey === toKey) return;
-		const keys = state.managers.data.values.keys.active ?? state.managers.data.values.keys.original;
+		const { keys } = state.managers.data;
 		const fromIndex = state.managers.data.getIndex(fromKey);
 		const toIndex = state.managers.data.getIndex(toKey);
 		if (fromIndex === -1 || toIndex === -1) return;
 		const [start, end] = fromIndex < toIndex ? [fromIndex, toIndex] : [toIndex, fromIndex];
 		const selected = [];
-		for (let index = start; index <= end; index += 1) selected.push(keys[index]);
-		if (keyed) this.select(selected);
+		for (let index = start; index <= end; index += 1) {
+			const key = keys[index];
+			if (!(key instanceof GroupComponent)) selected.push(key);
+		}
+		if (keyed) this.add(selected);
 		else this.set(selected);
 		this.last = toKey;
 		this.state.managers.navigation.setActive(toKey, false);
 	}
-	select(keys) {
+	remove(keys) {
 		const { length } = keys;
-		let update = false;
+		const removed = [];
 		for (let index = 0; index < length; index += 1) {
 			const key = keys[index];
-			if (!this.items.has(key)) {
-				this.items.add(key);
-				update = true;
-			}
+			if (this.items.delete(key)) removed.push(key);
 		}
-		if (update) this.update([]);
+		if (removed.length > 0) this.update(removed);
 	}
 	set(keys) {
 		const { items } = this;
@@ -2485,9 +2541,9 @@ var SelectionManager = class {
 	}
 	toggle() {
 		const { items, state } = this;
-		const all = state.managers.data.values.keys.active ?? state.managers.data.values.keys.original;
-		if (items.size === all.length) this.clear();
-		else this.select(all);
+		const { keys } = state.managers.data;
+		if (items.size === keys.length - state.managers.group.items.length) this.clear();
+		else this.set(keys.filter((key) => !(key instanceof GroupComponent)));
 	}
 	update(removed) {
 		const items = [...removed.map((key) => ({
@@ -2573,98 +2629,6 @@ on(document, "keyup", onShiftUp);
 on(document, "mousedown", onMouseDown);
 on(document, "mousemove", onMouseMove);
 on(document, "mouseup", onMouseUp);
-var SortManager = class {
-	handlers = Object.freeze({
-		add: (field, direction) => this.add(field, direction),
-		flip: (field) => this.flip(field),
-		clear: () => this.clear(),
-		remove: (field) => this.remove(field),
-		set: (items) => this.set(items)
-	});
-	items = [];
-	constructor(state) {
-		this.state = state;
-	}
-	add(field, direction) {
-		if (this.items.findIndex((item) => item.key === field) > -1) return;
-		this.items.push({
-			key: field,
-			direction: direction ?? "ascending"
-		});
-		this.sort();
-	}
-	addOrSet(event, field) {
-		if (event.ctrlKey || event.metaKey) this.add(field);
-		else this.set([{
-			field,
-			direction: "ascending"
-		}]);
-	}
-	clear() {
-		if (this.items.length > 0) {
-			this.items.length = 0;
-			this.sort();
-		}
-	}
-	destroy() {
-		this.handlers = void 0;
-		this.items = void 0;
-		this.state = void 0;
-	}
-	flip(field) {
-		const item = this.items.find((item) => item.key === field);
-		if (item == null) return;
-		item.direction = item.direction === "ascending" ? "descending" : "ascending";
-		this.sort();
-	}
-	remove(field) {
-		const index = this.items.findIndex((item) => item.key === field);
-		if (index > -1) {
-			this.items.splice(index, 1);
-			this.sort();
-		}
-	}
-	removeOrClear(event, field) {
-		if (event.ctrlKey || event.metaKey) this.remove(field);
-		else this.clear();
-	}
-	set(items) {
-		this.items.splice(0, this.items.length, ...items.map((item) => ({
-			key: item.field,
-			direction: item.direction
-		})));
-		this.sort();
-	}
-	sort() {
-		const { items, state } = this;
-		const { length } = state.managers.column.items;
-		for (let index = 0; index < length; index += 1) {
-			const column = state.managers.column.items[index];
-			const sorterIndex = items.findIndex((item) => item.key === column.options.field);
-			const sorterItem = items[sorterIndex];
-			setAttributes(column.elements.wrapper, {
-				"aria-sort": sorterItem == null ? "none" : items.length > 1 ? "other" : sorterItem.direction,
-				"data-sort-direction": sorterItem == null ? void 0 : sorterItem.direction
-			});
-			setAttribute(column.elements.sorter, "data-sort-position", sorterIndex > -1 && items.length > 1 ? sorterIndex + 1 : void 0);
-		}
-		state.managers.data.values.keys.active = items.length === 0 ? void 0 : sort(state.managers.data.values.keys.active?.map((key) => state.managers.data.values.objects.mapped.get(key)) ?? state.managers.data.values.objects.array, items).map((row) => row[state.key]);
-		state.managers.render.update(true, true);
-	}
-	toggle(event, field, direction) {
-		switch (direction) {
-			case "ascending":
-				this.flip(field);
-				return;
-			case "descending":
-				this.removeOrClear(event, field);
-				return;
-			default:
-				this.addOrSet(event, field);
-				return;
-		}
-	}
-};
 var Tabela = class {
 	#components = {
 		header: void 0,
@@ -2679,6 +2643,7 @@ var Tabela = class {
 		data: void 0,
 		event: void 0,
 		filter: void 0,
+		group: void 0,
 		navigation: void 0,
 		render: void 0,
 		row: void 0,
@@ -2714,6 +2679,7 @@ var Tabela = class {
 		this.#managers.data = new DataManager(state);
 		this.#managers.event = new EventManager(state);
 		this.#managers.filter = new FilterManager(state);
+		this.#managers.group = new GroupManager(state);
 		this.#managers.navigation = new NavigationManager(state);
 		this.#managers.render = new RenderManager(state);
 		this.#managers.row = new RowManager(state);