feat: Adds drill to detail context menu to Table (#21168)

* feat: Adds drill to detail context menu to Table

* Improves context menu positioning

* Fixes Pivot Table typying

superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx

@@ -23,6 +23,7 @@ import React, {
   HTMLProps,
   MutableRefObject,
   CSSProperties,
+  MouseEvent,
 } from 'react';
 import {
   useTable,
@@ -66,6 +67,7 @@ export interface DataTableProps<D extends object> extends TableOptions<D> {
   rowCount: number;
   wrapperRef?: MutableRefObject<HTMLDivElement>;
   onColumnOrderChange: () => void;
+  onContextMenu?: (value: D, clientX: number, clientY: number) => void;
 }
 
 export interface RenderHTMLCellProps extends HTMLProps<HTMLTableCellElement> {
@@ -98,6 +100,7 @@ export default typedMemo(function DataTable<D extends object>({
   serverPagination,
   wrapperRef: userWrapperRef,
   onColumnOrderChange,
+  onContextMenu,
   ...moreUseTableOptions
 }: DataTableProps<D>): JSX.Element {
   const tableHooks: PluginHook<D>[] = [
@@ -270,7 +273,20 @@ export default typedMemo(function DataTable<D extends object>({
             prepareRow(row);
             const { key: rowKey, ...rowProps } = row.getRowProps();
             return (
-              <tr key={rowKey || row.id} {...rowProps}>
+              <tr
+                key={rowKey || row.id}
+                {...rowProps}
+                onContextMenu={(e: MouseEvent) => {
+                  if (onContextMenu) {
+                    e.preventDefault();
+                    onContextMenu(
+                      row.original,
+                      e.nativeEvent.clientX,
+                      e.nativeEvent.clientY,
+                    );
+                  }
+                }}
+              >
                 {row.cells.map(cell =>
                   cell.render('Cell', { key: cell.column.id }),
                 )}