@neovici/cosmoz-omnitable 13.2.5 → 13.4.0

package/cosmoz-omnitable-column-mixin.js

@@ -64,6 +64,15 @@ export const getString = ({ valuePath }, item) => get(item, valuePath),
 					renderCell: { type: Function },
 					renderEditCell: { type: Function },
 					renderGroup: { type: Function },
+
+					/**
+					 * The priority of the column in the mini mode. If missing the column is disabled in the mini mode.
+					 */
+					mini: { type: Number, value: null },
+					/**
+					 * An alternative render to use in mini mode. Takes the same params as `renderCell`.
+					 */
+					renderMini: { type: Function },
 				};
 			}
 
@@ -82,7 +91,7 @@ export const getString = ({ valuePath }, item) => get(item, valuePath),
 							state: this.legacyFilterToState(filter),
 						},
 						bubbles: true,
-					})
+					}),
 				);
 			}
 
@@ -135,7 +144,7 @@ export const getString = ({ valuePath }, item) => get(item, valuePath),
 			_propertiesChanged(currentProps, changedProps, oldProps) {
 				super._propertiesChanged(currentProps, changedProps, oldProps);
 				this.dispatchEvent(
-					new CustomEvent('cosmoz-column-prop-changed', { bubbles: true })
+					new CustomEvent('cosmoz-column-prop-changed', { bubbles: true }),
 				);
 			}
 		};

package/cosmoz-omnitable-item-expand-line.js

@@ -1,33 +1,39 @@
 import { component, html } from '@pionjs/pion';
+import { css, sheet } from '@neovici/cosmoz-utils';
 
-const OmnitableItemExpandLine = ({ column }) => html`
-	<style>
-		:host {
-			display: flex;
-			align-items: center;
-			flex-wrap: wrap;
-		}
+const style = css`
+	:host {
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+	}
 
-		.item-expand-label {
-			overflow: hidden;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-			flex: initial;
-			align-self: start;
-		}
+	.label {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		flex: initial;
+		align-self: start;
+	}
 
-		.item-expand-value {
-			text-align: right;
-			flex-grow: 1 !important;
-			flex-basis: 100px !important;
-			white-space: nowrap;
-		}
+	.value {
+		text-align: right;
+		flex-grow: 1;
+		flex-basis: 100px;
+		white-space: nowrap;
+	}
+`;
 
-	</style>
-	<div class="item-expand-label" title=${ column.title } part="item-expand-label">${ column.title }</div>
-	<div class="item-expand-value" part="item-expand-value">
+const ItemExpandLine = ({ column }) => html`
+	<div class="label" title="${column.title}" part="item-expand-label">
+		${column.title}
+	</div>
+	<div class="value" part="item-expand-value">
 		<slot></slot>
 	</div>
 `;
 
-customElements.define('cosmoz-omnitable-item-expand-line', component(OmnitableItemExpandLine));
+customElements.define(
+	'cosmoz-omnitable-item-expand-line',
+	component(ItemExpandLine, {styleSheets: [sheet(style)]}),
+);

package/cosmoz-omnitable-item-expand.js

@@ -1,48 +1,28 @@
-/* eslint-disable object-curly-newline */
-import { component, useEffect } from '@pionjs/pion';
-import { html, nothing } from 'lit-html';
+import { component } from '@pionjs/pion';
+import { html } from 'lit-html';
+import { map } from 'lit-html/directives/map.js';
 import './cosmoz-omnitable-item-expand-line';
 
-const renderExpandList = ({
+const ItemExpand = ({ columns, item, selected, expanded, groupOnColumn }) => {
+	return map(
 		columns,
-		item,
-		selected,
-		expanded,
-		groupOnColumn,
-	}) =>
-		columns.map(
-			(column) => html`<cosmoz-omnitable-item-expand-line
+		(column) =>
+			html`<cosmoz-omnitable-item-expand-line
 				.column=${column}
 				?hidden=${column === groupOnColumn}
-				exportparts="item-expand-label,item-expand-value"
+				exportparts="item-expand-label, item-expand-value"
 				>${column.renderCell(column, {
 					item,
 					selected,
 					expanded,
 				})}</cosmoz-omnitable-item-expand-line
-			>`
-		),
-	ExpandList = (host) => {
-		const { columns } = host;
-
-		useEffect(() => {
-			if (columns?.length > 0) {
-				return;
-			}
-
-			host.setAttribute('hidden', '');
-			return () => host.removeAttribute('hidden');
-		}, [columns?.length]);
-
-		return Array.isArray(columns) && columns.length > 0 && host.expanded
-			? renderExpandList(host)
-			: nothing;
-	};
+			>`,
+	);
+};
 
 customElements.define(
 	'cosmoz-omnitable-item-expand',
-	component(ExpandList, {
+	component(ItemExpand, {
 		useShadowDOM: false,
-		observedAttributes: ['expanded'],
-	})
+	}),
 );

package/cosmoz-omnitable-item-row.js

@@ -1,20 +1,37 @@
 import { component, html } from '@pionjs/pion';
 import { repeat } from 'lit-html/directives/repeat.js';
 
-const
-	renderCell = (column, data, onItemChange) => column.editable
+const renderCell = (column, data, onItemChange) =>
+	column.editable
 		? column.renderEditCell(column, data, onItemChange(column, data.item))
-		: column.renderCell(column, data),
-	ItemRow = ({ columns, groupOnColumn, item, index, selected, expanded, onItemChange }) => {
-		return repeat(columns, column => column.name, column => {
+		: column.renderCell(column, data);
+
+const ItemRow = ({
+	columns,
+	groupOnColumn,
+	item,
+	index,
+	selected,
+	expanded,
+	onItemChange,
+}) =>
+	repeat(
+		columns,
+		(column) => column.name,
+		(column) => {
 			return html`<div
