@oscarpalmer/tabela 0.12.0 → 0.14.0

package/dist/tabela.full.js

@@ -485,10 +485,11 @@ function createCell(width, body) {
 }
 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);
+	const props = properties ?? {};
+	const keys = Object.keys(props);
+	for (const key of keys) element[key] = props[key];
+	setAttributes(element, attributes ?? {});
+	setStyles(element, style ?? {});
 	return element;
 }
 function createRowGroup(withRow) {
@@ -673,6 +674,26 @@ function getArrayCallbacks(bool, key, value) {
 		value: getArrayCallback(value)
 	};
 }
+function findValue(type, array, parameters) {
+	const findIndex = type === FIND_VALUE_INDEX;
+	if (!Array.isArray(array) || array.length === 0) return findIndex ? -1 : void 0;
+	const { bool, key, value } = getParameters(parameters);
+	const callbacks = getArrayCallbacks(bool, key);
+	if (callbacks?.bool == null && callbacks?.keyed == null) return findIndex ? array.indexOf(value) : array.find((item) => Object.is(item, value));
+	if (callbacks.bool != null) {
+		const index = array.findIndex(callbacks.bool);
+		return findIndex ? index : array[index];
+	}
+	return findValueInArray(array, callbacks.keyed, value, findIndex);
+}
+function findValueInArray(array, callback, value, findIndex) {
+	const { length } = array;
+	for (let index = 0; index < length; index += 1) {
+		const item = array[index];
+		if (Object.is(callback?.(item, index, array), value)) return findIndex ? index : item;
+	}
+	return findIndex ? -1 : void 0;
+}
 function findValues(type, array, parameters, mapper) {
 	const result = {
 		matched: [],
@@ -715,6 +736,7 @@ function getParameters(original) {
 		value: length === 1 && typeof original[0] !== "function" ? original[0] : original[1]
 	};
 }
+var FIND_VALUE_INDEX = "index";
 var UNIQUE_THRESHOLD = 100;
 function filter(array, ...parameters) {
 	return findValues("all", array, parameters).matched;
@@ -812,6 +834,48 @@ function compact(array, strict) {
 	}
 	return compacted;
 }
+function indexOf(array, ...parameters) {
+	return findValue(FIND_VALUE_INDEX, array, parameters);
+}
+function getName(start, haystack, needle) {
+	if (start === 0) return haystack === needle ? POSITION_SAME : POSITION_START;
+	return start + needle === haystack ? POSITION_END : POSITION_INSIDE;
+}
+function getPosition$1(haystack, needle, key) {
+	if (!Array.isArray(haystack) || !Array.isArray(needle)) return invalid;
+	const haystackLength = haystack.length;
+	const needleLength = needle.length;
+	if (haystackLength === 0 || needleLength === 0) return outside;
+	if (needleLength > haystackLength) return outside;
+	const callback = getArrayCallback(key);
+	const limit = haystackLength - needleLength + 1;
+	let needleValues = callback == null ? needle : needle.slice();
+	if (callback != null) for (let needleIndex = 0; needleIndex < needleLength; needleIndex += 1) needleValues[needleIndex] = callback(needle[needleIndex], needleIndex, needle);
+	for (let haystackIndex = 0; haystackIndex < limit; haystackIndex += 1) {
+		let haystackItem = haystack[haystackIndex];
+		let haystackValue = callback?.(haystackItem, haystackIndex, haystack) ?? haystackItem;
+		if (!Object.is(haystackValue, needleValues[0])) continue;
+		if (needleLength === 1) return [haystackIndex, getName(haystackIndex, haystackLength, needleLength)];
+		for (let needleIndex = 1; needleIndex < needleLength; needleIndex += 1) {
+			haystackItem = haystack[haystackIndex + needleIndex];
+			haystackValue = callback?.(haystackItem, haystackIndex + needleIndex, haystack) ?? haystackItem;
+			if (!Object.is(haystackValue, needleValues[needleIndex])) break;
+			if (needleIndex === needleLength - 1) return [haystackIndex, getName(haystackIndex, haystackLength, needleLength)];
+		}
+	}
+	return outside;
+}
+function indexOfArray(haystack, needle, key) {
+	return getPosition$1(haystack, needle, key)[0];
+}
+var POSITION_END = "end";
+var POSITION_INSIDE = "inside";
+var POSITION_INVALID = "invalid";
+var POSITION_OUTSIDE = "outside";
+var POSITION_SAME = "same";
+var POSITION_START = "start";
+var invalid = [-1, POSITION_INVALID];
+var outside = [-1, POSITION_OUTSIDE];
 function select(array, ...parameters) {
 	return findValues("all", array, parameters, parameters.pop()).matched;
 }
@@ -923,6 +987,7 @@ function getHandlers(owner, options) {
 function isConstructable(value) {
 	return typeof value === "object" && value !== null;
 }
+var COMPARE_NAME = "compare";
 /**
 * Compare two values _(for sorting purposes)_
 * @param first First value
@@ -955,7 +1020,7 @@ compare.handlers = getCompareHandlers(compare, {
 	callback: (first, second, compareStrings) => {
 		if (compareStrings) return getString(first).localeCompare(getString(second));
 	},
-	method: "compare"
+	method: COMPARE_NAME
 });
 compare.register = registerComparator;
 compare.unregister = unregisterComparator;
@@ -977,7 +1042,7 @@ function unregisterComparator(constructor) {
 function compareNumbers(first, second) {
 	const firstNumber = Number(first);
 	const secondNumber = Number(second);
-	if (firstNumber === secondNumber) return 0;
+	if (Object.is(firstNumber, secondNumber)) return 0;
 	return firstNumber > secondNumber ? 1 : -1;
 }
 function compareSymbols(first, second) {
@@ -1031,7 +1096,7 @@ function getSorter(value, modifier) {
 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 modifier = (first === true || second === true ? "descending" : "ascending") === "ascending" ? 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);
@@ -1056,6 +1121,56 @@ function sort(array, first, second) {
 		return 0;
 	});
 }
+function swap(array, first, second, third) {
+	if (!Array.isArray(array)) return [];
+	if (array.length === 0) return array;
+	if (Array.isArray(first) && Array.isArray(second)) return swapArrays(array, first, second, third);
+	return swapValues(array, first, second, third);
+}
+swap.indices = swapIndices;
+function swapArrays(array, from, to, key) {
+	if (from.length === 0 || to.length === 0) return array;
+	if (from.length === 1 && to.length === 1) return swapValues(array, from[0], to[0], key);
+	const fromIndex = indexOfArray(array, from, key);
+	const toIndex = indexOfArray(array, to, key);
+	if (fromIndex === -1 || toIndex === -1) return array;
+	const first = fromIndex < toIndex ? from : to;
+	const second = fromIndex < toIndex ? to : from;
+	const firstIndex = first === from ? fromIndex : toIndex;
+	const secondIndex = first === from ? toIndex : fromIndex;
+	const firstEnd = firstIndex + first.length - 1;
+	if (firstIndex <= secondIndex + second.length - 1 && firstEnd >= secondIndex) return array;
+	array.splice(firstIndex, first.length, ...second);
+	array.splice(secondIndex, second.length, ...first);
+	return array;
+}
+/**
+* Swap two indiced items in an array
+*
+* If either index is out of bounds, the array will be returned unchanged
+* @param array Array of items to swap
+* @param first First index _(can be negative to count from the end)_
+* @param second Second index _(can be negative to count from the end)_
+* @returns Original array with items swapped _(or unchanged if unable to swap)_
+*/
+function swapIndices(array, first, second) {
+	if (!Array.isArray(array) || array.length === 0) return [];
+	if (typeof first !== "number" || typeof second !== "number") return array;
+	const firstIndex = first < 0 ? array.length + first : first;
+	const secondIndex = second < 0 ? array.length + second : second;
+	if (firstIndex === secondIndex || firstIndex >= array.length || secondIndex >= array.length) return array;
+	const temp = array[firstIndex];
+	array[firstIndex] = array[secondIndex];
+	array[secondIndex] = temp;
+	return array;
+}
+function swapValues(array, from, to, key) {
+	const callback = getArrayCallback(key);
+	const first = callback == null ? array.indexOf(from) : indexOf(array, callback, callback(from, void 0, []));
+	const second = callback == null ? array.indexOf(to) : indexOf(array, callback, callback(to, void 0, []));
+	if (first === second || first === -1 || second === -1) return array;
+	return swapIndices(array, first, second);
+}
 function getMapValues(array, first, second, arrays) {
 	if (!Array.isArray(array)) return /* @__PURE__ */ new Map();
 	const { length } = array;
@@ -1737,7 +1852,7 @@ var Memoized = class {
 	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), "_"));
+			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);
@@ -1813,6 +1928,7 @@ function memoize(callback, options) {
 	return new Memoized(callback, getMemoizationOptions(options));
 }
 var DEFAULT_CACHE_SIZE = 1024;
