@oscarpalmer/tabela 0.13.0 → 0.15.0

package/dist/tabela.full.mjs

@@ -23,29 +23,13 @@ new Set([
 	Node.DOCUMENT_TYPE_NODE
 ]);
 //#endregion
-//#region node_modules/@oscarpalmer/atoms/dist/internal/is.mjs
-/**
-* Is the value a constructor function?
-* @param value Value to check
-* @returns `true` if the value is a constructor function, otherwise `false`
-*/
-function isConstructor(value) {
-	return typeof value === "function" && value.prototype?.constructor === value;
-}
-/**
-* Is the value a key?
-* @param value Value to check
-* @returns `true` if the value is a `Key` _(`number` or `string`)_, otherwise `false`
-*/
-function isKey(value) {
-	return typeof value === "number" || typeof value === "string";
-}
+//#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(value) {
+function isNumber$1(value) {
 	return typeof value === "number" && !Number.isNaN(value);
 }
 /**
@@ -53,37 +37,15 @@ function isNumber(value) {
 * @param value Value to check
 * @returns `true` if the value is a plain object, otherwise `false`
 */
-function isPlainObject(value) {
+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;
 }
-/**
-* Is the value a typed array?
-* @param value Value to check
-* @returns `true` if the value is a typed array, otherwise `false`
-*/
-function isTypedArray(value) {
-	TYPED_ARRAYS ??= new Set([
-		Int8Array,
-		Uint8Array,
-		Uint8ClampedArray,
-		Int16Array,
-		Uint16Array,
-		Int32Array,
-		Uint32Array,
-		Float32Array,
-		Float64Array,
-		BigInt64Array,
-		BigUint64Array
-	]);
-	return TYPED_ARRAYS.has(value?.constructor);
-}
-let TYPED_ARRAYS;
 //#endregion
