@neovici/cosmoz-omnitable 8.11.1 → 8.14.0

package/README.md

@@ -2,6 +2,5 @@ cosmoz-omnitable
 =================
 
 [![Build Status](https://github.com/Neovici/cosmoz-omnitable/workflows/Github%20CI/badge.svg)](https://github.com/Neovici/cosmoz-omnitable/actions?workflow=Github+CI)
-[![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)

package/cosmoz-omnitable-header-row.js

@@ -1,7 +1,6 @@
 import { html, component } from 'haunted';
 import { repeat } from 'lit-html/directives/repeat';
 import './lib/cosmoz-omnitable-resize-nub';
-import sort from './lib/cosmoz-omnitable-sort';
 
 const /* eslint-disable-next-line max-lines-per-function */
 	renderHeaderRow = ({
@@ -28,7 +27,6 @@ const /* eslint-disable-next-line max-lines-per-function */
 							(state) => setFilterState(column.name, state),
 							column.source(column, data)
 						),
-						sort(column.name),
 					]}
 				</div>`,
 				html`<cosmoz-omnitable-resize-nub

package/cosmoz-omnitable-styles.js

@@ -1,119 +1,80 @@
 /* eslint-disable max-lines */
 import { tagged as css } from '@neovici/cosmoz-utils';
 const checkbox = css`
-		.checkbox {
-			box-sizing: border-box;
-			width: 18px;
-			height: 18px;
-			background: transparent;
-			border-radius: 4px;
-			appearance: none;
-			-webkit-appearance: none;
-			outline: none;
-			position: relative;
-			user-select: none;
-			cursor: pointer;
-			display: inline-block;
-			box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.16) inset;
-			-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-			vertical-align: middle;
-			transition: background-color 140ms;
-			margin: 1px 12px;
-			flex: none;
-		}
-
-		.checkbox:checked {
-			background-color: var(
-				--cosmoz-omnitable-checkbox-checked-color,
-				var(--primary-color)
-			);
-			box-shadow: none;
-		}
-
-		.checkbox:checked::before {
-			content: '';
-			position: absolute;
-			box-sizing: content-box;
-			width: 5px;
-			height: 10px;
-			border: 2.4px solid #fff;
-			border-top: none;
-			border-left: none;
-			transform-origin: 5px 10px;
-			transform: translate(3px) rotate(45deg);
-		}
-
-		.checkbox::after {
-			content: '';
-			display: block;
-			bottom: -5px;
-			left: -5px;
-			right: -5px;
-			top: -5px;
-		}
-
-		.checkbox:hover {
-			box-shadow: 0 0 0 2px rgba(0, 0, 0, 1) inset, 0 0 2px 6px #2021240f;
-		}
-
-		.checkbox:checked:hover {
-			box-shadow: 0 0 2px 6px #2021240f;
-		}
-
-		.checkbox:indeterminate::before {
-			content: '';
-			position: absolute;
-			width: 10px;
-			height: 2px;
-			left: 4px;
-			top: 8px;
-			background-color: var(
-				--cosmoz-omnitable-checkbox-checked-color,
-				var(--primary-color)
-			);
-		}
-	`,
-	sort = css`
-		.sort {
-			display: inline-flex;
-			width: 10px;
-			cursor: pointer;
-			align-items: center;
-			margin-top: 18px;
-			overflow: hidden;
-			flex: none;
-			background: none;
-			border: none;
-			outline: none;
-			color: inherit;
-			padding: 0;
-		}
-		.sort svg {
-			display: block;
-		}
-		.sort[data-sort] {
-			color: var(
-				--cosmoz-omnitable-checkbox-checked-color,
-				var(--primary-color)
-			);
-		}
-		.sort:not([data-sort='desc']) {
-			transform: scaleY(-1);
-		}
-		:not(:hover) > * > .sort:not([data-sort]) {
-			display: none;
-		}
-		.header-cell {
-			display: inline-flex;
-			position: relative;
-		}
-		.header-cell :not(.sort) {
-			min-width: 0;
-			flex: auto;
-		}
-	`;
-
-export { checkbox, sort };
+	.checkbox {
+		box-sizing: border-box;
+		width: 18px;
+		height: 18px;
+		background: transparent;
+		border-radius: 4px;
+		appearance: none;
+		-webkit-appearance: none;
+		outline: none;
+		position: relative;
+		user-select: none;
+		cursor: pointer;
+		display: inline-block;
+		box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.16) inset;
+		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+		vertical-align: middle;
+		transition: background-color 140ms;
+		margin: 1px 12px;
+		flex: none;
+	}
+
+	.checkbox:checked {
+		background-color: var(
+			--cosmoz-omnitable-checkbox-checked-color,
+			var(--primary-color)
+		);
+		box-shadow: none;
+	}
+
+	.checkbox:checked::before {
+		content: '';
+		position: absolute;
+		box-sizing: content-box;
+		width: 5px;
+		height: 10px;
+		border: 2.4px solid #fff;
+		border-top: none;
+		border-left: none;
+		transform-origin: 5px 10px;
+		transform: translate(3px) rotate(45deg);
+	}
+
+	.checkbox::after {
+		content: '';
+		display: block;
+		bottom: -5px;
+		left: -5px;
+		right: -5px;
+		top: -5px;
+	}
+
+	.checkbox:hover {
+		box-shadow: 0 0 0 2px rgba(0, 0, 0, 1) inset, 0 0 2px 6px #2021240f;
+	}
+
+	.checkbox:checked:hover {
+		box-shadow: 0 0 2px 6px #2021240f;
+	}
+
+	.checkbox:indeterminate::before {
+		content: '';
+		position: absolute;
+		width: 10px;
+		height: 2px;
+		left: 4px;
+		top: 8px;
+		background-color: var(
+			--cosmoz-omnitable-checkbox-checked-color,
+			var(--primary-color)
+		);
+	}
+`;
+
+export { checkbox };
 
 export default `<style>
 	:host {
@@ -387,7 +348,7 @@ export default `<style>
 	}
 
 	.itemRow[selected] {
-		background-color: var(--cosmoz-omnitable-selection-color, rgb(195, 212, 248)) !important;
+		background-color: var(--cosmoz-omnitable-selection-color, rgb(195, 212, 248));
 		@apply --cosmoz-omnitable-selected-row;
 	}
 
@@ -520,5 +481,4 @@ export default `<style>
 	.expand:hover, .fold:hover {
 		color: #000;
 	}
-	${sort}
 </style>`;

package/cosmoz-omnitable.js

@@ -15,7 +15,6 @@ import './cosmoz-omnitable-group-row';
 import './cosmoz-omnitable-columns';
 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 } from 'lit-html';
@@ -50,7 +49,7 @@ class Omnitable extends hauntedPolymer(useOmnitable)(mixin({ isEmpty }, translat
 				<input class="checkbox all" type="checkbox" checked="[[ _allSelected ]]" on-input="_onAllCheckboxChange" disabled$="[[ !_dataIsValid ]]" />
 				<cosmoz-omnitable-header-row
 					data="[[ data ]]"
-					columns="[[ normalizedColumns ]]"
+					columns="[[ columns ]]"
 					filters="[[ filters ]]"
 					group-on-column="[[ groupOnColumn ]]"
 					set-filter-state="[[ setFilterState ]]"
@@ -96,11 +95,11 @@ class Omnitable extends hauntedPolymer(useOmnitable)(mixin({ isEmpty }, translat
 					>
 						<template slot="templates" data-type="item">
 							<div class="item-row-wrapper">
-								<div selected$="[[ selected ]]" class="itemRow">
+								<div selected$="[[ selected ]]" part="itemRow itemRow-[[ index ]]" data-index$="[[ index ]]" class="itemRow">
 									<input class="checkbox" type="checkbox" checked="[[ selected ]]" on-input="_onCheckboxChange" disabled$="[[ !_dataIsValid ]]" />
-									<cosmoz-omnitable-item-row columns="[[ normalizedColumns ]]"
+									<cosmoz-omnitable-item-row columns="[[ columns ]]"
 										selected="[[ selected ]]" expanded="{{ expanded }}" item="[[ item ]]" group-on-column="[[ groupOnColumn ]]"
-										on-item-change="[[ onItemChange ]]">
+										on-item-change="[[ onItemChange ]]" on-click="onItemClick">
 									</cosmoz-omnitable-item-row>
 									<paper-icon-button
 										class="expand"
@@ -132,7 +131,7 @@ class Omnitable extends hauntedPolymer(useOmnitable)(mixin({ isEmpty }, translat
 				</div>
 			</div>
 			<div class="footer">
-				<div class="footer-controls">
+				<div class="footer-controls" part="footer-controls">
 					<cosmoz-autocomplete
 						label="[[ _('Group on', t) ]] [[ _computeSortDirection(groupOnDescending, t) ]]" placeholder="[[ _('No grouping', t) ]]"
 						source="[[ _onCompleteValues(columns, 'groupOn', groupOnColumn) ]]" value="[[ groupOnColumn ]]" limit="1" text-property="title"
@@ -546,6 +545,21 @@ class Omnitable extends hauntedPolymer(useOmnitable)(mixin({ isEmpty }, translat
 			value && close(); /* eslint-disable-line no-unused-expressions */
 		};
 	}
+	onItemClick(e){
+		const path = e.composedPath(),
+			hasLinks = path.slice(0, path.indexOf(e.currentTarget))
+				.find(e => e.matches?.('a'));
+
+		this.dispatchEvent(new window.CustomEvent('omnitable-item-click', {
+			bubbles: true,
+			composed: true,
+			detail: {
+				item: e.model.item,
+				index: e.model.index,
+				hasLinks
+			}
+		}));
+	}
 }
 customElements.define('cosmoz-omnitable', Omnitable);
 

package/lib/settings/cosmoz-omnitable-group.js

@@ -2,43 +2,50 @@ import { html } from 'haunted';
 import { ifDefined } from 'lit-html/directives/if-defined';
 import { triangle } from '../icons';
 
+export const render = ({ columns, on, descending, setOn, setDescending }) =>
+	columns?.map(
+		(c) =>
+			html`<button
+				class="sg"
+				title=${c.title}
+				data-on=${ifDefined(
+					(c.name === on && (descending ? 'desc' : 'asc')) || undefined
+				)}
+				@click=${(e) => {
+					const on = e.currentTarget?.dataset.on;
+					if (!on) {
+						setOn(c.name);
+						setDescending(false);
+					}
+					if (on === 'asc') {
+						setDescending(true);
+					} else if (on === 'desc') {
+						setOn();
+						setDescending(false);
+					}
+				}}
+			>
+				<span>${c.title}</span> ${triangle}
+			</button>`
+	);
+
 export default () => html`
 	<sort-and-group-consumer
-		class="groups"
+		class="sgs"
 		.render=${({
 			columns,
+			groupOn: on,
+			setGroupOn: setOn,
 			groupOnDescending: descending,
-			groupOn,
-			setGroupOn,
-			setGroupOnDescending,
-		} = {}) => {
-			const items = columns?.filter?.((c) => c['groupOn']);
-			return items?.map(
-				(c) =>
-					html`<button
-						class="group"
-						title=${c.title}
-						data-group=${ifDefined(
-							(c.name === groupOn && (descending ? 'desc' : 'asc')) || undefined
-						)}
-						@click=${(e) => {
-							const group = e.currentTarget?.dataset.group;
-							if (!group) {
-								setGroupOn(c.name);
-								setGroupOnDescending(false);
-							}
-							if (group === 'asc') {
-								setGroupOnDescending(true);
-							} else if (group === 'desc') {
-								setGroupOn();
-								setGroupOnDescending(false);
-							}
-						}}
-					>
-						<span>${c.title}</span> ${triangle}
-					</button>`
-			);
-		}}
+			setGroupOnDescending: setDescending,
+		} = {}) =>
+			render({
+				columns: columns?.filter?.((c) => c['groupOn']),
+				on,
+				setOn,
+				descending,
+				setDescending,
+			})}
 	>
 	</sort-and-group-consumer>
 `;

package/lib/settings/cosmoz-omnitable-settings.js

@@ -4,7 +4,7 @@ import { _ } from '@neovici/cosmoz-i18next';
 import { isEmpty } from '@neovici/cosmoz-utils/lib/template';
 import { defaultPlacement } from '@neovici/cosmoz-dropdown';
 import '@neovici/cosmoz-collapse';
-import sort from '../cosmoz-omnitable-sort';
+import sort from './cosmoz-omnitable-sort';
 import group from './cosmoz-omnitable-group';
 import style, { dropdown as dropdownStyle } from './style.css';
 import useSettingsUi from './use-settings-ui';
@@ -44,7 +44,6 @@ const placement = ['bottom-right', ...defaultPlacement],
 					?has-filter=${!isEmpty(filters[column.name]?.filter)}
 					>${column.title}</label
 				>
-				${sort(column.name)}
 				<input
 					class="checkbox"
 					type="checkbox"
@@ -86,8 +85,18 @@ const placement = ['bottom-right', ...defaultPlacement],
 						${_('Columns')} ${arrow}
 					</div>
 					<cosmoz-collapse ?opened=${opened.columns}>
-						<div class="list">${settings?.map(renderItem(thru))}</div>
+						<div class="list">${settings.columns?.map(renderItem(thru))}</div>
 					</cosmoz-collapse>
+
+					<div
+						class="heading"
+						?data-opened=${opened.sort}
+						@click=${() => setOpened((c) => ({ ...c, sort: !c.sort }))}
+					>
+						${_('Sort on')} ${arrow}
+					</div>
+					<cosmoz-collapse ?opened=${opened.sort}> ${sort()} </cosmoz-collapse>
+
 					<div
 						class="heading"
 						?data-opened=${opened.group}

package/lib/settings/cosmoz-omnitable-sort.js

@@ -0,0 +1,23 @@
+import { html } from 'haunted';
+import { render } from './cosmoz-omnitable-group';
+
+export default () => html`
+	<sort-and-group-consumer
+		class="sgs"
+		.render=${({
+			columns,
+			sortOn: on,
+			setSortOn: setOn,
+			descending,
+			setDescending,
+		} = {}) =>
+			render({
+				columns: columns?.filter?.((c) => c['sortOn']),
+				on,
+				setOn,
+				descending,
+				setDescending,
+			})}
+	>
+	</sort-and-group-consumer>
+`;

package/lib/settings/normalize.js

@@ -1,6 +1,15 @@
+/* eslint-disable import/group-exports */
+import { props } from '@neovici/cosmoz-utils/lib/object';
+
+export const sgProps = ['sortOn', 'descending', 'groupOn', 'groupOn'];
+
 const byName = (name) => (item) => item.name === name;
 
-export default (columns = [], settings = [], savedSettings = []) => {
+export const normalizeColumns = (
+	columns = [],
+	settings = [],
+	savedSettings = []
+) => {
 	const cols = columns.filter(
 			(column) =>
 				!settings.some(byName(column.name)) &&
@@ -38,3 +47,28 @@ export default (columns = [], settings = [], savedSettings = []) => {
 		}),
 	];
 };
+
+export const normalizeStore = (settings, current) => ({
+	...current,
+	...props(sgProps)(settings),
+	columns: settings.columns?.map(
+		props(['name', 'priority', 'width', 'flex', 'disabled'])
+	),
+});
+
+export default ({ columns, settings, savedSettings, initial }) => {
+	const init = Object.fromEntries(
+		sgProps.flatMap((k) => (initial[k] != null ? [[k, initial[k]]] : []))
+	);
+
+	return {
+		...init,
+		...props(sgProps)(savedSettings),
+		...settings,
+		columns: normalizeColumns(
+			columns,
+			settings?.columns,
+			savedSettings?.columns
+		),
+	};
+};

package/lib/settings/style.css.js

@@ -1,5 +1,5 @@
 import { tagged as css } from '@neovici/cosmoz-utils';
-import { checkbox, sort as sortStyle } from '../../cosmoz-omnitable-styles';
+import { checkbox } from '../../cosmoz-omnitable-styles';
 
 export default css`
 	:host {
@@ -106,14 +106,6 @@ export default css`
 		margin: 4px 0;
 	}
 
-	${sortStyle}
-	.sort {
-		order: initial;
-		margin: 0;
-		width: auto;
-		padding: 8px;
-	}
-
 	.buttons {
 		display: flex;
 		gap: 8px;
@@ -145,7 +137,8 @@ export default css`
 		color: inherit;
 		text-decoration: underline;
 	}