+var SEPARATOR = "_";
 /**
 * Check if a string ends with a specified substring
 * @param haystack String to look in
@@ -1821,7 +1937,7 @@ var DEFAULT_CACHE_SIZE = 1024;
 * @returns `true` if the string ends with the given substring, otherwise `false`
 */
 function endsWith(haystack, needle, ignoreCase) {
-	return match("endsWith", haystack, needle, ignoreCase === true);
+	return match(MATCH_ENDS_WITH, haystack, needle, ignoreCase === true);
 }
 /**
 * Check if a string includes a specified substring
@@ -1831,7 +1947,7 @@ function endsWith(haystack, needle, ignoreCase) {
 * @returns `true` if the string includes the given substring, otherwise `false`
 */
 function includes(haystack, needle, ignoreCase) {
-	return match("includes", haystack, needle, ignoreCase === true);
+	return match(MATCH_INCLUDES, haystack, needle, ignoreCase === true);
 }
 function match(type, haystack, needle, ignoreCase) {
 	if (typeof haystack !== "string" || typeof needle !== "string") return false;
@@ -1849,8 +1965,11 @@ function matchCallback(haystack, needle, ignoreCase) {
 * @returns `true` if the string starts with the given substring, otherwise `false`
 */
 function startsWith(haystack, needle, ignoreCase) {
-	return match("startsWith", haystack, needle, ignoreCase === true);
+	return match(MATCH_STARTS_WITH, haystack, needle, ignoreCase === true);
 }
+var MATCH_ENDS_WITH = "endsWith";
+var MATCH_INCLUDES = "includes";
+var MATCH_STARTS_WITH = "startsWith";
 var matchMemoizers = {};
 function equal(first, second, options) {
 	return equalValue(first, second, getEqualOptions(options));
@@ -1948,9 +2067,9 @@ function equalValue(first, second, options) {
 		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 Error && second instanceof Error: return equalProperties(first, second, ERROR_PROPERTIES, 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 RegExp && second instanceof RegExp: return equalProperties(first, second, EXPRESSION_PROPERTIES, 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);
@@ -2019,6 +2138,8 @@ function getEqualOptions(input) {
 }
 var ARRAY_PEEK_PERCENTAGE = 10;
 var ARRAY_THRESHOLD = 100;
+var ERROR_PROPERTIES = ["name", "message"];
+var EXPRESSION_PROPERTIES = ["source", "flags"];
 var FilterManager = class {
 	handlers = Object.freeze({
 		add: (item) => this.add(item),
@@ -2637,6 +2758,7 @@ var Tabela = class {
 	};
 	#element;
 	#id = getId();
+	#table;
 	#key;
 	#managers = {
 		column: void 0,
@@ -2660,17 +2782,20 @@ var Tabela = class {
 	constructor(element, options) {
 		this.#element = element;
 		element.innerHTML = "";
-		element.role = "table";
 		element.classList.add("tabela");
+		this.#table = createElement("div", {
+			className: "tabela__table",
+			role: "table"
+		});
 		element.setAttribute("aria-label", options.label);
 		this.#key = options.key;
 		this.#components.header = new HeaderComponent();
 		this.#components.body = new BodyComponent();
 		this.#components.footer = new FooterComponent();
 		const state = {
-			element,
 			options,
 			components: this.#components,
+			element: this.#table,
 			id: this.#id,
 			key: this.#key,
 			managers: this.#managers
@@ -2685,7 +2810,7 @@ var Tabela = class {
 		this.#managers.row = new RowManager(state);
 		this.#managers.selection = new SelectionManager(state);
 		this.#managers.sort = new SortManager(state);
-		element.append(this.#components.header.elements.group, this.#components.body.elements.group, this.#components.footer.elements.group);
+		this.#table.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;
@@ -2696,6 +2821,7 @@ var Tabela = class {
 		const components = this.#components;
 		const managers = this.#managers;
 		const element = this.#element;
+		const table = this.#table;
 		components.body.destroy();
 		components.footer.destroy();
 		components.header.destroy();
@@ -2703,6 +2829,7 @@ var Tabela = class {
 		managers.data.destroy();
 		managers.event.destroy();
 		managers.filter.destroy();
+		managers.navigation.destroy();
 		managers.render.destroy();
 		managers.row.destroy();
 		managers.selection.destroy();
@@ -2710,9 +2837,10 @@ var Tabela = class {
 		element.innerHTML = "";
 		element.role = "";
 		element.classList.remove("tabela");
-		element.removeAttribute("aria-label");
-		element.removeAttribute("role");
+		table.removeAttribute("aria-label");
+		table.removeAttribute("role");
 		this.#element = void 0;
+		this.#table = void 0;
 	}
 };
 function getId() {

package/package.json

@@ -1,50 +1,58 @@
 {
+	"name": "@oscarpalmer/tabela",
+	"version": "0.14.0",
+	"description": "A modern table.",
+	"keywords": [],
+	"license": "MIT",
 	"author": {
 		"name": "Oscar Palmér",
 		"url": "https://oscarpalmer.se"
 	},
-	"dependencies": {
-		"@oscarpalmer/atoms": "^0.159",
-		"@oscarpalmer/toretto": "^0.38"
-	},
-	"description": "A modern table.",
-	"devDependencies": {
-		"@oscarpalmer/oui": "^0.19",
-		"@types/node": "^25.3",
-		"@vitest/coverage-istanbul": "^4",
-		"jsdom": "^28.1",
-		"oxfmt": "^0.36",
-		"oxlint": "^1.51",
-		"rolldown": "1.0.0-rc.7",
-		"tslib": "^2.8",
-		"typescript": "^5.9",
-		"vite": "8.0.0-beta.16",
-		"vitest": "^4"
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/oscarpalmer/tabela.git"
 	},
+	"files": [
+		"dist",
+		"src"
+	],
+	"type": "module",
+	"module": "./dist/index.mjs",
+	"types": "./dist/index.d.mts",
 	"exports": {
 		".": {
-			"types": "./types/index.d.ts",
-			"default": "./dist/index.js"
+			"types": "./dist/index.d.mts",
+			"default": "./dist/index.mjs"
 		}
 	},
-	"files": ["dist", "src", "types"],
-	"keywords": [],
-	"license": "MIT",
-	"module": "./dist/index.js",
-	"name": "@oscarpalmer/tabela",
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/oscarpalmer/tabela.git"
-	},
 	"scripts": {
-		"build": "npm run clean && npx vite build && npm run rolldown:build && npx tsc",
-		"clean": "rm -rf ./dist && rm -rf ./types && rm -f ./tsconfig.tsbuildinfo",
-		"rolldown:build": "npx rolldown -c",
-		"rolldown:watch": "npx rolldown -c ./rolldown.config.js --watch",
-		"test": "npx vitest --coverage",
-		"watch": "npx vite build --watch"
+		"build": "vpx vp run tsdown:build && vpx vp pack",
+		"tsdown:build": "vpx tsdown -c ./tsdown.config.ts",
+		"tsdown:watch": "vpx tsdown -c ./tsdown.config.ts --watch",
+		"test": "vpx vp test run --coverage",
+		"test:leak": "vpx vp test run --detect-async-leaks --coverage",
+		"watch": "vpx vite build --watch",
+		"www": "concurrently \"vpx vp run www:css\" \"vpx vp run www:js\"",
+		"www:css": "sass --watch www/.app/css:./www/css",
+		"www:js": "vpx tsdown -c ./www/.app/js/tsdown.config.ts --watch"
 	},
-	"type": "module",
-	"types": "./types/index.d.ts",
-	"version": "0.12.0"
+	"dependencies": {
+		"@oscarpalmer/atoms": "^0.165",
+		"@oscarpalmer/toretto": "^0.41"
+	},
+	"devDependencies": {
+		"@oscarpalmer/abydon": "^0.19",
+		"@oscarpalmer/oui": "^0.19",
+		"@types/node": "^25.5",
+		"@vitest/coverage-istanbul": "^4.1",
+		"concurrently": "^9.2",
+		"jsdom": "^28.1",
+		"sass": "^1.98",
+		"tsdown": "^0.21",
+		"typescript": "^5.9",
+		"vite": "npm:@voidzero-dev/vite-plus-core@latest",
+		"vite-plus": "latest",
+		"vitest": "npm:@voidzero-dev/vite-plus-test@latest"
+	},
+	"packageManager": "npm@11.11.1"
 }

package/src/components/body.component.ts

@@ -1,10 +1,14 @@
 import {createElement, createRowGroup} from '../helpers/dom.helpers';
 import type {BodyElements} from '../models/body.model';
+import {ATTRIBUTE_DATA_EVENT, ELEMENT_DIV} from '../models/dom.model';
+import {EVENT_BODY} from '../models/event.model';
+import {CSS_FAKER, CSS_ROWGROUP_BODY} from '../models/style.model';
+import type {State} from '../models/tabela.model';
 
 function createFaker(): HTMLDivElement {
-	return createElement('div', {
-		className: 'tabela__faker',
-	}, {}, {});
+	return createElement(ELEMENT_DIV, {
+		className: CSS_FAKER,
+	});
 }
 
 export class BodyComponent {
@@ -13,16 +17,16 @@ export class BodyComponent {
 		group: undefined as never,
 	};
 
-	constructor() {
-		const group = createRowGroup(false);
+	constructor(state: State) {
+		const group = createRowGroup(state.options.rowHeight, false);
 
 		this.elements.group = group;
 
-		group.className += ' tabela__rowgroup--body';
+		group.className += ` ${CSS_ROWGROUP_BODY}`;
 
 		group.tabIndex = 0;
 
-		group.setAttribute('data-event', 'body');
+		group.setAttribute(ATTRIBUTE_DATA_EVENT, EVENT_BODY);
 
 		group.append(this.elements.faker);
 	}

package/src/components/column.component.ts

@@ -1,5 +1,14 @@
 import {createElement} from '../helpers/dom.helpers';
 import type {Column, TabelaColumn} from '../models/column.model';
+import {
+	ATTRIBUTE_DATA_EVENT,
+	ATTRIBUTE_DATA_FIELD,
+	ATTRIBUTE_ROLE,
+	ELEMENT_DIV,
+	ROLE_COLUMNHEADER,
+} from '../models/dom.model';
+import {EVENT_HEADING} from '../models/event.model';
+import {CSS_HEADING, CSS_HEADING_CONTENT, CSS_HEADING_SORTER} from '../models/style.model';
 
 export class ColumnComponent {
 	elements: ColumnElements;
@@ -8,14 +17,14 @@ export class ColumnComponent {
 	constructor(column: TabelaColumn) {
 		const width =
 			Number.parseInt(getComputedStyle(document.body).fontSize, 10) *
-			(column.width ?? column.title.length * 1.5);
+			(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.field, this.options.label, width);
 	}
 
 	destroy(): void {
@@ -36,38 +45,28 @@ type ColumnElements = {
 
 function createHeading(field: string, title: string, width: number): ColumnElements {
 	const wrapper = createElement(
-		'div',
+		ELEMENT_DIV,
 		{
-			className: 'tabela__heading',
-			role: 'columnheader',
+			className: CSS_HEADING,
+			[ATTRIBUTE_ROLE]: ROLE_COLUMNHEADER,
 		},
 		{
-			'data-event': 'heading',
-			'data-field': field,
+			[ATTRIBUTE_DATA_EVENT]: EVENT_HEADING,
+			[ATTRIBUTE_DATA_FIELD]: field,
 		},
 		{
 			width: `${width}px`,
 		},
 	);
 
-	const content = createElement(
-		'div',
-		{
-			className: 'tabela__heading__content',
-			textContent: title,
-		},
-		{},
-		{},
-	);
+	const content = createElement(ELEMENT_DIV, {
+		className: CSS_HEADING_CONTENT,
+		textContent: title,
+	});
 
-	const sorter = createElement(
-		'div',
-		{
-			className: 'tabela__heading__sorter',
-		},
-		{},
-		{},
-	);
+	const sorter = createElement(ELEMENT_DIV, {
+		className: CSS_HEADING_SORTER,
+	});
 
 	wrapper.append(content, sorter);
 

package/src/components/footer.component.ts

@@ -1,12 +1,14 @@
 import {createCell, createRowGroup} from '../helpers/dom.helpers';
 import type {FooterElements} from '../models/footer.model';
+import {CSS_CELL_FOOTER, CSS_ROW_FOOTER, CSS_ROWGROUP_FOOTER} from '../models/style.model';
+import type {State} from '../models/tabela.model';
 import type {ColumnComponent} from './column.component';
 
 export class FooterComponent {
 	readonly elements: FooterElements;
 
-	constructor() {
-		const {group, row} = createRowGroup();
+	constructor(state: State) {
+		const {group, row} = createRowGroup(state.options.rowHeight);
 
 		this.elements = {
 			group,
@@ -14,8 +16,8 @@ export class FooterComponent {
 			cells: [],
 		};
 
-		group.className += ' tabela__rowgroup--footer';
-		row.className += ' tabela__row--footer';
+		group.className += ` ${CSS_ROWGROUP_FOOTER}`;
+		row.className += ` ${CSS_ROW_FOOTER}`;
 	}
 
 	destroy(): void {
@@ -35,7 +37,7 @@ export class FooterComponent {
 		for (let index = 0; index < length; index += 1) {
 			const cell = createCell(columns[index].options.width ?? 4, false);
 
-			cell.className += ' tabela__cell--footer';
+			cell.className += ` ${CSS_CELL_FOOTER}`;
 			cell.innerHTML = '&nbsp;';
 
 			elements.cells.push(cell);