feat: Adds drill to detail context menu to Table

superset-frontend/plugins/plugin-chart-pivot-table/src/PivotTableChart.tsx

@@ -365,8 +365,8 @@ export default function PivotTableChart(props: PivotTableProps) {
  const handleContextMenu = useCallback(
  (
  e: MouseEvent,
- colKey: DataRecordValue[] | undefined,
- rowKey: DataRecordValue[] | undefined,
+ colKey: (string | number | boolean)[] | undefined,
+ rowKey: (string | number | boolean)[] | undefined,
  ) => {
  if (onContextMenu) {
  e.preventDefault();

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 }),
  )}

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

@@ -39,6 +39,7 @@ import {
  ensureIsArray,
  GenericDataType,
  getTimeFormatterForGranularity,
+ QueryObjectFilterClause,
  styled,
  t,
  tn,
@@ -205,6 +206,7 @@ export default function TableChart<D extends DataRecord = DataRecord>(
  sticky = true, // whether to use sticky header
  columnColorFormatters,
  allowRearrangeColumns = false,
+ onContextMenu,
  } = props;
  const timestampFormatter = useCallback(
  value => getTimeFormatterForGranularity(timeGrain)(value),
@@ -576,6 +578,24 @@ export default function TableChart<D extends DataRecord = DataRecord>(
 
  const { width: widthFromState, height: heightFromState } = tableSize;
 
+ const handleContextMenu =
+ onContextMenu && !isRawRecords
+ ? (value: D, clientX: number, clientY: number) => {
+ const filters: QueryObjectFilterClause[] = [];
+ columnsMeta.forEach(col => {
+ if (!col.isMetric) {
+ filters.push({
+ col: col.key,
+ op: '==',
+ val: value[col.key] as string | number | boolean,
+ formattedVal: String(value[col.key]),
+ });
+ }
+ });
+ onContextMenu(filters, clientX, clientY);
+ }
+ : undefined;
+
  return (
  <Styles>
  <DataTable<D>
@@ -598,6 +618,7 @@ export default function TableChart<D extends DataRecord = DataRecord>(
  selectPageSize={pageSize !== null && SelectPageSize}
  // not in use in Superset, but needed for unit tests
  sticky={sticky}
+ onContextMenu={handleContextMenu}
  />
  </Styles>
  );

superset-frontend/plugins/plugin-chart-table/src/transformProps.ts

@@ -204,7 +204,11 @@ const transformProps = (
  queriesData = [],
  filterState,
  ownState: serverPaginationData,
- hooks: { onAddFilter: onChangeFilter, setDataMask = () => {} },
+ hooks: {
+ onAddFilter: onChangeFilter,
+ setDataMask = () => {},
+ onContextMenu,
+ },
  } = chartProps;
 
  const {
@@ -274,6 +278,7 @@ const transformProps = (
  columnColorFormatters,
  timeGrain,
  allowRearrangeColumns,
+ onContextMenu,
  };
 };
 

superset-frontend/plugins/plugin-chart-table/src/types.ts

@@ -30,6 +30,7 @@ import {
  ChartDataResponseResult,
  QueryFormData,
  SetDataMaskHook,
+ QueryObjectFilterClause,
 } from '@superset-ui/core';
 import { ColorFormatters, ColumnConfig } from '@superset-ui/chart-controls';
 
@@ -111,6 +112,11 @@ export interface TableChartTransformedProps<D extends DataRecord = DataRecord> {
  onChangeFilter?: ChartProps['hooks']['onAddFilter'];
  columnColorFormatters?: ColorFormatters;
  allowRearrangeColumns?: boolean;
+ onContextMenu?: (
+ filters: QueryObjectFilterClause[],
+ clientX: number,
+ clientY: number,
+ ) => void;
 }
 
 export default {};