compote-ui 0.82.0 → 0.83.0

package/dist/components/data-table-v9/data-table.svelte

@@ -26,6 +26,9 @@
 		headerFilters?: boolean;
 		onRowClick?: (details: { row: T; event: MouseEvent }) => void;
 		onRowDoubleClick?: (details: { row: T; event: MouseEvent }) => void;
+		/** Extra classes for a row's `<tr>`; `row` is `row.original`. Set `--row-bg` too if the row has
+		 * pinned or selection cells, so they match the tint. */
+		rowClass?: (row: T) => ClassValue;
 	};
 
 	let {
@@ -36,6 +39,7 @@
 		headerFilters = false,
 		onRowClick,
 		onRowDoubleClick,
+		rowClass,
 		...rest
 	}: Props = $props();
 
@@ -90,7 +94,8 @@
 							'[--row-bg:var(--compote-surface-1)]',
 							'hover:bg-well/60 hover:[--row-bg:color-mix(in_srgb,var(--compote-well)_60%,var(--compote-surface-1))]',
 							rowSelected &&
-								'bg-well/60 [--row-bg:color-mix(in_srgb,var(--compote-well)_60%,var(--compote-surface-1))]'
+								'bg-well/60 [--row-bg:color-mix(in_srgb,var(--compote-well)_60%,var(--compote-surface-1))]',
+							rowClass?.(row.original)
 						)}
 						onclick={(event) => onRowClick?.({ row: row.original, event })}
 						ondblclick={(event) => onRowDoubleClick?.({ row: row.original, event })}

package/dist/components/data-table-v9/data-table.svelte.d.ts

@@ -18,6 +18,9 @@ declare function $$render<T extends RowData>(): {
             row: T;
             event: MouseEvent;
         }) => void;
+        /** Extra classes for a row's `<tr>`; `row` is `row.original`. Set `--row-bg` too if the row has
+         * pinned or selection cells, so they match the tint. */
+        rowClass?: (row: T) => ClassValue;
     };
     exports: {};
     bindings: "";

package/dist/components/data-table-v9/virtual/data-table-virtual-rows.svelte

@@ -2,7 +2,7 @@
 	import type { RowData } from '@tanstack/svelte-table';
 	import { createVirtualizer } from '@tanstack/svelte-virtual';
 	import { untrack } from 'svelte';
-	import { cn } from 'tailwind-variants';
+	import { cn, type ClassValue } from 'tailwind-variants';
 	import type { DataTableInstance } from '../data-table-utils';
 	import type { DataTableViewState } from '../table-view-state.svelte';
 	import DataTableCellContent from '../data-table-cell-content.svelte';
@@ -25,10 +25,18 @@
 		emptyMessage: string;
 		onRowClick?: (details: { row: T; event: MouseEvent }) => void;
 		onRowDoubleClick?: (details: { row: T; event: MouseEvent }) => void;
+		rowClass?: (row: T) => ClassValue;
 	};
 
-	let { table, view, scrollContainer, emptyMessage, onRowClick, onRowDoubleClick }: Props =
-		$props();
+	let {
+		table,
+		view,
+		scrollContainer,
+		emptyMessage,
+		onRowClick,
+		onRowDoubleClick,
+		rowClass
+	}: Props = $props();
 
 	const rows = $derived(view.rowModel.rows);
 
@@ -79,7 +87,8 @@
 						'[--row-bg:var(--compote-surface-1)]',
 						'hover:bg-well/60 hover:[--row-bg:color-mix(in_srgb,var(--compote-well)_60%,var(--compote-surface-1))]',
 						rowSelected &&
-							'bg-well/60 [--row-bg:color-mix(in_srgb,var(--compote-well)_60%,var(--compote-surface-1))]'
+							'bg-well/60 [--row-bg:color-mix(in_srgb,var(--compote-well)_60%,var(--compote-surface-1))]',
+						rowClass?.(row.original)
 					)}
 					style="display: flex; position: absolute; transform: translateY({virtualRow.start}px); width: 100%"
 					onclick={(event) => onRowClick?.({ row: row.original, event })}

package/dist/components/data-table-v9/virtual/data-table-virtual-rows.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { RowData } from '@tanstack/svelte-table';
+import { type ClassValue } from 'tailwind-variants';
 import type { DataTableInstance } from '../data-table-utils';
 import type { DataTableViewState } from '../table-view-state.svelte';
 declare function $$render<T extends RowData>(): {
@@ -15,6 +16,7 @@ declare function $$render<T extends RowData>(): {
             row: T;
             event: MouseEvent;
         }) => void;
+        rowClass?: (row: T) => ClassValue;
     };
     exports: {};
     bindings: "";

package/dist/components/data-table-v9/virtual/data-table-virtualized.svelte

@@ -18,6 +18,8 @@
 		headerFilters?: boolean;
 		onRowClick?: (details: { row: T; event: MouseEvent }) => void;
 		onRowDoubleClick?: (details: { row: T; event: MouseEvent }) => void;
+		/** Extra classes for a row's `<tr>`; `row` is `row.original`. */
+		rowClass?: (row: T) => ClassValue;
 	};
 
 	let {
@@ -28,6 +30,7 @@
 		headerFilters = false,
 		onRowClick,
 		onRowDoubleClick,
+		rowClass,
 		...rest
 	}: Props = $props();
 
@@ -64,6 +67,7 @@
 					{emptyMessage}
 					{onRowClick}
 					{onRowDoubleClick}
+					{rowClass}
 				/>
 			{/if}
 			{#if view.hasFooter}

package/dist/components/data-table-v9/virtual/data-table-virtualized.svelte.d.ts

@@ -18,6 +18,8 @@ declare function $$render<T extends RowData>(): {
             row: T;
             event: MouseEvent;
         }) => void;
+        /** Extra classes for a row's `<tr>`; `row` is `row.original`. */
+        rowClass?: (row: T) => ClassValue;
     };
     exports: {};
     bindings: "";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.82.0",
+	"version": "0.83.0",
 	"license": "MIT",
 	"repository": {
 		"type": "git",

package/skills/data-table/references/column-options.md

@@ -162,6 +162,8 @@ booleans and object-valued columns are excluded from global search. Also availab
 `onRowClick?: (details: { row: T; event: MouseEvent }) => void`,
 `onRowDoubleClick?: (details: { row: T; event: MouseEvent }) => void` — `row` is `row.original`.
 Clicks on the row-selection checkbox and url-cell buttons do **not** trigger either handler.
+`rowClass?: (row: T) => ClassValue` adds classes to the row's `<tr>` (e.g. a tint; also set
+`--row-bg` so pinned and selection cells match).
 `VirtualDataTable.Root` shares the same props.
 
 ```svelte