compote-ui 0.35.1 → 0.36.0

package/dist/components/data-table/create-table.d.ts

@@ -6,6 +6,8 @@ declare const dataTableFeatures: {
     columnResizingFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").ColumnResizingFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
     columnFilteringFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").ColumnFilteringFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
     columnFacetingFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").ColumnFacetingFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
+    columnPinningFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").ColumnPinningFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
+    columnOrderingFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").ColumnOrderingFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
     rowSelectionFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").RowSelectionFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
     rowSortingFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").RowSortingFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
 };
@@ -31,6 +33,8 @@ export declare function createTable<T extends RowData>(options: CreateDataTableO
     columnResizingFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").ColumnResizingFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
     columnFilteringFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").ColumnFilteringFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
     columnFacetingFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").ColumnFacetingFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
+    columnPinningFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").ColumnPinningFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
+    columnOrderingFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").ColumnOrderingFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
     rowSelectionFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").RowSelectionFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
     rowSortingFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").RowSortingFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
 }, T, DataTableSelectedState>;

package/dist/components/data-table/create-table.js

@@ -1,4 +1,4 @@
-import { columnVisibilityFeature, columnResizingFeature, columnSizingFeature, columnFilteringFeature, columnFacetingFeature, createSortedRowModel, createFilteredRowModel, createFacetedRowModel, createFacetedMinMaxValues, createFacetedUniqueValues, createTable as createTanStackTable, filterFns, renderComponent, renderSnippet, rowSelectionFeature, rowSortingFeature, sortFns, tableFeatures } from '@tanstack/svelte-table';
+import { columnVisibilityFeature, columnResizingFeature, columnSizingFeature, columnFilteringFeature, columnFacetingFeature, columnPinningFeature, columnOrderingFeature, createSortedRowModel, createFilteredRowModel, createFacetedRowModel, createFacetedMinMaxValues, createFacetedUniqueValues, createTable as createTanStackTable, filterFns, renderComponent, renderSnippet, rowSelectionFeature, rowSortingFeature, sortFns, tableFeatures } from '@tanstack/svelte-table';
 import { useLocaleContext } from '@ark-ui/svelte/locale';
 const dataTableFeatures = tableFeatures({
     columnVisibilityFeature,
@@ -6,6 +6,8 @@ const dataTableFeatures = tableFeatures({
     columnResizingFeature,
     columnFilteringFeature,
     columnFacetingFeature,
+    columnPinningFeature,
+    columnOrderingFeature,
     rowSelectionFeature,
     rowSortingFeature
 });
@@ -39,6 +41,7 @@ export function createTable(options) {
         initialState: {
             columnVisibility: createColumnVisibility(options.columns),
             columnSizing: createColumnSizing(options.columns),
+            columnPinning: createColumnPinning(options.columns),
             rowSelection: options.initialRowSelection ?? {},
             sorting: options.initialSorting ?? [],
             columnFilters: options.initialColumnFilters ?? []
@@ -66,6 +69,13 @@ function createColumnSizing(columns) {
         return sizes;
     }, {});
 }
+function createColumnPinning(columns) {
+    const leafCols = getLeafColumns(columns);
+    return {
+        left: leafCols.filter((c) => c.pinned === 'left').map(getColumnId),
+        right: leafCols.filter((c) => c.pinned === 'right').map(getColumnId)
+    };
+}
 function createColumns(columns, localeCtx) {
     return columns.map((column) => {
         if (isGroupColumn(column)) {

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

@@ -1,6 +1,6 @@
 <script lang="ts" generics="T extends RowData">
 	import { FlexRender } from '@tanstack/svelte-table';
-	import type { CellData, Header, RowData } from '@tanstack/svelte-table';
+	import type { CellData, ColumnPinningPosition, Header, RowData } from '@tanstack/svelte-table';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { cn, type ClassValue } from 'tailwind-variants';
 	import { PhArrowSquareOut, PhCaretDown, PhCaretUp, PhCheck, PhX } from '../../icons';
@@ -110,6 +110,44 @@
 		return undefined;
 	}
 
+	//	type PinPosition = 'center' | false | 'left' | 'right';
+	function getPinningStyle(
+		column: {
+			getIsPinned(): ColumnPinningPosition;
+			getStart(position?: ColumnPinningPosition): number;
+			getAfter(position?: ColumnPinningPosition): number;
+			getIsLastColumn(position?: ColumnPinningPosition): boolean;
+			getIsFirstColumn(position?: ColumnPinningPosition): boolean;
+		},
+		isHeader = false
+	): string | undefined {
+		const isPinned = column.getIsPinned();
+		if (!isPinned) return undefined;
+
+		const zIndex = isHeader ? 15 : 1;
+		const selectionOffset = isRowSelectionEnabled ? 40 : 0;
+
+		if (isPinned === 'left') {
+			const left = column.getStart('left') + selectionOffset;
+			const shadow =
+				!isHeader && column.getIsLastColumn('left')
+					? 'box-shadow: -4px 0 4px -4px var(--compote-border) inset'
+					: undefined;
+			return ['position: sticky', `z-index: ${zIndex}`, `left: ${left}px`, shadow]
+				.filter(Boolean)
+				.join('; ');
+		} else {
+			const right = column.getAfter('right');
+			const shadow =
+				!isHeader && column.getIsFirstColumn('right')
+					? 'box-shadow: 4px 0 4px -4px var(--compote-border) inset'
+					: undefined;
+			return ['position: sticky', `z-index: ${zIndex}`, `right: ${right}px`, shadow]
+				.filter(Boolean)
+				.join('; ');
+		}
+	}
+
 	function getUrlCellValue(value: unknown) {
 		if (typeof value !== 'string' || value.trim() === '') return undefined;
 		return value;
@@ -205,6 +243,7 @@
 						{#if isRowSelectionEnabled && headerGroupIndex === 0}
 							<th
 								class="border-b border-surface-3 bg-surface-2 px-3 py-2 text-center align-middle font-medium"
+								style="position: sticky; left: 0; z-index: 15"
 								rowspan={headerGroupCount}
 							>
 								{#if isMultiRowSelectionEnabled}
@@ -230,6 +269,7 @@
 								aria-sort={header.column.getCanSort()
 									? getHeaderAriaSort(sortDirection)
 									: undefined}
+								style={getPinningStyle(header.column, true)}
 							>
 								{#if !header.isPlaceholder}
 									{#if header.column.getCanSort()}
@@ -281,12 +321,18 @@
 					{@const rowSelected = getRowSelectionState(table.store.state.rowSelection, row.id)}
 					<tr
 						class={cn(
-							'border-b border-surface-3 last:border-b-0 hover:bg-well/60',
-							rowSelected && 'bg-well/60'
+							'group/row border-b border-surface-3 last:border-b-0',
+							'[--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))]'
 						)}
 					>
 						{#if isRowSelectionEnabled}
-							<td class="px-3 py-2 text-center align-middle">
+							<td
+								class="bg-(--row-bg) px-3 py-2 text-center align-middle"
+								style="position: sticky; left: 0; z-index: 1"
+							>
 								<Checkbox
 									size="sm"
 									aria-label="Select row"
@@ -299,7 +345,14 @@
 						{/if}
 						{#each row.getVisibleCells() as cell (cell.id)}
 							{@const columnDef = findColumnById(cell.column.id, columns)}
-							<td class={cn('truncate px-3 py-2 text-ink-dim', alignClass(columnDef?.align))}>
+							<td
+								class={cn(
+									'truncate px-3 py-2',
+									alignClass(columnDef?.align),
+									cell.column.getIsPinned() && 'bg-(--row-bg)'
+								)}
+								style={getPinningStyle(cell.column)}
+							>
 								{#if columnDef?.type === 'boolean'}
 									{@const value = getBooleanCellValue(cell.getValue())}
 									{#if value === true}

package/dist/components/data-table/types.d.ts

@@ -21,6 +21,7 @@ export type DataTableLeafColumnBase<T extends RowData> = DataTableColumnOptions<
     type?: DataTableColumnType;
     formatOptions?: Intl.NumberFormatOptions;
     formatLocale?: string;
+    pinned?: 'left' | 'right';
     columns?: never;
 };
 export type DataTableAccessorKeyColumn<T extends RowData> = DataTableLeafColumnBase<T> & {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.35.1",
+	"version": "0.36.0",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev --open",