@oscarpalmer/tabela 0.7.0 → 0.9.0

package/dist/tabela.full.js

@@ -3,14 +3,25 @@
 * @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;
 }
+/**
+* Is the value a plain object?
+* @param value Value to check
+* @returns `true` if the value is a plain object, otherwise `false`
+*/
+function isPlainObject$1(value) {
+	if (value === null || typeof value !== "object") return false;
+	if (Symbol.toStringTag in value || Symbol.iterator in value) return false;
+	const prototype = Object.getPrototypeOf(value);
+	return prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null;
+}
 function getBoolean(value, defaultValue) {
 	return typeof value === "boolean" ? value : defaultValue ?? false;
 }
@@ -43,10 +54,80 @@ new Set([
 * @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));
+	return value == null || EXPRESSION_WHITESPACE$1.test(getString$1(value));
+}
+var EXPRESSION_WHITESPACE$1 = /^\s*$/;
+function badAttributeHandler(name, value) {
+	if (typeof name !== "string" || name.trim().length === 0 || typeof value !== "string") return true;
+	if (EXPRESSION_CLOBBERED_NAME.test(name) && (value in document || value in formElement) || EXPRESSION_EVENT_NAME.test(name)) return true;
+	if (EXPRESSION_SKIP_NAME.test(name) || EXPRESSION_URI_VALUE.test(value) || isValidSourceAttribute(name, value)) return false;
+	return EXPRESSION_DATA_OR_SCRIPT.test(value);
+}
+function booleanAttributeHandler(name, value) {
+	if (typeof name !== "string" || name.trim().length === 0 || typeof value !== "string") return true;
+	const normalizedName = name.toLowerCase();
+	if (!booleanAttributesSet.has(normalizedName)) return false;
+	const normalized = value.toLowerCase();
+	return !(normalized.length === 0 || normalized === normalizedName);
+}
+function decodeAttribute(value) {
+	textArea ??= document.createElement("textarea");
+	textArea.innerHTML = value;
+	return decodeURIComponent(textArea.value);
+}
+function handleAttribute(callback, decode, first, second) {
+	let name;
+	let value;
+	if (isAttribute(first)) {
+		name = first.name;
+		value = String(first.value);
+	} else if (typeof first === "string" && typeof second === "string") {
+		name = first;
+		value = second;
+	}
+	if (decode && value != null) value = decodeAttribute(value);
+	return callback(name, value?.replace(EXPRESSION_WHITESPACE, ""));
+}
+function isAttribute(value) {
+	return value instanceof Attr || isPlainObject$1(value) && typeof value.name === "string" && "value" in value;
+}
+function _isBadAttribute(first, second, decode) {
+	return handleAttribute(badAttributeHandler, decode, first, second);
+}
+function _isEmptyNonBooleanAttribute(first, second, decode) {
+	return handleAttribute((name, value) => name != null && value != null && !booleanAttributesSet.has(name) && value.trim().length === 0, decode, first, second);
+}
+function _isInvalidBooleanAttribute(first, second, decode) {
+	return handleAttribute(booleanAttributeHandler, decode, first, second);
+}
+function isValidSourceAttribute(name, value) {
+	return EXPRESSION_SOURCE_NAME.test(name) && EXPRESSION_SOURCE_VALUE.test(value);
+}
+function updateAttribute(element, name, value, dispatch) {
+	const normalizedName = name.toLowerCase();
+	const isBoolean = booleanAttributesSet.has(normalizedName);
+	const next = isBoolean ? value === true || typeof value === "string" && (value === "" || value.toLowerCase() === normalizedName) : value == null ? "" : value;
+	if (name in element) updateProperty(element, normalizedName, next, dispatch);
+	updateElementValue(element, name, isBoolean ? next ? "" : null : value, element.setAttribute, element.removeAttribute, isBoolean, false);
+}
+function updateProperty(element, name, value, dispatch) {
+	if (Object.is(element[name], value)) return;
+	element[name] = value;
+	const event = dispatch !== false && elementEvents[element.tagName]?.[name];
+	if (typeof event === "string") element.dispatchEvent(new Event(event, { bubbles: true }));
 }
