Table: Right click and double click row handlers

[HaveSpacesuit]

I was able to add right click and double click handlers on table rows using the built-in rowProps prop. Any prop which can be passed to an HTMLDivElement may be passed into the table.

A hook like this can be used to handle user interactions on rows, give them a test-id, or custom styling based on the original data item. A right click handler may be useful for a context menu. A double click handler may be useful for downloading an item, navigating into a folder structure, etc.

https://codesandbox.io/s/itwinui-react-minimal-example-forked-hlkq3p

import { TableProps } from "@itwin/itwinui-react";
import React, { useCallback } from "react";
import { Row } from "react-table";

export function useRowActions(): TableProps["rowProps"] {
  const onContextMenu = useCallback((e: React.MouseEvent, row: Row): void => {
    e.preventDefault();

    const originalItem = row.original;

    alert(`Right clicked row:\n${JSON.stringify(originalItem)}`);
  }, []);

  const onDoubleClick = useCallback((e: React.MouseEvent, row: Row): void => {
    const originalItem = row.original;

    alert(`Double clicked row:\n${JSON.stringify(originalItem)}`);
  }, []);

  const rowProps = useCallback(
    (row: Row) => ({
      onContextMenu: (e: React.MouseEvent) => onContextMenu(e, row),
      onDoubleClick: (e: React.MouseEvent) => onDoubleClick(e, row),
      ["data-rowitem"]: row.original.name,
      style: { fontWeight: 600 }
    }),
    [onContextMenu, onDoubleClick]
  );

  return rowProps;
}

[mayank99]

Awesome, thanks for sharing here 👍