@neovici/cosmoz-omnitable 8.0.0-beta.1 → 8.0.0-beta.10

package/README.md

@@ -5,26 +5,3 @@ cosmoz-omnitable
 [![Maintainability](https://api.codeclimate.com/v1/badges/6b16292868f47977eee2/maintainability)](https://codeclimate.com/github/Neovici/cosmoz-omnitable/maintainability)
 [![codecov](https://codecov.io/gh/Neovici/cosmoz-omnitable/branch/master/graph/badge.svg?token=j46iVMxjcs)](https://codecov.io/gh/Neovici/cosmoz-omnitable)
 [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
-
-
-migration TODO:
-
-* check if dropping the visibility code has any adverse effect (might be related to hash-params)
-x add legacy ots compatibility layer: dispatch filter-changed and other similar events from the columns
-* verify each custom render function in FE
-x convert DOM columns to config
-x empty columns of all state
-x hash params
-x xlsx + csv export
-* test for source
-
-FE editable columns in:
-views/administration/accounting-model/dimension-values.html.js
-views/administration/periods/list.js
-
-FE column-item-changed in:
-views/administration/periods/list.js
-
-BUGS:
-* when navigating the queue, filters are not reset when view-core is reused
-* autocomplete columns without valueProperty might not work

package/cosmoz-omnitable-column-amount.js

@@ -7,7 +7,7 @@ import { PolymerElement } from '@polymer/polymer/polymer-element';
 import { html } from 'lit-html';
 
 import { columnMixin } from './cosmoz-omnitable-column-mixin';
-import { valuesFrom } from './lib/utils-data';
+import { defaultComputeSource } from './lib/utils-data';
 import './lib/cosmoz-omnitable-amount-range-input';
 import { getComparableValue, getCurrency, applySingleFilter, getString, getInputString, toAmount, toHashString, fromHashString } from './lib/utils-amount';
 import { get } from '@polymer/polymer/lib/utils/path';
@@ -35,8 +35,8 @@ class OmnitableColumnAmount extends columnMixin(PolymerElement) {
 
 	getFilterFn(column, filter) {
 		const
-			min = getComparableValue(filter, 'min', column),
-			max = getComparableValue(filter, 'max', column);
+			min = getComparableValue({ ...column, valuePath: 'min' }, filter),
+			max = getComparableValue({ ...column, valuePath: 'max' }, filter);
 
 		if (min == null && max == null) {
 			return;
@@ -56,8 +56,8 @@ class OmnitableColumnAmount extends columnMixin(PolymerElement) {
 		return getString(column, item);
 	}
 
-	getComparableValue(item, valuePath, column) {
-		return getComparableValue(item, valuePath, column);
+	getComparableValue(column, item) {
+		return getComparableValue(column, item);
 	}
 
 	serializeFilter({ rates }, filter) {
@@ -134,8 +134,8 @@ class OmnitableColumnAmount extends columnMixin(PolymerElement) {
 		></cosmoz-omnitable-amount-range-input>`;
 	}
 
-	computeSource({ valuePath }, data) {
-		return valuesFrom(data, valuePath);
+	computeSource(column, data) {
+		return defaultComputeSource(column, data);
 	}
 }
 

package/cosmoz-omnitable-column-autocomplete.js

@@ -14,7 +14,7 @@ import {
 import { get } from '@polymer/polymer/lib/utils/path';
 
 export const
-	getComparableValue = (item, valuePath, { textProperty, valueProperty } = {}) => {
+	getComparableValue = ({ valuePath, textProperty, valueProperty }, item) => {
 		const property = textProperty ? strProp(textProperty) : prop(valueProperty),
 			values = array(valuePath && get(item, valuePath)).map(property);
 		return values.length > 1 ? values.filter(Boolean).join(',') : values[0];
@@ -63,12 +63,14 @@ class OmnitableColumnAutocomplete extends listColumnMixin(columnMixin(PolymerEle
 		>${ spinner }</cosmoz-autocomplete-ui>`;
 	}
 
-	getComparableValue(item, valuePath, column) {
-		return getComparableValue(item, valuePath, column);
+	getComparableValue(column, item) {
+		return getComparableValue(column, item);
 	}
 
 	computeSource(column, data) {
-		return computeSource(column, data);
+		return column.externalValues || typeof column.values === 'function'
+			? column.values
+			: computeSource(column, data);
 	}
 
 }

package/cosmoz-omnitable-column-date.js

@@ -9,7 +9,7 @@ import { html } from 'lit-html';
 
 import { columnMixin } from './cosmoz-omnitable-column-mixin';
 import './lib/cosmoz-omnitable-date-range-input';
-import { valuesFrom } from './lib/utils-data';
+import { defaultComputeSource } from './lib/utils-data';
 import { getString, getComparableValue, toDate, toHashString, toXlsxValue, applySingleFilter, getInputString, fromInputString } from './lib/utils-date';
 
 class OmnitableColumnDate extends columnMixin(PolymerElement) {
@@ -27,8 +27,8 @@ class OmnitableColumnDate extends columnMixin(PolymerElement) {
 
 	getFilterFn(column, filter) {
 		const
-			min = getComparableValue(filter, 'min', column),
-			max = getComparableValue(filter, 'max', column);
+			min = getComparableValue({ ...column, valuePath: 'min' }, filter),
+			max = getComparableValue({ ...column, valuePath: 'max' }, filter);
 
 		if (min == null && max == null) {
 			return;
@@ -48,8 +48,8 @@ class OmnitableColumnDate extends columnMixin(PolymerElement) {
 		return getString(column, item);
 	}
 
-	getComparableValue(item, valuePath, column) {
-		return getComparableValue(item, valuePath, column);
+	getComparableValue(column, item) {
+		return getComparableValue(column, item);
 	}
 
 	serializeFilter(column, filter) {
@@ -117,8 +117,8 @@ class OmnitableColumnDate extends columnMixin(PolymerElement) {
 		></cosmoz-omnitable-date-range-input>`;
 	}
 
-	computeSource({ valuePath }, data) {
-		return valuesFrom(data, valuePath);
+	computeSource(column, data) {
+		return defaultComputeSource(column, data);
 	}
 }
 customElements.define('cosmoz-omnitable-column-date', OmnitableColumnDate);

package/cosmoz-omnitable-column-datetime.js

@@ -8,7 +8,7 @@ import { PolymerElement } from '@polymer/polymer/polymer-element';
 import { html } from 'lit-html';
 import { fromHashString, getString, toHashString, toXlsxValue } from './lib/utils-datetime';
 import { applySingleFilter, fromInputString, getComparableValue, toDate } from './lib/utils-date';
-import { valuesFrom } from './lib/utils-data';
+import { defaultComputeSource } from './lib/utils-data';
 import './lib/cosmoz-omnitable-datetime-range-input';
 
 /**
@@ -36,8 +36,8 @@ class OmnitableColumnDatetime extends columnMixin(PolymerElement) {
 
 	getFilterFn(column, filter) {
 		const
-			min = getComparableValue(filter, 'min', column),
-			max = getComparableValue(filter, 'max', column);
+			min = getComparableValue({ ...column, valuePath: 'min' }, filter),
+			max = getComparableValue({ ...column, valuePath: 'max' }, filter);
 
 		if (min == null && max == null) {
 			return;
@@ -57,8 +57,8 @@ class OmnitableColumnDatetime extends columnMixin(PolymerElement) {
 		return getString(column, item);
 	}
 
-	getComparableValue(item, valuePath, column) {
-		return getComparableValue(item, valuePath, column);
+	getComparableValue(column, item) {
+		return getComparableValue(column, item);
 	}
 
 	serializeFilter(column, filter) {
@@ -123,8 +123,8 @@ class OmnitableColumnDatetime extends columnMixin(PolymerElement) {
 		></cosmoz-omnitable-datetime-range-input>`;
 	}
 
-	computeSource({ valuePath }, data) {
-		return valuesFrom(data, valuePath);
+	computeSource(column, data) {
+		return defaultComputeSource(column, data);
 	}
 }
 

package/cosmoz-omnitable-column-list-mixin.js

@@ -130,7 +130,7 @@ const
 			return getString(column, item);
 		}
 
-		getComparableValue(item, valuePath, { valueProperty }) {
+		getComparableValue({ valuePath, valueProperty }, item) {
 			const value = get(item, valuePath);
 			if (valueProperty == null) {
 				return value;
@@ -160,7 +160,9 @@ const
 		}
 
 		computeSource(column, data) {
-			return computeSource(column, data);
+			return column.externalValues || typeof column.values === 'function'
+				? column.values
+				: computeSource(column, data);
 		}
 	};
 

package/cosmoz-omnitable-column-mixin.js

@@ -3,6 +3,7 @@ import { get } from '@polymer/polymer/lib/utils/path';
 export const
 	getString = ({ valuePath }, item) => get(item, valuePath),
 	toXlsxValue = getString,
+	getComparableValue = getString,
 
 	applySingleFilter = ({ valuePath }, filter) => item => {
 		const value = get(item, valuePath);
@@ -87,12 +88,12 @@ export const
 			return filter;
 		}
 
-		getComparableValue(item, valuePath) {
-			return get(item, valuePath);
+		getComparableValue(column, item) {
+			return getComparableValue(column, item);
 		}
 
-		computeSource() {
-			return null;
+		computeSource(column, data) {
+			return data;
 		}
 
 		_propertiesChanged(currentProps, changedProps, oldProps) {

package/cosmoz-omnitable-column-number.js

@@ -8,7 +8,7 @@ import { html } from 'lit-html';
 import { columnMixin } from './cosmoz-omnitable-column-mixin';
 
 import './lib/cosmoz-omnitable-number-range-input';
-import { valuesFrom } from './lib/utils-data';
+import { defaultComputeSource } from './lib/utils-data';
 import { applySingleFilter, getComparableValue, getInputString, getString, toHashString, toNumber } from './lib/utils-number';
 import { get } from '@polymer/polymer/lib/utils/path';
 
@@ -36,8 +36,8 @@ class OmnitableColumnNumber extends columnMixin(PolymerElement) {
 
 	getFilterFn(column, filter) {
 		const
-			min = getComparableValue(filter, 'min', column),
-			max = getComparableValue(filter, 'max', column);
+			min = getComparableValue({ ...column, valuePath: 'min' }, filter),
+			max = getComparableValue({ ...column, valuePath: 'max' }, filter);
 
 		if (min == null && max == null) {
 			return;
@@ -57,8 +57,8 @@ class OmnitableColumnNumber extends columnMixin(PolymerElement) {
 		return getString(column, item);
 	}
 
-	getComparableValue(item, valuePath, column) {
-		return getComparableValue(item, valuePath, column);
+	getComparableValue(column, item) {
+		return getComparableValue(column, item);
 	}
 
 	serializeFilter(column, filter) {
@@ -127,8 +127,8 @@ class OmnitableColumnNumber extends columnMixin(PolymerElement) {
 		></cosmoz-omnitable-number-range-input>`;
 	}
 
-	computeSource({ valuePath }, data) {
-		return valuesFrom(data, valuePath);
+	computeSource(column, data) {
+		return defaultComputeSource(column, data);
 	}
 }
 customElements.define('cosmoz-omnitable-column-number', OmnitableColumnNumber);

package/cosmoz-omnitable-column-time.js

@@ -10,7 +10,7 @@ import { html } from 'lit-html';
 import { columnMixin } from './cosmoz-omnitable-column-mixin';
 import { getComparableValue, getString, toXlsxValue, applySingleFilter, toDate, toHashString, fromHashString } from './lib/utils-time';
 import './lib/cosmoz-omnitable-time-range-input';
-import { valuesFrom } from './lib/utils-data';
+import { defaultComputeSource } from './lib/utils-data';
 
 /**
  * @polymer
@@ -38,8 +38,8 @@ class OmnitableColumnTime extends columnMixin(PolymerElement) {
 
 	getFilterFn(column, filter) {
 		const
-			min = getComparableValue(filter, 'min', column),
-			max = getComparableValue(filter, 'max', column);
+			min = getComparableValue({ ...column, valuePath: 'min' }, filter),
+			max = getComparableValue({ ...column, valuePath: 'max' }, filter);
 
 		if (min == null && max == null) {
 			return;
@@ -59,8 +59,8 @@ class OmnitableColumnTime extends columnMixin(PolymerElement) {
 		return getString(column, item);
 	}
 
-	getComparableValue(item, valuePath, column) {
-		return getComparableValue(item, valuePath, column);
+	getComparableValue(column, item) {
+		return getComparableValue(column, item);
 	}
 
 	serializeFilter(column, filter) {
@@ -124,8 +124,8 @@ class OmnitableColumnTime extends columnMixin(PolymerElement) {
 		></cosmoz-omnitable-time-range-input>`;
 	}
 
-	computeSource({ valuePath }, data) {
-		return valuesFrom(data, valuePath);
+	computeSource(column, data) {
+		return defaultComputeSource(column, data);
 	}
 }
 customElements.define('cosmoz-omnitable-column-time', OmnitableColumnTime);

package/cosmoz-omnitable-styles.js

@@ -22,7 +22,7 @@ const checkbox = `
 	}
 
 	.checkbox:checked {
-		background-color: var(--paper-checkbox-checked-color, var(--primary-color));
+		background-color: var(--cosmoz-omnitable-checkbox-checked-color, var(--primary-color));
 		box-shadow: none;
 	}
 
@@ -63,7 +63,7 @@ const checkbox = `
 		height: 2px;
 		left: 4px;
 		top: 8px;
-	    background-color: var(--paper-checkbox-checked-color, var(--primary-color));
+	  background-color: var(--cosmoz-omnitable-checkbox-checked-color, var(--primary-color));
 	}
 `;
 
@@ -282,7 +282,7 @@ export default `<style>
 		display: flex;
 		align-items: center;
 		border-top: solid 1px #e8e8e8;
-		background-color: #f5f5f5;
+		background-color: var(--cosmoz-omnitable-footer-bg-color, #f5f5f5);
 		min-height: 25px;
 		height: 63px;
 		margin-bottom: 1px; /* Chrome overflow rendering bug? When only component in a view */

package/cosmoz-omnitable.js

@@ -3,7 +3,6 @@ import '@polymer/iron-icons/iron-icons';
 import '@polymer/iron-icon/iron-icon';
 import '@polymer/iron-label/iron-label';
 import '@polymer/paper-button/paper-button';
-import '@polymer/paper-checkbox/paper-checkbox';
 import '@polymer/paper-dropdown-menu/paper-dropdown-menu';
 import '@polymer/paper-icon-button/paper-icon-button';
 import '@polymer/paper-item/paper-item';
@@ -24,7 +23,7 @@ import styles from './cosmoz-omnitable-styles';
 
 import { PolymerElement } from '@polymer/polymer/polymer-element';
 import { html } from '@polymer/polymer/lib/utils/html-tag';
-import { html as litHtml, render } from 'lit-html';
+import { html as litHtml } from 'lit-html';
 
 import { translatable } from '@neovici/cosmoz-i18next';
 import { mixin, hauntedPolymer } from '@neovici/cosmoz-utils';
@@ -276,8 +275,7 @@ class Omnitable extends hauntedPolymer(useOmnitable)(mixin({ isEmpty }, translat
 
 	static get observers() {
 		return [
-			'_selectedItemsChanged(selectedItems.*)',
-			'renderFastLayoutCss(layoutCss, $.layoutStyle)'
+			'_selectedItemsChanged(selectedItems.*)'
 		];
 	}
 
@@ -517,10 +515,6 @@ class Omnitable extends hauntedPolymer(useOmnitable)(mixin({ isEmpty }, translat
 		return this.ngettext('{0} row', '{0} rows', numRows);
 	}
 
-	renderFastLayoutCss(layoutCss, outlet) {
-		render(layoutCss, outlet);
-	}
-
 	_onCompleteValues(columns, type, value) { /* eslint-disable-next-line no-bitwise */
 		return columns?.filter?.(c => c[type]).sort((a, b) => ((b === value) >> 0) - ((a === value) >> 0));
 	}

package/lib/cosmoz-omnitable-settings.js

@@ -232,7 +232,7 @@ const settingsStyles = `
 					position: absolute;
 					top: 1px;
 					right: -4px;
- 					background-color: var(--paper-checkbox-checked-color, var(--primary-color));
+ 					background-color: var(--cosmoz-omnitable-checkbox-checked-color, var(--primary-color));
 					width: 8px;
 					height: 8px;
 					border-radius: 100%;

package/lib/normalize-settings.js

@@ -1,7 +1,6 @@
 const byName = name => item => item.name === name;
 
 export const
-	columnSymbol = Symbol('column'),
 	normalizeSettings = (columns = [], settings = [], savedSettings = []) => {
 		const
 			cols = columns.filter(column => !settings.some(byName(column.name)) && !savedSettings.some(byName(column.name))),
@@ -20,8 +19,7 @@ export const
 					return {
 						...setting,
 						title: column.title,
-						minWidth: parseInt(column.minWidth, 10),
-						[columnSymbol]: column
+						minWidth: parseInt(column.minWidth, 10)
 					};
 				}),
 			...cols.map(column => {
@@ -32,8 +30,7 @@ export const
 					priority,
 					minWidth: parseInt(minWidth, 10),
 					width: parseInt(width, 10),
-					flex: parseInt(flex, 10),
-					[columnSymbol]: column
+					flex: parseInt(flex, 10)
 				};
 			})
 		];

package/lib/use-dom-columns.js

@@ -1,8 +1,8 @@
 import { useEffect, useState } from 'haunted';
 import { memooize } from './memoize';
-import { columnSymbol } from './normalize-settings';
 
 const
+	columnSymbol = Symbol('column'),
 	verifyColumnSetup = columns => {
 		let ok = true;
 		const columnNames = columns.map(c => c.name);
@@ -17,7 +17,7 @@ const
 		});
 
 		columns.forEach(column => {
-			if (columnNames.indexOf(name) === columnNames.lastIndexOf(name)) {
+			if (columnNames.indexOf(column.name) === columnNames.lastIndexOf(column.name)) {
 				return;
 			}
 			ok = false;
@@ -41,6 +41,7 @@ const
 			?	domColumns.filter(column => enabledColumns.includes(column.name))
 			: domColumns.filter(column => !column.disabled);
 
+		// eslint-disable-next-line max-lines-per-function
 		return columns.map(column => ({
 			name: column.name,
 			title: column.title,
@@ -66,14 +67,13 @@ const
 			renderGroup: column.renderGroup,
 			cellTitleFn: column.cellTitleFn,
 			getFilterFn: column.getFilterFn,
+			headerCellClass: column.headerCellClass,
 			cellClass: column.cellClass,
 
 			editable: column.editable,
 
 			values: column.values,
-			source: memooize((column, data) => column.externalValues || typeof column.values === 'function'
-				? column.values
-				: column.computeSource(column, data)),
+			source: memooize(column.computeSource),
 
 			// @deprecated
 			loading: column.loading,
@@ -105,29 +105,39 @@ const
 			rates: column.rates,
 			autodetect: column.autodetect,
 
+			// treenode columns
+			ownerTree: column.ownerTree,
+			keyProperty: column.keyProperty,
+
 			[columnSymbol]: column
 		}));
-	};
-
-export const useDOMColumns = (host, { enabledColumns }) => {
-	const
-		[columns, setColumns] = useState(() => domColumnsToConfig(host, { enabledColumns }));
+	},
 
-	useEffect(() => {
+	useDOMColumns = (host, { enabledColumns }) => {
 		const
-			slot = host.shadowRoot.querySelector('#columnsSlot'),
-			handler = () => {
-				host.suppressNextScrollReset();
-				setColumns(domColumnsToConfig(host, { enabledColumns }));
+			[columns, setColumns] = useState(() => domColumnsToConfig(host, { enabledColumns }));
+
+		useEffect(() => {
+			const
+				slot = host.shadowRoot.querySelector('#columnsSlot'),
+				handler = () => {
+					host.suppressNextScrollReset();
+					setColumns(domColumnsToConfig(host, { enabledColumns }));
+				};
+
+			slot.addEventListener('slotchange', handler);
+			host.addEventListener('cosmoz-column-prop-changed', handler);
+			return () => {
+				slot.removeEventListener('slotchange', handler);
+				host.removeEventListener('cosmoz-column-prop-changed', handler);
 			};
+		}, []);
+
+		return columns;
+	};
 
-		slot.addEventListener('slotchange', handler);
-		host.addEventListener('cosmoz-column-prop-changed', handler);
-		return () => {
-			slot.removeEventListener('slotchange', handler);
-			host.removeEventListener('cosmoz-column-prop-changed', handler);
-		};
-	}, []);
 
-	return columns;
+export {
+	columnSymbol,
+	useDOMColumns
 };

package/lib/use-fast-layout.js

@@ -1,33 +1,38 @@
-import { useMemo } from 'haunted';
+import { useEffect, useLayoutEffect, useMemo } from 'haunted';
 import { toCss } from './compute-layout';
 import { useResizableColumns } from './use-resizable-columns';
 import { useCanvasWidth } from './use-canvas-width';
 import { useTweenArray } from './use-tween-array';
 import { useLayout } from './use-layout';
-import { columnSymbol } from './normalize-settings';
+import { render } from 'lit-html';
 
 export const useFastLayout = ({ host, settings, setSettings, groupOnColumn, resizeSpeedFactor }) => {
 	const
 		canvasWidth = useCanvasWidth(host),
 		layout = useLayout({ canvasWidth, groupOnColumn, config: settings }),
 		tweenedlayout = useTweenArray(layout, resizeSpeedFactor),
-		layoutCss = useMemo(() => toCss(tweenedlayout, settings), [tweenedlayout]),
-
-		collapsedColumns = useMemo(() => Array.isArray(settings)
-			? settings.reduce((acc, column, index) =>
-				layout[index] != null
-					|| column.name === groupOnColumn?.name
-					|| column.disabled
-					? acc
-					: [...acc, column[columnSymbol]],
-			[])
-			: []
-		, [settings, layout]);
+		layoutCss = useMemo(() => toCss(tweenedlayout, settings), [tweenedlayout]);
 
 	useResizableColumns({ host, canvasWidth, layout, setSettings: update => setSettings(update(settings)) });
 
-	return {
-		layoutCss,
-		collapsedColumns
-	};
+	useLayoutEffect(() => render(layoutCss, host.$.layoutStyle), [layoutCss]);
+
+	// force iron-list to render when the omnitable becomes visible
+	useEffect(() => {
+		let lastWidth = 0;
+
+		const
+			onResize = ([entry]) => {
+				if (lastWidth === 0) {
+					requestAnimationFrame(() => host.$.groupedList.$.list._render());
+				}
+				lastWidth = entry.contentRect?.width;
+			},
+			observer = new ResizeObserver(onResize);
+
+		observer.observe(host);
+		return () => observer.unobserve(host);
+	}, []);
+
+	return layout;
 };

package/lib/use-omnitable.js

@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useState } from 'haunted';
-import { columnSymbol, normalizeSettings } from './normalize-settings';
+import { normalizeSettings } from './normalize-settings';
 import { useProcessedItems } from './use-processed-items';
 import { useFastLayout } from './use-fast-layout';
 import { useSavedSettings } from './use-saved-settings';
@@ -9,23 +9,68 @@ import { onItemChange } from './utils-data';
 
 // eslint-disable-next-line max-lines-per-function
 export const useOmnitable = host => {
-	const
-		{ enabledColumns, hashParam } = host,
+	const { enabledColumns, hashParam } = host,
 		columns = useDOMColumns(host, { enabledColumns }),
-		sortAndGroupOptions = useSortAndGroupOptions(columns, hashParam, host.sortOn, host.groupOn),
+		sortAndGroupOptions = useSortAndGroupOptions(
+			columns,
+			hashParam,
+			host.sortOn,
+			host.groupOn
+		),
 		{ groupOnColumn, groupOnDescending, sortOnColumn, descending } = sortAndGroupOptions,
 		{ data, resizeSpeedFactor, settingsId } = host,
 		// TODO: drop filterFunctions
-		{ processedItems, filters, setFilterState, numProcessedItems, filterFunctions, groupsCount } =
-			useProcessedItems({ data, columns, groupOnColumn, groupOnDescending, sortOnColumn, descending, hashParam }),
+		{
+			processedItems,
+			filters,
+			setFilterState,
+			numProcessedItems,
+			filterFunctions,
+			groupsCount
+		} = useProcessedItems({
+			data,
+			columns,
+			groupOnColumn,
+			groupOnDescending,
+			sortOnColumn,
+			descending,
+			hashParam
+		}),
 		[settings, setSettings] = useState([]),
-		{ savedSettings, onSettingsSave, onSettingsReset, hasChangedSettings } = useSavedSettings(settingsId, settings, setSettings),
-		normalizedSettings = useMemo(() => normalizeSettings(columns, settings, savedSettings), [columns, settings, savedSettings]),
-		normalizedColumns = useMemo(() => normalizedSettings.map(s => s[columnSymbol]), [columns, ...normalizedSettings.map(s => s.name)]),
-		{ layoutCss, collapsedColumns } = useFastLayout({ host, settings: normalizedSettings, setSettings, groupOnColumn, resizeSpeedFactor }),
+		{ savedSettings, onSettingsSave, onSettingsReset, hasChangedSettings } =
+			useSavedSettings(settingsId, settings, setSettings),
+		normalizedSettings = useMemo(
+			() => normalizeSettings(columns, settings, savedSettings),
+			[columns, settings, savedSettings]
+		),
+		normalizedColumns = useMemo(
+			() => normalizedSettings.map(s => columns.find(c => c.name === s.name)),
+			[columns, ...normalizedSettings.map(s => s.name)]
+		),
+		layout = useFastLayout({
+			host,
+			settings: normalizedSettings,
+			setSettings,
+			groupOnColumn,
+			resizeSpeedFactor
+		}),
+		collapsedColumns = useMemo(
+			() => normalizedSettings.reduce((acc, column, index) =>
+				layout[index] != null ||
+						column.name === groupOnColumn?.name ||
+						column.disabled
+					? acc
+					: [...acc, columns.find(c => c.name === column.name)],
+			[]),
+			[columns, normalizedSettings, layout]
+		),
 		hasHiddenFilter = useMemo(
-			() => [groupOnColumn, ...collapsedColumns, ...normalizedSettings.filter(s => s.disabled)]
-				.some(column => column && Object.keys(filterFunctions).includes(column.name)),
+			() =>
+				[
+					groupOnColumn,
+					...collapsedColumns,
+					...normalizedSettings.filter(s => s.disabled)
+				].some(column => column && Object.keys(filterFunctions).includes(column.name)),
 			[filterFunctions, normalizedSettings, collapsedColumns]
 		);
 
@@ -34,7 +79,6 @@ export const useOmnitable = host => {
 
 		...sortAndGroupOptions,
 
-		layoutCss,
 		setSettings,
 		normalizedSettings,
 		normalizedColumns,
@@ -45,7 +89,10 @@ export const useOmnitable = host => {
 		hasChangedSettings,
 		filters,
 		setFilterState,
-		onItemChange: useCallback((column, item) => value => onItemChange(host, column, item, value), []),
+		onItemChange: useCallback(
+			(column, item) => value => onItemChange(host, column, item, value),
+			[]
+		),
 		numProcessedItems,
 		groupsCount,
 		sortedFilteredGroupedItems: processedItems

package/lib/use-processed-items.js

@@ -1,7 +1,7 @@
 import { useCallback, useMemo } from 'haunted';
 import { genericSorter } from './generic-sorter';
 import { invoke } from './invoke';
-import { columnSymbol } from './normalize-settings';
+import { columnSymbol } from './use-dom-columns';
 import { useHashState } from './use-hash-state';
 
 const
@@ -14,7 +14,7 @@ const
 
 		Object.entries(changes).forEach(([key, value]) => {
 			column[columnSymbol][key] = value;
-			column[columnSymbol].dispatchEvent(new CustomEvent(`${ kebab(key) }-changed`, { bubbles: true, value }));
+			column[columnSymbol].dispatchEvent(new CustomEvent(`${ kebab(key) }-changed`, { bubbles: true, detail: { value }}));
 		});
 	};
 
@@ -78,12 +78,12 @@ export const useProcessedItems = ({ data, columns, groupOnColumn, groupOnDescend
 		// todo: extract function
 		processedItems = useMemo(() => {
 			if (!groupOnColumn && sortOnColumn != null && sortOnColumn.sortOn != null) {
-				return filteredItems.slice().sort(sortBy(a => sortOnColumn.getComparableValue(a, sortOnColumn.sortOn, sortOnColumn), descending));
+				return filteredItems.slice().sort(sortBy(a => sortOnColumn.getComparableValue({ ...sortOnColumn, valuePath: sortOnColumn.sortOn }, a), descending));
 			}
 
 			if (groupOnColumn != null && groupOnColumn.groupOn != null) {
 				const groupedResults = filteredItems.reduce((acc, item) => {
-					const gval = groupOnColumn.getComparableValue(item, groupOnColumn.groupOn, groupOnColumn);
+					const gval = groupOnColumn.getComparableValue({ ...groupOnColumn, valuePath: groupOnColumn.groupOn }, item);
 
 					if (gval === undefined) {
 						return acc;
@@ -104,7 +104,8 @@ export const useProcessedItems = ({ data, columns, groupOnColumn, groupOnDescend
 					return acc;
 				}, []);
 
-				groupedResults.sort(sortBy(a => groupOnColumn.getComparableValue(a.items[0], groupOnColumn.groupOn, groupOnColumn), groupOnDescending));
+				groupedResults.sort(sortBy(
+					a => groupOnColumn.getComparableValue({ ...groupOnColumn, valuePath: groupOnColumn.groupOn }, a.items[0]), groupOnDescending));
 
 				if (!sortOnColumn) {
 					return groupedResults;
@@ -113,7 +114,7 @@ export const useProcessedItems = ({ data, columns, groupOnColumn, groupOnDescend
 				return groupedResults
 					.filter(group => Array.isArray(group.items))
 					.map(group => {
-						group.items.sort(sortBy(a => sortOnColumn.getComparableValue(a, sortOnColumn.sortOn, sortOnColumn), descending));
+						group.items.sort(sortBy(a => sortOnColumn.getComparableValue({ ...sortOnColumn, valuePath: sortOnColumn.sortOn }, a), descending));
 						return group;
 					});
 			}

package/lib/use-resizable-columns.js

@@ -1,5 +1,4 @@
 import { useEffect, useRef } from 'haunted';
-import { columnSymbol } from './normalize-settings';
 
 export const useResizableColumns = ({ host, canvasWidth, layout, setSettings }) => {
 	const onColumnResizeRef = useRef();
@@ -7,7 +6,7 @@ export const useResizableColumns = ({ host, canvasWidth, layout, setSettings })
 	onColumnResizeRef.current = ev => setSettings(config => {
 		const
 			{ detail: { newWidth, column }} = ev,
-			columnIndex = config.findIndex(c => c[columnSymbol] === column),
+			columnIndex = config.findIndex(c => c.name === column.name),
 			newConfig = [],
 			maxPriority = config.reduce((p, c) => Math.max(p, c.priority), -Infinity);
 

package/lib/utils-amount.js

@@ -45,7 +45,7 @@ export const
 		return lNumber === valAmount ? amount : lAmount;
 	},
 
-	getComparableValue = (item, valuePath, { rates } = {}) => {
+	getComparableValue = ({ valuePath, rates }, item) => {
 		if (item == null) {
 			return;
 		}
@@ -70,15 +70,15 @@ export const
 	},
 
 	applySingleFilter = (column, filter) => item => {
-		const value = getComparableValue(item, column.valuePath, column);
+		const value = getComparableValue(column, item);
 
 		if (value == null) {
 			return false;
 		}
 
 		const
-			min = getComparableValue(filter, 'min', column),
-			max = getComparableValue(filter, 'max', column);
+			min = getComparableValue({ ...column, valuePath: 'min' }, filter),
+			max = getComparableValue({ ...column, valuePath: 'max' }, filter);
 
 		return !(value < min || value > max);
 	},

package/lib/utils-data.js

@@ -1,5 +1,5 @@
 import { get, set } from '@polymer/polymer/lib/utils/path';
-import { columnSymbol } from './normalize-settings';
+import { columnSymbol } from './use-dom-columns';
 
 export const
 	valuesFrom = (data, valuePath) => data
@@ -8,6 +8,11 @@ export const
 			value != null && self.indexOf(value) === index
 		),
 
+	defaultComputeSource = ({ externalValues, values, valuePath }, data) =>
+		externalValues || typeof values === 'function'
+			? values
+			: valuesFrom(data, valuePath),
+
 	onItemChange = (host, column, item, value) => {
 		const
 			{ valuePath } = column,

package/lib/utils-date.js

@@ -56,11 +56,11 @@ export const
 	/**
 	 * Get comparable number from date
 	 *
-	 * @param	 {Object} item			 Item to be processed
 	 * @param	 {String} valuePath	 Property path
+	 * @param	 {Object} item			 Item to be processed
 	 * @returns {Number|void} Valid value or void
 	 */
-	getComparableValue = (item, valuePath) => {
+	getComparableValue = ({ valuePath }, item) => {
 		if (item == null) {
 			return;
 		}
@@ -100,8 +100,8 @@ export const
 			return date;
 		}
 
-		const comparableDate = getComparableValue(date),
-			comparableLDate = getComparableValue(lDate),
+		const comparableDate = getComparableValue({}, date),
+			comparableLDate = getComparableValue({}, lDate),
 			limitedValue = limitFunc(comparableDate, comparableLDate);
 		return limitedValue === comparableDate ? date : lDate;
 	},
@@ -188,15 +188,15 @@ export const
 	},
 
 	applySingleFilter = (column, filter) => item => {
-		const value = getComparableValue(item, column.valuePath, column);
+		const value = getComparableValue(column, item);
 
 		if (value == null) {
 			return false;
 		}
 
 		const
-			min = getComparableValue(filter, 'min', column),
-			max = getComparableValue(filter, 'max', column);
+			min = getComparableValue({ ...column, valuePath: 'min' }, filter),
+			max = getComparableValue({ ...column, valuePath: 'max' }, filter);
 
 		return !(value < min || value > max);
 	};

package/lib/utils-number.js

@@ -50,7 +50,7 @@ export const
 		return string;
 	},
 
-	getComparableValue = (item, valuePath, { maximumFractionDigits } = {}) => {
+	getComparableValue = ({ valuePath, maximumFractionDigits }, item) => {
 		if (item == null) {
 			return;
 		}
@@ -98,15 +98,15 @@ export const
 	},
 
 	applySingleFilter = (column, filter) => item => {
-		const value = getComparableValue(item, column.valuePath, column);
+		const value = getComparableValue(column, item);
 
 		if (value == null) {
 			return false;
 		}
 
 		const
-			min = getComparableValue(filter, 'min', column),
-			max = getComparableValue(filter, 'max', column);
+			min = getComparableValue({ ...column, valuePath: 'min' }, filter),
+			max = getComparableValue({ ...column, valuePath: 'max' }, filter);
 
 		return !(value < min || value > max);
 	};

package/lib/utils-time.js

@@ -67,7 +67,7 @@ export const
 		return toLocalISOString(date).slice(11, 19);
 	},
 
-	getComparableValue = (item, valuePath) => {
+	getComparableValue = ({ valuePath }, item) => {
 		if (item == null) {
 			return;
 		}
@@ -83,15 +83,15 @@ export const
 	},
 
 	applySingleFilter = (column, filter) => item => {
-		const value = getComparableValue(item, column.valuePath, column);
+		const value = getComparableValue(column, item);
 
 		if (value == null) {
 			return false;
 		}
 
 		const
-			min = getComparableValue(filter, 'min', column),
-			max = getComparableValue(filter, 'max', column);
+			min = getComparableValue({ ...column, valuePath: 'min' }, filter),
+			max = getComparableValue({ ...column, valuePath: 'max' }, filter);
 
 		return !(value < min || value > max);
 	},

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-omnitable",
-	"version": "8.0.0-beta.1",
+	"version": "8.0.0-beta.10",
 	"description": "[![Build Status](https://travis-ci.org/Neovici/cosmoz-omnitable.svg?branch=master)](https://travis-ci.org/Neovici/cosmoz-omnitable)",
 	"keywords": [
 		"web-components"
@@ -64,7 +64,6 @@
 		"@polymer/iron-icons": "^3.0.0",
 		"@polymer/iron-label": "^3.0.0",
 		"@polymer/paper-button": "^3.0.0",
-		"@polymer/paper-checkbox": "^3.0.0",
 		"@polymer/paper-dropdown-menu": "^3.2.0",
 		"@polymer/paper-icon-button": "^3.0.0",
 		"@polymer/paper-input": "^3.2.0",