-	.groups {
+	/* sortgroups */
+	.sgs {
 		display: grid;
 		column-gap: 7px;
 		row-gap: 8px;
@@ -153,7 +146,7 @@ export default css`
 		grid-template-rows: auto;
 		padding: 14px;
 	}
-	.group {
+	.sg {
 		border: 1px solid rgba(0, 0, 0, 0.2);
 		border-radius: 2px;
 		font-size: 13px;
@@ -166,25 +159,25 @@ export default css`
 		align-items: center;
 		justify-content: center;
 	}
-	.group span {
+	.sg span {
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
-	.group[data-group] {
+	.sg[data-on] {
 		background: var(
 			--cosmoz-omnitable-checkbox-checked-color,
 			var(--primary-color)
 		);
 	}
-	.group svg {
+	.sg svg {
 		margin-left: 4px;
 		flex: none;
 		vertical-align: middle;
 	}
-	.group:not([data-group]) svg {
+	.sg:not([data-on]) svg {
 		display: none;
 	}
-	.group:not([data-group='desc']) svg {
+	.sg:not([data-on='desc']) svg {
 		transform: scaleY(-1);
 	}
 `;

package/lib/settings/use-saved-settings.js

@@ -1,22 +1,21 @@
 import { useCallback, useMemo, useState } from 'haunted';
-import { props } from '@neovici/cosmoz-utils/lib/object';
-
-const storagePrefix = 'omnitable-';
-
+import { normalizeStore } from './normalize';
+
+const storagePrefix = 'omnitable-',
+	read = (settingsId) => {
+		if (!settingsId) {
+			return [];
+		}
+		try {
+			return JSON.parse(localStorage.getItem(storagePrefix + settingsId)) ?? [];
+		} catch (e) {
+			return [];
+		}
+	};
+// eslint-disable-next-line max-lines-per-function
 export default (settingsId, settings, setSettings) => {
-	const
-		[counter, setCounter] = useState(0),
-		savedSettings = useMemo(() => {
-			if (!settingsId) {
-				return [];
-			}
-
-			try {
-				return JSON.parse(localStorage.getItem(storagePrefix + settingsId)) ?? [];
-			} catch (e) {
-				return [];
-			}
-		}, [settingsId, counter]);
+	const [counter, setCounter] = useState(0),
+		savedSettings = useMemo(() => read(settingsId), [settingsId, counter]);
 
 	return {
 		settingsId,
@@ -28,28 +27,32 @@ export default (settingsId, settings, setSettings) => {
 			}
 
 			try {
-				localStorage.setItem(storagePrefix + settingsId, JSON.stringify(settings.map(props(['name', 'priority', 'width', 'flex', 'disabled']))));
-				setSettings([]);
-				setCounter(counter => counter + 1);
+				const current = read(settingsId);
+				localStorage.setItem(
+					storagePrefix + settingsId,
+					JSON.stringify(normalizeStore(settings, current))
+				);
+				setSettings();
+				setCounter((counter) => counter + 1);
 			} catch (e) {
 				// eslint-disable-next-line no-console
 				console.error(e);
 			}
 		}, [settings]),
 
-		onReset: e => {
-			setSettings([]);
+		onReset: (e) => {
+			setSettings();
 
 			if (e.shiftKey) {
 				try {
 					localStorage.removeItem(storagePrefix + settingsId);
-					setCounter(counter => counter + 1);
+					setCounter((counter) => counter + 1);
 				} catch (err) {
 					// ignore error
 				}
 			}
 		},
 
-		hasChanges: settings.length !== 0
+		hasChanges: settings != null,
 	};
 };

package/lib/settings/use-settings-ui.js

@@ -10,7 +10,17 @@ const parseIndex = (str) => {
 export default (host) => {
 	const { config } = host,
 		{ settings, setSettings } = config,
-		meta = useMeta({ settings, setSettings });
+		meta = useMeta({
+			settings: settings.columns,
+			setSettings: useCallback(
+				(columns) =>
+					setSettings((cfg) => ({
+						...cfg,
+						columns,
+					})),
+				[setSettings]
+			),
+		});
 
 	return {
 		...config,

package/lib/settings/use-settings.js

@@ -3,30 +3,38 @@ import { useMemo, useState } from 'haunted';
 import useSavedSettings from './use-saved-settings';
 import normalize from './normalize';
 
-export default ({ settingsId, columns }) => {
-	const [settings, setSettings] = useState([]),
-		[opened, setOpened] = useState({ columns: true, group: true }),
-		{ savedSettings, ...thru } = useSavedSettings(
+export default ({ settingsId, ...thru }) => {
+	const [settings, setSettings] = useState(),
+		[opened, setOpened] = useState({ columns: true, sort: true }),
+		{ savedSettings, ...rest } = useSavedSettings(
 			settingsId,
 			settings,
 			setSettings
 		),
+		{ columns } = thru,
 		normalizedSettings = useMemo(
-			() => normalize(columns, settings, savedSettings),
-			[columns, settings, savedSettings]
+			() =>
+				normalize({
+					settings,
+					savedSettings,
+					...thru,
+				}),
+			[settings, savedSettings, ...Object.values(thru)]
 		),
 		normalizedColumns = useMemo(
-			() => normalizedSettings.map(s => columns.find(c => c.name === s.name)),
-			[columns, ...normalizedSettings.map(s => s.name)]
+			() =>
+				normalizedSettings.columns.map((s) =>
+					columns.find((c) => c.name === s.name)
+				),
+			[columns, ...normalizedSettings.columns.map((s) => s.name)]
 		);
 
 	return {
-		...thru,
+		...rest,
 		opened,
 		setOpened,
 		settings: normalizedSettings,
-		normalizedColumns,
+		columns: normalizedColumns,
 		setSettings,
 	};
 };
-

package/lib/use-fast-layout.js

@@ -9,9 +9,9 @@ import { render } from 'lit-html';
 export const useFastLayout = ({ host, settings, setSettings, groupOnColumn, resizeSpeedFactor }) => {
 	const
 		canvasWidth = useCanvasWidth(host),
-		layout = useLayout({ canvasWidth, groupOnColumn, config: settings }),
+		layout = useLayout({ canvasWidth, groupOnColumn, config: settings.columns }),
 		tweenedlayout = useTweenArray(layout, resizeSpeedFactor),
-		layoutCss = useMemo(() => toCss(tweenedlayout, settings), [tweenedlayout]);
+		layoutCss = useMemo(() => toCss(tweenedlayout, settings.columns), [tweenedlayout]);
 
 	useResizableColumns({ host, canvasWidth, layout, setSettings: update => setSettings(update(settings)) });
 

package/lib/use-omnitable.js

@@ -8,12 +8,14 @@ import { onItemChange } from './utils-data';
 
 // eslint-disable-next-line max-lines-per-function
 export const useOmnitable = (host) => {
-	const { enabledColumns, hashParam } = host,
-		columns = useDOMColumns(host, { enabledColumns }),
-		sortAndGroupOptions = useSortAndGroupOptions(columns, hashParam, host),
+	const { enabledColumns, hashParam, settingsId } = host,
+		_columns = useDOMColumns(host, { enabledColumns }),
+		settingS = useSettings({ columns: _columns, settingsId, initial: host }),
+		{ settings, setSettings, columns } = settingS,
+		sortAndGroupOptions = useSortAndGroupOptions(columns, hashParam, settings, setSettings),
 		{ groupOnColumn, groupOnDescending, sortOnColumn, descending } =
 			sortAndGroupOptions,
-		{ data, resizeSpeedFactor, settingsId } = host,
+		{ data, resizeSpeedFactor } = host,
 		// TODO: drop filterFunctions
 		{
 			processedItems,
@@ -31,8 +33,6 @@ export const useOmnitable = (host) => {
 			descending,
 			hashParam,
 		}),
-		settingsOpts = useSettings({ settingsId, columns }),
-		{ settings, setSettings, normalizedColumns } = settingsOpts,
 		layout = useFastLayout({
 			host,
 			settings,
@@ -42,7 +42,7 @@ export const useOmnitable = (host) => {
 		}),
 		collapsedColumns = useMemo(
 			() =>
-				settings.reduce(
+				settings.columns.reduce(
 					(acc, column, index) =>
 						layout[index] != null ||
 						column.name === groupOnColumn?.name ||
@@ -58,7 +58,7 @@ export const useOmnitable = (host) => {
 				[
 					groupOnColumn,
 					...collapsedColumns,
-					...settings.filter((s) => s.disabled),
+					...settings.columns.filter((s) => s.disabled),
 				].some(
 					(column) =>
 						column && Object.keys(filterFunctions).includes(column.name)
@@ -67,12 +67,12 @@ export const useOmnitable = (host) => {
 		),
 		settingsConfig = useMemo(
 			() => ({
-				...settingsOpts,
+				...settingS,
 				collapsed: collapsedColumns,
 				badge: hasHiddenFilter,
 				filters,
 			}),
-			[settingsOpts, collapsedColumns, hasHiddenFilter, filters]
+			[settingS, collapsedColumns, hasHiddenFilter, filters]
 		);
 
 	useEffect(() => {
@@ -103,7 +103,6 @@ export const useOmnitable = (host) => {
 		...sortAndGroupOptions,
 
 		columns,
-		normalizedColumns,
 		collapsedColumns,
 
 		settingsConfig,

package/lib/use-resizable-columns.js

@@ -1,49 +1,62 @@
 import { useEffect, useRef } from 'haunted';
 
-export const useResizableColumns = ({ host, canvasWidth, layout, setSettings }) => {
+export const useResizableColumns = ({
+	host,
+	canvasWidth,
+	layout,
+	setSettings,
+}) => {
 	const onColumnResizeRef = useRef();
 
-	onColumnResizeRef.current = ev => setSettings(config => {
-		const
-			{ detail: { newWidth, column }} = ev,
-			columnIndex = config.findIndex(c => c.name === column.name),
-			newConfig = [],
-			maxPriority = config.reduce((p, c) => Math.max(p, c.priority), -Infinity);
-
-		for (let i = 0; i < layout.length; i++) {
-			newConfig[i] = { ...config[i] };
-
-			// for visible columns to the left of the resized column
-			if (i < columnIndex && layout[i]) {
-				// save the current width
-				newConfig[i].width = layout[i];
-				// make them fixed width
-				newConfig[i].flex = 0;
-				// keep them visible
-				newConfig[i].priority = maxPriority;
-			}
-
-			// update the width of the resized column
-			if (i === columnIndex) {
-				const
-					maxNewSize = layout.reduce((acc, cur, i) => {
+	onColumnResizeRef.current = (ev) =>
+		setSettings((settings) => {
+			const config = settings.columns,
+				{
+					detail: { newWidth, column },
+				} = ev,
+				columnIndex = config.findIndex((c) => c.name === column.name),
+				newConfig = [],
+				maxPriority = config.reduce(
+					(p, c) => Math.max(p, c.priority),
+					-Infinity
+				);
+
+			for (let i = 0; i < layout.length; i++) {
+				newConfig[i] = { ...config[i] };
+
+				// for visible columns to the left of the resized column
+				if (i < columnIndex && layout[i]) {
+					// save the current width
+					newConfig[i].width = layout[i];
+					// make them fixed width
+					newConfig[i].flex = 0;
+					// keep them visible
+					newConfig[i].priority = maxPriority;
+				}
+
+				// update the width of the resized column
+				if (i === columnIndex) {
+					const maxNewSize = layout.reduce((acc, cur, i) => {
 						if (i < columnIndex) {
 							return cur ? acc - cur : acc;
 						}
 						return acc;
 					}, canvasWidth);
 
-				newConfig[i].width = Math.min(maxNewSize, Math.max(newWidth, config[i].minWidth));
-				newConfig[i].flex = 0;
-				newConfig[i].priority = maxPriority;
+					newConfig[i].width = Math.min(
+						maxNewSize,
+						Math.max(newWidth, config[i].minWidth)
+					);
+					newConfig[i].flex = 0;
+					newConfig[i].priority = maxPriority;
+				}
 			}
-		}
 
-		return newConfig;
-	});
+			return { ...settings, columns: newConfig };
+		});
 
 	useEffect(() => {
-		const handler = ev => onColumnResizeRef.current(ev);
+		const handler = (ev) => onColumnResizeRef.current(ev);
 		host.addEventListener('column-resize', handler);
 		return () => host.removeEventListener('column-resize', handler);
 	}, []);

package/lib/use-sort-and-group-options.js

@@ -1,26 +1,46 @@
-import { useMemo, createContext, component, useContext } from 'haunted';
+import {
+	useMemo,
+	createContext,
+	component,
+	useContext,
+	useCallback,
+} from 'haunted';
 import { useHashState } from './use-hash-state';
 
 const parseBool = (bool) => [true, 'true', 1, 'yes', 'on'].includes(bool),
-	boolParam = (p) => p === '' || (p == null ? undefined : parseBool(p));
+	boolParam = (p) => p === '' || (p == null ? undefined : parseBool(p)),
+	useSettingsState = (setter, name, setSettings) =>
+		useCallback(
+			(value) => {
+				setter(value);
+				setSettings((s) => ({ ...s, [name]: value }));
+			},
+			[setter, name, setSettings]
+		);
 
-export const useSortAndGroupOptions = (columns, hashParam, initial) => {
-		const [sortOn, setSortOn] = useHashState(initial.sortOn, hashParam, {
+// eslint-disable-next-line max-lines-per-function
+export const useSortAndGroupOptions = (
+		columns,
+		hashParam,
+		settings,
+		setSettings
+	) => {
+		const [sortOn, setSortOn] = useHashState(settings.sortOn, hashParam, {
 				suffix: '-sortOn',
 			}),
 			[descending, setDescending] = useHashState(
-				initial.descending,
+				settings.descending,
 				hashParam,
 				{
 					suffix: '-descending',
 					read: boolParam,
 				}
 			),
-			[groupOn, setGroupOn] = useHashState(initial.groupOn, hashParam, {
+			[groupOn, setGroupOn] = useHashState(settings.groupOn, hashParam, {
 				suffix: '-groupOn',
 			}),
 			[groupOnDescending, setGroupOnDescending] = useHashState(
-				initial.groupOnDescending,
+				settings.groupOnDescending,
 				hashParam,
 				{ suffix: '-groupOnDescending', read: boolParam }
 			),
@@ -34,14 +54,22 @@ export const useSortAndGroupOptions = (columns, hashParam, initial) => {
 			),
 			sortAndGroup_ = {
 				groupOn,
-				setGroupOn,
+				setGroupOn: useSettingsState(setGroupOn, 'groupOn', setSettings),
 				groupOnDescending,
-				setGroupOnDescending,
+				setGroupOnDescending: useSettingsState(
+					setGroupOnDescending,
+					'groupOnDescending',
+					setSettings
+				),
 
 				sortOn,
-				setSortOn,
+				setSortOn: useSettingsState(setSortOn, 'sortOn', setSettings),
 				descending,
-				setDescending,
+				setDescending: useSettingsState(
+					setDescending,
+					'descending',
+					setSettings
+				),
 
 				columns,
 			},
@@ -56,6 +84,7 @@ export const useSortAndGroupOptions = (columns, hashParam, initial) => {
 	},
 	SortAndGroupContext = createContext();
 
+
 customElements.define('sort-and-group-provider', SortAndGroupContext.Provider);
 customElements.define(
 	'sort-and-group-consumer',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-omnitable",
-	"version": "8.11.1",
+	"version": "8.14.0",
 	"description": "[![Build Status](https://travis-ci.org/Neovici/cosmoz-omnitable.svg?branch=master)](https://travis-ci.org/Neovici/cosmoz-omnitable)",
 	"keywords": [
 		"web-components"

package/lib/cosmoz-omnitable-sort.js

@@ -1,37 +0,0 @@
-import { html } from 'haunted';
-import { ifDefined } from 'lit-html/directives/if-defined';
-import { triangle } from './icons';
-
-export default (column) => html`
-	<sort-and-group-consumer
-		style="display: contents"
-		.render=${({
-			sortOn,
-			setSortOn,
-			descending,
-			setDescending,
-		} = {}) => html` <button
-			class="sort"
-			data-sort=${ifDefined(
-				(column === sortOn && (descending ? 'desc' : 'asc')) || undefined
-			)}
-			@click=${(e) => {
-				const sort = e.currentTarget?.dataset.sort;
-				if (!sort) {
-					setSortOn(column);
-					setDescending(false);
-				}
-				if (sort === 'asc') {
-					setDescending(true);
-				}
-				if (sort === 'desc') {
-					setSortOn();
-					setDescending(false);
-				}
-			}}
-		>
-			${triangle}
-		</button>`}
-	>
-	</sort-and-group-consumer>
-`;