-var EXPRESSION_WHITESPACE = /^\s*$/;
-Object.freeze([
+var EXPRESSION_CLOBBERED_NAME = /^(id|name)$/i;
+var EXPRESSION_DATA_OR_SCRIPT = /^(?:data|\w+script):/i;
+var EXPRESSION_EVENT_NAME = /^on/i;
+var EXPRESSION_SKIP_NAME = /^(aria-[-\w]+|data-[-\w.\u00B7-\uFFFF]+)$/i;
+var EXPRESSION_SOURCE_NAME = /^src$/i;
+var EXPRESSION_SOURCE_VALUE = /^data:/i;
+var EXPRESSION_URI_VALUE = /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp|matrix):|[^a-z]|[a-z+.-]+(?:[^a-z+.\-:]|$))/i;
+var EXPRESSION_WHITESPACE = /[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g;
+/**
+* List of boolean attributes
+*/
+const booleanAttributes = Object.freeze([
 	"async",
 	"autofocus",
 	"autoplay",
@@ -72,7 +153,23 @@ Object.freeze([
 	"reversed",
 	"selected"
 ]);
-document.createElement("form");
+var booleanAttributesSet = new Set(booleanAttributes);
+var elementEvents = {
+	DETAILS: { open: "toggle" },
+	INPUT: {
+		checked: "change",
+		value: "input"
+	},
+	SELECT: { value: "change" },
+	TEXTAREA: { value: "input" }
+};
+var formElement = document.createElement("form");
+var textArea;
+function setElementValue(element, first, second, third, callback) {
+	if (!isHTMLOrSVGElement(element)) return;
+	if (typeof first === "string") setElementValues(element, first, second, third, callback);
+	else if (isAttribute(first)) setElementValues(element, first.name, first.value, third, callback);
+}
 function setElementValues(element, first, second, third, callback) {
 	if (!isHTMLOrSVGElement(element)) return;
 	if (typeof first === "string") {
@@ -110,18 +207,25 @@ function updateStyleProperty(element, key, value) {
 		this.style[property] = "";
 	}, false, false);
 }
+function setAttribute(element, first, second, third) {
+	setElementValue(element, first, second, third, updateAttribute);
+}
+function setAttributes(element, attributes, dispatch) {
+	setElementValues(element, attributes, null, dispatch, updateAttribute);
+}
 function createCell(width, body) {
 	const cell = createElement("div", {
 		className: "tabela__cell",
 		role: "cell"
-	}, { width: `${width}px` });
+	}, {}, { width: `${width}px` });
 	if (body ?? true) cell.classList.add("tabela__cell-body");
 	return cell;
 }
-function createElement(tagName, properties, style) {
+function createElement(tagName, properties, attributes, style) {
 	const element = document.createElement(tagName);
 	const keys = Object.keys(properties);
 	for (const key of keys) element[key] = properties[key];
+	setAttributes(element, attributes);
 	setStyles(element, style);
 	return element;
 }
@@ -129,7 +233,7 @@ function createRowGroup(withRow) {
 	const group = createElement("div", {
 		className: "tabela__rowgroup",
 		role: "rowgroup"
-	}, {});
+	}, {}, {});
 	if (!(withRow ?? true)) return group;
 	const row = createRow(false);
 	group.append(row);
@@ -142,7 +246,7 @@ function createRow(withStyle) {
 	const row = createElement("div", {
 		className: "tabela__row",
 		role: "row"
-	}, {});
+	}, {}, {});
 	if (withStyle ?? true) setStyles(row, {
 		inset: "0 auto auto 0",
 		position: "absolute"
@@ -150,7 +254,7 @@ function createRow(withStyle) {
 	return row;
 }
 function createFaker() {
-	return createElement("div", {}, {
+	return createElement("div", {}, {}, {
 		height: "0",
 		inset: "0 auto auto 0",
 		opacity: "0",
@@ -229,18 +333,11 @@ var HeaderComponent = class {
 	}
 	update(columns) {
 		this.elements.row.innerHTML = "";
-		this.elements.row.append(...columns.map((column) => column.element));
+		this.elements.row.append(...columns.map((column) => column.elements.wrapper));
 	}
 };
-function createHeading(title, width) {
-	return createElement("div", {
-		className: "tabela__heading",
-		role: "columnheader",
-		textContent: title
-	}, { width: `${width}px` });
-}
 var ColumnComponent = class {
-	element;
+	elements;
 	options;
 	constructor(options) {
 		const width = Number.parseInt(getComputedStyle(document.body).fontSize, 10) * (options.width ?? options.title.length * 1.5);
@@ -248,9 +345,36 @@ var ColumnComponent = class {
 			...options,
 			width
 		};
-		this.element = createHeading(options.title, width);
+		this.elements = createHeading(options.field, options.title, width);
+	}
+	destroy() {
+		this.elements.content.remove();
+		this.elements.wrapper.remove();
+		this.elements.sorter.remove();
+		this.elements = void 0;
+		this.options = void 0;
 	}
 };
+function createHeading(field, title, width) {
+	const wrapper = createElement("div", {
+		className: "tabela__heading",
+		role: "columnheader"
+	}, {
+		"data-event": "heading",
+		"data-field": field
+	}, { width: `${width}px` });
+	const content = createElement("div", {
+		className: "tabela__heading__content",
+		textContent: title
+	}, {}, {});
+	const sorter = createElement("div", { className: "tabela__heading__sorter" }, {}, {});
+	wrapper.append(content, sorter);
+	return {
+		content,
+		sorter,
+		wrapper
+	};
+}
 var ColumnManager = class {
 	items = [];
 	constructor(managers, components, columns) {
@@ -259,6 +383,8 @@ var ColumnManager = class {
 		this.set(columns);
 	}
 	destroy() {
+		const { length } = this.items;
+		for (let index = 0; index < length; index += 1) this.items[index].destroy();
 		this.items.length = 0;
 	}
 	remove(value) {
@@ -268,7 +394,10 @@ var ColumnManager = class {
 		if (length === 0) return;
 		for (let fieldIndex = 0; fieldIndex < length; fieldIndex += 1) {
 			const itemIndex = items.findIndex((component) => component.options.field === fields[fieldIndex]);
-			if (itemIndex > -1) items.splice(itemIndex, 1);
+			if (itemIndex > -1) {
+				items[itemIndex].destroy();
+				items.splice(itemIndex, 1);
+			}
 		}
 		components.header.update(items);
 		components.footer.update(items);
@@ -297,6 +426,408 @@ function getArrayCallbacks(bool, key, value) {
 		value: getArrayCallback(value)
 	};
 }
+function findValues(type, array, parameters, mapper) {
+	const result = {
+		matched: [],
+		notMatched: []
+	};
+	if (!Array.isArray(array) || array.length === 0) return result;
+	const { length } = array;
+	const { bool, key, value } = getParameters(parameters);
+	const callbacks = getArrayCallbacks(bool, key);
+	if (type === "unique" && callbacks?.keyed == null && length >= UNIQUE_THRESHOLD) {
+		result.matched = [...new Set(array)];
+		return result;
+	}
+	const mapCallback = typeof mapper === "function" ? mapper : void 0;
+	if (callbacks?.bool != null || type === "all" && key == null) {
+		const callback = callbacks?.bool ?? ((item) => Object.is(item, value));
+		for (let index = 0; index < length; index += 1) {
+			const item = array[index];
+			if (callback(item, index, array)) result.matched.push(mapCallback?.(item, index, array) ?? item);
+			else result.notMatched.push(item);
+		}
+		return result;
+	}
+	const keys = /* @__PURE__ */ new Set();
+	for (let index = 0; index < length; index += 1) {
+		const item = array[index];
+		const keyed = callbacks?.keyed?.(item, index, array) ?? item;
+		if (type === "all" && Object.is(keyed, value) || type === "unique" && !keys.has(keyed)) {
+			keys.add(keyed);
+			result.matched.push(mapCallback?.(item, index, array) ?? item);
+		} else result.notMatched.push(item);
+	}
+	return result;
+}
+function getParameters(original) {
+	const { length } = original;
+	return {
+		bool: length === 1 && typeof original[0] === "function" ? original[0] : void 0,
+		key: length === 2 ? original[0] : void 0,
+		value: length === 1 && typeof original[0] !== "function" ? original[0] : original[1]
+	};
+}
+var UNIQUE_THRESHOLD = 100;
+function filter(array, ...parameters) {
+	return findValues("all", array, parameters).matched;
+}
+filter.remove = removeFiltered;
+function removeFiltered(array, ...parameters) {
+	return findValues("all", array, parameters).notMatched;
+}
+/**
+* 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 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);
+}
+var TYPED_ARRAYS;
+/**
+* Chunk an array into smaller arrays
+* @param array Array to chunk
+* @param size Size of each chunk _(minimum is `1`, maximum is `5000`; defaults to `5000`)_
+* @returns Array of arrays
+*/
+function chunk(array, size) {
+	if (!Array.isArray(array)) return [];
+	if (array.length === 0) return [];
+	const { length } = array;
+	const actualSize = typeof size === "number" && size > 0 && size <= MAX_SIZE ? size : MAX_SIZE;
+	if (length <= actualSize) return [array];
+	const chunks = [];
+	let index = 0;
+	while (index < length) {
+		chunks.push(array.slice(index, index + actualSize));
+		index += actualSize;
+	}
+	return chunks;
+}
+var MAX_SIZE = 5e3;
+function compact(array, strict) {
+	if (!Array.isArray(array)) return [];
+	if (strict === true) return array.filter(Boolean);
+	const { length } = array;
+	const compacted = [];
+	for (let index = 0; index < length; index += 1) {
+		const item = array[index];
+		if (item != null) compacted.push(item);
+	}
+	return compacted;
+}
+function insertChunkedValues(type, array, items, start, deleteCount) {
+	const actualDeleteCount = deleteCount < 0 ? 0 : deleteCount;
+	const actualStart = Math.min(Math.max(0, start), array.length);
+	const chunked = chunk(items);
+	const lastIndex = chunked.length - 1;
+	let index = Number(chunked.length);
+	let returned;
+	while (index > 0) {
+		index -= 1;
+		const spliced = array.splice(actualStart, index === lastIndex ? actualDeleteCount : 0, ...chunked[index]);
+		if (returned == null) returned = spliced;
+		else returned.push(...spliced);
+	}
+	if (type === "insert") return array;
+	return type === "splice" ? returned : array.length;
+}
+function insertValues(type, array, items, start, deleteCount) {
+	const spliceArray = type === "insert" || type === "splice";
+	if (!Array.isArray(array) || typeof start !== "number" || !Array.isArray(items) || items.length === 0) return spliceArray ? [] : 0;
+	return insertChunkedValues(type, array, items, start, spliceArray ? deleteCount : 0);
+}
+/**
+* Push items into an array _(at the end)_
+* @param array Original array
+* @param pushed Pushed items
+* @returns New length of the array
+*/
+function push(array, pushed) {
+	return insertValues("push", array, pushed, array.length, 0);
+}
+function aggregate(type, array, key) {
+	const length = Array.isArray(array) ? array.length : 0;
+	if (length === 0) return {
+		count: 0,
+		value: NaN
+	};
+	const aggregator = aggregators[type];
+	const callback = getAggregateCallback(key);
+	let counted = 0;
+	let aggregated = NaN;
+	let notNumber = true;
+	for (let index = 0; index < length; index += 1) {
+		const item = array[index];
+		const value = callback == null ? item : callback(item, index, array);
+		if (!isNumber(value)) continue;
+		aggregated = aggregator(aggregated, value, notNumber);
+		counted += 1;
+		notNumber = false;
+	}
+	return {
+		count: counted,
+		value: aggregated
+	};
+}
+function getAggregateCallback(key) {
+	if (key == null) return;
+	return typeof key === "function" ? key : (item) => item[key];
+}
+function max(array, key) {
+	return getAggregated("max", array, key);
+}
+function calculateSum(current, value, notNumber) {
+	return notNumber ? value : current + value;
+}
+function getAggregated(type, array, key) {
+	const aggregated = aggregate(type, array, key);
+	return aggregated.count > 0 ? aggregated.value : NaN;
+}
+var aggregators = {
+	average: calculateSum,
+	max: (current, value, notNumber) => notNumber || value > current ? value : current,
+	min: (current, value, notNumber) => notNumber || value < current ? value : current,
+	sum: calculateSum
+};
+/**
+* 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;
+}
+/**
+* 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) ?? [] : [];
+}
+var EXPRESSION_WORDS = /[^\x00-\x2f\x3a-\x40\x5b-\x60\x7b-\x7f]+/g;
+function getCompareHandlers(owner, options) {
+	const { get, register, unregister } = getHandlers(owner, options);
+	return {
+		register,
+		unregister,
+		handle(first, second, ...parameters) {
+			const handler = get(first, second);
+			if (handler == null) return options.callback(first, second, ...parameters);
+			return typeof handler === "function" ? handler(first, second) : first[handler](second);
+		}
+	};
+}
+function getHandlers(owner, options) {
+	const handlers = /* @__PURE__ */ new WeakMap();
+	return {
+		get(first, second) {
+			if (isConstructable(first) && isConstructable(second) && first.constructor === second.constructor) return handlers.get(first.constructor);
+		},
+		register(constructor, handler) {
+			if (!isConstructor(constructor) || handler === owner) return;
+			let actual = handler ?? options.method;
+			if (typeof actual !== "function" && typeof actual !== "string") return;
+			if (typeof actual === "string") actual = typeof constructor.prototype[actual] === "function" ? actual : void 0;
+			if (actual != null) handlers.set(constructor, actual);
+		},
+		unregister(constructor) {
+			handlers.delete(constructor);
+		}
+	};
+}
+function isConstructable(value) {
+	return typeof value === "object" && value !== null;
+}
+/**
+* Compare two values _(for sorting purposes)_
+* @param first First value
+* @param second Second value
+* @returns `0` if equal; `-1` first comes before second; `1` first comes after second
+*/
+function compare(first, second) {
+	if (Object.is(first, second)) return 0;
+	if (first == null) return -1;
+	if (second == null) return 1;
+	let comparison = compareValue(first, second, false);
+	if (comparison != null) return comparison;
+	const firstParts = getComparisonParts(first);
+	const secondParts = getComparisonParts(second);
+	const length = max([firstParts.length, secondParts.length]);
+	const lastIndex = length - 1;
+	for (let index = 0; index < length; index += 1) {
+		const firstPart = firstParts[index];
+		const secondPart = secondParts[index];
+		comparison = compareValue(firstPart, secondPart, true);
+		if (comparison === 0) {
+			if (index === lastIndex) break;
+			continue;
+		}
+		return comparison;
+	}
+	return 0;
+}
+compare.handlers = getCompareHandlers(compare, {
+	callback: (first, second, compareStrings) => {
+		if (compareStrings) return getString(first).localeCompare(getString(second));
+	},
+	method: "compare"
+});
+compare.register = registerComparator;
+compare.unregister = unregisterComparator;
+/**
+* Register a custom comparison handler for a class
+* @param constructor Class constructor
+* @param handler Method name or comparison function _(defaults to `compare`)_
+*/
+function registerComparator(constructor, handler) {
+	compare.handlers.register(constructor, handler);
+}
+/**
+* Unregister a custom comparison handler for a class
+* @param constructor Class constructor
+*/
+function unregisterComparator(constructor) {
+	compare.handlers.unregister(constructor);
+}
+function compareNumbers(first, second) {
+	const firstNumber = Number(first);
+	const secondNumber = Number(second);
+	if (firstNumber === secondNumber) return 0;
+	return firstNumber > secondNumber ? 1 : -1;
+}
+function compareSymbols(first, second) {
+	return getString(first.description ?? first).localeCompare(getString(second.description ?? second));
+}
+function compareValue(first, second, compareStrings) {
+	const firstType = typeof first;
+	if (firstType === typeof second && firstType in comparators$1) return comparators$1[firstType](first, second);
+	if (first instanceof Date && second instanceof Date) return compareNumbers(first.getTime(), second.getTime());
+	return compare.handlers.handle(first, second, compareStrings);
+}
+function getComparisonParts(value) {
+	if (Array.isArray(value)) return value;
+	return typeof value === "object" ? [value] : words(getString(value));
+}
+var comparators$1 = {
+	bigint: compareNumbers,
+	boolean: compareNumbers,
+	number: compareNumbers,
+	symbol: compareSymbols
+};
+function getCallback(value, key, forObject) {
+	if (key != null) return;
+	if (forObject && typeof value.value === "function") return value.value;
+	return typeof value === "function" ? value : void 0;
+}
+function getKey(value, forObject) {
+	if (forObject && typeof value.key === "string") return value.key;
+	return typeof value === "string" ? value : void 0;
+}
+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 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(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;
+	}
+}
+function sort(array, first, second) {
+	if (!Array.isArray(array)) return [];
+	if (array.length < 2) return array;
+	const modifier = (first === true || second === true ? "desc" : "asc") === "asc" ? 1 : -1;
+	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 === 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;
+		});
+	}
+	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;
+		}
+		return 0;
+	});
+}
 function getMapValues(array, first, second, arrays) {
 	if (!Array.isArray(array)) return /* @__PURE__ */ new Map();
 	const { length } = array;
@@ -321,17 +852,6 @@ toMap.arrays = toMapArrays;
 function toMapArrays(array, first, second) {
 	return getMapValues(array, first, second, true);
 }
-/**
-* 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;
-}
 var DataManager = class {
 	handlers = Object.freeze({
 		add: (data) => void this.add(data, true),
@@ -358,10 +878,9 @@ var DataManager = class {
 	}
 	async add(data, render) {
 		const { field, values } = this;
-		values.objects.array.push(...data);
+		push(values.objects.array, data);
 		values.objects.mapped = toMap(values.objects.array, field);
-		values.keys.original = [...values.objects.mapped.keys()];
-		if (render) this.managers.virtualization.update(true);
+		if (render) this.render();
 	}
 	clear() {
 		if (this.values.objects.array.length > 0) this.set([]);
@@ -372,6 +891,7 @@ var DataManager = class {
 		values.keys.active = void 0;
 		values.keys.original.length = 0;
 		values.objects.array.length = 0;
+		this.handlers = void 0;
 	}
 	get(active) {
 		const { values } = this;
@@ -390,16 +910,20 @@ var DataManager = class {
 			values.keys.original.splice(values.keys.original.indexOf(key), 1);
 			managers.row.remove(key);
 		}
-		if (render) this.managers.virtualization.update(true);
+		if (render) this.render();
+	}
+	render() {
+		const { field, managers, values } = this;
+		values.keys.original = sort(values.objects.array.map((item) => item[field]));
+		if (Object.keys(managers.filter.items).length > 0) managers.filter.filter();
+		else if (managers.sort.items.length > 0) managers.sort.sort();
+		else managers.virtualization.update(true);
 	}
 	set(data) {
 		const { field, values } = this;
-		const mapped = toMap(data, field);
-		values.keys.active = void 0;
-		values.keys.original = [...mapped.keys()];
-		values.objects.mapped = mapped;
+		values.objects.mapped = toMap(data, field);
 		values.objects.array = data;
-		this.managers.virtualization.update(true);
+		this.render();
 	}
 	async synchronize(data, remove) {
 		const { field, values } = this;
@@ -421,7 +945,7 @@ var DataManager = class {
 		}
 		await this.update(updated);
 		if (add.length > 0) await this.add(add, false);
-		if (add.length > 0 || (remove ?? false)) this.managers.virtualization.update(true);
+		if (add.length > 0 || (remove ?? false)) this.render();
 	}
 	async update(data) {
 		const { field, managers, values } = this;
@@ -440,69 +964,6 @@ var DataManager = class {
 		}
 	}
 };
-function removeRow(pool, row) {
-	if (row.element != null) {
-		row.element.innerHTML = "";
-		pool.rows.push(row.element);
-		row.element.remove();
-		row.element = void 0;
-	}
-	row.cells = {};
-}
-function renderRow(managers, row) {
-	const element = row.element ?? managers.virtualization.pool.rows.shift() ?? createRow();
-	row.element = element;
-	element.dataset.key = String(row.key);
-	element.innerHTML = "";
-	const columns = managers.column.items;
-	const { length } = columns;
-	const data = managers.data.values.objects.mapped.get(row.key);
-	if (data == null) return;
-	for (let index = 0; index < length; index += 1) {
-		const { options } = columns[index];
-		managers.virtualization.pool.cells[options.field] ??= [];
-		const cell = managers.virtualization.pool.cells[columns[index].options.field].shift() ?? createCell(options.width);
-		cell.textContent = String(data[options.field]);
-		row.cells[options.field] = cell;
-		element.append(cell);
-	}
-}
-var RowComponent = class {
-	cells = {};
-	element;
-	constructor(key) {
-		this.key = key;
-	}
-};
-var RowManager = class {
-	components = /* @__PURE__ */ new Map();
-	height;
-	constructor(managers, rowHeight) {
-		this.managers = managers;
-		this.height = rowHeight;
-	}
-	destroy() {
-		this.components.clear();
-	}
-	get(key) {
-		let row = this.components.get(key);
-		if (row == null) {
-			row = new RowComponent(key);
-			this.components.set(key, row);
-		}
-		return row;
-	}
-	has(key) {
-		return this.components.has(key);
-	}
-	remove(key) {
-		this.components.delete(key);
-	}
-	update(key) {
-		const row = this.components.get(key);
-		if (row != null) renderRow(this.managers, row);
-	}
-};
 function addDelegatedHandler(doc, type, name, passive) {
 	if (DELEGATED.has(name)) return;
 	DELEGATED.add(name);
@@ -607,6 +1068,863 @@ function on(target, type, listener, options) {
 		target.removeEventListener(type, listener, extended);
 	};
 }
+function findAncestor(origin, selector) {
+	const element = getElement(origin);
+	if (element == null || selector == null) return null;
+	if (typeof selector === "string") {
+		if (Element.prototype.matches.call(element, selector)) return element;
+		return Element.prototype.closest.call(element, selector);
+	}
+	if (typeof selector !== "function") return null;
+	if (selector(element)) return element;
+	let parent = element.parentElement;
+	while (parent != null && !selector(parent)) {
+		if (parent === document.body) return null;
+		parent = parent.parentElement;
+	}
+	return parent;
+}
+function getElement(origin) {
+	if (origin instanceof Element) return origin;
+	return origin instanceof Event && origin.target instanceof Element ? origin.target : void 0;
+}
+function isInert(item) {
+	return (item.element.inert ?? false) || EXPRESSION_TRUEISH.test(item.element.getAttribute(ATTRIBUTE_INERT)) || item.element.parentElement != null && isInert({
+		element: item.element.parentElement,
+		tabIndex: TABINDEX_DEFAULT
+	});
+}
+var ATTRIBUTE_INERT = "inert";
+var EXPRESSION_TRUEISH = /^(|true)$/i;
+[
+	"[contenteditable]:not([contenteditable=\"false\"])",
+	"[tabindex]:not(slot)",
+	"a[href]",
+	"audio[controls]",
+	"button",
+	"details",
+	"details > summary:first-of-type",
+	"input",
+	"select",
+	"textarea",
+	"video[controls]"
+].map((selector) => `${selector}:not([inert])`).join(",");
+var TABINDEX_DEFAULT = -1;
+function handleElement(element, depth) {
+	if (depth === 0) {
+		const removable = element.querySelectorAll(REMOVE_SELECTOR);
+		for (const item of removable) item.remove();
+	}
+	sanitizeAttributes(element, [...element.attributes]);
+}
+/**
+* Is the element clobbered?
+*
+* Thanks, DOMPurify _(https://github.com/cure53/DOMPurify)_
+*/
+function isClobbered(value) {
+	return value instanceof HTMLFormElement && (typeof value.nodeName !== "string" || typeof value.textContent !== "string" || typeof value.removeChild !== "function" || !(value.attributes instanceof NamedNodeMap) || typeof value.removeAttribute !== "function" || typeof value.setAttribute !== "function" || typeof value.namespaceURI !== "string" || typeof value.insertBefore !== "function" || typeof value.hasChildNodes !== "function");
+}
+function removeNode(node) {
+	if (typeof node.remove === "function") node.remove();
+}
+function sanitizeAttributes(element, attributes) {
+	const { length } = attributes;
+	for (let index = 0; index < length; index += 1) {
+		const { name, value } = attributes[index];
+		if (_isBadAttribute(name, value, false) || _isEmptyNonBooleanAttribute(name, value, false)) element.removeAttribute(name);
+		else if (_isInvalidBooleanAttribute(name, value, false)) setAttribute(element, name, true);
+	}
+}
+function sanitizeNodes(nodes, depth) {
+	const actual = nodes.filter((node) => node instanceof Node);
+	let { length } = nodes;
+	for (let index = 0; index < length; index += 1) {
+		const node = actual[index];
+		let remove = isClobbered(node);
+		if (!remove) switch (node.nodeType) {
+			case Node.ELEMENT_NODE:
+				handleElement(node, depth);
+				break;
+			case Node.COMMENT_NODE:
+				remove = COMMENT_HARMFUL.test(node.data);
+				break;
+			case Node.DOCUMENT_TYPE_NODE:
+			case Node.PROCESSING_INSTRUCTION_NODE:
+				remove = true;
+				break;
+		}
+		if (remove) {
+			removeNode(node);
+			actual.splice(index, 1);
+			index -= 1;
+			length -= 1;
+			continue;
+		}
+		if (node.hasChildNodes()) sanitizeNodes([...node.childNodes], depth + 1);
+	}
+	return nodes;
+}
+var COMMENT_HARMFUL = /<[/\w]/g;
+var REMOVE_SELECTOR = "script, toretto-temporary";
+function createHtml(value) {
+	const parsed = getParser().parseFromString(getHtml(value), PARSE_TYPE_HTML);
+	parsed.body.normalize();
+	sanitizeNodes([parsed.body], 0);
+	return parsed.body.innerHTML;
+}
+function createTemplate(value, options) {
+	const template = document.createElement(TEMPLATE_TAG);
+	template.innerHTML = createHtml(value);
+	if (typeof value === "string" && options.cache) templates[value] = template;
+	return template;
+}
+function getHtml(value) {
+	return `${TEMPORARY_ELEMENT}${typeof value === "string" ? value : value.innerHTML}${TEMPORARY_ELEMENT}`;
+}
+function getNodes(value, options) {
+	if (typeof value !== "string" && !(value instanceof HTMLTemplateElement)) return [];
+	const template = getTemplate(value, options);
+	return template == null ? [] : [...template.content.cloneNode(true).childNodes];
+}
+function getOptions(input) {
+	const options = isPlainObject$1(input) ? input : {};
+	options.cache = typeof options.cache === "boolean" ? options.cache : true;
+	return options;
+}
+function getParser() {
+	parser ??= new DOMParser();
+	return parser;
+}
+function getTemplate(value, options) {
+	if (value instanceof HTMLTemplateElement) return createTemplate(value, options);
+	if (value.trim().length === 0) return;
+	let template = templates[value];
+	if (template != null) return template;
+	const element = EXPRESSION_ID.test(value) ? document.querySelector(`#${value}`) : null;
+	return createTemplate(element instanceof HTMLTemplateElement ? element : value, options);
+}
+var html = ((value, options) => {
+	return getNodes(value, getOptions(options));
+});
+html.clear = () => {
+	templates = {};
+};
+html.remove = (template) => {
+	if (typeof template !== "string" || templates[template] == null) return;
+	const keys = Object.keys(templates);
+	const { length } = keys;
+	const updated = {};
+	for (let index = 0; index < length; index += 1) {
+		const key = keys[index];
+		if (key !== template) updated[key] = templates[key];
+	}
+	templates = updated;
+};
+var EXPRESSION_ID = /^[a-z][\w-]*$/i;
+var PARSE_TYPE_HTML = "text/html";
+var TEMPLATE_TAG = "template";
+var TEMPORARY_ELEMENT = "<toretto-temporary></toretto-temporary>";
+var parser;
+var templates = {};
+function getSupport() {
+	if (window == null || navigator == null) return false;
+	if ("matchMedia" in window) {
+		const media = matchMedia?.("(pointer: coarse)");
+		if (typeof media?.matches === "boolean" && media.matches) return true;
+	}
+	if ("ontouchstart" in window) return true;
+	if (typeof navigator.maxTouchPoints === "number" && navigator.maxTouchPoints > 0) return true;
+	if (typeof navigator.msMaxTouchPoints === "number" && navigator.msMaxTouchPoints > 0) return true;
+	return false;
+}
+(() => {
+	let support = getSupport();
+	const instance = Object.create({
+		get() {
+			return support;
+		},
+		update() {
+			support = getSupport();
+			return support;
+		}
+	});
+	Object.defineProperty(instance, "value", { get() {
+		return support;
+	} });
+	return instance;
+})();
+var EventManager = class {
+	listener;
+	constructor(managers, element) {
+		this.managers = managers;
+		this.listener = on(element, "click", (event) => {
+			this.onClick(event);
+		}, { passive: false });
+	}
+	destroy() {
+		this.listener();
+	}
+	onClick(event) {
+		const target = findAncestor(event, "[data-event]");
+		if (!(target instanceof HTMLElement)) return;
+		switch (target?.getAttribute("data-event")) {
+			case "heading":
+				this.onSort(event, target);
+				break;
+		}
+	}
+	onSort(event, target) {
+		const { managers } = this;
+		const direction = target.getAttribute("data-sort-direction");
+		const field = target.getAttribute("data-field");
+		if (field != null) managers.sort.toggle(event, field, direction);
+	}
+};
+/**
+* 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, ""));
+}
+var EXPRESSION_BINARY = /^0b[01]+$/i;
+var EXPRESSION_HEX = /^0x[0-9a-f]+$/i;
+var EXPRESSION_OCTAL = /^0o[0-7]+$/i;
+var EXPRESSION_UNDERSCORE = /_/g;
+var EXPRESSION_ZEROISH = /^\s*0+\s*$/;
+var OCTAL_VALUE = 8;
+function getSizedMaximum(first, second) {
+	let actual;
+	if (typeof first === "number") actual = first;
+	else actual = typeof second === "number" ? second : MAXIMUM_DEFAULT;
+	return clamp(actual, 1, MAXIMUM_ABSOLUTE);
+}
+var MAXIMUM_ABSOLUTE = 16777216;
+var MAXIMUM_DEFAULT = 1048576;
+/**
+* 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);
+	}
+};
+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), "_"));
+			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));
+}
+var DEFAULT_CACHE_SIZE = 1024;
+/**
+* Check if a string ends with a specified substring
+* @param haystack String to look in
+* @param needle String to look for
+* @param ignoreCase Ignore case when matching? _(defaults to `false`)_
+* @returns `true` if the string ends with the given substring, otherwise `false`
+*/
+function endsWith(haystack, needle, ignoreCase) {
+	return match("endsWith", haystack, needle, ignoreCase === true);
+}
+/**
+* Check if a string includes a specified substring
+* @param haystack String to look in
+* @param needle String to look for
+* @param ignoreCase Ignore case when matching? _(defaults to `false`)_
+* @returns `true` if the string includes the given substring, otherwise `false`
+*/
+function includes(haystack, needle, ignoreCase) {
+	return match("includes", haystack, needle, ignoreCase === true);
+}
+function match(type, haystack, needle, ignoreCase) {
+	if (typeof haystack !== "string" || typeof needle !== "string") return false;
+	matchMemoizers[type] ??= memoize(matchCallback.bind(type));
+	return matchMemoizers[type].run(haystack, needle, ignoreCase);
+}
+function matchCallback(haystack, needle, ignoreCase) {
+	return (ignoreCase ? haystack.toLocaleLowerCase() : haystack)[this](ignoreCase ? needle.toLocaleLowerCase() : needle);
+}
+/**
+* Check if a string starts with a specified substring
+* @param haystack String to look in
+* @param needle String to look for
+* @param ignoreCase Ignore case when matching? _(defaults to `false`)_
+* @returns `true` if the string starts with the given substring, otherwise `false`
+*/
+function startsWith(haystack, needle, ignoreCase) {
+	return match("startsWith", haystack, needle, ignoreCase === true);
+}
+var matchMemoizers = {};
+function equal(first, second, options) {
+	return equalValue(first, second, getEqualOptions(options));
+}
+equal.handlers = getCompareHandlers(equal, { callback: Object.is });
+equal.initialize = initializeEqualizer;
+equal.register = registerEqualizer;
+equal.unregister = unregisterEqualizer;
+function equalArray(first, second, options) {
+	const { length } = first;
+	if (length !== second.length) return false;
+	let offset = 0;
+	if (length >= ARRAY_THRESHOLD) {
+		offset = Math.round(length / ARRAY_PEEK_PERCENTAGE);
+		offset = offset > ARRAY_THRESHOLD ? ARRAY_THRESHOLD : offset;
+		for (let index = 0; index < offset; index += 1) if (!(equalValue(first[index], second[index], options) && equalValue(first[length - index - 1], second[length - index - 1], options))) return false;
+	}
+	const firstChunks = chunk(first.slice(offset, length - offset), ARRAY_THRESHOLD);
+	const secondChunks = chunk(second.slice(offset, length - offset), ARRAY_THRESHOLD);
+	const chunksLength = firstChunks.length;
+	for (let chunkIndex = 0; chunkIndex < chunksLength; chunkIndex += 1) {
+		const firstChunk = firstChunks[chunkIndex];
+		const secondChunk = secondChunks[chunkIndex];
+		const chunkLength = firstChunk.length;
+		for (let index = 0; index < chunkLength; index += 1) if (!equalValue(firstChunk[index], secondChunk[index], options)) return false;
+	}
+	return true;
+}
+function equalArrayBuffer(first, second, options) {
+	return first.byteLength === second.byteLength ? equalArray(new Uint8Array(first), new Uint8Array(second), options) : false;
+}
+function equalDataView(first, second, options) {
+	return first.byteOffset === second.byteOffset ? equalArrayBuffer(first.buffer, second.buffer, options) : false;
+}
+function equalMap(first, second, options) {
+	const { size } = first;
+	if (size !== second.size) return false;
+	const firstKeys = [...first.keys()];
+	const secondKeys = [...second.keys()];
+	if (firstKeys.some((key) => !secondKeys.includes(key))) return false;
+	for (let index = 0; index < size; index += 1) {
+		const key = firstKeys[index];
+		if (!equalValue(first.get(key), second.get(key), options)) return false;
+	}
+	return true;
+}
+function equalPlainObject(first, second, options) {
+	let firstKeys = [...Object.keys(first), ...Object.getOwnPropertySymbols(first)];
+	let secondKeys = [...Object.keys(second), ...Object.getOwnPropertySymbols(second)];
+	if (options.ignoreKeys.enabled || options.ignoreExpressions.enabled) {
+		firstKeys = firstKeys.filter((key) => filterKey(key, options));
+		secondKeys = secondKeys.filter((key) => filterKey(key, options));
+	}
+	const { length } = firstKeys;
+	if (length !== secondKeys.length || firstKeys.some((key) => !secondKeys.includes(key))) return false;
+	for (let index = 0; index < length; index += 1) {
+		const key = firstKeys[index];
+		if (!equalValue(first[key], second[key], options)) return false;
+	}
+	return true;
+}
+function equalProperties(first, second, properties, options) {
+	const { length } = properties;
+	for (let index = 0; index < length; index += 1) {
+		const property = properties[index];
+		if (!equalValue(first[property], second[property], options)) return false;
+	}
+	return true;
+}
+function equalSet(first, second, options) {
+	const { size } = first;
+	if (size !== second.size) return false;
+	const firstValues = [...first];
+	const secondValues = [...second];
+	for (let index = 0; index < size; index += 1) {
+		const firstValue = firstValues[index];
+		if (!secondValues.some((secondValue) => equalValue(firstValue, secondValue, options))) return false;
+	}
+	return true;
+}
+function equalTypedArray(first, second) {
+	if (first.constructor !== second.constructor) return false;
+	if (first.byteLength !== second.byteLength) return false;
+	const { length } = first;
+	for (let index = 0; index < length; index += 1) if (first[index] !== second[index]) return false;
+	return true;
+}
+function equalValue(first, second, options) {
+	if (options.relaxedNullish && first == null && second == null) return true;
+	switch (true) {
+		case Object.is(first, second): return true;
+		case first == null || second == null: return first === second;
+		case typeof first !== typeof second: return false;
+		case typeof first === "string" && options.ignoreCase === true: return Object.is(first.toLocaleLowerCase(), second.toLocaleLowerCase());
+		case first instanceof ArrayBuffer && second instanceof ArrayBuffer: return equalArrayBuffer(first, second, options);
+		case first instanceof Date && second instanceof Date: return Object.is(Number(first), Number(second));
+		case first instanceof DataView && second instanceof DataView: return equalDataView(first, second, options);
+		case first instanceof Error && second instanceof Error: return equalProperties(first, second, ["name", "message"], options);
+		case first instanceof Map && second instanceof Map: return equalMap(first, second, options);
+		case first instanceof RegExp && second instanceof RegExp: return equalProperties(first, second, ["source", "flags"], options);
+		case first instanceof Set && second instanceof Set: return equalSet(first, second, options);
+		case Array.isArray(first) && Array.isArray(second): return equalArray(first, second, options);
+		case isPlainObject(first) && isPlainObject(second): return equalPlainObject(first, second, options);
+		case isTypedArray(first) && isTypedArray(second): return equalTypedArray(first, second);
+		default: return equal.handlers.handle(first, second, options);
+	}
+}
+/**
+* Create an equalizer with predefined options
+* @param options Comparison options
+* @returns Equalizer function
+*/
+function initializeEqualizer(options) {
+	const actual = getEqualOptions(options);
+	const equalizer = (first, second) => equalValue(first, second, actual);
+	equalizer.register = registerEqualizer;
+	equalizer.unregister = unregisterEqualizer;
+	return equalizer;
+}
+/**
+* Register a equality comparison function for a specific class
+* @param constructor Class constructor
+* @param fn Comparison function
+*/
+function registerEqualizer(constructor, handler) {
+	equal.handlers.register(constructor, handler);
+}
+/**
+* Unregister a equality comparison handler for a specific class
+* @param constructor Class constructor
+*/
+function unregisterEqualizer(constructor) {
+	equal.handlers.unregister(constructor);
+}
+function filterKey(key, options) {
+	if (typeof key !== "string") return true;
+	if (options.ignoreExpressions.enabled && options.ignoreExpressions.values.some((expression) => expression.test(key))) return false;
+	if (options.ignoreKeys.enabled && options.ignoreKeys.values.has(key)) return false;
+	return true;
+}
+function getEqualOptions(input) {
+	const options = {
+		ignoreCase: false,
+		ignoreExpressions: {
+			enabled: false,
+			values: []
+		},
+		ignoreKeys: {
+			enabled: false,
+			values: /* @__PURE__ */ new Set()
+		},
+		relaxedNullish: false
+	};
+	if (typeof input === "boolean") {
+		options.ignoreCase = input;
+		return options;
+	}
+	if (!isPlainObject(input)) return options;
+	options.ignoreCase = typeof input.ignoreCase === "boolean" ? input.ignoreCase : false;
+	options.ignoreExpressions.values = (Array.isArray(input.ignoreKeys) ? input.ignoreKeys : [input.ignoreKeys]).filter((key) => key instanceof RegExp);
+	options.ignoreKeys.values = new Set((Array.isArray(input.ignoreKeys) ? input.ignoreKeys : [input.ignoreKeys]).filter((key) => typeof key === "string"));
+	options.ignoreExpressions.enabled = options.ignoreExpressions.values.length > 0;
+	options.ignoreKeys.enabled = options.ignoreKeys.values.size > 0;
+	options.relaxedNullish = input.relaxedNullish === true;
+	return options;
+}
+var ARRAY_PEEK_PERCENTAGE = 10;
+var ARRAY_THRESHOLD = 100;
+var FilterManager = class {
+	handlers = Object.freeze({
+		add: (item) => this.add(item),
+		clear: () => this.clear(),
+		remove: (value) => this.remove(value),
+		set: (items) => this.set(items)
+	});
+	items = {};
+	constructor(managers) {
+		this.managers = managers;
+	}
+	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);
+		this.filter();
+	}
+	clear() {
+		if (Object.keys(this.items).length > 0) {
+			this.items = {};
+			this.filter();
+		}
+	}
+	destroy() {
+		this.handlers = void 0;
+		this.items = {};
+	}
+	filter() {
+		const { managers } = this;
+		const filtered = [];
+		const filters = Object.entries(this.items);
+		const keysLength = managers.data.values.keys.original.length;
+		rowLoop: for (let keyIndex = 0; keyIndex < keysLength; keyIndex += 1) {
+			const key = managers.data.values.keys.original[keyIndex];
+			const row = managers.data.values.objects.mapped.get(key);
+			if (row == null) continue;
+			filterLoop: for (let filterIndex = 0; filterIndex < filters.length; filterIndex += 1) {
+				const [field, items] = filters[filterIndex];
+				const value = row[field];
+				for (let itemIndex = 0; itemIndex < items.length; itemIndex += 1) {
+					const filter = items[itemIndex];
+					if (comparators[filter.comparison](value, filter.value)) continue filterLoop;
+				}
+				continue rowLoop;
+			}
+			filtered.push(key);
+		}
+		managers.data.values.keys.active = filtered;
+		if (managers.sort.items.length > 0) managers.sort.sort();
+		else managers.virtualization.update(true, true);
+	}
+	remove(value) {
+		if (typeof value === "string") {
+			if (this.items[value] == null) return;
+			this.items = {};
+		} else {
+			const { field } = value;
+			if (this.items[field] == null) return;
+			if (this.items[field].findIndex((item) => equal(item, value)) === -1) return;
+		}
+		this.filter();
+	}
+	set(items) {
+		const keyed = {};
+		const { length } = items;
+		for (let index = 0; index < length; index += 1) {
+			const item = items[index];
+			keyed[item.field] ??= [];
+			keyed[item.field].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)
+};
+const equalizer = equal.initialize({ ignoreCase: true });
+function removeRow(pool, row) {
+	if (row.element != null) {
+		row.element.innerHTML = "";
+		pool.rows.push(row.element);
+		row.element.remove();
+		row.element = void 0;
+	}
+	row.cells = {};
+}
+function renderRow(managers, row) {
+	const element = row.element ?? managers.virtualization.pool.rows.shift() ?? createRow();
+	row.element = element;
+	element.dataset.key = String(row.key);
+	element.innerHTML = "";
+	const columns = managers.column.items;
+	const { length } = columns;
+	const data = managers.data.values.objects.mapped.get(row.key);
+	if (data == null) return;
+	for (let index = 0; index < length; index += 1) {
+		const { options } = columns[index];
+		managers.virtualization.pool.cells[options.field] ??= [];
+		const cell = managers.virtualization.pool.cells[columns[index].options.field].shift() ?? createCell(options.width);
+		cell.textContent = String(data[options.field]);
+		row.cells[options.field] = cell;
+		element.append(cell);
+	}
+}
+var RowComponent = class {
+	cells = {};
+	element;
+	constructor(key) {
+		this.key = key;
+	}
+};
+var RowManager = class {
+	components = /* @__PURE__ */ new Map();
+	height;
+	constructor(managers, rowHeight) {
+		this.managers = managers;
+		this.height = rowHeight;
+	}
+	destroy() {
+		const components = [...this.components.values()];
+		const { length } = components;
+		for (let index = 0; index < length; index += 1) removeRow(this.managers.virtualization.pool, components[index]);
+		this.components.clear();
+	}
+	get(key) {
+		let row = this.components.get(key);
+		if (row == null) {
+			row = new RowComponent(key);
+			this.components.set(key, row);
+		}
+		return row;
+	}
+	has(key) {
+		return this.components.has(key);
+	}
+	remove(key) {
+		const row = this.components.get(key);
+		if (row != null) {
+			removeRow(this.managers.virtualization.pool, row);
+			this.components.delete(key);
+		}
+	}
+	update(key) {
+		const row = this.components.get(key);
+		if (row != null) renderRow(this.managers, row);
+	}
+};
+var SortManager = class {
+	handlers = Object.freeze({
+		add: (field, direction) => this.add(field, direction),
+		flip: (field) => this.flip(field),
+		clear: () => this.clear(),
+		remove: (field) => this.remove(field),
+		set: (items) => this.set(items)
+	});
+	items = [];
+	constructor(managers) {
+		this.managers = managers;
+	}
+	add(field, direction) {
+		if (this.items.findIndex((item) => item.key === field) > -1) return;
+		this.items.push({
+			key: field,
+			direction: direction ?? "ascending"
+		});
+		this.sort();
+	}
+	addOrSet(event, field) {
+		if (event.ctrlKey || event.metaKey) this.add(field);
+		else this.set([{
+			field,
+			direction: "ascending"
+		}]);
+	}
+	clear() {
+		if (this.items.length > 0) {
+			this.items.length = 0;
+			this.sort();
+		}
+	}
+	destroy() {
+		this.handlers = void 0;
+		this.items.length = 0;
+	}
+	flip(field) {
+		const item = this.items.find((item) => item.key === field);
+		if (item == null) return;
+		item.direction = item.direction === "ascending" ? "descending" : "ascending";
+		this.sort();
+	}
+	remove(field) {
+		const index = this.items.findIndex((item) => item.key === field);
+		if (index > -1) {
+			this.items.splice(index, 1);
+			this.sort();
+		}
+	}
+	removeOrClear(event, field) {
+		if (event.ctrlKey || event.metaKey) this.remove(field);
+		else this.clear();
+	}
+	set(items) {
+		this.items.splice(0, this.items.length, ...items.map((item) => ({
+			key: item.field,
+			direction: item.direction
+		})));
+		this.sort();
+	}
+	sort() {
+		const { items, managers } = this;
+		const { length } = managers.column.items;
+		for (let index = 0; index < length; index += 1) {
+			const column = managers.column.items[index];
+			const sorterIndex = items.findIndex((item) => item.key === column.options.field);
+			const sorterItem = items[sorterIndex];
+			setAttributes(column.elements.wrapper, {
+				"aria-sort": sorterItem == null ? "none" : items.length > 1 ? "other" : sorterItem.direction,
+				"data-sort-direction": sorterItem == null ? void 0 : sorterItem.direction
+			});
+			setAttribute(column.elements.sorter, "data-sort-position", sorterIndex > -1 && items.length > 1 ? sorterIndex + 1 : void 0);
+		}
+		managers.data.values.keys.active = items.length === 0 ? void 0 : sort(managers.data.values.keys.active?.map((key) => managers.data.values.objects.mapped.get(key)) ?? managers.data.values.objects.array, items).map((row) => row[managers.data.field]);
+		managers.virtualization.update(true, true);
+	}
+	toggle(event, field, direction) {
+		switch (direction) {
+			case "ascending":
+				this.flip(field);
+				return;
+			case "descending":
+				this.removeOrClear(event, field);
+				return;
+			default:
+				this.addOrSet(event, field);
+				return;
+		}
+	}
+};
 function getRange(down) {
 	const { components, managers } = this;
 	const { clientHeight, scrollTop } = components.body.elements.group;
@@ -656,6 +1974,8 @@ var VirtualizationManager = class {
 		}
 		this.pool.cells = {};
 		this.pool.rows = [];
+		this.listener = void 0;
+		this.visible = void 0;
 	}
 	removeCells(fields) {
 		const { length } = fields;
@@ -671,13 +1991,13 @@ var VirtualizationManager = class {
 		this.fragment.replaceChildren();
 		return this.fragment;
 	}
-	update(down) {
+	update(down, rerender) {
 		const { components, managers, pool, visible } = this;
 		components.body.elements.faker.style.height = `${managers.data.size * managers.row.height}px`;
 		const indices = /* @__PURE__ */ new Set();
 		const range = getRange.call(this, down);
 		for (let index = range.start; index <= range.end; index += 1) indices.add(index);
-		let remove = false;
+		let remove = rerender ?? false;
 		for (const [index, row] of visible) {
 			if (!managers.row.has(row.key) || !indices.has(index)) remove = true;
 			if (remove) {
@@ -714,10 +2034,15 @@ var Tabela = class {
 	#managers = {
 		column: void 0,
 		data: void 0,
+		event: void 0,
+		filter: void 0,
 		row: void 0,
+		sort: void 0,
 		virtualization: void 0
 	};
 	data;
+	filter;
+	sort;
 	get key() {
 		return this.#key;
 	}
@@ -733,11 +2058,16 @@ var Tabela = class {
 		this.#components.footer = new FooterComponent();
 		this.#managers.column = new ColumnManager(this.#managers, this.#components, options.columns);
 		this.#managers.data = new DataManager(this.#managers, this.#components, options.key);
+		this.#managers.event = new EventManager(this.#managers, this.#element);
+		this.#managers.filter = new FilterManager(this.#managers);
 		this.#managers.row = new RowManager(this.#managers, options.rowHeight);
+		this.#managers.sort = new SortManager(this.#managers);
 		this.#managers.virtualization = new VirtualizationManager(this.#managers, this.#components);
 		element.append(this.#components.header.elements.group, this.#components.body.elements.group, this.#components.footer.elements.group);
 		this.#managers.data.set(options.data);
 		this.data = this.#managers.data.handlers;
+		this.filter = this.#managers.filter.handlers;
+		this.sort = this.#managers.sort.handlers;
 	}
 	destroy() {
 		const components = this.#components;
@@ -748,7 +2078,10 @@ var Tabela = class {
 		components.header.destroy();
 		managers.column.destroy();
 		managers.data.destroy();
+		managers.event.destroy();
+		managers.filter.destroy();
 		managers.row.destroy();
+		managers.sort.destroy();
 		managers.virtualization.destroy();
 		element.innerHTML = "";
 		element.role = "";