QT/superset2
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2026-04-07 10:31:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(dashboard): show dataset column labels in View as table (#37140)

Browse Source
This commit is contained in:
Vanessa Giannoni
2026-01-27 18:51:28 -03:00
committed by GitHub
parent 20da4eb86e
commit 2ec3aaaeea
7 changed files with 48 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx
View File

@@ -457,6 +457,7 @@ const SliceHeaderControls = (
isRequest
isVisible
canDownload={!!props.supersetCanCSV}
columnDisplayNames={datasetWithVerboseMap?.verbose_map}
/>
}
/>

12
superset-frontend/src/explore/components/DataTableControl/index.tsx
View File

@@ -164,6 +164,7 @@ const DataTableTemporalHeaderCell = ({
onTimeColumnChange,
datasourceId,
isOriginalTimeColumn,
displayLabel,
}: {
columnName: string;
onTimeColumnChange: (
@@ -172,6 +173,7 @@ const DataTableTemporalHeaderCell = ({
) => void;
datasourceId?: string;
isOriginalTimeColumn: boolean;
displayLabel?: string;
}) => {
const theme = useTheme();
@@ -215,10 +217,10 @@ const DataTableTemporalHeaderCell = ({
onClick={(e: React.MouseEvent<HTMLElement>) => e.stopPropagation()}
/>
</Popover>
{columnName}
{displayLabel ?? columnName}
</span>
) : (
<span>{columnName}</span>
<span>{displayLabel ?? columnName}</span>
);
};
@@ -258,6 +260,7 @@ export const useTableColumns = (
isVisible?: boolean,
moreConfigs?: { [key: string]: Partial<Column> },
allowHTML?: boolean,
columnDisplayNames?: Record<string, string>,
) => {
const [originalFormattedTimeColumns, setOriginalFormattedTimeColumns] =
useState<string[]>(getTimeColumns(datasourceId));
@@ -302,6 +305,7 @@ export const useTableColumns = (
.map((key, index) => {
const colType = coltypes?.[index];
const firstValue = data[0][key];
const headerLabel = columnDisplayNames?.[key] ?? key;
const originalFormattedTimeColumnIndex =
colType === GenericDataType.Temporal
? originalFormattedTimeColumns.indexOf(key)
@@ -320,9 +324,10 @@ export const useTableColumns = (
datasourceId={datasourceId}
onTimeColumnChange={onTimeColumnChange}
isOriginalTimeColumn={isOriginalTimeColumn}
displayLabel={headerLabel}
/>
) : (
key
headerLabel
),
Cell: ({ value }) => {
if (value === true) {
@@ -357,6 +362,7 @@ export const useTableColumns = (
datasourceId,
moreConfigs,
originalFormattedTimeColumns,
columnDisplayNames,
],
);
};

28
superset-frontend/src/explore/components/DataTableControl/useTableColumns.test.ts
View File

@@ -105,6 +105,7 @@ test('useTableColumns with no options', () => {
"Cell": [Function],
"Header": <DataTableTemporalHeaderCell
columnName="numtime"
displayLabel="numtime"
isOriginalTimeColumn={false}
onTimeColumnChange={[Function]}
/>,
@@ -168,6 +169,7 @@ test('useTableColumns with options', () => {
"Cell": [Function],
"Header": <DataTableTemporalHeaderCell
columnName="numtime"
displayLabel="numtime"
isOriginalTimeColumn={false}
onTimeColumnChange={[Function]}
/>,
@@ -194,3 +196,29 @@ test('useTableColumns with options', () => {
});
});
});
test('useTableColumns applies columnDisplayNames to headers', () => {
const columnDisplayNames = {
col01: 'Column One',
[NUMTIME_KEY]: 'Verbose Numtime',
} as Record<string, string>;
const hook = renderHook(() =>
useTableColumns(
colnames,
coltypes,
data,
undefined,
true,
undefined,
undefined,
columnDisplayNames,
),
);
const cols = hook.result.current as JsonObject[];
const col01 = cols.find(c => c.id === 'col01');
const numtime = cols.find(c => c.id === NUMTIME_KEY);
expect(col01?.Header).toBe('Column One');
// Temporal header is a component; ensure it received the displayLabel prop
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
expect(numtime?.Header.props.displayLabel).toBe('Verbose Numtime');
});

2
superset-frontend/src/explore/components/DataTablesPane/components/ResultsPaneOnDashboard.tsx
View File

@@ -55,6 +55,7 @@ export const ResultsPaneOnDashboard = ({
isVisible,
dataSize = 50,
canDownload,
columnDisplayNames,
}: ResultsPaneProps) => {
const resultsPanes = useResultsPane({
errorMessage,
@@ -66,6 +67,7 @@ export const ResultsPaneOnDashboard = ({
dataSize,
isVisible,
canDownload,
columnDisplayNames,
});
if (resultsPanes.length === 1) {

2
superset-frontend/src/explore/components/DataTablesPane/components/SingleQueryResultPane.tsx
View File

@@ -39,6 +39,7 @@ export const SingleQueryResultPane = ({
dataSize = 50,
isVisible,
canDownload,
columnDisplayNames,
}: SingleQueryResultPaneProp) => {
const [filterText, setFilterText] = useState('');
@@ -52,6 +53,7 @@ export const SingleQueryResultPane = ({
isVisible,
{}, // moreConfig
true, // allowHTML
columnDisplayNames,
);
const filteredData = useFilteredTableData(filterText, data);

2
superset-frontend/src/explore/components/DataTablesPane/components/useResultsPane.tsx
View File

@@ -55,6 +55,7 @@ export const useResultsPane = ({
isVisible,
dataSize = 50,
canDownload,
columnDisplayNames,
}: ResultsPaneProps): ReactElement[] => {
const metadata = getChartMetadataRegistry().get(
queryFormData?.viz_type || queryFormData?.vizType,
@@ -164,6 +165,7 @@ export const useResultsPane = ({
datasourceId={queryFormData.datasource}
isVisible={isVisible}
canDownload={canDownload}
columnDisplayNames={columnDisplayNames}
/>
</StyledDiv>
));

4
superset-frontend/src/explore/components/DataTablesPane/types.ts
View File

@@ -49,6 +49,8 @@ export interface ResultsPaneProps {
// reload OriginalFormattedTimeColumns from localStorage when isVisible is true
isVisible: boolean;
canDownload: boolean;
// Optional map of column/metric name -> verbose label
columnDisplayNames?: Record<string, string>;
}
export interface SamplesPaneProps {
@@ -88,4 +90,6 @@ export interface SingleQueryResultPaneProp extends QueryResultInterface {
// reload OriginalFormattedTimeColumns from localStorage when isVisible is true
isVisible: boolean;
canDownload: boolean;
// Optional map of column/metric name -> verbose label
columnDisplayNames?: Record<string, string>;
}