@isoftdata/svelte-table 2.10.0-beta.0 → 2.10.0

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

@@ -995,6 +995,38 @@
 	id="hide-column-context-menu"
 	bind:this={contextMenu}
 >
+	{#if columnPinningEnabled}
+		{@const isPinned = !!contextMenuColumn?.pinned}
+		<DropdownItem
+			icon={isPinned ? 'thumbtack-angle-slash' : 'thumbtack-angle'}
+			title={isPinned
+				? 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)
+				}
+			}}
+			>{#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}
+			<div class="dropdown-divider"></div>
+		{/if}
+	{/if}
+
 	{#if columnHidingEnabled}
 		<DropdownItem
 			class={hideButtonClass}
@@ -1029,26 +1061,6 @@
 			{/each}
 		</div>
 
-		{#if columnPinningEnabled || columnResizingEnabled}
-			<div class="dropdown-divider"></div>
-		{/if}
-	{/if}
-
-	{#if columnPinningEnabled}
-		{@const isPinned = !!contextMenuColumn?.pinned}
-		<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'}
-			onclick={() => {
-				if (contextMenuColumn) {
-					pinUnpinColumn(contextMenuColumn)
-				}
-			}}
-			>{isPinned ? `Unpin ${contextMenuColumn?.name}` : `Pin ${contextMenuColumn?.name}`}
-		</DropdownItem>
-
 		{#if columnResizingEnabled}
 			<div class="dropdown-divider"></div>
 		{/if}

package/dist/Td.svelte

@@ -118,6 +118,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}
 	>
 		<!--
 			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.0",
+  "version": "2.10.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",