@invopop/popui 0.1.88 → 0.1.90

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

@@ -134,6 +134,14 @@ export interface DataTableProps<TData> {
     initialColumnSizing?: Record<string, number>;
     pageSizeOptions?: number[];
     emptyState?: Omit<EmptyStateProps, 'children' | 'check'>;
+    /**
+     * Identify rows by a stable key derived from the data instead of the default
+     * row index. Critical when consumers prepend/insert rows: with index-based
+     * IDs, Svelte's keyed `{#each}` reuses the existing top `<tr>` and mounts a
+     * fresh DOM node at the bottom for the shifted-down row, which sends row-
+     * level animations (slide-in, flash) to the wrong element.
+     */
+    getRowId?: (row: TData, index: number) => string;
     onRowClick?: (row: TData) => void;
     onRowFocus?: (row: TData) => void;
     onSelectionChange?: (selectedRows: TData[]) => void;

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

@@ -78,11 +78,12 @@
     onColumnVisibilityChange,
     getRowClassName,
     getRowState,
+    getRowId,
     children
   }: DataTableProps<TData> = $props()
 
-  const enableSelection = !disableSelection
-  const enablePagination = !disablePagination
+  const enableSelection = $derived(!disableSelection)
+  const enablePagination = $derived(!disablePagination)
 
   let rowSelection = $state<RowSelectionState>({})
   let columnVisibility = $state<VisibilityState>(untrack(() => initialColumnVisibility))
@@ -177,6 +178,7 @@
   const table = setupTable<TData>({
     getData: () => data,
     getColumns: () => columns,
+    getRowId,
     enableSelection,
     enablePagination,
     manualPagination,
@@ -381,7 +383,7 @@
         <Table.Root>
           <Table.Header>
             {#each table.getHeaderGroups() as headerGroup (`${headerGroup.id}-${tableRenderKey}`)}
-              <Table.Row class="hover:!bg-transparent">
+              <Table.Row class="hover:bg-transparent!">
                 {#each headerGroup.headers as header, index (header.id)}
                   <DataTableHeaderCell
                     {header}

package/dist/data-table/table-setup.d.ts

@@ -17,6 +17,7 @@ interface TableSetupOptions<TData> {
     getRowCount?: () => number | undefined;
     getData?: () => TData[];
     getColumns?: () => any[];
+    getRowId?: (row: TData, index: number) => string;
     getRowSelection: () => RowSelectionState;
     getColumnVisibility: () => VisibilityState;
     getSorting: () => SortingState;

package/dist/data-table/table-setup.js

@@ -124,6 +124,7 @@ export function setupTable(options) {
         getCoreRowModel: getCoreRowModel(),
         getPaginationRowModel: options.enablePagination && !options.manualPagination ? getPaginationRowModel() : undefined,
         getSortedRowModel: !options.manualSorting ? getSortedRowModel() : undefined,
+        getRowId: options.getRowId,
         // Manual pagination configuration
         manualPagination: options.manualPagination,
         // Manual sorting configuration

package/dist/table/table-cell.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { createBubbler } from 'svelte/legacy'
-  import { cn, type WithElementRef } from '../utils.js'
+  import { cn, type WithElementRef } from '../utils'
   import type { HTMLTdAttributes } from 'svelte/elements'
 
   const bubble = createBubbler()
@@ -16,7 +16,7 @@
   bind:this={ref}
   data-slot="table-cell"
   class={cn(
-    'py-[9px] [&:has([role=menu])]:py-0 [&:has([data-uuid-copy])]:py-0 pl-3 pr-3 align-middle text-foreground font-normal text-base [&:has([role=menu])]:pl-1 [&:has([role=menu])]:bg-white [&:has([type=checkbox])]:bg-white',
+    'py-2.25 [&:has([role=menu])]:py-0 [&:has([data-uuid-copy])]:py-0 pl-3 pr-3 align-middle text-foreground font-normal text-base [&:has([role=menu])]:pl-1 [&:has([role=menu])]:bg-background [&:has([type=checkbox])]:bg-background',
     className
   )}
   {...restProps}

package/dist/table/table-cell.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type WithElementRef } from '../utils.js';
+import { type WithElementRef } from '../utils';
 import type { HTMLTdAttributes } from 'svelte/elements';
 declare const TableCell: import("svelte").Component<WithElementRef<HTMLTdAttributes>, {}, "ref">;
 type TableCell = ReturnType<typeof TableCell>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@invopop/popui",
   "license": "MIT",
-  "version": "0.1.88",
+  "version": "0.1.90",
   "repository": {
     "url": "https://github.com/invopop/popui"
   },