@isoftdata/svelte-table 2.10.0-beta.1 → 2.10.1

package/README.md

@@ -35,6 +35,7 @@ This component uses a generic type `R` to represent the type of a single row pas
 | class | `string` | Any extra classes to apply to the `table`. | `""` |
 | columnClickedMethod | `(column: Column, direction: SortDirection) => void` | Called when a column is clicked. Should update `previousSortOrder`, `previousSortDirection`, `previousSortColumn`, and `sortedRows`. | `defaultColumnClicked` |
 | columnHidingEnabled | `boolean` | When enabled, the user will be able to right click a column header and hide/show it. | `false` |
+| columnPinningEnabled | `boolean` | When enabled, the user will be able to right click a column header and pin or unpin it. | `false` |
 | columnResizingEnabled | `boolean` | When enabled, the user will be able to drag on the edge of a column header and resize it. | `false` |
 | columns | `Array<Column>` | The definition of the columns. See columns docs below. | **Required** |
 | currentPageNumber | `number` | The current page number. | `1` |

package/dist/Table.svelte

@@ -1000,14 +1000,26 @@
 		<DropdownItem
 			icon={isPinned ? 'thumbtack-angle-slash' : 'thumbtack-angle'}
 			title={isPinned
-				? 'Unpinning this column will make it scroll normally'
-				: 'Pinning this column will keep it visible as you scroll to the right'}
+				? translate('common:tableUnpinColumnTitle', 'Unpinning this column will make it scroll normally')
+				: translate(
+						'common:tablePinColumnTitle',
+						'Pinning this column will keep it visible as you scroll to the right',
+					)}
 			onclick={() => {
 				if (contextMenuColumn) {
 					pinUnpinColumn(contextMenuColumn)
 				}
 			}}
-			>{isPinned ? `Unpin ${contextMenuColumn?.name}` : `Pin ${contextMenuColumn?.name}`}
+			>{#if contextMenuColumn?.name}
+				{isPinned
+					? translate('common:tableUnpinColumnName', 'Unpin {{name}}', { name: contextMenuColumn.name })
+					: translate('common:tablePinColumnName', 'Pin {{name}}', { name: contextMenuColumn.name })}
+			{:else}
+				{isPinned ? translate('common:tableUnpinColumn', 'Unpin') : translate('common:tablePinColumn', 'Pin')}
+				{#if contextMenuColumn?.icon}
+					<Icon icon={contextMenuColumn.icon}></Icon>
+				{/if}
+			{/if}
 		</DropdownItem>
 
 		{#if columnHidingEnabled || columnResizingEnabled}

package/dist/Td.svelte

@@ -46,7 +46,9 @@
 		...rest
 	}: Props = $props()
 
-	const thisColumnInfo = $derived(columnInfo.current[property])
+	const thisColumnInfo = $derived(
+		columnInfo.current[property] as (typeof columnInfo.current)[typeof property] | undefined,
+	)
 	const alignClass = $derived.by(() => {
 		let alignment = align || thisColumnInfo?.align || (thisColumnInfo?.numeric ? 'right' : undefined)
 		if (bs5 && alignment === 'right') {
@@ -118,7 +120,7 @@
 		style:text-overflow={$columnResizingEnabled ? 'ellipsis' : undefined}
 		style:position={thisColumnInfo?.pinned ? 'sticky' : undefined}
 		style:left={thisColumnInfo?.pinned ? columnInfo.getPinnedColumnOffset(property) : undefined}
-		style:z-index={thisColumnInfo.pinned ? 5 : undefined}
+		style:z-index={thisColumnInfo?.pinned ? 5 : undefined}
 	>
 		<!--
 			Don't listen to events that the user hasn't turned on the features for.

package/dist/column-info-store.svelte.js

@@ -77,7 +77,7 @@ export class ColumnInfoRunicStore {
             return '0px';
         }
         else if (colIndex === 0) {
-            return '0px';
+            return '-1px'; // Fix the gap on the left side of the first column
         }
         const offsetPx = this.pinnedColumns.slice(0, colIndex).reduce((acc, col) => {
             if (col.userWidth && col.visible) {
@@ -88,7 +88,7 @@ export class ColumnInfoRunicStore {
             }
             return acc;
         }, 0);
-        return `${offsetPx}px`;
+        return `${offsetPx - colIndex - 1}px`;
     }
     getStoreValFromColumns(columns, storeValue) {
         const columnInfo = columns.reduce((acc, column) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@isoftdata/svelte-table",
-  "version": "2.10.0-beta.1",
+  "version": "2.10.1",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",