Merge pull request #602 from Neovici/feat/row-parts

feat(use-list): add rowPartFn
Neovici · Jan 26, 2024 · bd91d74 · bd91d74
2 parents dc95c8b + e15e99a
commit bd91d74
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 16 deletions.
diff --git a/lib/use-list.js b/lib/use-list.js
@@ -7,20 +7,24 @@ import { onItemChange as _onItemChange } from './utils-data';
 const _getGroupRowClasses = (folded) =>
 		folded ? 'groupRow groupRow-folded' : 'groupRow',
 	_getFoldIcon = (expanded) => (expanded ? 'expand-less' : 'expand-more'),
-	renderItem = ({
-		columns,
-		collapsedColumns,
-		onItemClick,
-		onCheckboxChange,
-		dataIsValid,
-		groupOnColumn,
-		onItemChange,
-	}) => {
-		return (item, index, { selected, expanded, toggleCollapse }) => {
-			return html` <div class="item-row-wrapper">
+	renderItem =
+		({
+			columns,
+			collapsedColumns,
+			onItemClick,
+			onCheckboxChange,
+			dataIsValid,
+			groupOnColumn,
+			onItemChange,
+			rowPartFn,
+		}) =>
+		(item, index, { selected, expanded, toggleCollapse }) =>
+			html` <div class="item-row-wrapper">
 				<div
 					?selected=${selected}
-					part="itemRow itemRow-${item[indexSymbol]}"
+					part="${['itemRow', `itemRow-${item[indexSymbol]}`, rowPartFn?.(item, index)]
+						.filter(Boolean)
+						.join(' ')}"
 					.dataIndex=${item[indexSymbol]}
 					.dataItem=${item}
 					class="itemRow"
@@ -62,9 +66,7 @@ const _getGroupRowClasses = (folded) =>
 					part="item-expand"
 				>
 				</cosmoz-omnitable-item-expand>
-			</div>`;
-		};
-	},
+			</div>`,
 	renderGroup = ({ onCheckboxChange, dataIsValid, groupOnColumn }) => {
 		return (item, index, { selected, folded, toggleFold }) =>
 			html` <div
@@ -106,6 +108,7 @@ export const useList = ({
 	columns,
 	collapsedColumns,
 	sortAndGroupOptions,
+	rowPartFn,
 	...rest
 }) => {
 	const { loading = false, displayEmptyGroups = false, compareItemsFn } = host,
@@ -193,6 +196,7 @@ export const useList = ({
 					dataIsValid,
 					groupOnColumn,
 					onItemChange,
+					rowPartFn,
 				}),
 			[
 				columns,
@@ -202,6 +206,7 @@ export const useList = ({
 				dataIsValid,
 				groupOnColumn,
 				onItemChange,
+				rowPartFn,
 			],
 		),
 		renderGroup: useMemo(

diff --git a/lib/use-omnitable.js b/lib/use-omnitable.js
@@ -18,7 +18,8 @@ export const useOmnitable = (host) => {
 			noLocal,
 			noLocalSort = noLocal,
 			noLocalFilter = noLocal,
-			error
+			error,
+			rowPartFn
 		} = host,
 		settingS = useSettings({ settingsId, host }),
 		{ settings, setSettings, columns, resetRef } = settingS,
@@ -86,6 +87,7 @@ export const useOmnitable = (host) => {
 			columns,
 			collapsedColumns,
 			sortAndGroupOptions,
+			rowPartFn
 		}),
 		footer: useFooter({
 			host,