-//#region node_modules/@oscarpalmer/atoms/dist/internal/array/compact.mjs
-function compact(array, strict) {
+//#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);
 	const { length } = array;
@@ -95,53 +57,49 @@ function compact(array, strict) {
 	return compacted;
 }
 //#endregion
-//#region node_modules/@oscarpalmer/atoms/dist/internal/string.mjs
+//#region node_modules/@oscarpalmer/toretto/node_modules/@oscarpalmer/atoms/dist/internal/string.mjs
 /**
 * Get the string value from any value
 * @param value Original value
 * @returns String representation of the value
 */
-function getString(value) {
+function getString$1(value) {
 	if (typeof value === "string") return value;
 	if (value == null) return "";
-	if (typeof value === "function") return getString(value());
+	if (typeof value === "function") return getString$1(value());
 	if (typeof value !== "object") return String(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
 * @param delimiter Delimiter to use between values
 * @returns Joined string
 */
-function join(value, delimiter) {
-	return compact(value).map(getString).join(typeof delimiter === "string" ? delimiter : "");
+function join$1(value, delimiter) {
+	return compact$1(value).map(getString$1).join(typeof delimiter === "string" ? delimiter : "");
 }
 /**
 * Split a string into words _(and other readable parts)_
 * @param value Original string
 * @returns Array of words found in the string
 */
-function words(value) {
-	return typeof value === "string" ? value.match(EXPRESSION_WORDS) ?? [] : [];
+function words$1(value) {
+	return typeof value === "string" ? value.match(EXPRESSION_WORDS$1) ?? [] : [];
 }
-const EXPRESSION_IGNORED = /(^|\.)(__proto__|constructor|prototype)(\.|$)/i;
-const EXPRESSION_WORDS = /[^\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/atoms/dist/is.mjs
+//#region node_modules/@oscarpalmer/toretto/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));
+function isNullableOrWhitespace$1(value) {
+	return value == null || EXPRESSION_WHITESPACE$1.test(getString$1(value));
 }
-const EXPRESSION_WHITESPACE = /^\s*$/;
+const EXPRESSION_WHITESPACE$1 = /^\s*$/;
 //#endregion
 //#region node_modules/@oscarpalmer/toretto/dist/internal/element-value.mjs
 function setElementValue(element, first, second, third, callback) {
@@ -168,13 +126,13 @@ function setElementValues(element, first, second, third, callback) {
 	}
 }
 function updateElementValue(element, key, value, set, remove, isBoolean, json) {
-	if (isBoolean ? value == null : isNullableOrWhitespace(value)) remove.call(element, key);
+	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(value) && typeof value.name === "string" && "value" in 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();
@@ -230,7 +188,7 @@ const elementEvents = {
 };
 document.createElement("form");
 //#endregion
-//#region node_modules/@oscarpalmer/atoms/dist/internal/number.mjs
+//#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
@@ -239,59 +197,33 @@ document.createElement("form");
 * @param loop If `true`, the value will loop around when smaller than the minimum or larger than the maximum _(defaults to `false`)_
 * @returns Clamped value
 */
-function clamp(value, minimum, maximum, loop) {
+function clamp$1(value, minimum, maximum, loop) {
 	if (![
 		value,
 		minimum,
 		maximum
-	].every(isNumber)) return NaN;
+	].every(isNumber$1)) return NaN;
 	if (value < minimum) return loop === true ? maximum : minimum;
 	return value > maximum ? loop === true ? minimum : maximum : value;
 }
-/**
-* Get the number value from an unknown value _(based on Lodash)_
-* @param value Original value
-* @returns Original value as a number, or `NaN` if the value is unable to be parsed
-*/
-function getNumber(value) {
-	if (typeof value === "number") return value;
-	if (typeof value === "bigint" || typeof value === "boolean") return Number(value);
-	if (value == null || typeof value === "symbol") return NaN;
-	if (typeof value === "function") return getNumber(value());
-	let parsed = value.valueOf();
-	if (typeof parsed === "object") parsed = parsed.toString();
-	if (typeof parsed !== "string") return getNumber(parsed);
-	const trimmed = parsed.trim();
-	if (trimmed.length === 0) return NaN;
-	if (EXPRESSION_ZEROISH.test(parsed)) return 0;
-	const isBinary = EXPRESSION_BINARY.test(trimmed);
-	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, ""));
-}
-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) {
+//#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;
-	return clamp(actual, 1, MAXIMUM_ABSOLUTE);
+	else actual = typeof second === "number" ? second : MAXIMUM_DEFAULT$1;
+	return clamp$1(actual, 1, MAXIMUM_ABSOLUTE$1);
 }
-const MAXIMUM_ABSOLUTE = 16777216;
-const MAXIMUM_DEFAULT = 1048576;
+const MAXIMUM_ABSOLUTE$1 = 16777216;
+const MAXIMUM_DEFAULT$1 = 1048576;
 //#endregion
-//#region node_modules/@oscarpalmer/atoms/dist/sized/map.mjs
+//#region node_modules/@oscarpalmer/toretto/node_modules/@oscarpalmer/atoms/dist/sized/map.mjs
 /**
 * A Map with a maximum size
 *
 * Behavior is similar to a _LRU_-cache, where the least recently used entries are removed
 */
-var SizedMap = class extends Map {
+var SizedMap$1 = class extends Map {
 	/**
 	* The maximum size of the Map
 	*/
@@ -306,7 +238,7 @@ var SizedMap = class extends Map {
 		return this.#maximumSize;
 	}
 	constructor(first, second) {
-		const maximum = getSizedMaximum(first, second);
+		const maximum = getSizedMaximum$1(first, second);
 		super();
 		this.#maximumSize = maximum;
 		if (Array.isArray(first)) {
@@ -333,8 +265,8 @@ var SizedMap = class extends Map {
 	}
 };
 //#endregion
-//#region node_modules/@oscarpalmer/atoms/dist/function/memoize.mjs
-var Memoized = class {
+//#region node_modules/@oscarpalmer/toretto/node_modules/@oscarpalmer/atoms/dist/function/memoize.mjs
+var Memoized$1 = class {
 	#state;
 	/**
 	* Maximum cache size
@@ -349,9 +281,9 @@ var Memoized = class {
 		return this.#state.cache?.size ?? NaN;
 	}
 	constructor(callback, options) {
-		const cache = new SizedMap(options.cacheSize);
+		const cache = new SizedMap$1(options.cacheSize);
 		const getter = (...parameters) => {
-			const key = options.cacheKey?.(...parameters) ?? (parameters.length === 1 ? parameters[0] : join(parameters.map(getString), SEPARATOR));
+			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);
@@ -410,11 +342,11 @@ var Memoized = class {
 		return this.#state.getter(...parameters);
 	}
 };
-function getMemoizationOptions(input) {
-	const { cacheKey, cacheSize } = isPlainObject(input) ? input : {};
+function getMemoizationOptions$1(input) {
+	const { cacheKey, cacheSize } = isPlainObject$1(input) ? input : {};
 	return {
 		cacheKey: typeof cacheKey === "function" ? cacheKey : void 0,
-		cacheSize: typeof cacheSize === "number" && cacheSize > 0 ? cacheSize : DEFAULT_CACHE_SIZE
+		cacheSize: typeof cacheSize === "number" && cacheSize > 0 ? cacheSize : DEFAULT_CACHE_SIZE$1
 	};
 }
 /**
@@ -423,13 +355,13 @@ function getMemoizationOptions(input) {
 * @param options Memoization options
 * @returns Memoized instance
 */
-function memoize(callback, options) {
-	return new Memoized(callback, getMemoizationOptions(options));
+function memoize$1(callback, options) {
+	return new Memoized$1(callback, getMemoizationOptions$1(options));
 }
-const DEFAULT_CACHE_SIZE = 1024;
-const SEPARATOR = "_";
+const DEFAULT_CACHE_SIZE$1 = 1024;
+const SEPARATOR$1 = "_";
 //#endregion
-//#region node_modules/@oscarpalmer/atoms/dist/string/case.mjs
+//#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
@@ -445,11 +377,11 @@ function camelCase(value) {
 */
 function capitalize(value) {
 	if (typeof value !== "string" || value.length === 0) return "";
-	memoizedCapitalize ??= memoize((v) => v.length === 1 ? v.toLocaleUpperCase() : `${v.charAt(0).toLocaleUpperCase()}${v.slice(1).toLocaleLowerCase()}`);
+	memoizedCapitalize ??= memoize$1((v) => v.length === 1 ? v.toLocaleUpperCase() : `${v.charAt(0).toLocaleUpperCase()}${v.slice(1).toLocaleLowerCase()}`);
 	return memoizedCapitalize.run(value);
 }
 function toCase(type, value, capitalizeAny, capitalizeFirst) {
-	caseMemoizers[type] ??= memoize(toCaseCallback.bind({
+	caseMemoizers[type] ??= memoize$1(toCaseCallback.bind({
 		type,
 		capitalizeAny,
 		capitalizeFirst
@@ -460,7 +392,7 @@ function toCaseCallback(value) {
 	if (typeof value !== "string") return "";
 	if (value.length < 1) return value;
 	const { capitalizeAny, capitalizeFirst, type } = this;
-	const parts = words(value);
+	const parts = words$1(value);
 	const partsLength = parts.length;
 	const cased = [];
 	for (let partIndex = 0; partIndex < partsLength; partIndex += 1) {
@@ -475,9 +407,9 @@ function toCaseCallback(value) {
 			else partResult.push(capitalize(item));
 			itemCount += 1;
 		}
-		cased.push(join(partResult, delimiters[type]));
+		cased.push(join$1(partResult, delimiters[type]));
 	}
-	return join(cased, delimiters[type]);
+	return join$1(cased, delimiters[type]);
 }
 const CASE_CAMEL = "camel";
 const CASE_KEBAB = "kebab";
@@ -582,35 +514,56 @@ function updateStyleProperty(element, key, value) {
 	}, 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_TABELA = "tabela";
-const CSS_TABELA_CELL = "tabela__cell";
-const CSS_TABELA_CELL_BODY = "tabela__cell--body";
-const CSS_TABELA_CELL_FOOTER = "tabela__cell--footer";
-const CSS_TABELA_FAKER = "tabela__faker";
-const CSS_TABELA_HEADING = "tabela__heading";
-const CSS_TABELA_HEADING_CONTENT = "tabela__heading__content";
-const CSS_TABELA_HEADING_SORTER = "tabela__heading__sorter";
-const CSS_TABELA_ROW = "tabela__row";
-const CSS_TABELA_ROW_BODY = "tabela__row--body";
-const CSS_TABELA_ROW_FOOTER = "tabela__row--footer";
-const CSS_TABELA_ROW_GROUP = "tabela__row--group tabela__group";
-const CSS_TABELA_ROW_HEADER = "tabela__row--header";
-const CSS_TABELA_ROW_SELECTED = "tabela__row--selected";
-const CSS_TABELA_ROWGROUP = "tabela__rowgroup";
-const CSS_TABELA_ROWGROUP_BODY = "tabela__rowgroup--body";
-const CSS_TABELA_ROWGROUP_FOOTER = "tabela__rowgroup--footer";
-const CSS_TABELA_ROWGROUP_HEADER = "tabela__rowgroup--header";
-const CSS_TABELA_SELECTION = "tabela__selection";
-const CSS_TABELA_TABLE = "tabela__table";
+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: CSS_TABELA_CELL,
-		role: "cell"
+		className: CSS_CELL,
+		role: ROLE_CELL
 	}, {}, { width: `${width}px` });
-	if (body ?? true) cell.classList.add(CSS_TABELA_CELL_BODY);
+	if (body ?? true) cell.classList.add(CSS_CELL_BODY);
 	return cell;
 }
 function createElement(tagName, properties, attributes, style) {
@@ -622,41 +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: CSS_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: CSS_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: CSS_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 += ` ${CSS_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() {
@@ -668,15 +672,15 @@ var BodyComponent = class {
 //#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 += ` ${CSS_TABELA_ROWGROUP_FOOTER}`;
-		row.className += ` ${CSS_TABELA_ROW_FOOTER}`;
+		group.className += ` ${CSS_ROWGROUP_FOOTER}`;
+		row.className += ` ${CSS_ROW_FOOTER}`;
 	}
 	destroy() {
 		this.elements.cells.length = 0;
@@ -690,7 +694,7 @@ 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 += ` ${CSS_TABELA_CELL_FOOTER}`;
+			cell.className += ` ${CSS_CELL_FOOTER}`;
 			cell.innerHTML = "&nbsp;";
 			elements.cells.push(cell);
 			elements.row.append(cell);
@@ -701,14 +705,14 @@ var FooterComponent = class {
 //#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 += ` ${CSS_TABELA_ROWGROUP_HEADER}`;
-		row.className += ` ${CSS_TABELA_ROW_HEADER}`;
+		group.className += ` ${CSS_ROWGROUP_HEADER}`;
+		row.className += ` ${CSS_ROW_HEADER}`;
 	}
 	destroy() {
 		this.elements.group = void 0;
@@ -725,12 +729,12 @@ 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();
@@ -740,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: CSS_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: CSS_TABELA_HEADING_CONTENT,
+		className: CSS_HEADING_CONTENT,
 		textContent: title
 	});
-	const sorter = createElement("div", { className: CSS_TABELA_HEADING_SORTER });
+	const sorter = createElement("div", { className: CSS_HEADING_SORTER });
 	wrapper.append(content, sorter);
 	return {
 		content,
@@ -774,17 +778,17 @@ var ColumnManager = class {
 		this.items = void 0;
 		this.state = void 0;
 	}
-	get(field) {
-		return this.items.find((item) => item.options.field === field);
+	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);
@@ -792,7 +796,7 @@ 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;
@@ -826,6 +830,19 @@ function chunk(array, size) {
 }
 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) {
@@ -888,6 +905,65 @@ function getParameters(original) {
 }
 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
+* @returns `true` if the value is a constructor function, otherwise `false`
+*/
+function isConstructor(value) {
+	return typeof value === "function" && value.prototype?.constructor === value;
+}
+/**
+* Is the value a key?
+* @param value Value to check
+* @returns `true` if the value is a `Key` _(`number` or `string`)_, otherwise `false`
+*/
+function isKey(value) {
+	return typeof value === "number" || typeof value === "string";
+}
+/**
+* Is the value a number?
+* @param value Value to check
+* @returns `true` if the value is a `number`, otherwise `false`
+*/
+function isNumber(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(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;
+}
+/**
+* Is the value a typed array?
+* @param value Value to check
+* @returns `true` if the value is a typed array, otherwise `false`
+*/
+function isTypedArray(value) {
+	TYPED_ARRAYS ??= new Set([
+		Int8Array,
+		Uint8Array,
+		Uint8ClampedArray,
+		Int16Array,
+		Uint16Array,
+		Int32Array,
+		Uint32Array,
+		Float32Array,
+		Float64Array,
+		BigInt64Array,
+		BigUint64Array
+	]);
+	return TYPED_ARRAYS.has(value?.constructor);
+}
+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;
@@ -939,6 +1015,43 @@ const aggregators = {
 	sum: calculateSum
 };
 //#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/internal/string.mjs
+/**
+* Get the string value from any value
+* @param value Original value
+* @returns String representation of the value
+*/
+function getString(value) {
+	if (typeof value === "string") return value;
+	if (value == null) return "";
+	if (typeof value === "function") return getString(value());
+	if (typeof value !== "object") return String(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
+* @param delimiter Delimiter to use between values
+* @returns Joined string
+*/
+function join(value, delimiter) {
+	return compact(value).map(getString).join(typeof delimiter === "string" ? delimiter : "");
+}
+/**
+* Split a string into words _(and other readable parts)_
+* @param value Original string
+* @returns Array of words found in the string
+*/
+function words(value) {
+	return typeof value === "string" ? value.match(EXPRESSION_WORDS) ?? [] : [];
+}
+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);
@@ -1054,63 +1167,72 @@ const comparators$1 = {
 };
 //#endregion
 //#region node_modules/@oscarpalmer/atoms/dist/array/sort.mjs
-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;
+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;
 	});
 }
+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) {
@@ -1166,6 +1288,17 @@ 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;
@@ -1310,6 +1443,10 @@ 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;
@@ -1322,7 +1459,7 @@ var GroupComponent = class {
 	constructor(label, value) {
 		this.label = label;
 		const stringified = getString(value);
-		this.key = `group:${stringified}`;
+		this.key = `${GROUP_KEY_PREFIX}${stringified}`;
 		this.value = {
 			stringified,
 			original: value
@@ -1336,86 +1473,126 @@ function removeGroup(group) {
 }
 function renderGroup(state, component) {
 	component.element ??= createElement("div", {
-		className: `${CSS_TABELA_ROW} ${CSS_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="tabela_${state.id}_${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="tabela__group__total">${component.total}</span>
-	<span class="tabela__group__selected">${component.selected === 0 ? "" : component.selected}</span>
+	<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) {
+function updateGroup(state, component, emit) {
 	if (component.element == null) return;
-	const selected = component.element.querySelector(".tabela__group__selected");
-	const total = component.element.querySelector(".tabela__group__total");
+	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/managers/sort.manager.ts
-var SortManager = class {
-	handlers = Object.freeze({
-		add: (field, direction) => this.add(field, direction),
-		flip: (field) => this.flip(field),
-		clear: () => this.clear(),
-		remove: (field) => this.remove(field),
-		set: (items) => this.set(items)
-	});
+//#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 = {
+		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, 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();
@@ -1425,47 +1602,48 @@ 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.state.items.active = items.length === 0 ? void 0 : getSortedItems(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 getSortedItems(state, sorters) {
-	const data = state.managers.data.state.items.active?.map((key) => key instanceof GroupComponent ? key : state.managers.data.state.values.mapped.get(key)) ?? state.managers.data.state.values.array.slice();
+	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) => item instanceof GroupComponent ? 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.stringified : getValue(first, state.managers.group.field);
-		const secondValue = second instanceof GroupComponent ? second.value.stringified : getValue(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];
@@ -1475,28 +1653,30 @@ function sortWithGroups(state, data, sorters) {
 		return 0;
 	});
 }
+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)
-	});
+		remove: (items) => this.remove(items, true),
+		synchronize: (data, remove) => this.synchronize(data, remove === true),
+		update: (data) => this.update(data, true)
+	};
 	state;
-	get items() {
-		return this.state.items.active ?? this.state.items.original;
+	get keys() {
+		return this.state.keys.active ?? this.state.keys.original;
 	}
 	get size() {
-		return this.items.length;
+		return this.keys.length;
 	}
 	constructor(state) {
 		this.state = {
 			...state,
-			items: { original: [] },
+			keys: { original: [] },
 			values: {
 				array: [],
 				mapped: /* @__PURE__ */ new Map()
@@ -1505,125 +1685,151 @@ var DataManager = class {
 	}
 	async add(data, render) {
 		const { state } = this;
-		const groups = [];
-		const updates = [];
+		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 = getValue(item, state.key);
 			if (state.values.mapped.has(key)) {
-				updates.push(item);
+				updatedData.push(item);
 				continue;
 			}
+			addedData.push(item);
 			state.values.array.push(item);
 			state.values.mapped.set(key, item);
 			if (!state.managers.group.enabled) continue;
-			const groupValue = getValue(item, state.managers.group.field);
-			let group = state.managers.group.get(groupValue);
+			const groupValue = getValue(item, state.managers.group.key);
+			let group = state.managers.group.getForValue(groupValue);
 			if (group == null) {
-				groupColumn ??= state.managers.column.get(state.managers.group.field);
-				group = new GroupComponent(`${groupColumn?.options.title ?? state.managers.group.field}: ${groupValue}`, groupValue);
-				state.values.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;
-			groups.push(group);
 		}
-		length = groups.length;
-		for (let index = 0; index < length; index += 1) updateGroup(state, groups[index]);
-		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.state.values.array.length > 0) this.removeItems([], true, true);
+	async clear() {
+		if (this.state.values.array.length > 0) return this.removeItems([], true, true).then(() => void 0);
 	}
 	destroy() {
 		const { state } = this;
 		state.values.mapped.clear();
-		state.items.active = void 0;
-		state.items.original.length = 0;
+		state.keys.active = void 0;
+		state.keys.original.length = 0;
 		state.values.array.length = 0;
 		this.handlers = void 0;
 		this.state = void 0;
 	}
 	get(active) {
 		const { state } = this;
-		return active ?? false ? select(state.items.active ?? [], (key) => !(key instanceof GroupComponent), (key) => state.values.mapped.get(key)) : state.values.array.filter((item) => !(item instanceof GroupComponent));
+		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(item) {
-		if (item instanceof GroupComponent) return this.items.indexOf(item);
-		return this.items.findIndex((value) => value instanceof GroupComponent ? value.key === item : value === item);
+		return this.keys.indexOf(item);
 	}
 	async remove(items, render) {
 		const { state } = this;
-		const keys = items.map((value) => isPlainObject(value) ? getValue(value, state.key) : value);
+		const keys = items.map((value) => isPlainObject(value) ? getValue(value, state.key) : value).filter((key) => !isGroupKey(key));
 		const { length } = keys;
-		if (length > 0) return this.removeItems(keys, false, render === true);
+		return length === 0 ? render ? void 0 : [] : this.removeItems(keys, false, render);
 	}
-	async removeItems(items, clear, render) {
+	async removeItems(keys, clear, render) {
 		const { state } = this;
 		if (clear) {
-			state.items.active = void 0;
-			state.items.original = [];
+			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();
-			return this.render();
+			state.managers.event.emit(EVENT_DATA_CLEAR);
+			this.render();
+			return render ? void 0 : [];
 		}
-		const groups = [];
-		const chunked = chunk(items);
+		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 itemIndex = 0; itemIndex < chunkLength; itemIndex += 1) {
-				const item = chunk[itemIndex];
-				const dataIndex = state.items.original.indexOf(item);
+			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);
-				state.items.original.splice(dataIndex, 1);
-				state.managers.row.remove(item);
-				state.values.mapped.delete(item);
-				if (!state.managers.group.enabled || item instanceof GroupComponent) continue;
-				state.managers.group.collapsed.delete(item);
-				const groupKey = getValue(dataValue, state.managers.group.field);
-				const group = state.managers.group.get(groupKey);
+				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) {
-					groups.push(group);
+					updatedGroups.push(group);
 					continue;
 				}
-				let groupIndex = groups.indexOf(group);
-				if (groupIndex > -1) groups.splice(groupIndex, 1);
-				groupIndex = state.values.array.indexOf(group);
+				let groupIndex = updatedGroups.indexOf(group);
+				if (groupIndex > -1) updatedGroups.splice(groupIndex, 1);
+				groupIndex = state.values.array.indexOf(group.key);
 				if (groupIndex > -1) {
-					state.items.original.splice(groupIndex, 1);
+					state.keys.original.splice(groupIndex, 1);
 					state.values.array.splice(groupIndex, 1);
 				}
-				state.managers.group.remove(group);
-				if (items.length >= 1e4) await delay(25);
+				removedGroups.push(group);
+				state.managers.group.remove(group, false);
+				if (keys.length >= 1e4) await delay(25);
 			}
 		}
-		const { length } = groups;
-		for (let index = 0; index < length; index += 1) updateGroup(state, groups[index]);
-		if (render) return this.render();
+		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 } = this;
 		if (state.managers.group.enabled) sortWithGroups(state, state.values.array, [{
-			direction: "ascending",
+			direction: SORT_ASCENDING,
 			key: state.key
 		}]);
 		else sort(state.values.array, [{
-			direction: "ascending",
+			direction: SORT_ASCENDING,
 			key: state.key
 		}]);
-		state.items.original = state.values.array.map((item) => item instanceof GroupComponent ? item : getValue(item, state.key));
-		state.values.mapped = toMap(state.values.array.filter((item) => !(item instanceof GroupComponent)), (item) => getValue(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);
@@ -1632,17 +1838,17 @@ var DataManager = class {
 		const { state } = this;
 		const array = data.slice();
 		if (state.managers.group.enabled) {
-			const column = state.managers.column.get(state.managers.group.field);
-			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 group = new GroupComponent(`${column?.options.title ?? state.managers.group.field}: ${value}`, 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);
 		}
@@ -1651,7 +1857,7 @@ var DataManager = class {
 	}
 	async synchronize(data, remove) {
 		const { state } = this;
-		const add = [];
+		const added = [];
 		const updated = [];
 		const keys = /* @__PURE__ */ new Set([]);
 		const { length } = data;
@@ -1659,33 +1865,38 @@ var DataManager = class {
 			const object = data[index];
 			const key = getValue(object, state.key);
 			if (state.values.mapped.has(key)) updated.push(object);
-			else add.push(object);
+			else added.push(object);
 			keys.add(key);
 		}
 		if (keys.size === 0) return;
-		if (remove ?? false) {
-			const toRemove = state.items.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) {
+	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 = getValue(object, state.key);
-			const value = state.values.mapped.get(key);
-			if (value != null) {
-				state.values.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
@@ -1772,7 +1983,7 @@ const EVENT_TYPES = new Set([
 const HANDLER_ACTIVE = delegatedEventHandler.bind(false);
 const HANDLER_PASSIVE = delegatedEventHandler.bind(true);
 //#endregion
-//#region node_modules/@oscarpalmer/atoms/dist/internal/function/misc.mjs
+//#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…
 */
@@ -1843,31 +2054,50 @@ function getElement(origin) {
 //#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__table");
+	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":
@@ -1877,8 +2107,8 @@ function onClick(event) {
 	}
 }
 function onKeydown(event) {
-	const target = findAncestor(event, "[data-event]");
-	const table = findAncestor(event, ".tabela__table");
+	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;
@@ -1888,10 +2118,211 @@ function onKeydown(event) {
 	}
 	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
+* @param minimum Minimum value
+* @param maximum Maximum value
+* @param loop If `true`, the value will loop around when smaller than the minimum or larger than the maximum _(defaults to `false`)_
+* @returns Clamped value
+*/
+function clamp(value, minimum, maximum, loop) {
+	if (![
+		value,
+		minimum,
+		maximum
+	].every(isNumber)) return NaN;
+	if (value < minimum) return loop === true ? maximum : minimum;
+	return value > maximum ? loop === true ? minimum : maximum : value;
+}
+/**
+* Get the number value from an unknown value _(based on Lodash)_
+* @param value Original value
+* @returns Original value as a number, or `NaN` if the value is unable to be parsed
+*/
+function getNumber(value) {
+	if (typeof value === "number") return value;
+	if (typeof value === "bigint" || typeof value === "boolean") return Number(value);
+	if (value == null || typeof value === "symbol") return NaN;
+	if (typeof value === "function") return getNumber(value());
+	let parsed = value.valueOf();
+	if (typeof parsed === "object") parsed = parsed.toString();
+	if (typeof parsed !== "string") return getNumber(parsed);
+	const trimmed = parsed.trim();
+	if (trimmed.length === 0) return NaN;
+	if (EXPRESSION_ZEROISH.test(parsed)) return 0;
+	const isBinary = EXPRESSION_BINARY.test(trimmed);
+	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, ""));
+}
+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);
+}
+const MAXIMUM_ABSOLUTE = 16777216;
+const MAXIMUM_DEFAULT = 1048576;
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/sized/map.mjs
+/**
+* A Map with a maximum size
+*
+* Behavior is similar to a _LRU_-cache, where the least recently used entries are removed
+*/
+var SizedMap = class extends Map {
+	/**
+	* The maximum size of the Map
+	*/
+	#maximumSize;
+	/**
+	* Is the Map full?
+	*/
+	get full() {
+		return this.size >= this.#maximumSize;
+	}
+	get maximum() {
+		return this.#maximumSize;
+	}
+	constructor(first, second) {
+		const maximum = getSizedMaximum(first, second);
+		super();
+		this.#maximumSize = maximum;
+		if (Array.isArray(first)) {
+			const { length } = first;
+			if (length <= maximum) for (let index = 0; index < length; index += 1) this.set(...first[index]);
+			else for (let index = 0; index < maximum; index += 1) this.set(...first[length - maximum + index]);
+		}
+	}
+	/**
+	* @inheritdoc
+	*/
+	get(key) {
+		const value = super.get(key);
+		if (value !== void 0 || this.has(key)) this.set(key, value);
+		return value;
+	}
+	/**
+	* @inheritdoc
+	*/
+	set(key, value) {
+		if (this.has(key)) this.delete(key);
+		else if (this.size >= this.#maximumSize) this.delete(this.keys().next().value);
+		return super.set(key, value);
+	}
+};
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/function/memoize.mjs
+var Memoized = class {
+	#state;
+	/**
+	* Maximum cache size
+	*/
+	get maximum() {
+		return this.#state.cache?.maximum ?? NaN;
+	}
+	/**
+	* Current cache size
+	*/
+	get size() {
+		return this.#state.cache?.size ?? NaN;
+	}
+	constructor(callback, options) {
+		const cache = new SizedMap(options.cacheSize);
+		const getter = (...parameters) => {
+			const key = options.cacheKey?.(...parameters) ?? (parameters.length === 1 ? parameters[0] : join(parameters.map(getString), SEPARATOR));
+			if (cache.has(key)) return cache.get(key);
+			const value = callback(...parameters);
+			cache.set(key, value);
+			return value;
+		};
+		this.#state = {
+			cache,
+			getter
+		};
+	}
+	/**
+	* Clear the cache
+	*/
+	clear() {
+		this.#state.cache?.clear();
+	}
+	/**
+	* Delete a result from the cache
+	* @param key Key to delete
+	* @returns `true` if the key existed and was removed, otherwise `false`
+	*/
+	delete(key) {
+		return this.#state.cache?.delete(key) ?? false;
+	}
+	/**
+	* Destroy the instance _(clearing its cache and removing its callback)_
+	*/
+	destroy() {
+		this.#state.cache?.clear();
+		this.#state.cache = void 0;
+		this.#state.getter = void 0;
+	}
+	/**
+	* Get a result from the cache
+	* @param key Key to get
+	* @returns Cached result or `undefined` if it does not exist
+	*/
+	get(key) {
+		return this.#state.cache?.get(key);
+	}
+	/**
+	* Does the result exist?
+	* @param key Key to check
+	* @returns `true` if the result exists, otherwise `false`
+	*/
+	has(key) {
+		return this.#state.cache?.has(key) ?? false;
+	}
+	/**
+	* Run the callback with the provided parameters
+	* @param parameters Parameters to pass to the callback
+	* @returns Cached or computed _(then cached)_ result
+	*/
+	run(...parameters) {
+		if (this.#state.cache == null || this.#state.getter == null) throw new Error("The Memoized instance has been destroyed");
+		return this.#state.getter(...parameters);
+	}
+};
+function getMemoizationOptions(input) {
+	const { cacheKey, cacheSize } = isPlainObject(input) ? input : {};
+	return {
+		cacheKey: typeof cacheKey === "function" ? cacheKey : void 0,
+		cacheSize: typeof cacheSize === "number" && cacheSize > 0 ? cacheSize : DEFAULT_CACHE_SIZE
+	};
+}
+/**
+* Memoize a function, caching and retrieving results based on the first parameter
+* @param callback Callback to memoize
+* @param options Memoization options
+* @returns Memoized instance
+*/
+function memoize(callback, options) {
+	return new Memoized(callback, getMemoizationOptions(options));
+}
+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
@@ -2107,29 +2538,43 @@ 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;
@@ -2140,18 +2585,18 @@ var FilterManager = class {
 		const { state } = this;
 		const filtered = [];
 		const filters = Object.entries(this.items);
-		const itemsLength = state.managers.data.state.items.original.length;
+		const itemsLength = state.managers.data.state.keys.original.length;
 		rowLoop: for (let itemIndex = 0; itemIndex < itemsLength; itemIndex += 1) {
-			const item = state.managers.data.state.items.original[itemIndex];
-			if (item instanceof GroupComponent) {
+			const item = state.managers.data.state.keys.original[itemIndex];
+			if (isGroupKey(item)) {
 				filtered.push(item);
 				continue;
 			}
 			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;
@@ -2160,26 +2605,31 @@ var FilterManager = class {
 			}
 			filtered.push(item);
 		}
-		state.managers.data.state.items.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;
 			const keyed = {};
-			const filters = Object.keys(this.items);
-			const { length } = filters;
+			const keys = Object.keys(this.items);
+			const { length } = keys;
 			for (let index = 0; index < length; index += 1) {
-				const field = filters[index];
-				if (field !== value) keyed[field] = this.items[field];
+				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) {
@@ -2187,24 +2637,24 @@ 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
@@ -2212,28 +2662,34 @@ const equalizer = equal.initialize({ ignoreCase: true });
 var GroupManager = class {
 	collapsed = /* @__PURE__ */ new Set();
 	enabled = false;
-	field;
-	handlers = Object.freeze({ set: (group) => {
-		if (group === this.field) return;
+	key;
+	handlers = { set: (group) => {
+		if (group === this.key) return;
 		this.enabled = !isNullableOrWhitespace(group);
-		this.field = 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]);
+		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);
@@ -2243,46 +2699,48 @@ var GroupManager = class {
 		this.handlers = void 0;
 		this.state = void 0;
 	}
-	get(value) {
+	getForKey(key) {
+		return this.mapped.get(key);
+	}
+	getForValue(value) {
 		const asString = getString(value);
 		return this.items.find((item) => item.value.stringified === asString);
 	}
 	handle(button) {
-		const value = button.dataset.key?.replace(`tabela_${this.state.id}_group:`, "");
-		const group = this.get(value);
+		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.state.items.original.indexOf(items[index]) + 1;
-		const last = items[index + 1] == null ? state.managers.data.state.items.original.length - 1 : state.managers.data.state.items.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.state.items.original[first];
+			const key = state.managers.data.state.keys.original[first];
 			if (group.expanded) collapsed.delete(key);
 			else collapsed.add(key);
 		}
+		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.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);
 	}
 };
 //#endregion
-//#region src/helpers/misc.helpers.ts
-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;
@@ -2295,59 +2753,63 @@ 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 { items } = managers.data;
-		const { length } = items;
+		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(this.state, event, activeDescendant, id);
-		if (next != null) this.setActive(items.at(next));
+		else next = getIndex(this.state, event, activeDescendant);
+		if (next != null) this.setActive(keys.at(next));
 	}
 	setActive(item, scroll) {
-		const { components, id, managers, options } = this.state;
+		const { components, managers, options, prefix } = this.state;
 		this.active = item;
-		const active = components.body.elements.group.querySelectorAll("[data-active=\"true\"]");
-		for (const item of active) item.setAttribute("data-active", "false");
-		const component = item instanceof GroupComponent ? item : managers.row.get(item, false);
+		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("data-active", "true");
+			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 component.element.scrollIntoView({ block: "nearest" });
 		}
-		components.body.elements.group.setAttribute("aria-activedescendant", component == null ? "" : `tabela_${id}_${component.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(state, event, active, id) {
-	const key = getKey(active.replace(`tabela_${id}_`, ""));
+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 : state.managers.data.size - 1;
-	return clamp(state.managers.data.getIndex(key) + getOffset(event.key), 0, state.managers.data.size - 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,
@@ -2365,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}_${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(CSS_TABELA_ROW_BODY);
-	if (selected) element.classList.add(CSS_TABELA_ROW_SELECTED);
-	else element.classList.remove(CSS_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.state.values.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(getValue(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);
 	}
 }
@@ -2405,9 +2869,9 @@ var RowComponent = class {
 function getRange(state, down) {
 	const { element, managers, options } = state;
 	const { clientHeight, scrollTop } = element;
-	const { items } = managers.data;
+	const { keys } = managers.data;
 	const firstIndex = Math.floor(scrollTop / options.rowHeight);
-	const lastIndex = items.length - managers.group.collapsed.size - 1;
+	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);
@@ -2438,7 +2902,10 @@ var RenderManager = class {
 		rows: []
 	};
 	state;
-	visible = /* @__PURE__ */ new Map();
+	visible = {
+		indiced: /* @__PURE__ */ new Map(),
+		keys: /* @__PURE__ */ new Set()
+	};
 	constructor(state) {
 		this.listener = on(state.element, "scroll", onScroll.bind(this));
 		this.state = {
@@ -2450,7 +2917,8 @@ 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();
@@ -2464,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 { 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]];
 			}
 		}
 	}
@@ -2492,52 +2960,60 @@ 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, 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);
 			}
 		}
 		const fragment = this.getFragment();
-		const { items } = managers.data;
+		const { keys } = managers.data;
 		let count = 0;
 		let offset = 0;
 		for (let index = range.start; index <= range.end + offset; index += 1) {
-			if (visible.has(index)) continue;
-			const item = items[index];
-			if (item instanceof GroupComponent) {
+			if (visible.indiced.has(index)) continue;
+			const key = keys[index];
+			if (isGroupKey(key)) {
+				const group = managers.group.getForKey(key);
+				if (group == null) continue;
 				count += 1;
-				renderGroup(state, item);
-				visible.set(index, item);
-				if (item.element != null) {
-					item.element.style.transform = `translateY(${(index - offset) * options.rowHeight}px)`;
-					fragment.append(item.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(item, true);
+			const row = managers.row.get(key, true);
 			if (row == null) continue;
-			if (managers.group.collapsed.has(item)) {
+			if (managers.group.collapsed.has(key)) {
 				offset += 1;
 				continue;
 			}
 			count += 1;
 			renderRow(state, row);
-			visible.set(index, item);
+			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
@@ -2580,7 +3056,7 @@ var RowManager = class {
 	}
 	update(key) {
 		const row = this.components.get(key);
-		if (row != null) renderRow(this.state, row);
+		if (row?.element != null) renderRow(this.state, row);
 	}
 };
 //#endregion
@@ -2592,13 +3068,13 @@ const preventSelection = toggleStyles(document.body, {
 //#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) {
@@ -2631,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) {
@@ -2651,18 +3127,18 @@ 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 { items } = state.managers.data;
+		const { keys } = state.managers.data;
 		const fromIndex = state.managers.data.getIndex(fromKey);
 		const toIndex = state.managers.data.getIndex(toKey);
 		if (fromIndex === -1 || toIndex === -1) return;
 		const [start, end] = fromIndex < toIndex ? [fromIndex, toIndex] : [toIndex, fromIndex];
 		const selected = [];
 		for (let index = start; index <= end; index += 1) {
-			const item = items[index];
-			if (!(item instanceof GroupComponent)) selected.push(item);
+			const key = keys[index];
+			if (!isGroupKey(key)) selected.push(key);
 		}
 		if (keyed) this.add(selected);
 		else this.set(selected);
@@ -2688,9 +3164,9 @@ var SelectionManager = class {
 	}
 	toggle() {
 		const { items, state } = this;
-		const data = state.managers.data.items;
-		if (items.size === data.length - state.managers.group.items.length) this.clear();
-		else this.set(data.filter((key) => !(key instanceof GroupComponent)));
+		const { keys } = state.managers.data;
+		if (items.size === keys.length - state.managers.group.items.length) this.clear();
+		else this.set(keys.filter((key) => !isGroupKey(key)));
 	}
 	update(removed) {
 		const { state } = this;
@@ -2706,19 +3182,19 @@ var SelectionManager = class {
 			const { key, removed } = items[index];
 			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_TABELA_ROW_SELECTED);
-			else element.classList.add(CSS_TABELA_ROW_SELECTED);
+			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: CSS_TABELA_SELECTION }, {}, {});
+	placeholder ??= createElement("div", { className: CSS_SELECTION });
 	return placeholder;
 }
 function onMouseDown(event) {
 	if (shifted) {
-		const row = findAncestor(event.target, `.${CSS_TABELA_ROW_BODY}`);
+		const row = findAncestor(event.target, `.${CSS_ROW_BODY}`);
 		if (!(row instanceof HTMLElement)) return;
 		startElement = row;
 		startPosition = getPosition(event);
@@ -2746,11 +3222,11 @@ function onMouseUp(event) {
 		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__table");
-		const startTable = findAncestor(startElement, ".tabela__table");
+		const endTable = findAncestor(endElement, tableSelector);
+		const startTable = findAncestor(startElement, tableSelector);
 		if (startTable != null && startTable === endTable) mapped.get(startTable)?.range(startElement, endElement);
 	}
 	endElement = void 0;
@@ -2758,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);
@@ -2766,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;
@@ -2791,14 +3270,14 @@ var StyleManager = class {
 };
 const styling = `/** Table */
 
-:where(.tabela) {
+:where(.${CSS_WRAPPER}) {
 	flex: 1;
 	position: relative;
 	background-color: var(--oui-absolute);
 	border: 1px solid grey;
 }
 
-:where(.tabela__table) {
+:where(.${CSS_TABLE}) {
 	min-height: 24em;
 	display: flex;
 	flex-flow: column nowrap;
@@ -2810,69 +3289,69 @@ const styling = `/** Table */
 
 /** Row group */
 
-:where(.tabela__rowgroup--header),
-:where(.tabela__rowgroup--footer) {
+:where(.${CSS_ROWGROUP_HEADER}),
+:where(.${CSS_ROWGROUP_FOOTER}) {
 	background-color: white;
 	position: sticky;
 	left: 0;
 	z-index: 10;
 }
 
-:where(.tabela__rowgroup--header) {
+:where(.${CSS_ROWGROUP_HEADER}) {
 	top: 0;
 }
 
-:where(.tabela__rowgroup--footer) {
+:where(.${CSS_ROWGROUP_FOOTER}) {
 	bottom: 0;
 }
 
-:where(.tabela__rowgroup--body) {
+:where(.${CSS_ROWGROUP_BODY}) {
 	display: flex;
 	flex-flow: column nowrap;
 	flex: 1;
 }
 
-:where(.tabela__rowgroup--body:focus) {
+:where(.${CSS_ROWGROUP_BODY}:focus) {
 	outline: none;
 }
 
-:where(.tabela:has(.tabela__rowgroup--body:focus-visible)) {
+:where(.${CSS_WRAPPER}:has(.${CSS_ROWGROUP_BODY}:focus-visible)) {
 	outline: 2px solid var(--oui-blue-6);
 	outline-offset: 2px;
 }
 
 /** Row */
 
-:where(.tabela__row) {
+:where(.${CSS_ROW}) {
 	width: 100%;
 	display: flex;
 	flex-flow: row nowrap;
 }
 
-:where(.tabela__row:last-child .tabela__cell) {
+:where(.${CSS_ROW}:last-child .${CSS_CELL}) {
 	border-bottom-width: 0;
 }
 
-:where(.tabela__row--body),
-:where(.tabela__row--group) {
+:where(.${CSS_ROW}--body),
+:where(.${CSS_ROW}--group) {
 	flex: 1;
 	position: absolute;
 }
 
-:where(.tabela__row--selected) {
+:where(.${CSS_ROW_SELECTED}) {
 	background-color: var(--oui-blue-1);
 	color: var(--oui-blue-9);
 }
 
-:where(.tabela:has(.tabela__rowgroup--body:focus-visible) .tabela__row[data-active="true"]) {
+: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(.tabela__cell),
-:where(.tabela__heading) {
+:where(.${CSS_CELL}),
+:where(.${CSS_HEADING}) {
 	padding: 0.5em;
 	border-color: gray;
 	border-style: solid;
@@ -2880,24 +3359,55 @@ const styling = `/** Table */
 	line-height: 1;
 }
 
-:where(.tabela__row .tabela__cell:last-child),
-:where(.tabela__row .tabela__heading:last-child) {
+:where(.${CSS_WRAPPER} .${CSS_CELL}:last-child),
+:where(.${CSS_ROW} .${CSS_HEADING}:last-child) {
 	flex: 1;
 	border-right-width: 0;
 }
 
-:where(.tabela__cell) {
+:where(.${CSS_CELL}) {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
 
-:where(.tabela__cell--footer) {
+: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(.tabela__cell--group) {
+:where(.${CSS_CELL_GROUP}) {
 	padding: 0;
 	display: flex;
 	flex-flow: row nowrap;
@@ -2905,18 +3415,18 @@ const styling = `/** Table */
 	gap: 0.5em;
 }
 
-:where(.tabela__cell--group .tabela__button) {
+:where(.${CSS_CELL_GROUP} .${CSS_BUTTON}) {
 	margin: 0 0 0 .25rem;
 }
 
 /** Misc. */
 
-:where(.tabela__button) {
+:where(.${CSS_BUTTON}) {
 	font-size: .75rem;
 	font-weight: bold;
 }
 
-:where(.tabela__selection) {
+:where(.${CSS_SELECTION}) {
 	background-color: color-mix(in oklch, var(--oui-blue-6), transparent);
 	border: 1px solid var(--oui-blue-6);
 	border-radius: .25rem;
@@ -2931,7 +3441,6 @@ var Tabela = class {
 	#components;
 	#element;
 	#id = getId();
-	#table;
 	#key;
 	#managers = {
 		column: void 0,
@@ -2946,37 +3455,37 @@ var Tabela = class {
 		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(CSS_TABELA);
+		element.classList.add(CSS_WRAPPER);
 		this.#table = createElement("div", {
-			className: CSS_TABELA_TABLE,
-			role: "table"
-		}, { "aria-label": options.label });
+			className: CSS_TABLE,
+			role: ROLE_TABLE
+		}, { [ARIA_LABEL]: options.label });
 		this.#key = options.key;
-		this.#components = {
-			body: new BodyComponent(),
-			footer: new FooterComponent(),
-			header: new HeaderComponent()
-		};
+		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.#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);
@@ -2992,6 +3501,7 @@ var Tabela = class {
 		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;
@@ -3017,10 +3527,9 @@ var Tabela = class {
 		managers.sort.destroy();
 		element.innerHTML = "";
 		table.innerHTML = "";
-		table.role = "";
-		element.classList.remove(CSS_TABELA);
-		table.removeAttribute("aria-label");
-		table.removeAttribute("role");
+		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;