Feature / Add column width reset on dblclick

[lolcabanon]

I tried to implement this in my project, but it was buggy, so I thought I could try to add it directly to your project. Turns out it was so much easier this way!

I added a double click action to reset a column to its initial width.

It also works on touchscreens by listening to touchend to simulate doubletap without interfering with the drag mechanism.

Feel free to tell me if I forgot something (types?) as I am not used to Svelte/Kit, NPM packages nor TypeScript.

(Actually, I tried to package or build with pnpm to test the bundled version, but couldn't figure out how to do... I first did the modifications directly in js files from node_modules in a project I am building, so I tested it this way instead. I'ts probably working, but you might build and test before merging just in case. Also, a contributing guide would be useful! - I know it might be a bit of work to make it tho...)

Nice work btw, I love working with svelte-headless-table! 😄 (I saw in another comment that you don't have much time to update it at the moment. I'll be happy to contribute if anything else comes to my mind while I'm working 😉)

[bryanmylee]

Thanks so much for the contribution! I'll play around with it, and I'd be more than happy to add a contributing guide. Generally though, I just run manual interaction tests with src/routes/+page.svelte.

As for the API, enabling/disabling double-click to reset might actually be better expressed as a plugin option or a column option, something like:

const table = createTable(data, {
  resize: addResizedColumns({
    // default to false?
    doubleClickDragHandleToReset: true,
  }),
});

// or
const columns = table.createColumns([
  table.column({
    accessor: 'name',
    plugins: {
      // for per-column config
      resize: {
        doubleClickDragHandleToReset: false,
      },
    },
  });
]);

Having it default to false is probably safer to avoid breaking existing projects.

You can define these properties in the AddResizedColumnsConfig and ResizedColumnsColumnOptions types.

To read the plugin's config state, refer to:

export const addResizedColumns =
  // here, line 70.
  <Item>({ onResizeEnd }: AddResizedColumnsConfig = {}): TablePlugin<
    Item,
    ResizedColumnsState,
    ResizedColumnsColumnOptions,
    ResizedColumnsPropSet,
    ResizedColumnsAttributeSet
  > => 
  ({ columnOptions }) => {

In the plugin's hooks for 'thead.tr.th', to get the column options for a given cell, you can use columnOptions[cell.id].

While I don't have a lot of time, I'd love to help you figure this out!

[lolcabanon]

Hey @bryanmylee !

I just figured out I needed to install vite-plugin-svelte on top of the project to run npm scripts. Do you have it as a global package? It is not listed as a dependency in the package.json file.

As for the API, enabling/disabling double-click to reset might actually be better expressed as a plugin option or a column option, something like:

I think a column option to disable would make sense, since the behaviour is globally set with the attribute use:cellProps.resize.reset. If you don't want any column to have it, just omit it in the markup? (Maybe a plugin option to set the default would be cool, like disabled by default, and you can enable on specific column -- instead of enabled by default and disable by columns?)

Or were you thinking about linking the reset behaviour with use:cellProps.resize.drag? And then automatically applying it according to the API settings?

Also, thanks for your help and anwser! :)

[lolcabanon]

Also just realized a neat thing, with use:cellProps.resize.reset you can set an arbitrary element (like a button) to be the "reseter".

{#if !props.resize.disabled}
	<button use:props.resize.reset>reset width</button> <!-- here -->
{/if}
{#if !props.resize.disabled}
	<div
		class="resizer"
		on:click|stopPropagation
		use:props.resize.drag
		use:props.resize.reset
	/> <!-- or here ^ -->
{/if}

[lolcabanon]

Hey @bryanmylee! Thanks for accepting my PR. :D I was just looking back on this yesterday by chance!

I don't really had the time to complete with the columns option or else since I've been buried in work for a while now, lol...

Anyway, happy to see it was good enough for you! :)

See you next PR!