Merge pull request #130 from studentinovisad/as/fix/data-table-tomfoo…

…lery fix(data-table): remove hacky solution
studentinovisad · Jan 8, 2025 · e92bbd2 · e92bbd2
2 parents 53600b3 + dec9748
commit e92bbd2
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 43 deletions.
diff --git a/src/routes/(dashboard)/columns.ts b/src/routes/(dashboard)/columns.ts
@@ -4,10 +4,6 @@ import type { ColumnDef } from '@tanstack/table-core';
 import DataTableActions from './data-table-actions.svelte';
 
 export const columns: ColumnDef<Person>[] = [
-	{
-		accessorKey: 'id',
-		header: 'internal_id'
-	},
 	{
 		accessorKey: 'type',
 		header: 'Type'
@@ -41,8 +37,8 @@ export const columns: ColumnDef<Person>[] = [
 		header: 'Toggle State',
 		cell: ({ row }) => {
 			return renderComponent(DataTableActions, {
-				id: row.getVisibleCells()[0].getValue() as number,
-				type: row.getVisibleCells()[1].getValue() as PersonType
+				id: row.original.id,
+				type: row.original.type
 			});
 		},
 		enableSorting: false

diff --git a/src/routes/(dashboard)/data-table.svelte b/src/routes/(dashboard)/data-table.svelte
@@ -60,51 +60,47 @@
 		<Table.Header>
 			{#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
 				<Table.Row>
-					{#each headerGroup.headers as header, idx (header.id)}
-						{#if idx !== 0}
-							<Table.Head>
-								{#if !header.isPlaceholder}
-									<div
-										class="flex cursor-pointer items-center"
-										role="button"
-										tabindex="0"
-										onclick={() => {
+					{#each headerGroup.headers as header (header.id)}
+						<Table.Head>
+							{#if !header.isPlaceholder}
+								<div
+									class="flex cursor-pointer items-center"
+									role="button"
+									tabindex="0"
+									onclick={() => {
+										header.column.toggleSorting();
+									}}
+									onkeydown={(e) => {
+										if (e.key === 'Enter' || e.key === ' ') {
 											header.column.toggleSorting();
-										}}
-										onkeydown={(e) => {
-											if (e.key === 'Enter' || e.key === ' ') {
-												header.column.toggleSorting();
-											}
-										}}
-									>
-										<FlexRender
-											content={header.column.columnDef.header}
-											context={header.getContext()}
-										/>
-										{#if header.column.getIsSorted() === 'asc'}
-											<span class="m-1">↑</span>
-										{:else if header.column.getIsSorted() === 'desc'}
-											<span class="m-1">↓</span>
-										{:else}
-											<span></span>
-										{/if}
-									</div>
-								{/if}
-							</Table.Head>
-						{/if}
+										}
+									}}
+								>
+									<FlexRender
+										content={header.column.columnDef.header}
+										context={header.getContext()}
+									/>
+									{#if header.column.getIsSorted() === 'asc'}
+										<span class="m-1">↑</span>
+									{:else if header.column.getIsSorted() === 'desc'}
+										<span class="m-1">↓</span>
+									{:else}
+										<span></span>
+									{/if}
+								</div>
+							{/if}
+						</Table.Head>
 					{/each}
 				</Table.Row>
 			{/each}
 		</Table.Header>
 		<Table.Body>
 			{#each table.getRowModel().rows as row (row.id)}
 				<Table.Row data-state={row.getIsSelected() && 'selected'}>
-					{#each row.getVisibleCells() as cell, idx (cell.id)}
-						{#if idx !== 0}
-							<Table.Cell>
-								<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
-							</Table.Cell>
-						{/if}
+					{#each row.getVisibleCells() as cell (cell.id)}
+						<Table.Cell>
+							<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
+						</Table.Cell>
 					{/each}
 				</Table.Row>
 			{:else}