Middle mouse click support

[DimitriosProvatas]

Hello. We use the package for a project of ours and it works great. We recently thought about having the target row open in new tab.
This is doable with something like the onRowClick event and check for ctrlKey, but this does not trigger with middle mouse click.
What are your thoughts on extending the onRowClick to trigger with middle mouse click, or add a new onRowMiddleClick member?

Edit: we are willing to make the pull request, this is just as a feedback / idea exchange thread. :)

[icflorescu]

Hey @DimitriosProvatas,

Thanks for using Mantine DataTable and for your suggestion.
Reacting to "middle-click" is quite uncommon from a UX/UI perspective... I mean, there are lots of mouse models that don't even have the feature nowadays :-)
I'd be therefore reluctant to add a new property to handle this very specific use-case.

However, I think there is a way to easily implement this in a generic way with only a minor change to the current codebase.
There are two props called customRowAtttributes and customCellAttributes - the first can be provided to the table itself, the second to a column.
Currently, these properties are defined as following:

customRowAttributes?: (record: T, recordIndex: number) => Record<string, string | number>;

and

customCellAttributes?: (record: T, recordIndex: number) => Record<string, string | number>;

I could change the function return types to something more generic, like => Record<string, unknown>, then you could do something like this in your code:

<DataTable
  columns={[{ accessor: 'name' }, { accessor: 'city' }, { accessor: 'state' }]}
  // other props...
  customRowAttributes={({ id, name }, recordIndex) => ({
    onAuxClick: () => alert(`Middle-click on row ${name}`),
  })}
/>

This would be a non-breaking change, we would not bloat the codebase with edge-case properties, and people would still be able to handle middle clicks.

What do you think?
If you like the approach, I could to the necessary changes and come up with a new minor version in a matter of minutes.

[DimitriosProvatas]

Hello @icflorescu,
Thanks for the pointers. If it is super easy for you to implement that we would really love that.

[icflorescu]

UPDATE:
I just realized onAuxClick doesn't work on Safari yet.
Which means the above functionality should actually be implemented like so:

<DataTable
  columns={[{ accessor: 'name' }, { accessor: 'city' }, { accessor: 'state' }]}
  // other props...
  customRowAttributes={({ id, name }, recordIndex) => ({
    onMouseDown: (e: MouseEvent) => {
      if (e.button === 1) {
        alert(`Middle-click on row ${name}`);
      }
    },
  })}
/>

[icflorescu]

Ok, then.
I'll publish a new version in a few minutes and let you know here.

[icflorescu]

Make sure to update to 2.9.0 and have a look at handling middle-clicks example.

[icflorescu]

Unrelated, to the above, since you're using Mantine DataTable in your project, let me know if you'd be interested in having your logo and a link on the documentation website ;-)

[DimitriosProvatas]

First off, the new version works like a charm. Thank you for the response and also how fast this was ready! 👏
About the logo and link, the tool is unfortunately internal, so we cannot provide these.

[icflorescu]

Thank you too for the kind words!

About the logo and link, the tool is unfortunately internal, so we cannot provide these.

No worries, I understand :-)