-				class="cell itemRow-cell ${ column.cellClass ?? '' }"
-				?hidden=${ column === groupOnColumn }
-				?editable=${ column.editable }
-				title=${ column.cellTitleFn(column, item) }
-				name=${ column.name }
-			>${ renderCell(column, { item, index, selected, expanded }, onItemChange) }</div>`;
-		});
-	};
+				class="cell itemRow-cell ${column.cellClass ?? ''}"
+				?hidden="${column === groupOnColumn}"
+				?editable="${column.editable}"
+				title="${column.cellTitleFn(column, item)}"
+				name="${column.name}"
+			>
+				${renderCell(column, { item, index, selected, expanded }, onItemChange)}
+			</div>`;
+		},
+	);
 
-customElements.define('cosmoz-omnitable-item-row', component(ItemRow, { useShadowDOM: false }));
+customElements.define(
+	'cosmoz-omnitable-item-row',
+	component(ItemRow, { useShadowDOM: false }),
+);

package/cosmoz-omnitable-styles.js

@@ -162,6 +162,7 @@ export default css`
 		--cosmoz-input-padding: 0;
 		--cosmoz-input-label-text-transform: var(--cosmoz-omnitable-header-text-transform, none);
 		--cosmoz-input-label-font-weight: var(--cosmoz-omnitable-header-font-weight, normal);
+		--cosmoz-input-padding: 0;
 	}
 
 	cosmoz-omnitable-header-row {
@@ -317,11 +318,6 @@ export default css`
 		left: 0;
 	}
 
