mirror of
https://github.com/apache/superset.git
synced 2024-09-16 02:29:39 -04:00
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
This commit is contained in:
parent
982210ad83
commit
68fa4d2665
@ -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();
|
||||
|
@ -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 }),
|
||||
)}
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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,
|
||||
};
|
||||
};
|
||||
|
||||
|
@ -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 {};
|
||||
|
Loading…
Reference in New Issue
Block a user