@invopop/popui 0.1.87 → 0.1.89

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -48,7 +48,7 @@
48
48
  <div
49
49
  class={clsx('text-foreground-default-secondary text-base', {
50
50
  'pl-2': vertical,
51
- 'min-w-[125px]': !vertical
51
+ 'min-w-[148px]': !vertical
52
52
  })}
53
53
  >
54
54
  {label}
@@ -134,6 +134,14 @@ export interface DataTableProps<TData> {
134
134
  initialColumnSizing?: Record<string, number>;
135
135
  pageSizeOptions?: number[];
136
136
  emptyState?: Omit<EmptyStateProps, 'children' | 'check'>;
137
+ /**
138
+ * Identify rows by a stable key derived from the data instead of the default
139
+ * row index. Critical when consumers prepend/insert rows: with index-based
140
+ * IDs, Svelte's keyed `{#each}` reuses the existing top `<tr>` and mounts a
141
+ * fresh DOM node at the bottom for the shifted-down row, which sends row-
142
+ * level animations (slide-in, flash) to the wrong element.
143
+ */
144
+ getRowId?: (row: TData, index: number) => string;
137
145
  onRowClick?: (row: TData) => void;
138
146
  onRowFocus?: (row: TData) => void;
139
147
  onSelectionChange?: (selectedRows: TData[]) => void;
@@ -78,6 +78,7 @@
78
78
  onColumnVisibilityChange,
79
79
  getRowClassName,
80
80
  getRowState,
81
+ getRowId,
81
82
  children
82
83
  }: DataTableProps<TData> = $props()
83
84
 
@@ -177,6 +178,7 @@
177
178
  const table = setupTable<TData>({
178
179
  getData: () => data,
179
180
  getColumns: () => columns,
181
+ getRowId,
180
182
  enableSelection,
181
183
  enablePagination,
182
184
  manualPagination,
@@ -17,6 +17,7 @@ interface TableSetupOptions<TData> {
17
17
  getRowCount?: () => number | undefined;
18
18
  getData?: () => TData[];
19
19
  getColumns?: () => any[];
20
+ getRowId?: (row: TData, index: number) => string;
20
21
  getRowSelection: () => RowSelectionState;
21
22
  getColumnVisibility: () => VisibilityState;
22
23
  getSorting: () => SortingState;
@@ -124,6 +124,7 @@ export function setupTable(options) {
124
124
  getCoreRowModel: getCoreRowModel(),
125
125
  getPaginationRowModel: options.enablePagination && !options.manualPagination ? getPaginationRowModel() : undefined,
126
126
  getSortedRowModel: !options.manualSorting ? getSortedRowModel() : undefined,
127
+ getRowId: options.getRowId,
127
128
  // Manual pagination configuration
128
129
  manualPagination: options.manualPagination,
129
130
  // Manual sorting configuration
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@invopop/popui",
3
3
  "license": "MIT",
4
- "version": "0.1.87",
4
+ "version": "0.1.89",
5
5
  "repository": {
6
6
  "url": "https://github.com/invopop/popui"
7
7
  },