Resizable column for Table and Data Table

[pidanou]

Hi guys,

I was wondering if anyone managed to build a table with resizable columns. I have been looking for examples on TanStack but there are no information for Svelte.

Thanks!

[Schmell]

I have been trying to do this myself. If you have made any progress please share.
Thanks

I can see that there is a onColumnSizingChange hook in the createTable, but there is no getter for it so it does not seem to be reactive in the markup.

[Schmell]

Ok i got it now. I guess the confusing part for me was that you use the state as a function in the options state getters

make state

let columnSizing = $state<ColumnSizingState>({})

add the getter to the state option in createSvelteTable and the on onColumnSizingChange function

const table = createSvelteTable({
		get data() {
			return getCompRows(results)
		},
		columns,
		state: {
                        // heres the confusing part. Maybe i just don't quite know enough about state ruins yet.
			get columnSizing() {
				return columnSizing
			},
                        // other getters ...
                        // e.g
		        get columnVisibility() {
				return columnVisibility
			 },
		},
	
                // not required
		defaultColumn: {
			size: 40, //starting column size
			minSize: 10, //enforced during column resizing
			maxSize: 260 //enforced during column resizing
		},
                
		onColumnSizingChange: (updater) => {
			if (typeof updater === 'function') {
				columnSizing = updater(columnSizing)
			} else {
				columnSizing = updater
			}
		},
                // other handlers ...
	})

Then add style property to the header and cell

<Table.Row>
    {#each headerGroup.headers as header (header.id)}
        <Table.Head
            colspan={header.colSpan}
            style={`width: ${header.getSize()}px`}
	>

<Table.Row>
    {#each row.getVisibleCells() as cell (cell.id)}
        <Table.Cell
            style={`width: ${cell.column.getSize()}px`}
	>

of course you need a handle to grab and fire the functions
i dont love this but i used this snippet for the interm to test

{#snippet resizeHandle(header)}
	<div
		role="button"
		tabindex="0"
		onmousedown={header.getResizeHandler()}
		ontouchstart={header.getResizeHandler()}
		class={`cursor-col-resize`}
		style={`transform: ${header.column.getIsResizing()}`
			? `translateX(${table.getState().columnSizingInfo.deltaOffset}px)`
			: `''`}
	>
		{header.getSize()}|
	</div>
{/snippet}

and added that to my header cell

<div class="flex w-full justify-between gap-2">
    <FlexRender
        content={header.column.columnDef.header}
	context={header.getContext()}
    />
    {@render resizeHandle(header)}
</div>

Hope it helps anyone out there.
If pressed i could make a repl or something.