@oscarpalmer/tabela 0.14.0 → 0.15.0

package/dist/{tabela.full.js → tabela.full.mjs}

@@ -1,3 +1,50 @@
+//#region node_modules/@oscarpalmer/toretto/dist/internal/is.mjs
+/**
+* Is the value an event target?
+* @param value Value to check
+* @returns `true` if it's an event target, otherwise `false`
+*/
+function isEventTarget(value) {
+	return typeof value === "object" && value != null && typeof value.addEventListener === "function" && typeof value.removeEventListener === "function" && typeof value.dispatchEvent === "function";
+}
+/**
+* Is the value an HTML or SVG element?
+* @param value Value to check
+* @returns `true` if it's an HTML or SVG element, otherwise `false`
+*/
+function isHTMLOrSVGElement(value) {
+	return value instanceof HTMLElement || value instanceof SVGElement;
+}
+new Set([
+	Node.ELEMENT_NODE,
+	Node.TEXT_NODE,
+	Node.PROCESSING_INSTRUCTION_NODE,
+	Node.COMMENT_NODE,
+	Node.DOCUMENT_TYPE_NODE
+]);
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/node_modules/@oscarpalmer/atoms/dist/internal/is.mjs
+/**
+* Is the value a number?
+* @param value Value to check
+* @returns `true` if the value is a `number`, otherwise `false`
+*/
+function isNumber$1(value) {
+	return typeof value === "number" && !Number.isNaN(value);
+}
+/**
+* Is the value a plain object?
+* @param value Value to check
+* @returns `true` if the value is a plain object, otherwise `false`
+*/
+function isPlainObject$1(value) {
+	if (value === null || typeof value !== "object") return false;
+	if (Symbol.toStringTag in value || Symbol.iterator in value) return false;
+	const prototype = Object.getPrototypeOf(value);
+	return prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null;
+}
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/node_modules/@oscarpalmer/atoms/dist/internal/array/compact.mjs
 function compact$1(array, strict) {
 	if (!Array.isArray(array)) return [];
 	if (strict === true) return array.filter(Boolean);
@@ -9,6 +56,8 @@ function compact$1(array, strict) {
 	}
 	return compacted;
 }
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/node_modules/@oscarpalmer/atoms/dist/internal/string.mjs
 /**
 * Get the string value from any value
 * @param value Original value
@@ -39,26 +88,107 @@ function join$1(value, delimiter) {
 function words$1(value) {
 	return typeof value === "string" ? value.match(EXPRESSION_WORDS$1) ?? [] : [];
 }
-var EXPRESSION_WORDS$1 = /[^\x00-\x2f\x3a-\x40\x5b-\x60\x7b-\x7f]+/g;
+const EXPRESSION_WORDS$1 = /[^\x00-\x2f\x3a-\x40\x5b-\x60\x7b-\x7f]+/g;
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/node_modules/@oscarpalmer/atoms/dist/is.mjs
 /**
-* Is the value a number?
+* Is the value `undefined`, `null`, or a whitespace-only string?
 * @param value Value to check
-* @returns `true` if the value is a `number`, otherwise `false`
+* @returns `true` if the value is nullable or a whitespace-only string, otherwise `false`
 */
-function isNumber$1(value) {
-	return typeof value === "number" && !Number.isNaN(value);
+function isNullableOrWhitespace$1(value) {
+	return value == null || EXPRESSION_WHITESPACE$1.test(getString$1(value));
+}
+const EXPRESSION_WHITESPACE$1 = /^\s*$/;
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/dist/internal/element-value.mjs
+function setElementValue(element, first, second, third, callback) {
+	if (!isHTMLOrSVGElement(element)) return;
+	if (typeof first === "string") setElementValues(element, first, second, third, callback);
+	else if (isAttribute(first)) setElementValues(element, first.name, first.value, third, callback);
+}
+function setElementValues(element, first, second, third, callback) {
+	if (!isHTMLOrSVGElement(element)) return;
+	if (typeof first === "string") {
+		callback(element, first, second, third);
+		return;
+	}
+	const isArray = Array.isArray(first);
+	if (!isArray && !(typeof first === "object" && first !== null)) return;
+	const entries = isArray ? first : Object.entries(first).map(([name, value]) => ({
+		name,
+		value
+	}));
+	const { length } = entries;
+	for (let index = 0; index < length; index += 1) {
+		const entry = entries[index];
+		if (typeof entry === "object" && typeof entry?.name === "string") callback(element, entry.name, entry.value, third);
+	}
+}
+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));
+}
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/dist/internal/attribute.mjs
+function isAttribute(value) {
+	return value instanceof Attr || isPlainObject$1(value) && typeof value.name === "string" && "value" in value;
+}
+function updateAttribute(element, name, value, dispatch) {
+	const normalizedName = name.toLowerCase();
+	const isBoolean = booleanAttributesSet.has(normalizedName);
+	const next = isBoolean ? value === true || typeof value === "string" && (value === "" || value.toLowerCase() === normalizedName) : value == null ? "" : value;
+	if (name in element) updateProperty(element, normalizedName, next, dispatch);
+	updateElementValue(element, name, isBoolean ? next ? "" : null : value, element.setAttribute, element.removeAttribute, isBoolean, false);
+}
+function updateProperty(element, name, value, dispatch) {
+	if (Object.is(element[name], value)) return;
+	element[name] = value;
+	const event = dispatch !== false && elementEvents[element.tagName]?.[name];
+	if (typeof event === "string") element.dispatchEvent(new Event(event, { bubbles: true }));
 }
 /**
-* Is the value a plain object?
-* @param value Value to check
-* @returns `true` if the value is a plain object, otherwise `false`
+* List of boolean attributes
 */
