diff --git a/docs/sources/panels-visualizations/visualizations/table/index.md b/docs/sources/panels-visualizations/visualizations/table/index.md
index 3bdacc05ec8..f304c302823 100644
--- a/docs/sources/panels-visualizations/visualizations/table/index.md
+++ b/docs/sources/panels-visualizations/visualizations/table/index.md
@@ -209,6 +209,10 @@ If you have a field value that is an image URL or a base64 encoded image you can
{{< figure src="/static/img/docs/v73/table_hover.gif" max-width="900px" caption="Table hover" >}}
+Use the **Alt text** option to set the alternative text of an image. The text will be available for screen readers and in cases when images can't be loaded.
+
+Use the **Title text** option to set the text that's displayed when the image is hovered over with a cursor.
+
#### Sparkline
Shows values rendered as a sparkline. You can show sparklines using the [Time series to table transformation](ref:time-series-to-table-transformation) on data with multiple time series to process it into a format the table can show.
diff --git a/packages/grafana-schema/src/common/common.gen.ts b/packages/grafana-schema/src/common/common.gen.ts
index 960abb68275..ff3fce0def6 100644
--- a/packages/grafana-schema/src/common/common.gen.ts
+++ b/packages/grafana-schema/src/common/common.gen.ts
@@ -771,6 +771,8 @@ export interface TableJsonViewCellOptions {
* Json view cell options
*/
export interface TableImageCellOptions {
+ alt?: string;
+ title?: string;
type: TableCellDisplayMode.Image;
}
diff --git a/packages/grafana-schema/src/common/table.cue b/packages/grafana-schema/src/common/table.cue
index 417d9768ea6..9dc54fe5ec4 100644
--- a/packages/grafana-schema/src/common/table.cue
+++ b/packages/grafana-schema/src/common/table.cue
@@ -48,6 +48,8 @@ TableJsonViewCellOptions: {
// Json view cell options
TableImageCellOptions: {
type: TableCellDisplayMode & "image"
+ alt?: string
+ title?: string
} @cuetsy(kind="interface")
// Show data links in the cell
diff --git a/packages/grafana-ui/src/components/Table/ImageCell.tsx b/packages/grafana-ui/src/components/Table/ImageCell.tsx
index 83b8b888911..4e9543659ec 100644
--- a/packages/grafana-ui/src/components/Table/ImageCell.tsx
+++ b/packages/grafana-ui/src/components/Table/ImageCell.tsx
@@ -3,41 +3,41 @@ import * as React from 'react';
import { getCellLinks } from '../../utils';
import { DataLinksContextMenu } from '../DataLinks/DataLinksContextMenu';
-import { TableCellProps } from './types';
+import { TableCellDisplayMode, TableCellProps } from './types';
+import { getCellOptions } from './utils';
const DATALINKS_HEIGHT_OFFSET = 10;
export const ImageCell = (props: TableCellProps) => {
const { field, cell, tableStyles, row, cellProps } = props;
-
+ const cellOptions = getCellOptions(field);
+ const { title, alt } =
+ cellOptions.type === TableCellDisplayMode.Image ? cellOptions : { title: undefined, alt: undefined };
const displayValue = field.display!(cell.value);
-
const hasLinks = Boolean(getCellLinks(field, row)?.length);
+ // The image element
+ const img = (
+
+ );
+
return (