-	.item-row-wrapper {
-		display: block;
-		width: 100%;
-	}
-
 	.itemRow {
 		border-bottom-color: var(--cosmoz-omnitable-border-color, #e1e2e5);
 		border-bottom-width: 1px;
@@ -330,10 +326,12 @@ export default css`
 			solid
 		);
 		/* set a min-height for rows so that rows with empty values are visible */
-		min-height: var(--item-row-min-height, 24px);
-		padding-right: 8px;
+	}
+	.itemRow-wrapper {
 		display: flex;
 		align-items: center;
+		min-height: var(--item-row-min-height, 39px);
+		padding-right: 8px;
 	}
 
 	.itemRow[selected] {
@@ -357,9 +355,8 @@ export default css`
 		background-color: #fafafa;
 	}
 
-	cosmoz-omnitable-item-expand[hidden],
 	cosmoz-omnitable-item-expand:not([expanded]) {
-		display: none !important;
+		display: none;
 	}
 
 	.groupRow {
@@ -447,7 +444,7 @@ export default css`
 	.itemRow:hover {
 		box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0,
 			0 1px 2px 0 rgb(60 64 67 / 30%), 0 1px 3px 1px rgb(60 64 67 / 15%);
-		background: var(--cosmoz-omnitable-hover-color);
+		/* background: var(--cosmoz-omnitable-hover-color); */
 	}
 	.groupRow:hover .checkbox:not(:checked):not(:hover),
 	.itemRow:hover .checkbox:not(:checked):not(:hover) {
@@ -530,4 +527,32 @@ export default css`
 		min-width: 0;
 		flex: auto;
 	}
+
+	:host([mini]) .itemRow .expand,
+	:host([mini]) cosmoz-omnitable-item-expand {
+		display: none;
+	}
+
+	.itemRow-minis {
+		display: flex;
+		justify-content: space-between;
+		margin: 0 8px 8px 8px;
+	}
+
+	:host([mini]) .itemRow {
+		border-radius: 8px;
+		border: 1px solid var(--cosmoz-omnitable-border-color, #e1e2e5);
+		margin: 4px 8px;
+	}
+	:host([mini]) .itemRow:not([selected]) {
+		background: var(--cosmoz-omnitable-mini-item-background, #fdfdfd);
+	}
+
+	:host([mini]) .itemRow:hover {
+		box-shadow: none;
+	}
+
+	:host([mini]) .header {
+		margin: 0 8px;
+	}
 `;

package/cosmoz-omnitable.js

@@ -63,6 +63,7 @@ customElements.define(
 			'no-local-sort',
 			'no-local-filter',
 			'loading',
+			'mini-breakpoint',
 		],
 	}) {
 		connectedCallback() {
@@ -71,7 +72,7 @@ customElements.define(
 			notifyProperty(this, 'visibleData', []);
 			notifyProperty(this, 'sortedFilteredGroupedItems', []);
 		}
-	}
+	},
 );
 
 const tmplt = `

package/lib/settings/style.css.js

@@ -12,7 +12,8 @@ export default css`
 	}
 
 	.headline {
-		box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.15),
+		box-shadow:
+			inset 0px -1px 0px rgba(0, 0, 0, 0.15),
 			inset 0px 1px 0px rgba(0, 0, 0, 0.15);
 		font-weight: 500;
 		font-size: 16px;
@@ -63,7 +64,8 @@ export default css`
 		transform: scaleY(-1);
 	}
 	cosmoz-collapse[opened] + .heading {
-		box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.15),
+		box-shadow:
+			inset 0px -1px 0px rgba(0, 0, 0, 0.15),
 			inset 0px 1px 0px rgba(0, 0, 0, 0.15);
 	}
 

package/lib/settings/use-settings.js

@@ -7,7 +7,7 @@ import { useDOMColumns } from '../use-dom-columns';
 export default ({ settingsId, host }) => {
 	const initial = useMemo(
 			() => Object.fromEntries(sgProps.map((k) => [k, host[k]])),
-			[]
+			[],
 		),
 		resetRef = useRef(),
 		onReset = useCallback(() => {
@@ -19,7 +19,7 @@ export default ({ settingsId, host }) => {
 			settingsId,
 			settings,
 			setSettings,
-			onReset
+			onReset,
 		),
 		{ enabledColumns } = host,
 		columns = useDOMColumns(host, { enabledColumns }),
@@ -31,14 +31,14 @@ export default ({ settingsId, host }) => {
 					savedSettings,
 					initial,
 				}),
-			[columns, settings, savedSettings]
+			[columns, settings, savedSettings],
 		),
 		normalizedColumns = useMemo(
 			() =>
 				normalizedSettings.columns
 					.map((s) => columns.find((c) => c.name === s.name))
 					.filter(Boolean),
-			[columns, ...normalizedSettings.columns.map((s) => s.name)]
+			[columns, ...normalizedSettings.columns.map((s) => s.name)],
 		);
 
 	return {

package/lib/use-canvas-width.js

@@ -1,8 +1,10 @@
 import { useState } from '@pionjs/pion';
 import { useTrackSize } from './use-track-size';
 
-export const useCanvasWidth = host => {
-	const [canvasWidth, setCanvasWidth] = useState(() => host.getBoundingClientRect().width);
+export const useCanvasWidth = (host) => {
+	const [canvasWidth, setCanvasWidth] = useState(
+		() => host.getBoundingClientRect().width,
+	);
 
 	useTrackSize(host, setCanvasWidth);
 

package/lib/use-dom-columns.js

@@ -1,155 +1,167 @@
-import { useEffect, useLayoutEffect, useState } from '@pionjs/pion';
+import { useLayoutEffect, useState } from '@pionjs/pion';
 import { memooize } from '@neovici/cosmoz-utils/memoize';
 
-const columnSymbol = Symbol('column'),
-	verifyColumnSetup = (columns) => {
-		let ok = true;
-		const columnNames = columns.map((c) => c.name);
-		// Check if column names are set
-		columns.forEach((column) => {
-			if (column.name != null) {
-				return;
-			}
-			ok = false;
-			// eslint-disable-next-line no-console
-			console.error(
-				'The name attribute needs to be set on all columns! Missing on column',
-				column,
-			);
-		});
-
-		columns.forEach((column) => {
-			if (
-				columnNames.indexOf(column.name) ===
-				columnNames.lastIndexOf(column.name)
-			) {
-				return;
-			}
-			ok = false;
-			// eslint-disable-next-line no-console
-			console.error(
-				'The name attribute needs to be unique among all columns! Not unique on column',
-				column,
-			);
-		});
-		return ok;
-	},
-	// eslint-disable-next-line max-lines-per-function
-	domColumnsToConfig = (host, { enabledColumns }) => {
-		const domColumns = host.shadowRoot
-			.querySelector('#columnsSlot')
-			.assignedElements({ flatten: true })
-			.filter((child) => child.isOmnitableColumn && !child.hidden);
-
-		if (!verifyColumnSetup(domColumns)) {
-			return [];
+const columnSymbol = Symbol('column');
+const verifyColumnSetup = (columns) => {
+	let ok = true;
+	const columnNames = columns.map((c) => c.name);
+	// Check if column names are set
+	columns.forEach((column) => {
+		if (column.name != null) {
+			return;
 		}
-
-		const columns = Array.isArray(enabledColumns)
-			? domColumns.filter((column) => enabledColumns.includes(column.name))
-			: domColumns.filter((column) => !column.disabled);
-
-		// eslint-disable-next-line max-lines-per-function
-		return columns.map((column) => {
-			const valuePath = column.valuePath ?? column.name;
-
-			return {
-				name: column.name,
-				title: column.title,
-
-				valuePath,
-				groupOn: column.groupOn ?? valuePath,
-				sortOn: column.sortOn ?? valuePath,
-
-				minWidth: column.minWidth,
-				width: column.width,
-				flex: column.flex,
-				priority: column.priority,
-
-				getString: column.getString,
-				getComparableValue: column.getComparableValue,
-				serializeFilter: column.serializeFilter,
-				deserializeFilter: column.deserializeFilter,
-				toXlsxValue: column.toXlsxValue,
-
-				renderHeader: column.renderHeader,
-				renderCell: column.renderCell,
-				renderEditCell: column.renderEditCell,
-				renderGroup: column.renderGroup,
-				cellTitleFn: column.cellTitleFn,
-				getFilterFn: column.getFilterFn,
-				headerCellClass: column.headerCellClass,
-				cellClass: column.cellClass,
-
-				editable: column.editable,
-
-				values: column.values,
-				source: memooize(column.computeSource),
-
-				noLocalFilter: column.noLocalFilter,
-
-				// @deprecated
-				loading: column.loading,
-				externalValues: column.externalValues,
-				computeSource: column.computeSource,
-
-				// boolean columns
-				trueLabel: column.trueLabel,
-				falseLabel: column.falseLabel,
-
-				// list columns
-				valueProperty: column.valueProperty,
-				textProperty: column.textProperty,
-				emptyLabel: column.emptyLabel,
-				emptyValue: column.emptyValue,
-
-				// range columns
-				min: column.min,
-				max: column.max,
-				locale: column.locale,
-				autoupdate: column.autoupdate,
-
-				// number columns
-				maximumFractionDigits: column.maximumFractionDigits,
-				minimumFractionDigits: column.minimumFractionDigits,
-
-				// amount columns
-				currency: column.currency,
-				rates: column.rates,
-				autodetect: column.autodetect,
-
-				// treenode columns
-				ownerTree: column.ownerTree,
-				keyProperty: column.keyProperty,
-
-				...column.getConfig?.(column),
-
-				[columnSymbol]: column,
-			};
-		});
-	},
-	useDOMColumns = (host, { enabledColumns }) => {
-		const [columns, setColumns] = useState([]);
-
-		useLayoutEffect(() => {
-			setColumns(domColumnsToConfig(host, { enabledColumns }));
-		}, []);
-
-		useEffect(() => {
-			const slot = host.shadowRoot.querySelector('#columnsSlot'),
-				handler = () =>
-					setColumns(domColumnsToConfig(host, { enabledColumns }));
-
-			handler();
-			slot.addEventListener('slotchange', handler);
-			host.addEventListener('cosmoz-column-prop-changed', handler);
-			return () => {
-				slot.removeEventListener('slotchange', handler);
-				host.removeEventListener('cosmoz-column-prop-changed', handler);
-			};
-		}, [enabledColumns]);
-
-		return columns;
+		ok = false;
+		// eslint-disable-next-line no-console
+		console.error(
+			'The name attribute needs to be set on all columns! Missing on column',
+			column,
+		);
+	});
+
+	columns.forEach((column) => {
+		if (
+			columnNames.indexOf(column.name) === columnNames.lastIndexOf(column.name)
+		) {
+			return;
+		}
+		ok = false;
+		// eslint-disable-next-line no-console
+		console.error(
+			'The name attribute needs to be unique among all columns! Not unique on column',
+			column,
+		);
+	});
+	return ok;
+};
+
+// eslint-disable-next-line max-lines-per-function
+const normalizeColumn = (column) => {
+	const valuePath = column.valuePath ?? column.name;
+
+	return {
+		name: column.name,
+		title: column.title,
+
+		valuePath,
+		groupOn: column.groupOn ?? valuePath,
+		sortOn: column.sortOn ?? valuePath,
+
+		minWidth: column.minWidth,
+		width: column.width,
+		flex: column.flex,
+		priority: column.priority,
+
+		getString: column.getString,
+		getComparableValue: column.getComparableValue,
+		serializeFilter: column.serializeFilter,
+		deserializeFilter: column.deserializeFilter,
+		toXlsxValue: column.toXlsxValue,
+
+		renderHeader: column.renderHeader,
+		renderCell: column.renderCell,
+		renderEditCell: column.renderEditCell,
+		renderGroup: column.renderGroup,
+		cellTitleFn: column.cellTitleFn,
+		getFilterFn: column.getFilterFn,
+		headerCellClass: column.headerCellClass,
+		cellClass: column.cellClass,
+
+		editable: column.editable,
+
+		values: column.values,
+		source: memooize(column.computeSource),
+
+		noLocalFilter: column.noLocalFilter,
+
+		mini: column.mini,
+		renderMini: column.renderMini,
+
+		// @deprecated
+		loading: column.loading,
+		externalValues: column.externalValues,
+		computeSource: column.computeSource,
+
+		// boolean columns
+		trueLabel: column.trueLabel,
+		falseLabel: column.falseLabel,
+
+		// list columns
+		valueProperty: column.valueProperty,
+		textProperty: column.textProperty,
+		emptyLabel: column.emptyLabel,
+		emptyValue: column.emptyValue,
+
+		// range columns
+		min: column.min,
+		max: column.max,
+		locale: column.locale,
+		autoupdate: column.autoupdate,
+
+		// number columns
+		maximumFractionDigits: column.maximumFractionDigits,
+		minimumFractionDigits: column.minimumFractionDigits,
+
+		// amount columns
+		currency: column.currency,
+		rates: column.rates,
+		autodetect: column.autodetect,
+
+		// treenode columns
+		ownerTree: column.ownerTree,
+		keyProperty: column.keyProperty,
+
+		...column.getConfig?.(column),
+
+		[columnSymbol]: column,
 	};
+};
+
+const isVisibleColumn = (child) => child.isOmnitableColumn && !child.hidden;
+
+const collectDomColumns = (slot) => {
+	const domColumns = slot
+		.assignedElements({ flatten: true })
+		.filter(isVisibleColumn);
+
+	if (!verifyColumnSetup(domColumns)) return [];
+	return domColumns;
+};
+
+const normalizeColumns = (domColumns, enabledColumns) => {
+	const columns = Array.isArray(enabledColumns)
+		? domColumns.filter((column) => enabledColumns.includes(column.name))
+		: domColumns.filter((column) => !column.disabled);
+
+	return columns.map(normalizeColumn);
+};
+
+export const useDOMColumns = (host, { enabledColumns }) => {
+	const [columns, setColumns] = useState([]);
+
+	useLayoutEffect(() => {
+		let sched;
+		const slot = host.shadowRoot.querySelector('#columnsSlot');
+		const update = () => {
+			setColumns(normalizeColumns(collectDomColumns(slot), enabledColumns));
+		};
+		const scheduleUpdate = () => {
+			cancelAnimationFrame(sched);
+			sched = requestAnimationFrame(update);
+		};
+
+		scheduleUpdate();
+
+		slot.addEventListener('slotchange', scheduleUpdate);
+		host.addEventListener('cosmoz-column-prop-changed', scheduleUpdate);
+
+		return () => {
+			slot.removeEventListener('slotchange', scheduleUpdate);
+			host.removeEventListener('cosmoz-column-prop-changed', scheduleUpdate);
+			cancelAnimationFrame(sched);
+		};
+	}, [enabledColumns]);
+
+	return columns;
+};
 
-export { columnSymbol, useDOMColumns };
+export { columnSymbol };

package/lib/use-fast-layout.js

@@ -5,6 +5,7 @@ import { useCanvasWidth } from './use-canvas-width';
 import { useTweenArray } from './use-tween-array';
 import { useLayout } from './use-layout';
 import { useStyleSheet } from '@neovici/cosmoz-utils/hooks/use-stylesheet';
+import { useMini } from './use-mini';
 
 export const useFastLayout = ({
 	host,
@@ -15,16 +16,18 @@ export const useFastLayout = ({
 	sortAndGroupOptions,
 }) => {
 	const canvasWidth = useCanvasWidth(host),
+		{ miniColumn, miniColumns } = useMini({ host, canvasWidth, columns }),
 		{ groupOnColumn } = sortAndGroupOptions,
 		layout = useLayout({
 			canvasWidth,
 			groupOnColumn,
+			miniColumn,
 			config: settings.columns,
 		}),
 		tweenedlayout = useTweenArray(layout, resizeSpeedFactor),
 		layoutCss = useMemo(
 			() => toCss(tweenedlayout, settings.columns),
-			[tweenedlayout],
+			[tweenedlayout, settings.columns],
 		),
 		collapsedColumns = useMemo(
 			() =>
@@ -49,5 +52,5 @@ export const useFastLayout = ({
 
 	useStyleSheet(layoutCss);
 
-	return { collapsedColumns };
+	return { collapsedColumns, miniColumns };
 };

package/lib/use-layout.js

@@ -1,28 +1,32 @@
 import { useMemo } from '@pionjs/pion';
 import { computeLayout } from './compute-layout';
 
-export const useLayout = ({ canvasWidth, groupOnColumn, config }) => useMemo(() => {
-	if (!Array.isArray(config) || canvasWidth == null || canvasWidth === 0) {
-		return [];
-	}
+export const useLayout = ({ canvasWidth, groupOnColumn, config, miniColumn }) =>
+	useMemo(() => {
+		if (!Array.isArray(config) || canvasWidth == null || canvasWidth === 0) {
+			return [];
+		}
 
-	const columnConfigs = config
-		.map((c, index) => ({
-			minWidth: c.minWidth,
-			width: c.width,
-			flex: c.flex,
-			priority: c.priority,
-			name: c.name,
-			index,
-			hidden: c.name === groupOnColumn?.name || c.disabled
-		}))
-		.sort(
-			(
-				{ index: aIndex, priority: aPriority },
-				{ index: bIndex, priority: bPriority }
-			) =>
-				aPriority === bPriority ? bIndex - aIndex : aPriority - bPriority
-		);
+		const columnConfigs = config
+			.map((c, index) => ({
+				minWidth: c.minWidth,
+				width: c.width,
+				flex: c.flex,
+				priority: c.priority,
+				name: c.name,
+				index,
+				hidden: c.name === groupOnColumn?.name || c.disabled,
+			}))
+			.map((c) =>
+				miniColumn ? { ...c, hidden: miniColumn.name !== c.name } : c,
+			)
+			.sort(
+				(
+					{ index: aIndex, priority: aPriority },
+					{ index: bIndex, priority: bPriority },
+				) =>
+					aPriority === bPriority ? bIndex - aIndex : aPriority - bPriority,
+			);
 
-	return computeLayout(columnConfigs, canvasWidth, columnConfigs.length);
-}, [canvasWidth, groupOnColumn, config]);
+		return computeLayout(columnConfigs, canvasWidth, columnConfigs.length);
+	}, [canvasWidth, groupOnColumn, config]);

package/lib/use-list.js

@@ -1,7 +1,8 @@
 /* eslint-disable max-lines-per-function */
 import { html, useCallback, useEffect, useMemo, useRef } from '@pionjs/pion';
-import { indexSymbol } from './utils';
+import { when } from 'lit-html/directives/when.js';
 import { isEmpty } from '@neovici/cosmoz-utils/template';
+import { indexSymbol } from './utils';
 import { onItemChange as _onItemChange } from './utils-data';
 
 const arrow = html`
@@ -19,10 +20,26 @@ const arrow = html`
 const _getGroupRowClasses = (folded) =>
 	folded ? 'groupRow groupRow-folded' : 'groupRow';
 
+const renderMinis = (item) => (columns) =>
+	when(
+		columns?.length > 0,
+		() => html`
+			<div class="itemRow-minis" part="item-minis">
+				${columns.map(
+					(column) =>
+						html`<div class="itemRow-mini" part="item-mini">
+							${(column.renderMini ?? column.renderCell)(column, { item })}
+						</div>`,
+				)}
+			</div>
+		`,
+	);
+
 const renderItem =
 	({
 		columns,
 		collapsedColumns,
+		miniColumns,
 		onItemClick,
 		onCheckboxChange,
 		dataIsValid,
@@ -30,22 +47,22 @@ const renderItem =
 		onItemChange,
 		rowPartFn,
 	}) =>
-	(item, index, { selected, expanded, toggleCollapse }) =>
-		html` <div class="item-row-wrapper">
-			<div
-				?selected=${selected}
-				part="${[
-					'itemRow',
-					`itemRow-${item[indexSymbol]}`,
-					rowPartFn?.(item, index),
-				]
-					.filter(Boolean)
-					.join(' ')}"
-				.dataIndex=${item[indexSymbol]}
-				.dataItem=${item}
-				class="itemRow"
-				@click=${onItemClick}
-			>
+	(item, index, { selected, expanded, toggleCollapse }) => html`
+		<div
+			?selected=${selected}
+			part="${[
+				'itemRow',
+				`itemRow-${item[indexSymbol]}`,
+				rowPartFn?.(item, index),
+			]
+				.filter(Boolean)
+				.join(' ')}"
+			.dataIndex=${item[indexSymbol]}
+			.dataItem=${item}
+			class="itemRow"
+			@click=${onItemClick}
+		>
+			<div class="itemRow-wrapper">
 				<input
 					class="checkbox"
 					type="checkbox"
@@ -65,7 +82,6 @@ const renderItem =
 					.onItemChange=${onItemChange}
 				>
 				</cosmoz-omnitable-item-row>
-
 				<button
 					class="expand"
 					?hidden="${isEmpty(collapsedColumns.length)}"
@@ -75,17 +91,19 @@ const renderItem =
 					${arrow}
 				</button>
 			</div>
-			<cosmoz-omnitable-item-expand
-				.columns=${collapsedColumns}
-				.item=${item}
-				.index=${index}
-				?selected=${selected}
-				?expanded=${expanded}
-				.groupOnColumn=${groupOnColumn}
-				part="item-expand"
-			>
-			</cosmoz-omnitable-item-expand>
-		</div>`;
+			${renderMinis(item)(miniColumns)}
+		</div>
+		<cosmoz-omnitable-item-expand
+			.columns=${collapsedColumns}
+			.item=${item}
+			.index=${index}
+			?selected=${selected}
+			?expanded=${expanded}
+			.groupOnColumn=${groupOnColumn}
+			part="item-expand"
+		>
+		</cosmoz-omnitable-item-expand>
+	`;
 
 const renderGroup =
 	({ onCheckboxChange, dataIsValid, groupOnColumn }) =>
@@ -125,6 +143,7 @@ export const useList = ({
 	processedItems,
 	columns,
 	collapsedColumns,
+	miniColumns,
 	sortAndGroupOptions,
 	rowPartFn,
 	...rest
@@ -204,6 +223,7 @@ export const useList = ({
 				renderItem({
 					columns,
 					collapsedColumns,
+					miniColumns,
 					onItemClick,
 					onCheckboxChange,
 					dataIsValid,

package/lib/use-mini.js

@@ -0,0 +1,28 @@
+import { useMemo, useEffect } from '@pionjs/pion';
+
+export const useMini = ({ host, canvasWidth, columns: _columns }) => {
+	const breakpoint = host.miniBreakpoint ?? 480;
+	const isMiniSize = useMemo(
+		() => canvasWidth <= breakpoint,
+		[canvasWidth, breakpoint],
+	);
+	const columns = useMemo(
+		() =>
+			isMiniSize
+				? _columns
+						?.filter((c) => c.mini !== null)
+						.sort((a, b) => (a.mini ?? 0) - (b.mini ?? 0))
+				: [],
+		[_columns, isMiniSize],
+	);
+	const [miniColumn, ...miniColumns] = columns ?? [];
+
+	useEffect(() => {
+		host.toggleAttribute('mini', !!miniColumn);
+	}, [miniColumn]);
+
+	return {
+		miniColumn,
+		miniColumns,
+	};
+};

package/lib/use-omnitable.js

@@ -19,7 +19,7 @@ export const useOmnitable = (host) => {
 			noLocalSort = noLocal,
 			noLocalFilter = noLocal,
 			error,
-			rowPartFn
+			rowPartFn,
 		} = host,
 		settingS = useSettings({ settingsId, host }),
 		{ settings, setSettings, columns, resetRef } = settingS,
@@ -28,7 +28,7 @@ export const useOmnitable = (host) => {
 			hashParam,
 			settings,
 			setSettings,
-			resetRef
+			resetRef,
 		),
 		// TODO: drop filterFunctions
 		{ processedItems, visibleData, filters, setFilterState, filterFunctions } =
@@ -40,7 +40,7 @@ export const useOmnitable = (host) => {
 				noLocalSort,
 				noLocalFilter,
 			}),
-		{ collapsedColumns } = useFastLayout({
+		{ collapsedColumns, miniColumns } = useFastLayout({
 			host,
 			columns,
 			settings,
@@ -86,8 +86,9 @@ export const useOmnitable = (host) => {
 			setSelectedItems,
 			columns,
 			collapsedColumns,
+			miniColumns,
 			sortAndGroupOptions,
-			rowPartFn
+			rowPartFn,
 		}),
 		footer: useFooter({
 			host,

package/lib/use-resizable-columns.js

@@ -18,7 +18,7 @@ export const useResizableColumns = ({
 				newConfig = [],
 				maxPriority = config.reduce(
 					(p, c) => Math.max(p, c.priority),
-					-Infinity
+					-Infinity,
 				);
 
 			for (let i = 0; i < layout.length; i++) {
@@ -45,7 +45,7 @@ export const useResizableColumns = ({
 
 					newConfig[i].width = Math.min(
 						maxNewSize,
-						Math.max(newWidth, config[i].minWidth)
+						Math.max(newWidth, config[i].minWidth),
 					);
 					newConfig[i].flex = 0;
 					newConfig[i].priority = maxPriority;

package/lib/use-track-size.js

@@ -10,10 +10,10 @@ export const useTrackSize = (host, setCanvasWidth) =>
 				requestAnimationFrame(() =>
 					setCanvasWidth(
 						entry.contentRect?.width -
-						20 /* scrollbar width */ -
-						44 /* checkbox width */ -
-						24 /* expand button width */
-					)
+							20 /* scrollbar width */ -
+							44 /* checkbox width */ -
+							24 /* expand button width */,
+					),
 				);
 			},
 			observer = new ResizeObserver(onResize);
@@ -21,4 +21,3 @@ export const useTrackSize = (host, setCanvasWidth) =>
 		observer.observe(host);
 		return () => observer.unobserve(host);
 	}, []);
-

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-omnitable",
-	"version": "13.2.5",
+	"version": "13.4.0",
 	"description": "[![Build Status](https://travis-ci.org/Neovici/cosmoz-omnitable.svg?branch=master)](https://travis-ci.org/Neovici/cosmoz-omnitable)",
 	"keywords": [
 		"web-components"
@@ -30,7 +30,7 @@
 		"start": "wds",
 		"test": "wtr --coverage",
 		"test:watch": "wtr --watch",
-		"prepare": "husky install"
+		"prepare": "husky"
 	},
 	"release": {
 		"plugins": [
@@ -80,8 +80,8 @@
 		"lit-html": "^2.0.0 || ^3.0.0"
 	},
 	"devDependencies": {
-		"@commitlint/cli": "^18.0.0",
-		"@commitlint/config-conventional": "^18.0.0",
+		"@commitlint/cli": "^19.0.0",
+		"@commitlint/config-conventional": "^19.0.0",
 		"@neovici/cfg": "^1.18.0",
 		"@neovici/cosmoz-viewinfo": "^4.0.0",
 		"@open-wc/testing": "^4.0.0",
@@ -92,8 +92,8 @@
 		"@polymer/paper-toggle-button": "^3.0.0",
 		"@semantic-release/changelog": "^6.0.0",
 		"@semantic-release/git": "^10.0.0",
-		"husky": "^8.0.0",
-		"semantic-release": "^22.0.0",
-		"sinon": "^17.0.0"
+		"husky": "^9.0.0",
+		"semantic-release": "^23.0.0",
+		"sinon": "^18.0.0"
 	}
 }