-function isPlainObject$1(value) {
-	if (value === null || typeof value !== "object") return false;
-	if (Symbol.toStringTag in value || Symbol.iterator in value) return false;
-	const prototype = Object.getPrototypeOf(value);
-	return prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null;
-}
+const booleanAttributes = Object.freeze([
+	"async",
+	"autofocus",
+	"autoplay",
+	"checked",
+	"controls",
+	"default",
+	"defer",
+	"disabled",
+	"formnovalidate",
+	"hidden",
+	"inert",
+	"ismap",
+	"itemscope",
+	"loop",
+	"multiple",
+	"muted",
+	"nomodule",
+	"novalidate",
+	"open",
+	"playsinline",
+	"readonly",
+	"required",
+	"reversed",
+	"selected"
+]);
+const booleanAttributesSet = new Set(booleanAttributes);
+const elementEvents = {
+	DETAILS: { open: "toggle" },
+	INPUT: {
+		checked: "change",
+		value: "input"
+	},
+	SELECT: { value: "change" },
+	TEXTAREA: { value: "input" }
+};
+document.createElement("form");
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/node_modules/@oscarpalmer/atoms/dist/internal/number.mjs
 /**
 * Clamp a number between a minimum and maximum value
 * @param value Value to clamp
@@ -76,14 +206,18 @@ function clamp$1(value, minimum, maximum, loop) {
 	if (value < minimum) return loop === true ? maximum : minimum;
 	return value > maximum ? loop === true ? minimum : maximum : value;
 }
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/node_modules/@oscarpalmer/atoms/dist/internal/sized.mjs
 function getSizedMaximum$1(first, second) {
 	let actual;
 	if (typeof first === "number") actual = first;
 	else actual = typeof second === "number" ? second : MAXIMUM_DEFAULT$1;
 	return clamp$1(actual, 1, MAXIMUM_ABSOLUTE$1);
 }
-var MAXIMUM_ABSOLUTE$1 = 16777216;
-var MAXIMUM_DEFAULT$1 = 1048576;
+const MAXIMUM_ABSOLUTE$1 = 16777216;
+const MAXIMUM_DEFAULT$1 = 1048576;
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/node_modules/@oscarpalmer/atoms/dist/sized/map.mjs
 /**
 * A Map with a maximum size
 *
@@ -130,6 +264,8 @@ var SizedMap$1 = class extends Map {
 		return super.set(key, value);
 	}
 };
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/node_modules/@oscarpalmer/atoms/dist/function/memoize.mjs
 var Memoized$1 = class {
 	#state;
 	/**
@@ -147,7 +283,7 @@ var Memoized$1 = class {
 	constructor(callback, options) {
 		const cache = new SizedMap$1(options.cacheSize);
 		const getter = (...parameters) => {
-			const key = options.cacheKey?.(...parameters) ?? (parameters.length === 1 ? parameters[0] : join$1(parameters.map(getString$1), "_"));
+			const key = options.cacheKey?.(...parameters) ?? (parameters.length === 1 ? parameters[0] : join$1(parameters.map(getString$1), SEPARATOR$1));
 			if (cache.has(key)) return cache.get(key);
 			const value = callback(...parameters);
 			cache.set(key, value);
@@ -222,14 +358,17 @@ function getMemoizationOptions$1(input) {
 function memoize$1(callback, options) {
 	return new Memoized$1(callback, getMemoizationOptions$1(options));
 }
-var DEFAULT_CACHE_SIZE$1 = 1024;
+const DEFAULT_CACHE_SIZE$1 = 1024;
+const SEPARATOR$1 = "_";
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/node_modules/@oscarpalmer/atoms/dist/string/case.mjs
 /**
 * Convert a string to camel case _(thisIsCamelCase)_
 * @param value String to convert
 * @returns Camel-cased string
 */
 function camelCase(value) {
-	return toCase("camel", value, true, false);
+	return toCase(CASE_CAMEL, value, true, false);
 }
 /**
 * Capitalize the first letter of a string _(and lowercase the rest)_
@@ -257,7 +396,7 @@ function toCaseCallback(value) {
 	const partsLength = parts.length;
 	const cased = [];
 	for (let partIndex = 0; partIndex < partsLength; partIndex += 1) {
-		const items = parts[partIndex].replace(EXPRESSION_ACRONYM, (full, one, two, three) => three === "s" ? full : `${one}-${two}${three}`).replace(EXPRESSION_CAMEL_CASE, REPLACEMENT_CAMEL_CASE).split("-");
+		const items = parts[partIndex].replace(EXPRESSION_ACRONYM, (full, one, two, three) => three === S ? full : `${one}-${two}${three}`).replace(EXPRESSION_CAMEL_CASE, REPLACEMENT_CAMEL_CASE).split("-");
 		const itemsLength = items.length;
 		const partResult = [];
 		let itemCount = 0;
@@ -272,17 +411,27 @@ function toCaseCallback(value) {
 	}
 	return join$1(cased, delimiters[type]);
 }
-var caseMemoizers = {};
-var delimiters = {
-	camel: "",
-	kebab: "-",
-	pascal: "",
-	snake: "_"
+const CASE_CAMEL = "camel";
+const CASE_KEBAB = "kebab";
+const CASE_PASCAL = "pascal";
+const CASE_SNAKE = "snake";
+const DELIMTER_EMPTY = "";
+const DELIMITER_HYPHEN = "-";
+const DELIMITER_UNDERSCORE = "_";
+const EXPRESSION_CAMEL_CASE = /(\p{Ll})(\p{Lu})/gu;
+const EXPRESSION_ACRONYM = /(\p{Lu}*)(\p{Lu})(\p{Ll}+)/gu;
+const REPLACEMENT_CAMEL_CASE = "$1-$2";
+const S = "s";
+const caseMemoizers = {};
+const delimiters = {
+	[CASE_CAMEL]: DELIMTER_EMPTY,
+	[CASE_KEBAB]: DELIMITER_HYPHEN,
+	[CASE_PASCAL]: DELIMTER_EMPTY,
+	[CASE_SNAKE]: DELIMITER_UNDERSCORE
 };
-var EXPRESSION_CAMEL_CASE = /(\p{Ll})(\p{Lu})/gu;
-var EXPRESSION_ACRONYM = /(\p{Lu}*)(\p{Lu})(\p{Ll}+)/gu;
-var REPLACEMENT_CAMEL_CASE = "$1-$2";
-var memoizedCapitalize;
+let memoizedCapitalize;
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/dist/internal/get-value.mjs
 function getBoolean(value, defaultValue) {
 	return typeof value === "boolean" ? value : defaultValue ?? false;
 }
@@ -290,127 +439,16 @@ function getStyleValue(element, property, computed) {
 	const name = camelCase(property);
 	return computed ? getComputedStyle(element)[name] : element.style[name];
 }
-/**
-* Is the value an event target?
-* @param value Value to check
-* @returns `true` if it's an event target, otherwise `false`
-*/
-function isEventTarget(value) {
-	return typeof value === "object" && value != null && typeof value.addEventListener === "function" && typeof value.removeEventListener === "function" && typeof value.dispatchEvent === "function";
-}
-/**
-* Is the value an HTML or SVG element?
-* @param value Value to check
-* @returns `true` if it's an HTML or SVG element, otherwise `false`
-*/
-function isHTMLOrSVGElement(value) {
-	return value instanceof HTMLElement || value instanceof SVGElement;
-}
-new Set([
-	Node.ELEMENT_NODE,
-	Node.TEXT_NODE,
-	Node.PROCESSING_INSTRUCTION_NODE,
-	Node.COMMENT_NODE,
-	Node.DOCUMENT_TYPE_NODE
-]);
-/**
-* Is the value `undefined`, `null`, or a whitespace-only string?
-* @param value Value to check
-* @returns `true` if the value is nullable or a whitespace-only string, otherwise `false`
-*/
-function isNullableOrWhitespace$1(value) {
-	return value == null || EXPRESSION_WHITESPACE$1.test(getString$1(value));
-}
-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);
-	else if (isAttribute(first)) setElementValues(element, first.name, first.value, third, callback);
-}
-function setElementValues(element, first, second, third, callback) {
-	if (!isHTMLOrSVGElement(element)) return;
-	if (typeof first === "string") {
-		callback(element, first, second, third);
-		return;
-	}
-	const isArray = Array.isArray(first);
-	if (!isArray && !(typeof first === "object" && first !== null)) return;
-	const entries = isArray ? first : Object.entries(first).map(([name, value]) => ({
-		name,
-		value
-	}));
-	const { length } = entries;
-	for (let index = 0; index < length; index += 1) {
-		const entry = entries[index];
-		if (typeof entry === "object" && typeof entry?.name === "string") callback(element, entry.name, entry.value, third);
-	}
-}
-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 isAttribute(value) {
-	return value instanceof Attr || isPlainObject$1(value) && typeof value.name === "string" && "value" in value;
-}
-function updateAttribute(element, name, value, dispatch) {
-	const normalizedName = name.toLowerCase();
-	const isBoolean = booleanAttributesSet.has(normalizedName);
-	const next = isBoolean ? value === true || typeof value === "string" && (value === "" || value.toLowerCase() === normalizedName) : value == null ? "" : value;
-	if (name in element) updateProperty(element, normalizedName, next, dispatch);
-	updateElementValue(element, name, isBoolean ? next ? "" : null : value, element.setAttribute, element.removeAttribute, isBoolean, false);
-}
-function updateProperty(element, name, value, dispatch) {
-	if (Object.is(element[name], value)) return;
-	element[name] = value;
-	const event = dispatch !== false && elementEvents[element.tagName]?.[name];
-	if (typeof event === "string") element.dispatchEvent(new Event(event, { bubbles: true }));
-}
-/**
-* List of boolean attributes
-*/
-const booleanAttributes = Object.freeze([
-	"async",
-	"autofocus",
-	"autoplay",
-	"checked",
-	"controls",
-	"default",
-	"defer",
-	"disabled",
-	"formnovalidate",
-	"hidden",
-	"inert",
-	"ismap",
-	"itemscope",
-	"loop",
-	"multiple",
-	"muted",
-	"nomodule",
-	"novalidate",
-	"open",
-	"playsinline",
-	"readonly",
-	"required",
-	"reversed",
-	"selected"
-]);
-var booleanAttributesSet = new Set(booleanAttributes);
-var elementEvents = {
-	DETAILS: { open: "toggle" },
-	INPUT: {
-		checked: "change",
-		value: "input"
-	},
-	SELECT: { value: "change" },
-	TEXTAREA: { value: "input" }
-};
-document.createElement("form");
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/dist/attribute/set.mjs
 function setAttribute(element, first, second, third) {
 	setElementValue(element, first, second, third, updateAttribute);
 }
 function setAttributes(element, attributes, dispatch) {
 	setElementValues(element, attributes, null, dispatch, updateAttribute);
 }
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/dist/style.mjs
 /**
 * Get styles from an element
 * @param element Element to get the styles from
@@ -475,12 +513,57 @@ function updateStyleProperty(element, key, value) {
 		this.style[property] = "";
 	}, false, false);
 }
+//#endregion
+//#region src/models/dom.model.ts
+const ARIA_ACTIVEDESCENDANT = "aria-activedescendant";
+const ARIA_LABEL = "aria-label";
+const ARIA_SELECTED = "aria-selected";
+const ARIA_SORT = "aria-sort";
+const ATTRIBUTE_DATA_ACTIVE = "data-active";
+const ATTRIBUTE_DATA_EVENT = "data-event";
+const ATTRIBUTE_DATA_KEY = "data-key";
+const ATTRIBUTE_DATA_SORT_DIRECTION = "data-sort-direction";
+const ATTRIBUTE_DATA_SORT_POSITION = "data-sort-position";
+const ATTRIBUTE_ROLE = "role";
+const ROLE_CELL = "cell";
+const ROLE_COLUMNHEADER = "columnheader";
+const ROLE_ROWGROUP = "rowgroup";
+const ROLE_TABLE = "table";
+//#endregion
+//#region src/models/style.model.ts
+const CSS_BUTTON = "tabela__button";
+const CSS_BUTTON_GROUP = "tabela__button--group";
+const CSS_CELL = "tabela__cell";
+const CSS_CELL_BODY = "tabela__cell--body";
+const CSS_CELL_FOOTER = "tabela__cell--footer";
+const CSS_CELL_GROUP = "tabela__cell--group";
+const CSS_FAKER = "tabela__faker";
+const CSS_GROUP_SELECTED = "tabela__group__selected";
+const CSS_GROUP_TOTAL = "tabela__group__total";
+const CSS_HEADING = "tabela__heading";
+const CSS_HEADING_CONTENT = "tabela__heading__content";
+const CSS_HEADING_SORTER = "tabela__heading__sorter";
+const CSS_ROW = "tabela__row";
+const CSS_ROW_BODY = "tabela__row--body";
+const CSS_ROW_FOOTER = "tabela__row--footer";
+const CSS_ROW_GROUP = "tabela__row--group tabela__group";
+const CSS_ROW_HEADER = "tabela__row--header";
+const CSS_ROW_SELECTED = "tabela__row--selected";
+const CSS_ROWGROUP = "tabela__rowgroup";
+const CSS_ROWGROUP_BODY = "tabela__rowgroup--body";
+const CSS_ROWGROUP_FOOTER = "tabela__rowgroup--footer";
+const CSS_ROWGROUP_HEADER = "tabela__rowgroup--header";
+const CSS_SELECTION = "tabela__selection";
+const CSS_TABLE = "tabela__table";
+const CSS_WRAPPER = "tabela";
+//#endregion
+//#region src/helpers/dom.helpers.ts
 function createCell(width, body) {
 	const cell = createElement("div", {
-		className: "tabela__cell",
-		role: "cell"
+		className: CSS_CELL,
+		role: ROLE_CELL
 	}, {}, { width: `${width}px` });
-	if (body ?? true) cell.classList.add("tabela__cell--body");
+	if (body ?? true) cell.classList.add(CSS_CELL_BODY);
 	return cell;
 }
 function createElement(tagName, properties, attributes, style) {
@@ -492,39 +575,92 @@ function createElement(tagName, properties, attributes, style) {
 	setStyles(element, style ?? {});
 	return element;
 }
-function createRowGroup(withRow) {
+function createRowGroup(height, withRow) {
 	const group = createElement("div", {
-		className: "tabela__rowgroup",
-		role: "rowgroup"
-	}, {}, {});
+		className: CSS_ROWGROUP,
+		role: ROLE_ROWGROUP
+	});
 	if (!(withRow ?? true)) return group;
-	const row = createRow();
+	const row = createRow(height);
 	group.append(row);
 	return {
 		group,
 		row
 	};
 }
-function createRow() {
+function createRow(height) {
 	return createElement("div", {
-		className: "tabela__row",
+		className: CSS_ROW,
 		role: "row"
-	}, {}, { height: "32px" });
-}
+	}, {}, { height: `${height}px` });
+}
+//#endregion
+//#region src/models/event.model.ts
+const EVENT_BODY = "body";
+const EVENT_DATA_ADD = "data:add";
+const EVENT_DATA_CLEAR = "data:clear";
+const EVENT_DATA_FILTERED = "data:filtered";
+const EVENT_DATA_REMOVE = "data:remove";
+const EVENT_DATA_SORTED = "data:sorted";
+const EVENT_DATA_SYNCHRONIZE = "data:synchronize";
+const EVENT_DATA_UPDATE = "data:update";
+const EVENT_GROUP = "group";
+const EVENT_GROUP_ADD = "group:add";
+const EVENT_GROUP_CLEAR = "group:clear";
+const EVENT_GROUP_REMOVE = "group:remove";
+const EVENT_GROUP_TOGGLE = "group:toggle";
+const EVENT_GROUP_UPDATE = "group:update";
+const EVENT_HEADING = "heading";
+const EVENT_SORT_ADD = "sort:add";
+const EVENT_SORT_CLEAR = "sort:clear";
+const EVENT_SORT_FLIP = "sort:flip";
+const EVENT_SORT_REMOVE = "sort:remove";
+const EVENT_SORT_SET = "sort:set";
+const EVENTS_NAMES = new Set([
+	EVENT_DATA_ADD,
+	EVENT_DATA_CLEAR,
+	EVENT_DATA_FILTERED,
+	EVENT_DATA_REMOVE,
+	EVENT_DATA_SORTED,
+	EVENT_DATA_SYNCHRONIZE,
+	EVENT_DATA_UPDATE,
+	"filter:add",
+	"filter:clear",
+	"filter:remove",
+	EVENT_GROUP_ADD,
+	EVENT_GROUP_CLEAR,
+	EVENT_GROUP_REMOVE,
+	EVENT_GROUP_TOGGLE,
+	EVENT_GROUP_UPDATE,
+	"navigation:active",
+	"render:begin",
+	"render:end",
+	"selection:add",
+	"selection:clear",
+	"selection:remove",
+	"selection:toggle",
+	EVENT_SORT_ADD,
+	EVENT_SORT_CLEAR,
+	EVENT_SORT_FLIP,
+	EVENT_SORT_REMOVE,
+	EVENT_SORT_SET
+]);
+//#endregion
+//#region src/components/body.component.ts
 function createFaker() {
-	return createElement("div", { className: "tabela__faker" }, {}, {});
+	return createElement("div", { className: CSS_FAKER });
 }
 var BodyComponent = class {
 	elements = {
 		faker: createFaker(),
 		group: void 0
 	};
-	constructor() {
-		const group = createRowGroup(false);
+	constructor(state) {
+		const group = createRowGroup(state.options.rowHeight, false);
 		this.elements.group = group;
-		group.className += " tabela__rowgroup--body";
+		group.className += ` ${CSS_ROWGROUP_BODY}`;
 		group.tabIndex = 0;
-		group.setAttribute("data-event", "body");
+		group.setAttribute(ATTRIBUTE_DATA_EVENT, EVENT_BODY);
 		group.append(this.elements.faker);
 	}
 	destroy() {
@@ -532,17 +668,19 @@ var BodyComponent = class {
 		this.elements.group = void 0;
 	}
 };
+//#endregion
+//#region src/components/footer.component.ts
 var FooterComponent = class {
 	elements;
-	constructor() {
-		const { group, row } = createRowGroup();
+	constructor(state) {
+		const { group, row } = createRowGroup(state.options.rowHeight);
 		this.elements = {
 			group,
 			row,
 			cells: []
 		};
-		group.className += " tabela__rowgroup--footer";
-		row.className += " tabela__row--footer";
+		group.className += ` ${CSS_ROWGROUP_FOOTER}`;
+		row.className += ` ${CSS_ROW_FOOTER}`;
 	}
 	destroy() {
 		this.elements.cells.length = 0;
@@ -556,23 +694,25 @@ var FooterComponent = class {
 		elements.row.innerHTML = "";
 		for (let index = 0; index < length; index += 1) {
 			const cell = createCell(columns[index].options.width ?? 4, false);
-			cell.className += " tabela__cell--footer";
+			cell.className += ` ${CSS_CELL_FOOTER}`;
 			cell.innerHTML = "&nbsp;";
 			elements.cells.push(cell);
 			elements.row.append(cell);
 		}
 	}
 };
+//#endregion
+//#region src/components/header.component.ts
 var HeaderComponent = class {
 	elements;
-	constructor() {
-		const { group, row } = createRowGroup();
+	constructor(state) {
+		const { group, row } = createRowGroup(state.options.rowHeight);
 		this.elements = {
 			group,
 			row
 		};
-		group.className += " tabela__rowgroup--header";
-		row.className += " tabela__row--header";
+		group.className += ` ${CSS_ROWGROUP_HEADER}`;
+		row.className += ` ${CSS_ROW_HEADER}`;
 	}
 	destroy() {
 		this.elements.group = void 0;
@@ -583,16 +723,18 @@ var HeaderComponent = class {
 		this.elements.row.append(...columns.map((column) => column.elements.wrapper));
 	}
 };
+//#endregion
+//#region src/components/column.component.ts
 var ColumnComponent = class {
 	elements;
 	options;
 	constructor(column) {
-		const width = Number.parseInt(getComputedStyle(document.body).fontSize, 10) * (column.width ?? column.title.length * 1.5);
+		const width = Number.parseInt(getComputedStyle(document.body).fontSize, 10) * (column.width ?? column.label.length * 1.5);
 		this.options = {
 			...column,
 			width
 		};
-		this.elements = createHeading(this.options.field, this.options.title, width);
+		this.elements = createHeading(this.options.key, this.options.label, width);
 	}
 	destroy() {
 		this.elements.content.remove();
@@ -602,19 +744,19 @@ var ColumnComponent = class {
 		this.options = void 0;
 	}
 };
-function createHeading(field, title, width) {
+function createHeading(key, title, width) {
 	const wrapper = createElement("div", {
-		className: "tabela__heading",
-		role: "columnheader"
+		className: CSS_HEADING,
+		[ATTRIBUTE_ROLE]: ROLE_COLUMNHEADER
 	}, {
-		"data-event": "heading",
-		"data-field": field
+		[ATTRIBUTE_DATA_EVENT]: EVENT_HEADING,
+		[ATTRIBUTE_DATA_KEY]: key
 	}, { width: `${width}px` });
 	const content = createElement("div", {
-		className: "tabela__heading__content",
+		className: CSS_HEADING_CONTENT,
 		textContent: title
-	}, {}, {});
-	const sorter = createElement("div", { className: "tabela__heading__sorter" }, {}, {});
+	});
+	const sorter = createElement("div", { className: CSS_HEADING_SORTER });
 	wrapper.append(content, sorter);
 	return {
 		content,
@@ -622,6 +764,8 @@ function createHeading(field, title, width) {
 		wrapper
 	};
 }
+//#endregion
+//#region src/managers/column.manager.ts
 var ColumnManager = class {
 	items = [];
 	constructor(state) {
@@ -634,14 +778,17 @@ var ColumnManager = class {
 		this.items = void 0;
 		this.state = void 0;
 	}
+	get(key) {
+		return this.items.find((item) => item.options.key === key);
+	}
 	remove(value) {
 		const { items, state } = this;
 		const { components, managers } = state;
-		const fields = (Array.isArray(value) ? value : [value]).filter((item) => typeof item === "string");
-		const { length } = fields;
+		const keys = (Array.isArray(value) ? value : [value]).filter((item) => typeof item === "string");
+		const { length } = keys;
 		if (length === 0) return;
-		for (let fieldIndex = 0; fieldIndex < length; fieldIndex += 1) {
-			const itemIndex = items.findIndex((component) => component.options.field === fields[fieldIndex]);
+		for (let keyIndex = 0; keyIndex < length; keyIndex += 1) {
+			const itemIndex = items.findIndex((component) => component.options.key === keys[keyIndex]);
 			if (itemIndex > -1) {
 				items[itemIndex].destroy();
 				items.splice(itemIndex, 1);
@@ -649,16 +796,54 @@ var ColumnManager = class {
 		}
 		components.header.update(items);
 		components.footer.update(items);
-		managers.render.removeCells(fields);
+		managers.render.removeCells(keys);
+	}
+	set(columns) {
+		const { items, state } = this;
+		const { footer, header } = state.components;
+		items.splice(0, items.length, ...columns.map((column) => new ColumnComponent(column)));
+		header.update(items);
+		footer.update(items);
+	}
+};
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/internal/array/chunk.mjs
+/**
+* Chunk an array into smaller arrays
+* @param array Array to chunk
+* @param size Size of each chunk _(minimum is `1`, maximum is `5000`; defaults to `5000`)_
+* @returns Array of arrays
+*/
+function chunk(array, size) {
+	if (!Array.isArray(array)) return [];
+	if (array.length === 0) return [];
+	const { length } = array;
+	const actualSize = typeof size === "number" && size > 0 && size <= MAX_SIZE ? size : MAX_SIZE;
+	if (length <= actualSize) return [array];
+	const chunks = [];
+	let index = 0;
+	while (index < length) {
+		chunks.push(array.slice(index, index + actualSize));
+		index += actualSize;
 	}
-	set(columns) {
-		const { items, state } = this;
-		const { footer, header } = state.components;
-		items.splice(0, items.length, ...columns.map((column) => new ColumnComponent(column)));
-		header.update(items);
-		footer.update(items);
+	return chunks;
+}
+const MAX_SIZE = 5e3;
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/internal/array/compact.mjs
+function compact(array, strict) {
+	if (!Array.isArray(array)) return [];
+	if (strict === true) return array.filter(Boolean);
+	const { length } = array;
+	const compacted = [];
+	for (let index = 0; index < length; index += 1) {
+		const item = array[index];
+		if (item != null) compacted.push(item);
 	}
-};
+	return compacted;
+}
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/internal/array/callbacks.mjs
 function getArrayCallback(value) {
 	switch (typeof value) {
 		case "function": return value;
@@ -674,26 +859,8 @@ function getArrayCallbacks(bool, key, value) {
 		value: getArrayCallback(value)
 	};
 }
-function findValue(type, array, parameters) {
-	const findIndex = type === FIND_VALUE_INDEX;
-	if (!Array.isArray(array) || array.length === 0) return findIndex ? -1 : void 0;
-	const { bool, key, value } = getParameters(parameters);
-	const callbacks = getArrayCallbacks(bool, key);
-	if (callbacks?.bool == null && callbacks?.keyed == null) return findIndex ? array.indexOf(value) : array.find((item) => Object.is(item, value));
-	if (callbacks.bool != null) {
-		const index = array.findIndex(callbacks.bool);
-		return findIndex ? index : array[index];
-	}
-	return findValueInArray(array, callbacks.keyed, value, findIndex);
-}
-function findValueInArray(array, callback, value, findIndex) {
-	const { length } = array;
-	for (let index = 0; index < length; index += 1) {
-		const item = array[index];
-		if (Object.is(callback?.(item, index, array), value)) return findIndex ? index : item;
-	}
-	return findIndex ? -1 : void 0;
-}
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/internal/array/find.mjs
 function findValues(type, array, parameters, mapper) {
 	const result = {
 		matched: [],
@@ -736,15 +903,9 @@ function getParameters(original) {
 		value: length === 1 && typeof original[0] !== "function" ? original[0] : original[1]
 	};
 }
-var FIND_VALUE_INDEX = "index";
-var UNIQUE_THRESHOLD = 100;
-function filter(array, ...parameters) {
-	return findValues("all", array, parameters).matched;
-}
-filter.remove = removeFiltered;
-function removeFiltered(array, ...parameters) {
-	return findValues("all", array, parameters).notMatched;
-}
+const UNIQUE_THRESHOLD = 100;
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/internal/is.mjs
 /**
 * Is the value a constructor function?
 * @param value Value to check
@@ -801,84 +962,14 @@ function isTypedArray(value) {
 	]);
 	return TYPED_ARRAYS.has(value?.constructor);
 }
-var TYPED_ARRAYS;
-/**
-* Chunk an array into smaller arrays
-* @param array Array to chunk
-* @param size Size of each chunk _(minimum is `1`, maximum is `5000`; defaults to `5000`)_
-* @returns Array of arrays
-*/
-function chunk(array, size) {
-	if (!Array.isArray(array)) return [];
-	if (array.length === 0) return [];
-	const { length } = array;
-	const actualSize = typeof size === "number" && size > 0 && size <= MAX_SIZE ? size : MAX_SIZE;
-	if (length <= actualSize) return [array];
-	const chunks = [];
-	let index = 0;
-	while (index < length) {
-		chunks.push(array.slice(index, index + actualSize));
-		index += actualSize;
-	}
-	return chunks;
-}
-var MAX_SIZE = 5e3;
-function compact(array, strict) {
-	if (!Array.isArray(array)) return [];
-	if (strict === true) return array.filter(Boolean);
-	const { length } = array;
-	const compacted = [];
-	for (let index = 0; index < length; index += 1) {
-		const item = array[index];
-		if (item != null) compacted.push(item);
-	}
-	return compacted;
-}
-function indexOf(array, ...parameters) {
-	return findValue(FIND_VALUE_INDEX, array, parameters);
-}
-function getName(start, haystack, needle) {
-	if (start === 0) return haystack === needle ? POSITION_SAME : POSITION_START;
-	return start + needle === haystack ? POSITION_END : POSITION_INSIDE;
-}
-function getPosition$1(haystack, needle, key) {
-	if (!Array.isArray(haystack) || !Array.isArray(needle)) return invalid;
-	const haystackLength = haystack.length;
-	const needleLength = needle.length;
-	if (haystackLength === 0 || needleLength === 0) return outside;
-	if (needleLength > haystackLength) return outside;
-	const callback = getArrayCallback(key);
-	const limit = haystackLength - needleLength + 1;
-	let needleValues = callback == null ? needle : needle.slice();
-	if (callback != null) for (let needleIndex = 0; needleIndex < needleLength; needleIndex += 1) needleValues[needleIndex] = callback(needle[needleIndex], needleIndex, needle);
-	for (let haystackIndex = 0; haystackIndex < limit; haystackIndex += 1) {
-		let haystackItem = haystack[haystackIndex];
-		let haystackValue = callback?.(haystackItem, haystackIndex, haystack) ?? haystackItem;
-		if (!Object.is(haystackValue, needleValues[0])) continue;
-		if (needleLength === 1) return [haystackIndex, getName(haystackIndex, haystackLength, needleLength)];
-		for (let needleIndex = 1; needleIndex < needleLength; needleIndex += 1) {
-			haystackItem = haystack[haystackIndex + needleIndex];
-			haystackValue = callback?.(haystackItem, haystackIndex + needleIndex, haystack) ?? haystackItem;
-			if (!Object.is(haystackValue, needleValues[needleIndex])) break;
-			if (needleIndex === needleLength - 1) return [haystackIndex, getName(haystackIndex, haystackLength, needleLength)];
-		}
-	}
-	return outside;
-}
-function indexOfArray(haystack, needle, key) {
-	return getPosition$1(haystack, needle, key)[0];
-}
-var POSITION_END = "end";
-var POSITION_INSIDE = "inside";
-var POSITION_INVALID = "invalid";
-var POSITION_OUTSIDE = "outside";
-var POSITION_SAME = "same";
-var POSITION_START = "start";
-var invalid = [-1, POSITION_INVALID];
-var outside = [-1, POSITION_OUTSIDE];
+let TYPED_ARRAYS;
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/array/select.mjs
 function select(array, ...parameters) {
 	return findValues("all", array, parameters, parameters.pop()).matched;
 }
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/internal/math/aggregate.mjs
 function aggregate(type, array, key) {
 	const length = Array.isArray(array) ? array.length : 0;
 	if (length === 0) return {
@@ -917,12 +1008,14 @@ function getAggregated(type, array, key) {
 	const aggregated = aggregate(type, array, key);
 	return aggregated.count > 0 ? aggregated.value : NaN;
 }
-var aggregators = {
+const aggregators = {
 	average: calculateSum,
 	max: (current, value, notNumber) => notNumber || value > current ? value : current,
 	min: (current, value, notNumber) => notNumber || value < current ? value : current,
 	sum: calculateSum
 };
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/internal/string.mjs
 /**
 * Get the string value from any value
 * @param value Original value
@@ -936,6 +1029,9 @@ function getString(value) {
 	const asString = String(value.valueOf?.() ?? value);
 	return asString.startsWith("[object ") ? JSON.stringify(value) : asString;
 }
+function ignoreKey(key) {
+	return EXPRESSION_IGNORED.test(key);
+}
 /**
 * Join an array of values into a string
 * @param value Array of values
@@ -953,7 +1049,10 @@ function join(value, delimiter) {
 function words(value) {
 	return typeof value === "string" ? value.match(EXPRESSION_WORDS) ?? [] : [];
 }
-var EXPRESSION_WORDS = /[^\x00-\x2f\x3a-\x40\x5b-\x60\x7b-\x7f]+/g;
+const EXPRESSION_IGNORED = /(^|\.)(__proto__|constructor|prototype)(\.|$)/i;
+const EXPRESSION_WORDS = /[^\x00-\x2f\x3a-\x40\x5b-\x60\x7b-\x7f]+/g;
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/internal/value/handlers.mjs
 function getCompareHandlers(owner, options) {
 	const { get, register, unregister } = getHandlers(owner, options);
 	return {
@@ -987,7 +1086,9 @@ function getHandlers(owner, options) {
 function isConstructable(value) {
 	return typeof value === "object" && value !== null;
 }
-var COMPARE_NAME = "compare";
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/internal/value/compare.mjs
+const COMPARE_NAME = "compare";
 /**
 * Compare two values _(for sorting purposes)_
 * @param first First value
@@ -1058,119 +1159,82 @@ function getComparisonParts(value) {
 	if (Array.isArray(value)) return value;
 	return typeof value === "object" ? [value] : words(getString(value));
 }
-var comparators$1 = {
+const comparators$1 = {
 	bigint: compareNumbers,
 	boolean: compareNumbers,
 	number: compareNumbers,
 	symbol: compareSymbols
 };
-function getCallback(value, key, forObject) {
-	if (key != null) return;
-	if (forObject && typeof value.value === "function") return value.value;
-	return typeof value === "function" ? value : void 0;
-}
-function getKey$1(value, forObject) {
-	if (forObject && typeof value.key === "string") return value.key;
-	return typeof value === "string" ? value : void 0;
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/array/sort.mjs
+function getComparisonSorter(callback, modifier) {
+	return {
+		modifier,
+		compare: { simple: callback },
+		get: false,
+		identifier: String(callback)
+	};
 }
-function getModifier(value, modifier, forObject) {
-	if (!forObject || typeof value.direction !== "string") return modifier;
-	if (value.direction === "ascending") return 1;
-	return value.direction === "descending" ? -1 : modifier;
+function getObjectSorter(obj, modifier) {
+	let sorter;
+	if (typeof obj.comparison === "function") sorter = getComparisonSorter(obj.comparison, modifier);
+	else if (typeof obj.key === "string") {
+		sorter = getValueSorter(obj.key, modifier);
+		if (typeof obj.compare === "function") sorter.compare = { complex: obj.compare };
+	} else if (typeof obj.value === "function") sorter = getValueSorter(obj.value, modifier);
+	if (sorter != null && typeof obj.direction === "string") sorter.modifier = modifiers[obj.direction] ?? modifier;
+	return sorter;
 }
 function getSorter(value, modifier) {
-	const forObject = isPlainObject(value);
-	const sorter = {
-		identifier: "",
-		modifier
-	};
-	sorter.compare = forObject && typeof value.compare === "function" ? value.compare : void 0;
-	sorter.key = getKey$1(value, forObject);
-	sorter.modifier = getModifier(value, modifier, forObject);
-	sorter.callback = getCallback(value, sorter.key, forObject);
-	if (sorter.key != null || sorter.callback != null) {
-		sorter.identifier = `${sorter.key ?? sorter.callback}`;
-		return sorter;
+	switch (true) {
+		case typeof value === "function": return getComparisonSorter(value, modifier);
+		case typeof value === "string": return getValueSorter(value, modifier);
+		case isPlainObject(value): return getObjectSorter(value, modifier);
+		default: break;
 	}
 }
+function getValueSorter(value, modifier) {
+	return {
+		modifier,
+		get: true,
+		identifier: String(value),
+		value: typeof value === "function" ? value : (item) => item[value]
+	};
+}
 function sort(array, first, second) {
 	if (!Array.isArray(array)) return [];
 	if (array.length < 2) return array;
-	const modifier = (first === true || second === true ? "descending" : "ascending") === "ascending" ? 1 : -1;
+	const modifier = modifiers[first === true || second === true ? SORT_DIRECTION_DESCENDING : SORT_DIRECTION_ASCENDING];
 	const sorters = (Array.isArray(first) ? first : [first]).map((item) => getSorter(item, modifier)).filter((sorter) => sorter != null).filter((current, index, filtered) => filtered.findIndex((next) => next.identifier === current.identifier) === index);
 	const { length } = sorters;
-	if (length === 0) return array.sort((firstItem, secondItem) => compare(firstItem, secondItem) * modifier);
+	if (length === 0) return array.sort((first, second) => compare(first, second) * modifier);
 	if (length === 1) {
 		const sorter = sorters[0];
-		const { callback, key } = sorter;
 		return array.sort((firstItem, secondItem) => {
-			const firstValue = key == null ? callback?.(firstItem) : firstItem[key];
-			const secondValue = key == null ? callback?.(secondItem) : secondItem[key];
-			return (sorter.compare?.(firstItem, firstValue, secondItem, secondValue) ?? compare(firstValue, secondValue)) * sorter.modifier;
+			const firstValue = sorter.get ? sorter.value(firstItem) : firstItem;
+			const secondValue = sorter.get ? sorter.value(secondItem) : secondItem;
+			return (sorter.compare?.complex?.(firstItem, firstValue, secondItem, secondValue) ?? sorter.compare?.simple?.(firstItem, secondItem) ?? compare(firstValue, secondValue)) * sorter.modifier;
 		});
 	}
 	return array.sort((firstItem, secondItem) => {
 		for (let index = 0; index < length; index += 1) {
 			const sorter = sorters[index];
-			const { callback, key } = sorter;
-			const firstValue = key == null ? callback?.(firstItem) : firstItem[key];
-			const secondValue = key == null ? callback?.(secondItem) : secondItem[key];
-			const compared = (sorter.compare?.(firstItem, firstValue, secondItem, secondValue) ?? compare(firstValue, secondValue)) * sorter.modifier;
-			if (compared !== 0) return compared;
+			const firstValue = sorter.value?.(firstItem) ?? firstItem;
+			const secondValue = sorter.value?.(secondItem) ?? secondItem;
+			const comparison = (sorter.compare?.complex?.(firstItem, firstValue, secondItem, secondValue) ?? sorter.compare?.simple?.(firstItem, secondItem) ?? compare(firstValue, secondValue)) * sorter.modifier;
+			if (comparison !== 0) return comparison;
 		}
 		return 0;
 	});
 }
-function swap(array, first, second, third) {
-	if (!Array.isArray(array)) return [];
-	if (array.length === 0) return array;
-	if (Array.isArray(first) && Array.isArray(second)) return swapArrays(array, first, second, third);
-	return swapValues(array, first, second, third);
-}
-swap.indices = swapIndices;
-function swapArrays(array, from, to, key) {
-	if (from.length === 0 || to.length === 0) return array;
-	if (from.length === 1 && to.length === 1) return swapValues(array, from[0], to[0], key);
-	const fromIndex = indexOfArray(array, from, key);
-	const toIndex = indexOfArray(array, to, key);
-	if (fromIndex === -1 || toIndex === -1) return array;
-	const first = fromIndex < toIndex ? from : to;
-	const second = fromIndex < toIndex ? to : from;
-	const firstIndex = first === from ? fromIndex : toIndex;
-	const secondIndex = first === from ? toIndex : fromIndex;
-	const firstEnd = firstIndex + first.length - 1;
-	if (firstIndex <= secondIndex + second.length - 1 && firstEnd >= secondIndex) return array;
-	array.splice(firstIndex, first.length, ...second);
-	array.splice(secondIndex, second.length, ...first);
-	return array;
-}
-/**
-* Swap two indiced items in an array
-*
-* If either index is out of bounds, the array will be returned unchanged
-* @param array Array of items to swap
-* @param first First index _(can be negative to count from the end)_
-* @param second Second index _(can be negative to count from the end)_
-* @returns Original array with items swapped _(or unchanged if unable to swap)_
-*/
-function swapIndices(array, first, second) {
-	if (!Array.isArray(array) || array.length === 0) return [];
-	if (typeof first !== "number" || typeof second !== "number") return array;
-	const firstIndex = first < 0 ? array.length + first : first;
-	const secondIndex = second < 0 ? array.length + second : second;
-	if (firstIndex === secondIndex || firstIndex >= array.length || secondIndex >= array.length) return array;
-	const temp = array[firstIndex];
-	array[firstIndex] = array[secondIndex];
-	array[secondIndex] = temp;
-	return array;
-}
-function swapValues(array, from, to, key) {
-	const callback = getArrayCallback(key);
-	const first = callback == null ? array.indexOf(from) : indexOf(array, callback, callback(from, void 0, []));
-	const second = callback == null ? array.indexOf(to) : indexOf(array, callback, callback(to, void 0, []));
-	if (first === second || first === -1 || second === -1) return array;
-	return swapIndices(array, first, second);
-}
+const SORT_DIRECTION_ASCENDING = "ascending";
+const SORT_DIRECTION_DESCENDING = "descending";
+const modifiers = {
+	[SORT_DIRECTION_ASCENDING]: 1,
+	[SORT_DIRECTION_DESCENDING]: -1
+};
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/array/to-map.mjs
 function getMapValues(array, first, second, arrays) {
 	if (!Array.isArray(array)) return /* @__PURE__ */ new Map();
 	const { length } = array;
@@ -1195,6 +1259,8 @@ toMap.arrays = toMapArrays;
 function toMapArrays(array, first, second) {
 	return getMapValues(array, first, second, true);
 }
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/internal/array/group.mjs
 function groupValues(array, key, value, arrays) {
 	if (!Array.isArray(array) || array.length === 0) return {};
 	const { length } = array;
@@ -1212,6 +1278,8 @@ function groupValues(array, key, value, arrays) {
 	}
 	return record;
 }
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/array/to-record.mjs
 function toRecord(array, first, second) {
 	return groupValues(array, first, second, false);
 }
@@ -1219,89 +1287,312 @@ toRecord.arrays = toRecordArrays;
 function toRecordArrays(array, first, second) {
 	return groupValues(array, first, second, true);
 }
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/is.mjs
+/**
+* Is the value `undefined`, `null`, or a whitespace-only string?
+* @param value Value to check
+* @returns `true` if the value is nullable or a whitespace-only string, otherwise `false`
+*/
+function isNullableOrWhitespace(value) {
+	return value == null || EXPRESSION_WHITESPACE.test(getString(value));
+}
+const EXPRESSION_WHITESPACE = /^\s*$/;
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/internal/function/timer.mjs
+function getInterval(value) {
+	return typeof value === "number" && value > 0 ? value : 0;
+}
+function getTimer(type, callback, time) {
+	const interval = getInterval(time);
+	function run(now) {
+		start ??= now;
+		if (interval === 0 || now - start >= interval - OFFSET) {
+			if (throttle) start = now;
+			callback(...args);
+		} else frame = requestAnimationFrame(run);
+	}
+	const throttle = type === TIMER_THROTTLE;
+	let args;
+	let frame;
+	let start;
+	const timer = (...parameters) => {
+		timer.cancel();
+		args = parameters;
+		frame = requestAnimationFrame(run);
+	};
+	timer.cancel = () => {
+		cancelAnimationFrame(frame);
+	};
+	return timer;
+}
+const OFFSET = 5;
+const TIMER_THROTTLE = "throttle";
+const TIMER_WAIT = "wait";
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/promise/models.mjs
+const PROMISE_ABORT_EVENT = "abort";
+const PROMISE_ABORT_OPTIONS = { once: true };
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/promise/helpers.mjs
+function getNumberOrDefault(value) {
+	return typeof value === "number" && value > 0 ? value : 0;
+}
+function getPromiseOptions(input) {
+	if (typeof input === "number") return { time: getNumberOrDefault(input) };
+	if (input instanceof AbortSignal) return {
+		signal: input,
+		time: 0
+	};
+	const options = typeof input === "object" && input !== null ? input : {};
+	return {
+		signal: options.signal instanceof AbortSignal ? options.signal : void 0,
+		time: getNumberOrDefault(options.time)
+	};
+}
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/promise/misc.mjs
+function settlePromise(aborter, settler, value, signal) {
+	signal?.removeEventListener(PROMISE_ABORT_EVENT, aborter);
+	settler(value);
+}
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/promise/delay.mjs
+function delay(options) {
+	const { signal, time } = getPromiseOptions(options);
+	if (signal?.aborted ?? false) return Promise.reject(signal.reason);
+	function abort() {
+		timer.cancel();
+		rejector(signal.reason);
+	}
+	const timer = getTimer(TIMER_WAIT, () => {
+		settlePromise(abort, resolver, void 0, signal);
+	}, time);
+	signal?.addEventListener(PROMISE_ABORT_EVENT, abort, PROMISE_ABORT_OPTIONS);
+	let rejector;
+	let resolver;
+	return new Promise((resolve, reject) => {
+		rejector = reject;
+		resolver = resolve;
+		if (time === 0) settlePromise(abort, resolve, void 0, signal);
+		else timer();
+	});
+}
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/internal/value/misc.mjs
+function findKey(needle, haystack) {
+	const keys = Object.keys(haystack);
+	const index = keys.map((key) => key.toLowerCase()).indexOf(needle.toLowerCase());
+	return index > -1 ? keys[index] : needle;
+}
+function getNestedValue(data, path, ignoreCase) {
+	if (typeof data !== "object" || data === null || typeof path !== "string" || path.trim().length === 0) return {
+		exists: false,
+		value: void 0
+	};
+	const shouldIgnoreCase = ignoreCase === true;
+	const paths = getPaths(path, shouldIgnoreCase);
+	if (typeof paths === "string") return handleValue(data, paths, null, true, shouldIgnoreCase);
+	const { length } = paths;
+	let current = data;
+	for (let index = 0; index < length; index += 1) {
+		const part = paths[index];
+		const handled = handleValue(current, part, null, true, shouldIgnoreCase);
+		if (!handled.exists) return handled;
+		current = handled.value;
+	}
+	return {
+		exists: true,
+		value: current
+	};
+}
+function getPaths(path, lowercase) {
+	const normalized = lowercase ? path.toLowerCase() : path;
+	if (!EXPRESSION_NESTED.test(normalized)) return normalized;
+	return normalized.replace(EXPRESSION_BRACKET, ".$1").replace(EXPRESSION_DOTS, "").split(".");
+}
+function handleValue(data, path, value, get, ignoreCase) {
+	if (typeof data === "object" && data !== null && !ignoreKey(path)) {
+		const key = ignoreCase ? findKey(path, data) : path;
+		if (get) return {
+			exists: key in data,
+			value: data[key]
+		};
+		data[key] = typeof value === "function" ? value(data[key]) : value;
+	}
+	if (get) return {
+		exists: false,
+		value: void 0
+	};
+}
+const EXPRESSION_BRACKET = /\[(\w+)\]/g;
+const EXPRESSION_DOTS = /^\.|\.$/g;
+const EXPRESSION_NESTED = /\.|\[\w+\]/;
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/internal/value/get.mjs
+function getValue(data, path, ignoreCase) {
+	return getNestedValue(data, path, ignoreCase === true).value;
+}
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/internal/value/has.mjs
+function hasValue(data, path, ignoreCase) {
+	return getNestedValue(data, path, ignoreCase === true).exists;
+}
+hasValue.get = getWithHasValue;
+function getWithHasValue(data, path, ignoreCase) {
+	return getNestedValue(data, path, ignoreCase === true);
+}
+//#endregion
+//#region src/models/group.model.ts
+const GROUP_KEY_EXPRESSION = /^group:(.+)$/;
+const GROUP_KEY_PREFIX = "group:";
+//#endregion
+//#region src/components/group.component.ts
 var GroupComponent = class {
 	element;
 	expanded = true;
 	filtered = 0;
+	key;
 	selected = 0;
 	total = 0;
-	constructor(key, label, value) {
-		this.key = key;
+	value;
+	constructor(label, value) {
 		this.label = label;
-		this.value = value;
+		const stringified = getString(value);
+		this.key = `${GROUP_KEY_PREFIX}${stringified}`;
+		this.value = {
+			stringified,
+			original: value
+		};
 	}
 };
+function removeGroup(group) {
+	if (group.element == null) return;
+	group.element.innerHTML = "";
+	group.element.remove();
+}
 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">
+		className: `${CSS_ROW} ${CSS_ROW_GROUP}`,
+		innerHTML: `<div class="${CSS_CELL} ${CSS_CELL_GROUP}" role="${ROLE_CELL}">
+	<button class="${CSS_BUTTON} ${CSS_BUTTON_GROUP}" ${ATTRIBUTE_DATA_EVENT}="${EVENT_GROUP}" ${ATTRIBUTE_DATA_KEY}="${state.prefix}_${component.key}" type="button">
 		<span aria-hidden="true"></span>
 		<span>Open/close</span>
 	</button>
 	<p>${component.label}</p>
+	<span class="${CSS_GROUP_TOTAL}">${component.total}</span>
+	<span class="${CSS_GROUP_SELECTED}">${component.selected === 0 ? "" : component.selected}</span>
 </div>`,
-		role: "row"
+		[ATTRIBUTE_ROLE]: "row"
 	}, {}, { height: `${state.options.rowHeight}px` });
 }
+function updateGroup(state, component, emit) {
+	if (component.element == null) return;
+	const selected = component.element.querySelector(selectedSelector);
+	const total = component.element.querySelector(totalSelector);
+	if (selected != null) selected.textContent = component.selected === 0 ? "" : String(component.selected);
+	if (total != null) total.textContent = String(component.total);
+	if (emit) state.managers.event.emit(EVENT_GROUP_UPDATE, [component]);
+}
+const selectedSelector = `.${CSS_GROUP_SELECTED}`;
+const totalSelector = `.${CSS_GROUP_TOTAL}`;
+//#endregion
+//#region src/helpers/misc.helpers.ts
+function getGroup(group) {
+	return { value: group.value.original };
+}
+function getKey(value) {
+	if (typeof value === "number") return value;
+	if (typeof value !== "string") return;
+	return integerExpression.test(value) ? Number.parseInt(value, 10) : value;
+}
+function isEvent(value) {
+	return EVENTS_NAMES.has(value);
+}
+function isGroupKey(key) {
+	return typeof key === "string" && GROUP_KEY_EXPRESSION.test(key);
+}
+const integerExpression = /^\d+$/;
+//#endregion
+//#region src/models/sort.model.ts
+const SORT_ASCENDING = "ascending";
+const SORT_DESCENDING = "descending";
+//#endregion
+//#region src/managers/sort.manager.ts
 var SortManager = class {
-	handlers = Object.freeze({
+	handlers = {
 		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)
-	});
+		set: (items) => this.set(items, true)
+	};
 	items = [];
 	constructor(state) {
 		this.state = state;
 	}
-	add(field, direction) {
-		if (this.items.findIndex((item) => item.key === field) > -1) return;
+	add(key, direction) {
+		if (this.items.findIndex((item) => item.key === key) > -1) return;
 		this.items.push({
-			key: field,
+			key,
 			direction: direction ?? "ascending"
 		});
+		this.state.managers.event.emit(EVENT_SORT_ADD, [{
+			key,
+			direction: direction ?? "ascending"
+		}]);
 		this.sort();
 	}
-	addOrSet(event, field) {
-		if (event.ctrlKey || event.metaKey) this.add(field);
+	addOrSet(event, key) {
+		if (event.ctrlKey || event.metaKey) this.add(key);
 		else this.set([{
-			field,
-			direction: "ascending"
-		}]);
+			key,
+			direction: SORT_ASCENDING
+		}], false);
 	}
 	clear() {
-		if (this.items.length > 0) {
-			this.items.length = 0;
-			this.sort();
-		}
+		if (this.items.length === 0) return;
+		this.items.length = 0;
+		this.state.managers.event.emit(EVENT_SORT_CLEAR);
+		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);
+	flip(key) {
+		const item = this.items.find((item) => item.key === key);
 		if (item == null) return;
-		item.direction = item.direction === "ascending" ? "descending" : "ascending";
+		item.direction = item.direction === "ascending" ? SORT_DESCENDING : SORT_ASCENDING;
+		this.state.managers.event.emit(EVENT_SORT_FLIP, [{
+			key,
+			direction: item.direction
+		}]);
 		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();
+	remove(key) {
+		const index = this.items.findIndex((item) => item.key === key);
+		if (index === -1) return;
+		const spliced = this.items.splice(index, 1);
+		this.state.managers.event.emit(EVENT_SORT_REMOVE, spliced);
+		if (this.items.length === 0) this.state.managers.event.emit(EVENT_SORT_CLEAR);
+		this.sort();
 	}
-	set(items) {
-		this.items.splice(0, this.items.length, ...items.map((item) => ({
-			key: item.field,
+	set(items, set) {
+		const removed = this.items.splice(0, this.items.length, ...items.map((item) => ({
+			key: item.key,
+			direction: item.direction
+		})));
+		if (set) this.state.managers.event.emit(EVENT_SORT_SET, {
+			removed,
+			added: items.map((item) => ({
+				key: item.key,
+				direction: item.direction
+			}))
+		});
+		else this.state.managers.event.emit(EVENT_SORT_ADD, items.map((item) => ({
+			key: item.key,
 			direction: item.direction
 		})));
 		this.sort();
@@ -1311,239 +1602,305 @@ var SortManager = class {
 		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 sorterIndex = items.findIndex((item) => item.key === column.options.key);
 			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
+				[ARIA_SORT]: sorterItem == null ? SORT_NONE : items.length > 1 ? SORT_OTHER : sorterItem.direction,
+				[ATTRIBUTE_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);
+			setAttribute(column.elements.sorter, ATTRIBUTE_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.data.state.keys.active = items.length === 0 ? void 0 : getSortedItems(state, items);
+		state.managers.event.emit(EVENT_DATA_SORTED, state.managers.data.get(true));
 		state.managers.render.update(true, true);
 	}
-	toggle(event, field, direction) {
+	toggle(event, key, direction) {
 		switch (direction) {
-			case "ascending":
-				this.flip(field);
+			case SORT_ASCENDING:
+				this.flip(key);
 				return;
-			case "descending":
-				this.removeOrClear(event, field);
+			case SORT_DESCENDING:
+				this.remove(key);
 				return;
 			default:
-				this.addOrSet(event, field);
+				this.addOrSet(event, key);
 				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 getSortedItems(state, sorters) {
+	const data = state.managers.data.state.keys.active?.map((key) => isGroupKey(key) ? key : state.managers.data.state.values.mapped.get(key)) ?? state.managers.data.state.values.array;
+	if (!state.managers.group.enabled) return sort(data, sorters).map((item) => getValue(item, state.key));
+	return sortWithGroups(state, data, sorters).map((item) => isGroupKey(item) ? item : getValue(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 firstIsGroup = isGroupKey(first);
+		const secondIsGroup = isGroupKey(second);
+		const firstValue = firstIsGroup ? state.managers.group.getForKey(first).value.stringified : getValue(first, state.managers.group.key);
+		const secondValue = secondIsGroup ? state.managers.group.getForKey(second).value.stringified : getValue(second, state.managers.group.key);
 		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]);
+			const comparison = compare(getValue(first, sorter.key), getValue(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
-* @returns `true` if the value is nullable or a whitespace-only string, otherwise `false`
-*/
-function isNullableOrWhitespace(value) {
-	return value == null || EXPRESSION_WHITESPACE.test(getString(value));
-}
-var EXPRESSION_WHITESPACE = /^\s*$/;
+const SORT_NONE = "none";
+const SORT_OTHER = "other";
+//#endregion
+//#region src/managers/data.manager.ts
 var DataManager = class {
-	handlers = Object.freeze({
-		add: (data) => void this.add(data, true),
-		clear: () => void this.clear(),
+	handlers = {
+		add: (data) => this.add(data, true),
+		clear: () => this.clear(),
 		get: (active) => this.get(active),
-		remove: (items) => void this.remove(items, true),
-		synchronize: (data, remove) => void this.synchronize(data, remove),
-		update: (data) => void this.update(data)
-	});
-	values = {
-		keys: { original: [] },
-		objects: {
-			mapped: /* @__PURE__ */ new Map(),
-			array: []
-		}
+		remove: (items) => this.remove(items, true),
+		synchronize: (data, remove) => this.synchronize(data, remove === true),
+		update: (data) => this.update(data, true)
 	};
+	state;
 	get keys() {
-		return this.values.keys.active ?? this.values.keys.original;
+		return this.state.keys.active ?? this.state.keys.original;
 	}
 	get size() {
 		return this.keys.length;
 	}
 	constructor(state) {
-		this.state = state;
+		this.state = {
+			...state,
+			keys: { original: [] },
+			values: {
+				array: [],
+				mapped: /* @__PURE__ */ new Map()
+			}
+		};
 	}
 	async add(data, render) {
-		const { state, values } = this;
-		const { length } = data;
-		const updates = [];
+		const { state } = this;
+		const addedData = [];
+		const updatedData = [];
+		const addedGroups = [];
+		const updatedGroups = [];
+		let groupColumn;
+		let { length } = data;
 		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);
+			const key = getValue(item, state.key);
+			if (state.values.mapped.has(key)) {
+				updatedData.push(item);
 				continue;
 			}
-			values.objects.array.push(item);
-			values.objects.mapped.set(key, item);
+			addedData.push(item);
+			state.values.array.push(item);
+			state.values.mapped.set(key, item);
 			if (!state.managers.group.enabled) continue;
-			const groupKey = item[state.managers.group.field];
-			let group = state.managers.group.get(groupKey);
+			const groupValue = getValue(item, state.managers.group.key);
+			let group = state.managers.group.getForValue(groupValue);
 			if (group == null) {
-				group = new GroupComponent(String(groupKey), String(groupKey), groupKey);
-				values.objects.array.push(group);
-				state.managers.group.add(group);
-			}
+				groupColumn ??= state.managers.column.get(state.managers.group.key);
+				group = new GroupComponent(`${groupColumn?.options.label ?? state.managers.group.key}: ${groupValue}`, groupValue);
+				state.values.array.push(group.key);
+				state.managers.group.add(group, false);
+				addedGroups.push(group);
+			} else if (!addedGroups.includes(group) && !updatedGroups.includes(group)) updatedGroups.push(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();
+		length = addedGroups.length;
+		if (length > 0) {
+			state.managers.event.emit(EVENT_GROUP_ADD, addedGroups.map(getGroup));
+			for (let index = 0; index < length; index += 1) updateGroup(state, addedGroups[index], false);
+		}
+		length = updatedGroups.length;
+		if (length > 0) {
+			for (let index = 0; index < length; index += 1) updateGroup(state, updatedGroups[index], false);
+			state.managers.event.emit(EVENT_GROUP_UPDATE, updatedGroups.map(getGroup));
+		}
+		await this.update(updatedData, addedData.length === 0);
+		if (addedData.length === 0) return;
+		state.managers.event.emit(EVENT_DATA_ADD, addedData);
+		if (render) this.render();
 	}
-	clear() {
-		if (this.values.objects.array.length > 0) this.set([]);
+	async clear() {
+		if (this.state.values.array.length > 0) return this.removeItems([], true, true).then(() => void 0);
 	}
 	destroy() {
-		const { values } = this;
-		values.objects.mapped.clear();
-		values.keys.active = void 0;
-		values.keys.original.length = 0;
-		values.objects.array.length = 0;
+		const { state } = this;
+		state.values.mapped.clear();
+		state.keys.active = void 0;
+		state.keys.original.length = 0;
+		state.values.array.length = 0;
 		this.handlers = void 0;
 		this.state = void 0;
-		this.values = void 0;
 	}
 	get(active) {
-		const { values } = this;
-		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));
+		const { state } = this;
+		return (active ?? false) && state.keys.active != null ? select(state.keys.active, (key) => !isGroupKey(key), (key) => state.values.mapped.get(key)) : state.values.array.filter((item) => !isGroupKey(item));
 	}
-	getIndex(key) {
-		return this.keys.indexOf(key);
+	getIndex(item) {
+		return this.keys.indexOf(item);
 	}
 	async remove(items, render) {
-		const { state, values } = this;
-		const keys = items.map((value) => isPlainObject(value) ? value[state.key] : value).filter((key) => values.objects.mapped.has(key));
+		const { state } = this;
+		const keys = items.map((value) => isPlainObject(value) ? getValue(value, state.key) : value).filter((key) => !isGroupKey(key));
 		const { length } = keys;
-		if (length === 0) return;
-		for (let keyIndex = 0; keyIndex < length; keyIndex += 1) {
-			const key = keys[keyIndex];
-			values.objects.mapped.delete(key);
-			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);
+		return length === 0 ? render ? void 0 : [] : this.removeItems(keys, false, render);
+	}
+	async removeItems(keys, clear, render) {
+		const { state } = this;
+		if (clear) {
+			state.keys.active = void 0;
+			state.keys.original = [];
+			state.values.array = [];
+			state.values.mapped.clear();
+			state.managers.row.clear();
+			if (state.managers.group.enabled) state.managers.group.clear();
+			state.managers.event.emit(EVENT_DATA_CLEAR);
+			this.render();
+			return render ? void 0 : [];
+		}
+		const removedGroups = [];
+		const updatedGroups = [];
+		const removedData = [];
+		const chunked = chunk(keys);
+		const chunkedLength = chunked.length;
+		for (let chunkedIndex = 0; chunkedIndex < chunkedLength; chunkedIndex += 1) {
+			const chunk = chunked[chunkedIndex];
+			const chunkLength = chunk.length;
+			for (let keyIndex = 0; keyIndex < chunkLength; keyIndex += 1) {
+				const key = chunk[keyIndex];
+				const dataIndex = state.keys.original.indexOf(key);
+				let dataValue;
+				[dataValue] = state.values.array.splice(dataIndex, 1);
+				removedData.push(dataValue);
+				state.keys.original.splice(dataIndex, 1);
+				state.managers.row.remove(key);
+				state.values.mapped.delete(key);
+				if (!state.managers.group.enabled || isGroupKey(key)) continue;
+				state.managers.group.collapsed.delete(key);
+				const groupValue = getValue(dataValue, state.managers.group.key);
+				const group = state.managers.group.getForValue(groupValue);
+				if (group == null) continue;
+				group.total -= 1;
+				if (group.total > 0) {
+					updatedGroups.push(group);
+					continue;
+				}
+				let groupIndex = updatedGroups.indexOf(group);
+				if (groupIndex > -1) updatedGroups.splice(groupIndex, 1);
+				groupIndex = state.values.array.indexOf(group.key);
+				if (groupIndex > -1) {
+					state.keys.original.splice(groupIndex, 1);
+					state.values.array.splice(groupIndex, 1);
+				}
+				removedGroups.push(group);
+				state.managers.group.remove(group, false);
+				if (keys.length >= 1e4) await delay(25);
+			}
+		}
+		let { length } = updatedGroups;
+		if (length > 0) {
+			for (let index = 0; index < length; index += 1) updateGroup(state, updatedGroups[index], false);
+			state.managers.event.emit(EVENT_GROUP_UPDATE, updatedGroups.map(getGroup));
 		}
+		length = removedGroups.length;
+		if (length > 0) state.managers.event.emit(EVENT_GROUP_REMOVE, removedGroups.map(getGroup));
+		state.managers.event.emit(EVENT_DATA_REMOVE, removedData);
 		if (render) this.render();
+		return render ? void 0 : removedData;
 	}
 	render() {
-		const { state, values } = this;
-		if (state.managers.group.enabled) sortWithGroups(state, values.objects.array, [{
-			direction: "ascending",
+		const { state } = this;
+		if (state.managers.group.enabled) sortWithGroups(state, state.values.array, [{
+			direction: SORT_ASCENDING,
 			key: state.key
 		}]);
-		else sort(values.objects.array, [{
-			direction: "ascending",
+		else sort(state.values.array, [{
+			direction: SORT_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]);
+		state.keys.active = void 0;
+		state.keys.original = state.values.array.map((item) => typeof item === "string" ? item : getValue(item, state.key));
+		state.values.mapped = toMap(state.values.array.filter((item) => !isGroupKey(item)), (item) => getValue(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, true);
 	}
 	set(data) {
-		const { state, values } = this;
+		const { state } = this;
 		const array = data.slice();
 		if (state.managers.group.enabled) {
-			const grouped = toRecord.arrays(data, state.managers.group.field);
+			const column = state.managers.column.get(state.managers.group.key);
+			const grouped = toRecord.arrays(data, state.managers.group.key);
 			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);
+				const group = new GroupComponent(`${column?.options.label ?? state.managers.group.key}: ${value}`, value);
 				group.total = items.length;
 				groups.push(group);
-				array.push(group);
+				array.push(group.key);
 			}
 			state.managers.group.set(groups);
 		}
-		values.objects.array = array;
+		state.values.array = array;
 		this.render();
 	}
 	async synchronize(data, remove) {
-		const { state, values } = this;
-		const add = [];
+		const { state } = this;
+		const added = [];
 		const updated = [];
 		const keys = /* @__PURE__ */ new Set([]);
 		const { length } = data;
 		for (let index = 0; index < length; index += 1) {
 			const object = data[index];
-			const key = object[state.key];
-			if (values.objects.mapped.has(key)) updated.push(object);
-			else add.push(object);
+			const key = getValue(object, state.key);
+			if (state.values.mapped.has(key)) updated.push(object);
+			else added.push(object);
 			keys.add(key);
 		}
 		if (keys.size === 0) return;
-		if (remove ?? false) {
-			const toRemove = values.keys.original.filter((key) => !(key instanceof GroupComponent) && !keys.has(key));
-			if (toRemove.length > 0) await this.remove(toRemove, false);
+		let removed = [];
+		if (remove) {
+			const toRemove = state.keys.original.filter((key) => !isGroupKey(key) && !keys.has(key));
+			if (toRemove.length > 0) removed = await this.remove(toRemove, false);
 		}
-		await this.update(updated);
-		if (add.length > 0) await this.add(add, false);
-		if (add.length > 0 || (remove ?? false)) this.render();
+		await this.update(updated, added.length === 0);
+		await this.add(added, false);
+		state.managers.event.emit(EVENT_DATA_SYNCHRONIZE, {
+			added,
+			removed,
+			updated
+		});
+		if (added.length > 0 || remove) this.render();
 	}
-	async update(data) {
-		const { state, values } = this;
+	async update(data, render) {
+		const { state } = this;
 		const { length } = data;
+		const updated = [];
 		for (let index = 0; index < length; index += 1) {
-			const object = data[index];
-			const key = object[state.key];
-			const value = values.objects.mapped.get(key);
-			if (value != null) {
-				values.objects.mapped.set(key, {
-					...value,
-					...object
-				});
-				state.managers.row.update(key);
-			}
+			const item = data[index];
+			const key = getValue(item, state.key);
+			const existing = state.keys.original.indexOf(key);
+			if (existing === -1) continue;
+			Object.assign(state.values.array[existing], item);
+			updated.push(state.values.array[existing]);
+			if (render && state.managers.render.visible.keys.has(key)) state.managers.row.update(key);
 		}
+		if (updated.length > 0) state.managers.event.emit(EVENT_DATA_UPDATE, updated);
 	}
 };
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/dist/event/delegation.mjs
 function addDelegatedHandler(doc, type, name, passive) {
 	if (DELEGATED.has(name)) return;
 	DELEGATED.add(name);
@@ -1595,11 +1952,11 @@ function removeDelegatedListener(target, name, listener) {
 	if (handlers.size === 0) target[name] = void 0;
 	return true;
 }
-var DELEGATED = /* @__PURE__ */ new Set();
-var EVENT_PREFIX = "@";
-var EVENT_SUFFIX_ACTIVE = ":active";
-var EVENT_SUFFIX_PASSIVE = ":passive";
-var EVENT_TYPES = new Set([
+const DELEGATED = /* @__PURE__ */ new Set();
+const EVENT_PREFIX = "@";
+const EVENT_SUFFIX_ACTIVE = ":active";
+const EVENT_SUFFIX_PASSIVE = ":passive";
+const EVENT_TYPES = new Set([
 	"beforeinput",
 	"click",
 	"dblclick",
@@ -1623,12 +1980,16 @@ var EVENT_TYPES = new Set([
 	"touchmove",
 	"touchstart"
 ]);
-var HANDLER_ACTIVE = delegatedEventHandler.bind(false);
-var HANDLER_PASSIVE = delegatedEventHandler.bind(true);
+const HANDLER_ACTIVE = delegatedEventHandler.bind(false);
+const HANDLER_PASSIVE = delegatedEventHandler.bind(true);
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/node_modules/@oscarpalmer/atoms/dist/internal/function/misc.mjs
 /**
 * A function that does nothing, which can be useful, I guess…
 */
 function noop() {}
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/dist/event/index.mjs
 function createEventOptions(options) {
 	return {
 		capture: getBoolean(options?.capture),
@@ -1668,6 +2029,8 @@ function on(target, type, listener, options) {
 		target.removeEventListener(type, listener, extended);
 	};
 }
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/dist/find/relative.mjs
 function findAncestor(origin, selector) {
 	const element = getElement(origin);
 	if (element == null || selector == null) return null;
@@ -1688,32 +2051,53 @@ function getElement(origin) {
 	if (origin instanceof Element) return origin;
 	return origin instanceof Event && origin.target instanceof Element ? origin.target : void 0;
 }
+//#endregion
+//#region src/managers/event.manager.ts
 var EventManager = class {
+	events = {};
+	handlers = {
+		subscribe: (name, callback) => this.subscribe(name, callback),
+		unsubscribe: (name, callback) => this.unsubscribe(name, callback)
+	};
 	constructor(state) {
 		this.state = state;
 		mapped$1.set(state.element, this);
 	}
+	emit(name, ...parameters) {
+		if (this.events[name] == null) return;
+		const handlers = [...this.events[name]];
+		const { length } = handlers;
+		for (let index = 0; index < length; index += 1) handlers[index](...parameters);
+	}
 	destroy() {
 		mapped$1.delete(this.state.element);
 		this.state = void 0;
 	}
 	onSort(event, target) {
-		const direction = target.getAttribute("data-sort-direction");
-		const field = target.getAttribute("data-field");
-		if (field != null) this.state.managers.sort.toggle(event, field, direction);
+		const direction = target.getAttribute(ATTRIBUTE_DATA_SORT_DIRECTION);
+		const key = target.getAttribute(ATTRIBUTE_DATA_KEY);
+		if (key != null) this.state.managers.sort.toggle(event, key, direction);
+	}
+	subscribe(name, callback) {
+		if (!isEvent(name) || typeof callback !== "function") return;
+		this.events[name] ??= /* @__PURE__ */ new Set();
+		this.events[name].add(callback);
+	}
+	unsubscribe(name, callback) {
+		if (isEvent(name) && typeof callback === "function") this.events[name]?.delete(callback);
 	}
 };
 function onClick(event) {
-	const target = findAncestor(event, "[data-event]");
-	const table = findAncestor(event, ".tabela");
+	const target = findAncestor(event, eventAttribute);
+	const table = findAncestor(event, tableClassName);
 	if (!(target instanceof HTMLElement) || !(table instanceof HTMLElement)) return;
 	const manager = mapped$1.get(table);
 	if (manager == null) return;
-	switch (target?.getAttribute("data-event")) {
-		case "group":
+	switch (target?.getAttribute(ATTRIBUTE_DATA_EVENT)) {
+		case EVENT_GROUP:
 			manager.state.managers.group.handle(target);
 			break;
-		case "heading":
+		case EVENT_HEADING:
 			manager.onSort(event, target);
 			break;
 		case "row":
@@ -1723,21 +2107,24 @@ function onClick(event) {
 	}
 }
 function onKeydown(event) {
-	const target = findAncestor(event, "[data-event]");
-	const table = findAncestor(event, ".tabela");
+	const target = findAncestor(event, eventAttribute);
+	const table = findAncestor(event, tableClassName);
 	if (!(target instanceof HTMLElement) || !(table instanceof HTMLElement)) return;
 	const manager = mapped$1.get(table);
 	if (manager == null) return;
-	switch (target?.getAttribute("data-event")) {
-		case "body":
-			manager.state.managers.navigation.handle(event);
-			break;
-		default: break;
+	if (event.key === " ") {
+		event.preventDefault();
+		return;
 	}
+	manager.state.managers.navigation.handle(event);
 }
+const eventAttribute = `[${ATTRIBUTE_DATA_EVENT}]`;
 const mapped$1 = /* @__PURE__ */ new WeakMap();
+const tableClassName = `.${CSS_TABLE}`;
 on(document, "click", onClick);
 on(document, "keydown", onKeydown, { passive: false });
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/internal/number.mjs
 /**
 * Clamp a number between a minimum and maximum value
 * @param value Value to clamp
@@ -1775,20 +2162,24 @@ function getNumber(value) {
 	if (isBinary || EXPRESSION_OCTAL.test(trimmed)) return Number.parseInt(trimmed.slice(2), isBinary ? 2 : OCTAL_VALUE);
 	return Number(EXPRESSION_HEX.test(trimmed) ? trimmed : trimmed.replace(EXPRESSION_UNDERSCORE, ""));
 }
-var EXPRESSION_BINARY = /^0b[01]+$/i;
-var EXPRESSION_HEX = /^0x[0-9a-f]+$/i;
-var EXPRESSION_OCTAL = /^0o[0-7]+$/i;
-var EXPRESSION_UNDERSCORE = /_/g;
-var EXPRESSION_ZEROISH = /^\s*0+\s*$/;
-var OCTAL_VALUE = 8;
+const EXPRESSION_BINARY = /^0b[01]+$/i;
+const EXPRESSION_HEX = /^0x[0-9a-f]+$/i;
+const EXPRESSION_OCTAL = /^0o[0-7]+$/i;
+const EXPRESSION_UNDERSCORE = /_/g;
+const EXPRESSION_ZEROISH = /^\s*0+\s*$/;
+const OCTAL_VALUE = 8;
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/internal/sized.mjs
 function getSizedMaximum(first, second) {
 	let actual;
 	if (typeof first === "number") actual = first;
 	else actual = typeof second === "number" ? second : MAXIMUM_DEFAULT;
 	return clamp(actual, 1, MAXIMUM_ABSOLUTE);
 }
-var MAXIMUM_ABSOLUTE = 16777216;
-var MAXIMUM_DEFAULT = 1048576;
+const MAXIMUM_ABSOLUTE = 16777216;
+const MAXIMUM_DEFAULT = 1048576;
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/sized/map.mjs
 /**
 * A Map with a maximum size
 *
@@ -1835,6 +2226,8 @@ var SizedMap = class extends Map {
 		return super.set(key, value);
 	}
 };
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/function/memoize.mjs
 var Memoized = class {
 	#state;
 	/**
@@ -1927,8 +2320,10 @@ function getMemoizationOptions(input) {
 function memoize(callback, options) {
 	return new Memoized(callback, getMemoizationOptions(options));
 }
-var DEFAULT_CACHE_SIZE = 1024;
-var SEPARATOR = "_";
+const DEFAULT_CACHE_SIZE = 1024;
+const SEPARATOR = "_";
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/string/match.mjs
 /**
 * Check if a string ends with a specified substring
 * @param haystack String to look in
@@ -1967,10 +2362,12 @@ function matchCallback(haystack, needle, ignoreCase) {
 function startsWith(haystack, needle, ignoreCase) {
 	return match(MATCH_STARTS_WITH, haystack, needle, ignoreCase === true);
 }
-var MATCH_ENDS_WITH = "endsWith";
-var MATCH_INCLUDES = "includes";
-var MATCH_STARTS_WITH = "startsWith";
-var matchMemoizers = {};
+const MATCH_ENDS_WITH = "endsWith";
+const MATCH_INCLUDES = "includes";
+const MATCH_STARTS_WITH = "startsWith";
+const matchMemoizers = {};
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/internal/value/equal.mjs
 function equal(first, second, options) {
 	return equalValue(first, second, getEqualOptions(options));
 }
@@ -2136,32 +2533,48 @@ function getEqualOptions(input) {
 	options.relaxedNullish = input.relaxedNullish === true;
 	return options;
 }
-var ARRAY_PEEK_PERCENTAGE = 10;
-var ARRAY_THRESHOLD = 100;
-var ERROR_PROPERTIES = ["name", "message"];
-var EXPRESSION_PROPERTIES = ["source", "flags"];
+const ARRAY_PEEK_PERCENTAGE = 10;
+const ARRAY_THRESHOLD = 100;
+const ERROR_PROPERTIES = ["name", "message"];
+const EXPRESSION_PROPERTIES = ["source", "flags"];
+//#endregion
+//#region src/models/filter.model.ts
+const FILTER_CONTAINS = "contains";
+const FILTER_ENDS_WITH = "ends-with";
+const FILTER_EQUALS = "equals";
+const FILTER_GREATER_THAN = "greater-than";
+const FILTER_GREATER_THAN_OR_EQUAL = "greater-than-or-equal";
+const FILTER_LESS_THAN = "less-than";
+const FILTER_LESS_THAN_OR_EQUAL = "less-than-or-equal";
+const FILTER_NOT_CONTAINS = "not-contains";
+const FILTER_NOT_EQUALS = "not-equals";
+const FILTER_STARTS_WITH = "starts-with";
+//#endregion
+//#region src/managers/filter.manager.ts
 var FilterManager = class {
-	handlers = Object.freeze({
+	handlers = {
 		add: (item) => this.add(item),
 		clear: () => this.clear(),
 		remove: (value) => this.remove(value),
 		set: (items) => this.set(items)
-	});
+	};
 	items = {};
 	constructor(state) {
 		this.state = state;
 	}
 	add(item) {
-		if (this.items[item.field] == null) this.items[item.field] = [];
-		else if (this.items[item.field].findIndex((existing) => equal(existing, item)) !== -1) return;
-		this.items[item.field].push(item);
+		const { items, state } = this;
+		if (items[item.key] == null) items[item.key] = [];
+		else if (items[item.key].findIndex((existing) => equal(existing, item)) > -1) return;
+		items[item.key].push(item);
+		state.managers.event.emit("filter:add", [item]);
 		this.filter();
 	}
 	clear() {
-		if (Object.keys(this.items).length > 0) {
-			this.items = {};
-			this.filter();
-		}
+		if (Object.keys(this.items).length === 0) return;
+		this.items = {};
+		this.state.managers.event.emit("filter:clear");
+		this.filter();
 	}
 	destroy() {
 		this.handlers = void 0;
@@ -2172,39 +2585,51 @@ var FilterManager = class {
 		const { state } = this;
 		const filtered = [];
 		const filters = Object.entries(this.items);
-		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);
+		const itemsLength = state.managers.data.state.keys.original.length;
+		rowLoop: for (let itemIndex = 0; itemIndex < itemsLength; itemIndex += 1) {
+			const item = state.managers.data.state.keys.original[itemIndex];
+			if (isGroupKey(item)) {
+				filtered.push(item);
 				continue;
 			}
-			const row = state.managers.data.values.objects.mapped.get(key);
+			const row = state.managers.data.state.values.mapped.get(item);
 			if (row == null) continue;
 			filterLoop: for (let filterIndex = 0; filterIndex < filters.length; filterIndex += 1) {
-				const [field, items] = filters[filterIndex];
-				const value = row[field];
+				const [key, items] = filters[filterIndex];
+				const value = row[key];
 				for (let itemIndex = 0; itemIndex < items.length; itemIndex += 1) {
 					const filter = items[itemIndex];
 					if (comparators[filter.comparison](value, filter.value)) continue filterLoop;
 				}
 				continue rowLoop;
 			}
-			filtered.push(key);
+			filtered.push(item);
 		}
-		state.managers.data.values.keys.active = filtered;
+		state.managers.data.state.keys.active = filtered;
 		if (state.managers.sort.items.length > 0) state.managers.sort.sort();
 		else state.managers.render.update(true, true);
 	}
 	remove(value) {
+		const removed = [];
 		if (typeof value === "string") {
 			if (this.items[value] == null) return;
-			this.items = {};
+			const keyed = {};
+			const keys = Object.keys(this.items);
+			const { length } = keys;
+			for (let index = 0; index < length; index += 1) {
+				const key = keys[index];
+				if (key === value) removed.push(...this.items[key]);
+				else keyed[key] = this.items[key];
+			}
+			this.items = keyed;
 		} else {
-			const { field } = value;
-			if (this.items[field] == null) return;
-			if (this.items[field].findIndex((item) => equal(item, value)) === -1) return;
+			const { key } = value;
+			if (this.items[key] == null) return;
+			const index = this.items[key].findIndex((item) => equal(item, value));
+			if (index === -1) return;
+			removed.push(this.items[key][index]);
 		}
+		this.state.managers.event.emit("filter:remove", removed);
 		this.filter();
 	}
 	set(items) {
@@ -2212,74 +2637,111 @@ var FilterManager = class {
 		const { length } = items;
 		for (let index = 0; index < length; index += 1) {
 			const item = items[index];
-			keyed[item.field] ??= [];
-			keyed[item.field].push(item);
+			keyed[item.key] ??= [];
+			keyed[item.key].push(item);
 		}
 		this.items = keyed;
 		this.filter();
 	}
 };
 const comparators = {
-	contains: (row, filter) => includes(getString(row), getString(filter), true),
-	"ends-with": (row, filter) => endsWith(getString(row), getString(filter), true),
-	equals: (row, filter) => equalizer(row, filter),
-	"greater-than": (row, filter) => getNumber(row) > getNumber(filter),
-	"greater-than-or-equal": (row, filter) => getNumber(row) >= getNumber(filter),
-	"less-than": (row, filter) => getNumber(row) < getNumber(filter),
-	"less-than-or-equal": (row, filter) => getNumber(row) <= getNumber(filter),
-	"not-contains": (row, filter) => !includes(getString(row), getString(filter), true),
-	"not-equals": (row, filter) => !equalizer(row, filter),
-	"starts-with": (row, filter) => startsWith(getString(row), getString(filter), true)
+	[FILTER_CONTAINS]: (row, filter) => includes(getString(row), getString(filter), true),
+	[FILTER_ENDS_WITH]: (row, filter) => endsWith(getString(row), getString(filter), true),
+	[FILTER_EQUALS]: (row, filter) => equalizer(row, filter),
+	[FILTER_GREATER_THAN]: (row, filter) => getNumber(row) > getNumber(filter),
+	[FILTER_GREATER_THAN_OR_EQUAL]: (row, filter) => getNumber(row) >= getNumber(filter),
+	[FILTER_LESS_THAN]: (row, filter) => getNumber(row) < getNumber(filter),
+	[FILTER_LESS_THAN_OR_EQUAL]: (row, filter) => getNumber(row) <= getNumber(filter),
+	[FILTER_NOT_CONTAINS]: (row, filter) => !includes(getString(row), getString(filter), true),
+	[FILTER_NOT_EQUALS]: (row, filter) => !equalizer(row, filter),
+	[FILTER_STARTS_WITH]: (row, filter) => startsWith(getString(row), getString(filter), true)
 };
 const equalizer = equal.initialize({ ignoreCase: true });
+//#endregion
+//#region src/managers/group.manager.ts
 var GroupManager = class {
 	collapsed = /* @__PURE__ */ new Set();
 	enabled = false;
-	field;
+	key;
+	handlers = { set: (group) => {
+		if (group === this.key) return;
+		this.enabled = !isNullableOrWhitespace(group);
+		this.key = group ?? "";
+		this.state.managers.data.set(this.state.managers.data.get());
+	} };
 	items = [];
+	mapped = /* @__PURE__ */ new Map();
 	order = {};
 	constructor(state) {
 		this.state = state;
 		if (isNullableOrWhitespace(state.options.grouping)) return;
 		this.enabled = true;
-		this.field = state.options.grouping;
+		this.key = state.options.grouping;
 	}
-	add(group) {
+	add(group, emit) {
 		this.set([...this.items, group]);
+		if (emit) this.state.managers.event.emit(EVENT_GROUP_ADD, [getGroup(group)]);
+	}
+	clear() {
+		if (this.items.length === 0) return;
+		const groups = this.items.splice(0);
+		const { length } = groups;
+		for (let index = 0; index < length; index += 1) this.remove(groups[index], false);
+		this.collapsed.clear();
+		this.set([]);
+		this.state.managers.event.emit(EVENT_GROUP_CLEAR);
+	}
+	destroy() {
+		const groups = this.items.splice(0);
+		const { length } = groups;
+		for (let index = 0; index < length; index += 1) removeGroup(groups[index]);
+		this.collapsed.clear();
+		this.handlers = void 0;
+		this.state = void 0;
+	}
+	getForKey(key) {
+		return this.mapped.get(key);
 	}
-	get(value) {
-		return this.items.find((item) => item.value === value);
+	getForValue(value) {
+		const asString = getString(value);
+		return this.items.find((item) => item.value.stringified === asString);
 	}
 	handle(button) {
-		const key = button.dataset.key;
-		const group = this.get(key);
+		const key = button.dataset.key?.replace(`${this.state.prefix}_`, "");
+		const group = this.getForKey(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;
+		let first = state.managers.data.state.keys.original.indexOf(group.key) + 1;
+		const last = items[index + 1] == null ? state.managers.data.state.keys.original.length - 1 : state.managers.data.state.keys.original.indexOf(items[index + 1].key) - 1;
 		for (; first <= last; first += 1) {
-			const key = state.managers.data.values.keys.original[first];
+			const key = state.managers.data.state.keys.original[first];
 			if (group.expanded) collapsed.delete(key);
 			else collapsed.add(key);
 		}
-		state.managers.render.update(true, true);
+		state.managers.event.emit(EVENT_GROUP_TOGGLE, {
+			collapsed: group.expanded ? [] : [getGroup(group)],
+			expanded: group.expanded ? [getGroup(group)] : []
+		});
+		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, true);
 	}
-	remove(group) {
+	remove(group, update) {
+		removeGroup(group);
+		if (!update) return;
 		this.set(this.items.filter((item) => item !== group));
+		this.state.managers.event.emit(EVENT_GROUP_REMOVE, [getGroup(group)]);
 	}
 	set(items) {
-		this.items = sort(items, (item) => item.label);
-		this.order = toRecord(items, "value", (_, index) => index);
+		this.items = sort(items, (first, second) => compare(first.label, second.label));
+		this.mapped = toMap(items, (group) => group.key);
+		this.order = toRecord(items, (group) => group.value.stringified, (_, index) => index);
 	}
 };
-function getKey(value) {
-	if (typeof value === "number") return value;
-	if (typeof value !== "string") return;
-	return integerExpression.test(value) ? Number.parseInt(value, 10) : value;
-}
-const integerExpression = /^\d+$/;
+//#endregion
+//#region src/managers/navigation.manager.ts
 var NavigationManager = class {
 	active;
 	constructor(state) {
@@ -2291,64 +2753,70 @@ var NavigationManager = class {
 	handle(event) {
 		if (!allKeys.has(event.key)) return;
 		event.preventDefault();
-		const { components, id, managers } = this.state;
-		const activeDescendant = components.body.elements.group.getAttribute("aria-activedescendant");
+		const { components, managers } = this.state;
+		const activeDescendant = components.body.elements.group.getAttribute(ARIA_ACTIVEDESCENDANT);
 		const { keys } = managers.data;
 		const { length } = keys;
 		let next;
 		if (isNullableOrWhitespace(activeDescendant)) next = getDefaultIndex(event.key, length);
-		else next = getIndex(event, activeDescendant, id, keys);
+		else next = getIndex(this.state, event, activeDescendant);
 		if (next != null) this.setActive(keys.at(next));
 	}
-	setActive(key, scroll) {
-		const { components, managers, options } = this.state;
-		this.active = key;
-		const active = components.body.elements.group.querySelectorAll("[data-active=\"true\"]");
-		for (const item of active) item.setAttribute("data-active", "false");
-		const row = managers.row.get(key);
-		if (row != null) {
-			row.element?.setAttribute("data-active", "true");
-			if (scroll ?? true) if (row.element == null) components.body.elements.group.scrollTo({
-				top: managers.data.getIndex(key) * options.rowHeight,
+	setActive(item, scroll) {
+		const { components, managers, options, prefix } = this.state;
+		this.active = item;
+		const active = components.body.elements.group.querySelectorAll(attributeDataActiveTrue);
+		for (const item of active) item.setAttribute(ATTRIBUTE_DATA_ACTIVE, "false");
+		const component = isGroupKey(item) ? managers.group.getForKey(item) : managers.row.get(item, false);
+		if (component != null) {
+			component.element?.setAttribute(ATTRIBUTE_DATA_ACTIVE, "true");
+			if (scroll ?? true) if (component.element == null) components.body.elements.group.scrollTo({
+				top: managers.data.getIndex(item) * options.rowHeight,
 				behavior: "smooth"
 			});
-			else row.element.scrollIntoView({ block: "nearest" });
+			else component.element.scrollIntoView({ block: "nearest" });
 		}
-		components.body.elements.group.setAttribute("aria-activedescendant", row == null ? "" : `tabela_${this.state.id}_row_${key}`);
+		components.body.elements.group.setAttribute(ARIA_ACTIVEDESCENDANT, component == null ? "" : `${prefix}${component.key}`);
 	}
 };
 function getDefaultIndex(key, max) {
 	switch (true) {
 		case negativeDefaultKeys.has(key): return -1;
-		case key === "PageDown": return Math.min(9, max - 1);
-		case key === "PageUp": return max < 10 ? 0 : max - 10;
+		case key === KEY_PAGE_DOWN: return Math.min(9, max - 1);
+		case key === KEY_PAGE_UP: return max < 10 ? 0 : max - 10;
 		default: return 0;
 	}
 }
-function getIndex(event, active, id, keys) {
-	const key = getKey(active.replace(`tabela_${id}_row_`, ""));
+function getIndex(state, event, active) {
+	const key = getKey(active.replace(state.prefix, ""));
 	if (key == null) return;
-	if (absoluteKeys.has(event.key)) return event.key === "Home" ? 0 : keys.length - 1;
-	return clamp(keys.indexOf(key) + getOffset(event.key), 0, keys.length - 1, true);
-}
-function getOffset(key) {
-	switch (key) {
-		case "ArrowDown": return 1;
-		case "ArrowUp": return -1;
-		case "PageDown": return 10;
-		case "PageUp": return -10;
-		default: return 0;
-	}
-}
-const absoluteKeys = new Set(["End", "Home"]);
-const arrowKeys = new Set(["ArrowDown", "ArrowUp"]);
-const negativeDefaultKeys = new Set(["ArrowUp", "End"]);
-const pageKeys = new Set(["PageDown", "PageUp"]);
+	if (absoluteKeys.has(event.key)) return event.key === KEY_HOME ? 0 : state.managers.data.size - 1;
+	return clamp(state.managers.data.getIndex(key) + (offset[event.key] ?? 0), 0, state.managers.data.size - 1, true);
+}
+const KEY_ARROW_DOWN = "ArrowDown";
+const KEY_ARROW_UP = "ArrowUp";
+const KEY_END = "End";
+const KEY_HOME = "Home";
+const KEY_PAGE_DOWN = "PageDown";
+const KEY_PAGE_UP = "PageUp";
+const absoluteKeys = new Set([KEY_END, KEY_HOME]);
+const arrowKeys = new Set([KEY_ARROW_DOWN, KEY_ARROW_UP]);
+const attributeDataActiveTrue = `[${ATTRIBUTE_DATA_ACTIVE}="true"]`;
+const negativeDefaultKeys = new Set([KEY_ARROW_UP, KEY_END]);
+const offset = {
+	[KEY_ARROW_DOWN]: 1,
+	[KEY_ARROW_UP]: -1,
+	[KEY_PAGE_DOWN]: 10,
+	[KEY_PAGE_UP]: -10
+};
+const pageKeys = new Set([KEY_PAGE_DOWN, KEY_PAGE_UP]);
 const allKeys = new Set([
 	...absoluteKeys,
 	...arrowKeys,
 	...pageKeys
 ]);
+//#endregion
+//#region src/components/row.component.ts
 function removeRow(pool, row) {
 	if (row.element != null) {
 		row.element.innerHTML = "";
@@ -2359,31 +2827,33 @@ function removeRow(pool, row) {
 	row.cells = {};
 }
 function renderRow(state, row) {
-	const element = row.element ?? state.managers.render.pool.rows.shift() ?? createRow();
+	const { managers, options, prefix } = state;
+	const element = row.element ?? managers.render.pool.rows.shift() ?? createRow(options.rowHeight);
 	row.element = element;
 	element.innerHTML = "";
-	const selected = state.managers.selection.items.has(row.key);
+	const selected = managers.selection.items.has(row.key);
 	const key = String(row.key);
 	setAttributes(element, {
-		"aria-selected": String(selected),
-		"data-active": String(state.managers.navigation.active === row.key),
-		"data-event": "row",
-		"data-key": key,
-		id: `tabela_${state.id}_row_${key}`
+		[ARIA_SELECTED]: String(selected),
+		[ATTRIBUTE_DATA_ACTIVE]: String(managers.navigation.active === row.key),
+		[ATTRIBUTE_DATA_EVENT]: "row",
+		[ATTRIBUTE_DATA_KEY]: key,
+		id: `${prefix}${key}`
 	});
-	element.classList.add("tabela__row--body");
-	if (selected) element.classList.add("tabela__row--selected");
-	else element.classList.remove("tabela__row--selected");
-	const columns = state.managers.column.items;
+	element.classList.add(CSS_ROW_BODY);
+	if (selected) element.classList.add(CSS_ROW_SELECTED);
+	else element.classList.remove(CSS_ROW_SELECTED);
+	const columns = managers.column.items;
 	const { length } = columns;
-	const data = state.managers.data.values.objects.mapped.get(row.key);
+	const data = managers.data.state.values.mapped.get(row.key);
 	if (data == null) return;
 	for (let index = 0; index < length; index += 1) {
 		const { options } = columns[index];
-		state.managers.render.pool.cells[options.field] ??= [];
-		const cell = state.managers.render.pool.cells[columns[index].options.field].shift() ?? createCell(options.width);
-		cell.textContent = String(data[options.field]);
-		row.cells[options.field] = cell;
+		const { key, width } = options;
+		managers.render.pool.cells[key] ??= [];
+		const cell = managers.render.pool.cells[key].shift() ?? createCell(width);
+		cell.textContent = String(getValue(data, key));
+		row.cells[key] = cell;
 		element.append(cell);
 	}
 }
@@ -2394,17 +2864,21 @@ var RowComponent = class {
 		this.key = key;
 	}
 };
+//#endregion
+//#region src/managers/render.manager.ts
 function getRange(state, down) {
-	const { components, managers, options } = state;
-	const { clientHeight, scrollTop } = components.body.elements.group;
+	const { element, managers, options } = state;
+	const { clientHeight, scrollTop } = element;
 	const { keys } = managers.data;
-	const first = Math.floor(scrollTop / options.rowHeight);
-	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);
+	const firstIndex = Math.floor(scrollTop / options.rowHeight);
+	const lastIndex = keys.length - managers.group.collapsed.size - 1;
+	const last = Math.min(lastIndex, Math.ceil((scrollTop + clientHeight) / options.rowHeight) - 1);
+	const visible = clientHeight / options.rowHeight;
+	const before = Math.ceil(visible) * (down ? 1 : 2);
+	const after = Math.ceil(visible) * (down ? 2 : 1);
+	const start = Math.max(0, firstIndex - before);
 	return {
-		end: Math.min(keys.length - managers.group.collapsed.size - 1, last + after),
+		end: Math.min(lastIndex, last + after),
 		start
 	};
 }
@@ -2412,7 +2886,7 @@ function onScroll() {
 	const { state } = this;
 	if (!state.active) {
 		requestAnimationFrame(() => {
-			const top = state.components.body.elements.group.scrollTop;
+			const top = state.element.scrollTop;
 			this.update(top > state.top);
 			state.active = false;
 			state.top = top;
@@ -2428,9 +2902,12 @@ var RenderManager = class {
 		rows: []
 	};
 	state;
-	visible = /* @__PURE__ */ new Map();
+	visible = {
+		indiced: /* @__PURE__ */ new Map(),
+		keys: /* @__PURE__ */ new Set()
+	};
 	constructor(state) {
-		this.listener = on(state.components.body.elements.group, "scroll", onScroll.bind(this));
+		this.listener = on(state.element, "scroll", onScroll.bind(this));
 		this.state = {
 			...state,
 			active: false,
@@ -2440,7 +2917,13 @@ var RenderManager = class {
 	destroy() {
 		const { listener, pool, visible } = this;
 		listener();
-		visible.clear();
+		visible.indiced.clear();
+		visible.keys.clear();
+		const cells = Object.values(pool.cells).flat();
+		let { length } = cells;
+		for (let index = 0; index < length; index += 1) cells[index].remove();
+		length = pool.rows.length;
+		for (let index = 0; index < length; index += 1) pool.rows[index].remove();
 		pool.cells = {};
 		pool.rows = [];
 		this.fragment = void 0;
@@ -2449,18 +2932,18 @@ var RenderManager = class {
 		this.state = void 0;
 		this.visible = void 0;
 	}
-	removeCells(fields) {
+	removeCells(keys) {
 		const { pool, state, visible } = this;
-		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);
+		const { length } = keys;
+		for (let index = 0; index < length; index += 1) delete pool.cells[keys[index]];
+		for (const [, key] of visible.indiced) {
+			if (isGroupKey(key)) continue;
+			const row = state.managers.row.get(key, false);
 			if (row == null || row.element == null) continue;
 			for (let index = 0; index < length; index += 1) {
-				row.cells[fields[index]].innerHTML = "";
-				row.cells[fields[index]].remove();
-				delete row.cells[fields[index]];
+				row.cells[keys[index]].innerHTML = "";
+				row.cells[keys[index]].remove();
+				delete row.cells[keys[index]];
 			}
 		}
 	}
@@ -2477,17 +2960,19 @@ var RenderManager = class {
 		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) {
+		for (const [index, key] of visible.indiced) {
+			if (isGroupKey(key)) {
 				if (remove || !indices.has(index)) {
-					visible.delete(index);
-					key.element?.remove();
+					visible.indiced.delete(index);
+					visible.keys.delete(key);
+					state.managers.group.getForKey(key)?.element?.remove();
 				}
 				continue;
 			}
-			const row = managers.row.get(key);
+			const row = managers.row.get(key, false);
 			if (remove || row == null || !indices.has(index) || managers.group.collapsed.has(key)) {
-				visible.delete(index);
+				visible.indiced.delete(index);
+				visible.keys.delete(key);
 				if (row != null) removeRow(pool, row);
 			}
 		}
@@ -2496,19 +2981,22 @@ var RenderManager = class {
 		let count = 0;
 		let offset = 0;
 		for (let index = range.start; index <= range.end + offset; index += 1) {
-			if (visible.has(index)) continue;
+			if (visible.indiced.has(index)) continue;
 			const key = keys[index];
-			if (key instanceof GroupComponent) {
+			if (isGroupKey(key)) {
+				const group = managers.group.getForKey(key);
+				if (group == null) continue;
 				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);
+				renderGroup(state, group);
+				visible.indiced.set(index, group.key);
+				visible.keys.add(group.key);
+				if (group.element != null) {
+					group.element.style.transform = `translateY(${(index - offset) * options.rowHeight}px)`;
+					fragment.append(group.element);
 				}
 				continue;
 			}
-			const row = managers.row.get(key);
+			const row = managers.row.get(key, true);
 			if (row == null) continue;
 			if (managers.group.collapsed.has(key)) {
 				offset += 1;
@@ -2516,31 +3004,40 @@ var RenderManager = class {
 			}
 			count += 1;
 			renderRow(state, row);
-			visible.set(index, key);
+			visible.indiced.set(index, key);
+			visible.keys.add(key);
 			if (row.element != null) {
 				row.element.style.transform = `translateY(${(index - offset) * options.rowHeight}px)`;
 				fragment.append(row.element);
 			}
 		}
-		if (count > 0) components.body.elements.group[down ? "append" : "prepend"](fragment);
+		if (count === 0) return;
+		if (down) components.body.elements.group.append(fragment);
+		else components.body.elements.group.prepend(fragment);
 	}
 };
+//#endregion
+//#region src/managers/row.manager.ts
 var RowManager = class {
 	components = /* @__PURE__ */ new Map();
 	constructor(state) {
 		this.state = state;
 	}
+	clear() {
+		const { components } = this;
+		const rows = [...components.values()];
+		const { length } = rows;
+		for (let index = 0; index < length; index += 1) this.removeRow(rows[index]);
+		components.clear();
+	}
 	destroy() {
-		const components = [...this.components.values()];
-		const { length } = components;
-		for (let index = 0; index < length; index += 1) removeRow(this.state.managers.render.pool, components[index]);
-		this.components.clear();
+		this.clear();
 		this.components = void 0;
 		this.state = void 0;
 	}
-	get(key) {
+	get(key, create) {
 		let row = this.components.get(key);
-		if (row == null) {
+		if (row == null && create) {
 			row = new RowComponent(key);
 			this.components.set(key, row);
 		}
@@ -2551,28 +3048,33 @@ var RowManager = class {
 	}
 	remove(key) {
 		const row = this.components.get(key);
-		if (row != null) {
-			removeRow(this.state.managers.render.pool, row);
-			this.components.delete(key);
-		}
+		if (row != null) this.removeRow(row);
+	}
+	removeRow(row) {
+		if (row.element != null) removeRow(this.state.managers.render.pool, row);
+		this.components.delete(row.key);
 	}
 	update(key) {
 		const row = this.components.get(key);
-		if (row != null) renderRow(this.state, row);
+		if (row?.element != null) renderRow(this.state, row);
 	}
 };
-const dragStyling = toggleStyles(document.body, {
+//#endregion
+//#region src/helpers/style.helper.ts
+const preventSelection = toggleStyles(document.body, {
 	userSelect: "none",
 	webkitUserSelect: "none"
 });
+//#endregion
+//#region src/managers/selection.manager.ts
 var SelectionManager = class {
-	handlers = Object.freeze({
+	handlers = {
 		add: (keys) => this.add(keys),
 		clear: () => this.clear(),
 		remove: (keys) => this.remove(keys),
 		set: (keys) => this.set(keys),
 		toggle: () => this.toggle()
-	});
+	};
 	items = /* @__PURE__ */ new Set();
 	last;
 	constructor(state) {
@@ -2605,7 +3107,7 @@ var SelectionManager = class {
 		this.state = void 0;
 	}
 	handle(event, target) {
-		const key = getKey(target.getAttribute("data-key"));
+		const key = getKey(target.getAttribute(ATTRIBUTE_DATA_KEY));
 		if (key == null) return;
 		const { items } = this;
 		if (event.shiftKey) {
@@ -2625,8 +3127,8 @@ var SelectionManager = class {
 	range(from, to) {
 		const { state } = this;
 		const keyed = isKey(from) && isKey(to);
-		const fromKey = keyed ? from : getKey(from.getAttribute("data-key"));
-		const toKey = keyed ? to : getKey(to.getAttribute("data-key"));
+		const fromKey = keyed ? from : getKey(from.getAttribute(ATTRIBUTE_DATA_KEY));
+		const toKey = keyed ? to : getKey(to.getAttribute(ATTRIBUTE_DATA_KEY));
 		if (fromKey === toKey) return;
 		const { keys } = state.managers.data;
 		const fromIndex = state.managers.data.getIndex(fromKey);
@@ -2636,7 +3138,7 @@ var SelectionManager = class {
 		const selected = [];
 		for (let index = start; index <= end; index += 1) {
 			const key = keys[index];
-			if (!(key instanceof GroupComponent)) selected.push(key);
+			if (!isGroupKey(key)) selected.push(key);
 		}
 		if (keyed) this.add(selected);
 		else this.set(selected);
@@ -2664,9 +3166,10 @@ var SelectionManager = class {
 		const { items, state } = this;
 		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)));
+		else this.set(keys.filter((key) => !isGroupKey(key)));
 	}
 	update(removed) {
+		const { state } = this;
 		const items = [...removed.map((key) => ({
 			key,
 			removed: true
@@ -2674,28 +3177,28 @@ var SelectionManager = class {
 			key,
 			removed: false
 		}))];
-		const { length } = items;
+		let { length } = items;
 		for (let index = 0; index < length; index += 1) {
 			const { key, removed } = items[index];
-			const row = this.state.managers.row.get(key);
-			if (row == null || row.element == null) continue;
-			setAttribute(row.element, "aria-selected", String(!removed));
-			if (removed) row.element.classList.remove("tabela__row--selected");
-			else row.element.classList.add("tabela__row--selected");
+			const element = state.managers.row.get(key, false)?.element;
+			if (element == null) continue;
+			setAttribute(element, ARIA_SELECTED, String(!removed));
+			if (removed) element.classList.remove(CSS_ROW_SELECTED);
+			else element.classList.add(CSS_ROW_SELECTED);
 		}
 	}
 };
 function getPlaceholder() {
-	placeholder ??= createElement("div", { className: "tabela__selection--placeholder" }, {}, {});
+	placeholder ??= createElement("div", { className: CSS_SELECTION });
 	return placeholder;
 }
 function onMouseDown(event) {
 	if (shifted) {
-		const row = findAncestor(event.target, ".tabela__row--body");
+		const row = findAncestor(event.target, `.${CSS_ROW_BODY}`);
 		if (!(row instanceof HTMLElement)) return;
 		startElement = row;
 		startPosition = getPosition(event);
-		dragStyling.set();
+		preventSelection.set();
 	}
 }
 function onMouseMove(event) {
@@ -2716,14 +3219,14 @@ function onMouseUp(event) {
 	if (startElement == null) return;
 	if (!event.shiftKey) {
 		shifted = false;
-		dragStyling.remove();
+		preventSelection.remove();
 	}
 	getPlaceholder().remove();
-	const row = findAncestor(event.target, ".tabela__row--body");
+	const row = findAncestor(event.target, bodyRowSelector);
 	if (row instanceof HTMLElement) {
 		endElement = row;
-		const endTable = findAncestor(endElement, ".tabela");
-		const startTable = findAncestor(startElement, ".tabela");
+		const endTable = findAncestor(endElement, tableSelector);
+		const startTable = findAncestor(startElement, tableSelector);
 		if (startTable != null && startTable === endTable) mapped.get(startTable)?.range(startElement, endElement);
 	}
 	endElement = void 0;
@@ -2731,7 +3234,7 @@ function onMouseUp(event) {
 	startPosition = void 0;
 }
 function onShift(event, value) {
-	if (event.key === "Shift") shifted = value;
+	if (event.key === KEY_SHIFT) shifted = value;
 }
 function onShiftDown(event) {
 	onShift(event, true);
@@ -2739,7 +3242,10 @@ function onShiftDown(event) {
 function onShiftUp(event) {
 	onShift(event, false);
 }
+const KEY_SHIFT = "Shift";
 const mapped = /* @__PURE__ */ new WeakMap();
+const bodyRowSelector = `.${CSS_ROW_BODY}`;
+const tableSelector = `.${CSS_TABLE}`;
 let shifted = false;
 let endElement;
 let placeholder;
@@ -2750,15 +3256,191 @@ on(document, "keyup", onShiftUp);
 on(document, "mousedown", onMouseDown);
 on(document, "mousemove", onMouseMove);
 on(document, "mouseup", onMouseUp);
+//#endregion
+//#region src/managers/style.manager.ts
+var StyleManager = class {
+	constructor(state) {
+		this.state = state;
+		if (appended) return;
+		appended = true;
+		const style = document.createElement("style");
+		style.textContent = styling;
+		document.head.appendChild(style);
+	}
+};
+const styling = `/** Table */
+
+:where(.${CSS_WRAPPER}) {
+	flex: 1;
+	position: relative;
+	background-color: var(--oui-absolute);
+	border: 1px solid grey;
+}
+
+:where(.${CSS_TABLE}) {
+	min-height: 24em;
+	display: flex;
+	flex-flow: column nowrap;
+	flex: 1;
+	overflow: auto;
+	position: absolute;
+	inset: 0;
+}
+
+/** Row group */
+
+:where(.${CSS_ROWGROUP_HEADER}),
+:where(.${CSS_ROWGROUP_FOOTER}) {
+	background-color: white;
+	position: sticky;
+	left: 0;
+	z-index: 10;
+}
+
+:where(.${CSS_ROWGROUP_HEADER}) {
+	top: 0;
+}
+
+:where(.${CSS_ROWGROUP_FOOTER}) {
+	bottom: 0;
+}
+
+:where(.${CSS_ROWGROUP_BODY}) {
+	display: flex;
+	flex-flow: column nowrap;
+	flex: 1;
+}
+
+:where(.${CSS_ROWGROUP_BODY}:focus) {
+	outline: none;
+}
+
+:where(.${CSS_WRAPPER}:has(.${CSS_ROWGROUP_BODY}:focus-visible)) {
+	outline: 2px solid var(--oui-blue-6);
+	outline-offset: 2px;
+}
+
+/** Row */
+
+:where(.${CSS_ROW}) {
+	width: 100%;
+	display: flex;
+	flex-flow: row nowrap;
+}
+
+:where(.${CSS_ROW}:last-child .${CSS_CELL}) {
+	border-bottom-width: 0;
+}
+
+:where(.${CSS_ROW}--body),
+:where(.${CSS_ROW}--group) {
+	flex: 1;
+	position: absolute;
+}
+
+:where(.${CSS_ROW_SELECTED}) {
+	background-color: var(--oui-blue-1);
+	color: var(--oui-blue-9);
+}
+
+:where(.${CSS_WRAPPER}:has(.${CSS_ROWGROUP_BODY}:focus-visible) .${CSS_ROW}[data-active="true"]) {
+	outline: 2px solid var(--oui-blue-6);
+	outline-offset: 2px;
+}
+
+/** Cells */
+
+:where(.${CSS_CELL}),
+:where(.${CSS_HEADING}) {
+	padding: 0.5em;
+	border-color: gray;
+	border-style: solid;
+	border-width: 0 1px 1px 0;
+	line-height: 1;
+}
+
+:where(.${CSS_WRAPPER} .${CSS_CELL}:last-child),
+:where(.${CSS_ROW} .${CSS_HEADING}:last-child) {
+	flex: 1;
+	border-right-width: 0;
+}
+
+:where(.${CSS_CELL}) {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+:where(.${CSS_HEADING}) {
+	display: flex;
+	flex-flow: row nowrap;
+	align-items: center;
+	justify-content: space-between;
+	gap: 0.5em;
+	cursor: pointer;
+}
+
+:where(.${CSS_HEADING_CONTENT}) {
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+:where(.${CSS_HEADING}[data-sort-direction] .${CSS_HEADING_SORTER})::after {
+	width: 1em;
+	height: 1em;
+	display: inline-flex;
+	font-size: .75em;
+	font-weight: bold;
+}
+
+:where(.${CSS_HEADING}[data-sort-direction="ascending"] .${CSS_HEADING_SORTER})::after {
+	content: '\\21C8';
+}
+
+:where(.${CSS_HEADING}[data-sort-direction="descending"] .${CSS_HEADING_SORTER})::after {
+	content: '\\21CA';
+}
+
+:where(.${CSS_CELL_FOOTER}) {
+	border-top-width: 1px;
+	border-bottom-width: 0;
+}
+
+:where(.${CSS_CELL_GROUP}) {
+	padding: 0;
+	display: flex;
+	flex-flow: row nowrap;
+	align-items: center;
+	gap: 0.5em;
+}
+
+:where(.${CSS_CELL_GROUP} .${CSS_BUTTON}) {
+	margin: 0 0 0 .25rem;
+}
+
+/** Misc. */
+
+:where(.${CSS_BUTTON}) {
+	font-size: .75rem;
+	font-weight: bold;
+}
+
+:where(.${CSS_SELECTION}) {
+	background-color: color-mix(in oklch, var(--oui-blue-6), transparent);
+	border: 1px solid var(--oui-blue-6);
+	border-radius: .25rem;
+	position: fixed;
+	z-index: 1000;
+}
+`.replace(/^\s+|\s+|\s+$/g, " ");
+let appended = false;
+//#endregion
+//#region src/tabela.ts
 var Tabela = class {
-	#components = {
-		header: void 0,
-		body: void 0,
-		footer: void 0
-	};
+	#components;
 	#element;
 	#id = getId();
-	#table;
 	#key;
 	#managers = {
 		column: void 0,
@@ -2770,50 +3452,58 @@ var Tabela = class {
 		render: void 0,
 		row: void 0,
 		selection: void 0,
-		sort: void 0
+		sort: void 0,
+		style: void 0
 	};
+	#prefix = `tabela_${this.#id}_`;
+	#state;
+	#table;
 	data;
+	events;
 	filter;
+	group;
 	selection;
 	sort;
-	get key() {
-		return this.#key;
-	}
 	constructor(element, options) {
 		this.#element = element;
 		element.innerHTML = "";
-		element.classList.add("tabela");
+		element.classList.add(CSS_WRAPPER);
 		this.#table = createElement("div", {
-			className: "tabela__table",
-			role: "table"
-		});
-		element.setAttribute("aria-label", options.label);
+			className: CSS_TABLE,
+			role: ROLE_TABLE
+		}, { [ARIA_LABEL]: options.label });
 		this.#key = options.key;
-		this.#components.header = new HeaderComponent();
-		this.#components.body = new BodyComponent();
-		this.#components.footer = new FooterComponent();
-		const state = {
+		this.#components = {};
+		this.#state = {
 			options,
 			components: this.#components,
 			element: this.#table,
 			id: this.#id,
 			key: this.#key,
-			managers: this.#managers
+			managers: this.#managers,
+			prefix: this.#prefix
 		};
-		this.#managers.column = new ColumnManager(state);
-		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);
-		this.#managers.selection = new SelectionManager(state);
-		this.#managers.sort = new SortManager(state);
+		this.#components.body = new BodyComponent(this.#state);
+		this.#components.footer = new FooterComponent(this.#state);
+		this.#components.header = new HeaderComponent(this.#state);
+		this.#managers.column = new ColumnManager(this.#state);
+		this.#managers.data = new DataManager(this.#state);
+		this.#managers.event = new EventManager(this.#state);
+		this.#managers.filter = new FilterManager(this.#state);
+		this.#managers.group = new GroupManager(this.#state);
+		this.#managers.navigation = new NavigationManager(this.#state);
+		this.#managers.render = new RenderManager(this.#state);
+		this.#managers.row = new RowManager(this.#state);
+		this.#managers.selection = new SelectionManager(this.#state);
+		this.#managers.sort = new SortManager(this.#state);
+		this.#managers.style = new StyleManager(this.#state);
 		this.#table.append(this.#components.header.elements.group, this.#components.body.elements.group, this.#components.footer.elements.group);
+		element.append(this.#table);
 		this.#managers.data.set(options.data);
 		this.data = this.#managers.data.handlers;
+		this.events = this.#managers.event.handlers;
 		this.filter = this.#managers.filter.handlers;
+		this.group = this.#managers.group.handlers;
 		this.selection = this.#managers.selection.handlers;
 		this.sort = this.#managers.sort.handlers;
 	}
@@ -2829,16 +3519,21 @@ var Tabela = class {
 		managers.data.destroy();
 		managers.event.destroy();
 		managers.filter.destroy();
+		managers.group.destroy();
 		managers.navigation.destroy();
 		managers.render.destroy();
 		managers.row.destroy();
 		managers.selection.destroy();
 		managers.sort.destroy();
 		element.innerHTML = "";
-		element.role = "";
-		element.classList.remove("tabela");
-		table.removeAttribute("aria-label");
-		table.removeAttribute("role");
+		table.innerHTML = "";
+		element.classList.remove(CSS_WRAPPER);
+		table.removeAttribute(ARIA_LABEL);
+		table.removeAttribute(ATTRIBUTE_ROLE);
+		this.#state.components = void 0;
+		this.#state.managers = void 0;
+		this.#state.element = void 0;
+		this.#state.options = void 0;
 		this.#element = void 0;
 		this.#table = void 0;
 	}
@@ -2848,7 +3543,10 @@ function getId() {
 	return id;
 }
 let id = 0;
+//#endregion
+//#region src/index.ts
 function tabela(element, options) {
 	return new Tabela(element, options);
 }
+//#endregion
 export { tabela };