diff --git a/package-lock.json b/package-lock.json
index 6c52d05d..e2c7c5f5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29547,7 +29547,7 @@
     },
     "packages/visualizations": {
       "name": "@opendatasoft/visualizations",
-      "version": "0.27.0",
+      "version": "0.27.1-beta.1",
       "license": "MIT",
       "dependencies": {
         "@placemarkio/geo-viewport": "^1.0.2",
@@ -29622,10 +29622,10 @@
     },
     "packages/visualizations-react": {
       "name": "@opendatasoft/visualizations-react",
-      "version": "0.27.0",
+      "version": "0.27.1-beta.1",
       "license": "MIT",
       "dependencies": {
-        "@opendatasoft/visualizations": "0.27.0",
+        "@opendatasoft/visualizations": "0.27.1-beta.1",
         "use-callback-ref": "^1.2.4"
       },
       "devDependencies": {
diff --git a/packages/visualizations-react/CHANGELOG.md b/packages/visualizations-react/CHANGELOG.md
index 1e0f381d..9aab6004 100644
--- a/packages/visualizations-react/CHANGELOG.md
+++ b/packages/visualizations-react/CHANGELOG.md
@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.27.1-beta.1](https://github.com/opendatasoft/ods-dataviz-sdk/compare/@opendatasoft/visualizations-react@0.27.1-beta.0...@opendatasoft/visualizations-react@0.27.1-beta.1) (2024-11-29)
+
+
+### Bug Fixes
+
+* make colors more easily customizable ([7f1591b](https://github.com/opendatasoft/ods-dataviz-sdk/commit/7f1591bb2770751e813dea4c82ac9c43be4306ee))
+* rename rows, lint, simplify callbacks ([1a10a98](https://github.com/opendatasoft/ods-dataviz-sdk/commit/1a10a98297e93e44415ffb49d917d6ef92d3d7c1))
+
+
+
+
+
+## [0.27.1-beta.0](https://github.com/opendatasoft/ods-dataviz-sdk/compare/@opendatasoft/visualizations-react@0.27.0...@opendatasoft/visualizations-react@0.27.1-beta.0) (2024-11-27)
+
+**Note:** Version bump only for package @opendatasoft/visualizations-react
+
+
+
+
+
 # [0.27.0](https://github.com/opendatasoft/ods-dataviz-sdk/compare/@opendatasoft/visualizations-react@0.26.1...@opendatasoft/visualizations-react@0.27.0) (2024-11-06)
 
 
diff --git a/packages/visualizations-react/package.json b/packages/visualizations-react/package.json
index 5a67b5f6..0117f07e 100644
--- a/packages/visualizations-react/package.json
+++ b/packages/visualizations-react/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@opendatasoft/visualizations-react",
-    "version": "0.27.0",
+    "version": "0.27.1-beta.1",
     "license": "MIT",
     "author": "opendatasoft",
     "homepage": "https://github.com/opendatasoft/ods-dataviz-sdk",
@@ -53,7 +53,7 @@
         "arrowParens": "avoid"
     },
     "dependencies": {
-        "@opendatasoft/visualizations": "0.27.0",
+        "@opendatasoft/visualizations": "0.27.1-beta.1",
         "use-callback-ref": "^1.2.4"
     },
     "devDependencies": {
diff --git a/packages/visualizations-react/src/index.ts b/packages/visualizations-react/src/index.ts
index d6015ae4..65097f11 100644
--- a/packages/visualizations-react/src/index.ts
+++ b/packages/visualizations-react/src/index.ts
@@ -10,6 +10,13 @@ import {
     PoiMap as _PoiMap,
     Table as _Table,
     WebGlMap as _WebGlMap,
+    BooleanFormat as _BooleanFormat,
+    DateFormat as _DateFormat,
+    GeoFormat as _GeoFormat,
+    LongTextFormat as _LongTextFormat,
+    ShortTextFormat as _ShortTextFormat,
+    URLFormat as _URLFormat,
+    NumberFormat as _NumberFormat,
 } from '@opendatasoft/visualizations';
 import type {
     ChartProps,
@@ -20,6 +27,13 @@ import type {
     PoiMapProps,
     WebGlMapProps,
     TableProps,
+    BooleanFormatProps,
+    DateFormatProps,
+    GeoFormatProps,
+    LongTextFormatProps,
+    ShortTextFormatProps,
+    URLFormatProps,
+    NumberFormatProps,
 } from '@opendatasoft/visualizations';
 import reactifySvelte from 'reactify';
 
@@ -44,3 +58,31 @@ export const ChoroplethSvg = reactifySvelte<ChoroplethGeoJsonProps>(
 export const PoiMap = reactifySvelte<PoiMapProps>(_PoiMap, 'ods-visualizations-poi-map');
 export const WebGlMap = reactifySvelte<WebGlMapProps>(_WebGlMap, 'ods-visualizations-webgl-map');
 export const Table = reactifySvelte<TableProps>(_Table, 'ods-visualizations-table');
+export const BooleanFormat = reactifySvelte<BooleanFormatProps>(
+    _BooleanFormat,
+    'ods-visualizations-format-boolean'
+);
+export const DateFormat = reactifySvelte<DateFormatProps>(
+    _DateFormat,
+    'ods-visualizations-format-date'
+);
+export const GeoFormat = reactifySvelte<GeoFormatProps>(
+    _GeoFormat,
+    'ods-visualizations-format-geo'
+);
+export const ShortTextFormat = reactifySvelte<ShortTextFormatProps>(
+    _ShortTextFormat,
+    'ods-visualizations-format-shorttext'
+);
+export const LongTextFormat = reactifySvelte<LongTextFormatProps>(
+    _LongTextFormat,
+    'ods-visualizations-format-longtext'
+);
+export const NumberFormat = reactifySvelte<NumberFormatProps>(
+    _NumberFormat,
+    'ods-visualizations-format-number'
+);
+export const URLFormat = reactifySvelte<URLFormatProps>(
+    _URLFormat,
+    'ods-visualizations-format-url'
+);
diff --git a/packages/visualizations-react/stories/Table/Table.stories.tsx b/packages/visualizations-react/stories/Table/Table.stories.tsx
index d64a1050..efeca90d 100644
--- a/packages/visualizations-react/stories/Table/Table.stories.tsx
+++ b/packages/visualizations-react/stories/Table/Table.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import type { TableData, Async } from '@opendatasoft/visualizations';
 
@@ -39,6 +39,28 @@ const ScrollTemplate: ComponentStory<typeof Table> = args => (
     </div>
 );
 
+const RowHoverTemplate: ComponentStory<typeof Table> = args => {
+    const { options: argOptions, data: argData } = args;
+    const [hoveredRecord, setHovered] = useState<Record<string, unknown> | undefined | null>(null);
+    const [lastClicked, setLastClicked] = useState<Record<string, unknown> | undefined | null>(null);
+
+    const onMouseEnter = (record?: Record<string, unknown>) => {setHovered(record);};
+    const onMouseLeave = () => {setHovered(null);};
+    const onClick = (record?: Record<string, unknown>) => {setLastClicked(record);};
+
+    return (
+        <>
+        <h3>Hovered</h3>
+        <pre>{JSON.stringify(hoveredRecord)}</pre>
+        <h3>Clicked</h3>
+        <pre>{JSON.stringify(lastClicked)}</pre>
+            <div style={{ maxWidth: '800px' }} className='design-system'>
+                <Table data={argData} options={{...argOptions, rowProps: { onClick, onMouseEnter, onMouseLeave}}}/>
+            </div>;
+        </>
+    );
+};
+
 const optionsWithPagination = {
     ...options,
     pagination: {
@@ -107,3 +129,9 @@ RtlDirection.args = {
     data,
     options: optionsWithPagination,
 };
+
+export const RowHoverAndClick = RowHoverTemplate.bind({});
+RowHoverAndClick.args = {
+    data,
+    options,
+};
diff --git a/packages/visualizations-react/stories/Table/custom-style.css b/packages/visualizations-react/stories/Table/custom-style.css
index b875423a..c4a2f5d9 100644
--- a/packages/visualizations-react/stories/Table/custom-style.css
+++ b/packages/visualizations-react/stories/Table/custom-style.css
@@ -45,6 +45,10 @@
     color: blue;
 }
 
+.design-system .ods-dataviz--default td  button:hover {
+    background-color: #cbd2db;
+}
+
 .design-system svg {
     --selected: #142e7b;
     --neutral: #cbd2db;
diff --git a/packages/visualizations-react/stories/Table/options.ts b/packages/visualizations-react/stories/Table/options.ts
index b0abeb34..50bf6a89 100644
--- a/packages/visualizations-react/stories/Table/options.ts
+++ b/packages/visualizations-react/stories/Table/options.ts
@@ -68,7 +68,7 @@ export const columns: Column[] = [
         key: 'url',
         dataFormat: 'url',
         options: {
-            display: value => value.startsWith('https://')  ? 'link' : 'broken link',
+            display: (value: string) => value.startsWith('https://')  ? 'link' : 'broken link',
         },
     },
     {
diff --git a/packages/visualizations/CHANGELOG.md b/packages/visualizations/CHANGELOG.md
index 4855b4c9..c080b7f6 100644
--- a/packages/visualizations/CHANGELOG.md
+++ b/packages/visualizations/CHANGELOG.md
@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.27.1-beta.1](https://github.com/opendatasoft/ods-dataviz-sdk/compare/@opendatasoft/visualizations@0.27.1-beta.0...@opendatasoft/visualizations@0.27.1-beta.1) (2024-11-29)
+
+
+### Bug Fixes
+
+* make colors more easily customizable ([7f1591b](https://github.com/opendatasoft/ods-dataviz-sdk/commit/7f1591bb2770751e813dea4c82ac9c43be4306ee))
+* rename rows, lint, simplify callbacks ([1a10a98](https://github.com/opendatasoft/ods-dataviz-sdk/commit/1a10a98297e93e44415ffb49d917d6ef92d3d7c1))
+
+
+### Reverts
+
+* Revert "chore: add accessor functiond and make warnings optionals" ([547cb6f](https://github.com/opendatasoft/ods-dataviz-sdk/commit/547cb6f820457a959b2314aa568268284a94cca5))
+
+
+
+
+
+## [0.27.1-beta.0](https://github.com/opendatasoft/ods-dataviz-sdk/compare/@opendatasoft/visualizations@0.27.0...@opendatasoft/visualizations@0.27.1-beta.0) (2024-11-27)
+
+
+### Bug Fixes
+
+* add keyboard a11y ([e2ed58d](https://github.com/opendatasoft/ods-dataviz-sdk/commit/e2ed58d8c9a8acc5379cb3df7a8e281c96f1a2de))
+* change implem to extra column to avoid formatting issues ([f2108e7](https://github.com/opendatasoft/ods-dataviz-sdk/commit/f2108e7801b34dc658ea975dcf177a35191386ac))
+* import alias and export old types ([f7080ac](https://github.com/opendatasoft/ods-dataviz-sdk/commit/f7080acab8e15329cbda1899a4c88bedb46d0fac))
+
+
+
+
+
 # [0.27.0](https://github.com/opendatasoft/ods-dataviz-sdk/compare/@opendatasoft/visualizations@0.26.1...@opendatasoft/visualizations@0.27.0) (2024-11-06)
 
 
diff --git a/packages/visualizations/package.json b/packages/visualizations/package.json
index 3f16951a..e4eca4c5 100644
--- a/packages/visualizations/package.json
+++ b/packages/visualizations/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@opendatasoft/visualizations",
-    "version": "0.27.0",
+    "version": "0.27.1-beta.1",
     "license": "MIT",
     "author": "opendatasoft",
     "homepage": "https://github.com/opendatasoft/ods-dataviz-sdk",
diff --git a/packages/visualizations/src/components/Table/Cell/Format/BooleanFormat.svelte b/packages/visualizations/src/components/Format/BooleanFormat.svelte
similarity index 50%
rename from packages/visualizations/src/components/Table/Cell/Format/BooleanFormat.svelte
rename to packages/visualizations/src/components/Format/BooleanFormat.svelte
index e5b724d9..e6000086 100644
--- a/packages/visualizations/src/components/Table/Cell/Format/BooleanFormat.svelte
+++ b/packages/visualizations/src/components/Format/BooleanFormat.svelte
@@ -1,15 +1,21 @@
 <script lang="ts">
     import { warn } from './utils';
+    import type { BooleanFormatProps } from './types';
 
-    export let rawValue: unknown;
-    export let display = (v: boolean) => v.toString();
+    type $$Props = BooleanFormatProps;
+
+    export let rawValue: $$Props['rawValue'];
+    export let display: $$Props['display'] = (v: boolean) => v.toString();
 
     $: format = (v: unknown) => {
         if (typeof v !== 'boolean') {
             warn(v, 'boolean');
         }
         // Currently we return the raw value until we have alternative renders
-        return display(v as boolean);
+        if (display) {
+            return display(v as boolean);
+        }
+        return v;
     };
 
     $: value = format(rawValue);
diff --git a/packages/visualizations/src/components/Format/DateFormat.svelte b/packages/visualizations/src/components/Format/DateFormat.svelte
new file mode 100644
index 00000000..f6de2f30
--- /dev/null
+++ b/packages/visualizations/src/components/Format/DateFormat.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+    import { warn } from './utils';
+    import type { DateFormatProps } from './types';
+
+    type $$Props = DateFormatProps;
+
+    export let rawValue: $$Props['rawValue'];
+    export let display: $$Props['display'] = (v: string) => v;
+    export let intl: $$Props['intl'] = {};
+    export let locale = 'en-En';
+
+    $: format = (v: unknown) => {
+        if (
+            (typeof v === 'string' || typeof v === 'number') &&
+            !Number.isNaN(new Date(v).getTime())
+        ) {
+            const intlValue = Intl.DateTimeFormat(locale, intl).format(new Date(v));
+            if (display) {
+                return display(intlValue);
+            }
+            return v;
+        }
+        warn(v, 'date');
+        return v;
+    };
+
+    $: value = format(rawValue);
+</script>
+
+{value}
diff --git a/packages/visualizations/src/components/Table/Cell/Format/GeoFormat.svelte b/packages/visualizations/src/components/Format/GeoFormat.svelte
similarity index 62%
rename from packages/visualizations/src/components/Table/Cell/Format/GeoFormat.svelte
rename to packages/visualizations/src/components/Format/GeoFormat.svelte
index 978b1f13..7d480eac 100644
--- a/packages/visualizations/src/components/Table/Cell/Format/GeoFormat.svelte
+++ b/packages/visualizations/src/components/Format/GeoFormat.svelte
@@ -2,22 +2,28 @@
     import type { Content } from 'tippy.js';
 
     import { WebGlMap } from 'components/Map';
-    import type { WebGlMapOptions, WebGlMapData } from 'components/Map';
+    import type { WebGlMapData } from 'components/Map';
     import tippy from 'components/utils/tippy';
+    import type { GeoFormatProps } from './types';
 
-    export let rawValue: unknown;
-    export let display = (v: unknown) => v;
-    export let mapOptions: WebGlMapOptions;
-    export let sources: (v: unknown) => WebGlMapData['sources'] = () => ({});
-    export let layers: (v: unknown) => WebGlMapData['layers'] = () => [];
+    type $$Props = GeoFormatProps;
+
+    export let rawValue: $$Props['rawValue'];
+    export let display: $$Props['display'] = (v: unknown) => v;
+    export let mapOptions: $$Props['mapOptions'] = {};
+    export let sources: $$Props['sources'] = () => ({});
+    export let layers: $$Props['layers'] = () => [];
 
     let tooltipContent: Content;
     let showMap = false;
+    let data: WebGlMapData;
 
-    $: data = {
-        sources: sources(rawValue),
-        layers: layers(rawValue),
-    };
+    $: if (sources && layers) {
+        data = {
+            sources: sources(rawValue),
+            layers: layers(rawValue),
+        };
+    }
 </script>
 
 <div
@@ -38,9 +44,9 @@
     }}
 >
     <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <div class="label">{display(rawValue)}</div>
+    <div class="label">{display && display(rawValue)}</div>
     <!-- To run a WebGl instance only when tooltip is visible -->
-    {#if showMap}
+    {#if showMap && data && mapOptions}
         <div bind:this={tooltipContent} class="table-cell-map-container">
             <WebGlMap options={mapOptions} {data} />
         </div>
diff --git a/packages/visualizations/src/components/Format/LongTextFormat.svelte b/packages/visualizations/src/components/Format/LongTextFormat.svelte
new file mode 100644
index 00000000..0a9e3497
--- /dev/null
+++ b/packages/visualizations/src/components/Format/LongTextFormat.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+    import { warn } from './utils';
+    import type { LongTextFormatProps } from './types';
+
+    type $$Props = LongTextFormatProps;
+
+    export let rawValue: $$Props['rawValue'];
+    export let display: $$Props['display'] = (v: string) => v;
+
+    $: format = (v: unknown) => {
+        if (typeof v !== 'string') {
+            warn(v, 'text');
+        }
+        if (display) {
+            return display(v as string);
+        }
+        return v;
+    };
+
+    $: value = format(rawValue);
+</script>
+
+<!-- Wrap value to style properly line clamp -->
+<span>{value}</span>
diff --git a/packages/visualizations/src/components/Format/NumberFormat.svelte b/packages/visualizations/src/components/Format/NumberFormat.svelte
new file mode 100644
index 00000000..f1839eaf
--- /dev/null
+++ b/packages/visualizations/src/components/Format/NumberFormat.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+    import { warn } from './utils';
+    import type { NumberFormatProps } from './types';
+
+    type $$Props = NumberFormatProps;
+
+    export let rawValue: $$Props['rawValue'];
+    export let display: $$Props['display'] = (v: string) => v;
+    export let intl: $$Props['intl'] = {};
+    export let locale = 'en-EN';
+
+    $: format = (v: unknown) => {
+        if (!Number.isFinite(v)) {
+            warn(v, 'number');
+            return v;
+        }
+        const intlValue = new Intl.NumberFormat(locale, intl).format(v as number);
+        if (display) {
+            return display(intlValue);
+        }
+        return intlValue;
+    };
+
+    $: value = format(rawValue);
+</script>
+
+{value}
diff --git a/packages/visualizations/src/components/Format/ShortTextFormat.svelte b/packages/visualizations/src/components/Format/ShortTextFormat.svelte
new file mode 100644
index 00000000..3b517ec4
--- /dev/null
+++ b/packages/visualizations/src/components/Format/ShortTextFormat.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+    import { warn } from './utils';
+    import type { ShortTextFormatProps } from './types';
+
+    type $$Props = ShortTextFormatProps;
+
+    export let rawValue: $$Props['rawValue'];
+    export let display: $$Props['display'] = (v: string) => v;
+
+    $: format = (v: unknown) => {
+        if (typeof v !== 'string') {
+            warn(v, 'text');
+        }
+        if (display) {
+            return display(v as string);
+        }
+        return v;
+    };
+
+    $: value = format(rawValue);
+</script>
+
+{value}
diff --git a/packages/visualizations/src/components/Table/Cell/Format/URLFormat.svelte b/packages/visualizations/src/components/Format/URLFormat.svelte
similarity index 62%
rename from packages/visualizations/src/components/Table/Cell/Format/URLFormat.svelte
rename to packages/visualizations/src/components/Format/URLFormat.svelte
index 0cf8865c..8923ce0a 100644
--- a/packages/visualizations/src/components/Table/Cell/Format/URLFormat.svelte
+++ b/packages/visualizations/src/components/Format/URLFormat.svelte
@@ -1,16 +1,19 @@
 <script lang="ts">
     import ShortTextFormat from './ShortTextFormat.svelte';
     import { isValidUrl } from './utils';
+    import type { URLFormatProps } from './types';
 
-    export let rawValue: unknown;
-    export let display = (v: string) => v;
-    export let target: HTMLAnchorElement['target'] = '_blank';
-    export let rel = 'nofollow noreferrer noopener';
+    type $$Props = URLFormatProps;
+
+    export let rawValue: $$Props['rawValue'];
+    export let display: $$Props['display'] = (v: string) => v;
+    export let target: $$Props['target'] = '_blank';
+    export let rel: $$Props['rel'] = 'nofollow noreferrer noopener';
 
     $: format = (v: unknown) => {
         if (isValidUrl(v)) {
             return {
-                text: display(v),
+                text: display && display(v),
                 href: v,
             };
         }
diff --git a/packages/visualizations/src/components/Table/Cell/Format/index.ts b/packages/visualizations/src/components/Format/index.ts
similarity index 79%
rename from packages/visualizations/src/components/Table/Cell/Format/index.ts
rename to packages/visualizations/src/components/Format/index.ts
index 5771caf6..a5fa30ba 100644
--- a/packages/visualizations/src/components/Table/Cell/Format/index.ts
+++ b/packages/visualizations/src/components/Format/index.ts
@@ -17,5 +17,14 @@ const Format = {
     geo: GeoFormat,
 };
 
-export { isValidRawValue };
+export {
+    isValidRawValue,
+    BooleanFormat,
+    DateFormat,
+    GeoFormat,
+    LongTextFormat,
+    ShortTextFormat,
+    NumberFormat,
+    URLFormat,
+};
 export default Format;
diff --git a/packages/visualizations/src/components/Format/types.ts b/packages/visualizations/src/components/Format/types.ts
new file mode 100644
index 00000000..de4a46ef
--- /dev/null
+++ b/packages/visualizations/src/components/Format/types.ts
@@ -0,0 +1,45 @@
+import type { WebGlMapOptions, WebGlMapData } from 'components/Map';
+
+export type BooleanFormatProps = {
+    rawValue: unknown;
+    display?: (v: boolean) => string;
+};
+
+export type DateFormatProps = {
+    rawValue: unknown;
+    display?: (v: string) => string;
+    intl?: Intl.DateTimeFormatOptions;
+    locale?: string;
+};
+
+export type GeoFormatProps = {
+    rawValue: unknown;
+    display?: (v: unknown) => unknown;
+    mapOptions?: WebGlMapOptions;
+    sources?: (v: unknown) => WebGlMapData['sources'];
+    layers?: (v: unknown) => WebGlMapData['layers'];
+};
+
+export type NumberFormatProps = {
+    rawValue: unknown;
+    display?: (v: string) => string;
+    intl?: Intl.NumberFormatOptions;
+    locale?: string;
+};
+
+export type LongTextFormatProps = {
+    rawValue: unknown;
+    display?: (v: string) => string;
+};
+
+export type ShortTextFormatProps = {
+    rawValue: unknown;
+    display?: (v: string) => string;
+};
+
+export type URLFormatProps = {
+    rawValue: unknown;
+    display?: (v: string) => string;
+    target?: HTMLAnchorElement['target'];
+    rel?: HTMLAnchorElement['rel'];
+};
diff --git a/packages/visualizations/src/components/Table/Cell/Format/utils.ts b/packages/visualizations/src/components/Format/utils.ts
similarity index 100%
rename from packages/visualizations/src/components/Table/Cell/Format/utils.ts
rename to packages/visualizations/src/components/Format/utils.ts
diff --git a/packages/visualizations/src/components/Table/Body.svelte b/packages/visualizations/src/components/Table/Body.svelte
index e3c97202..b4108702 100644
--- a/packages/visualizations/src/components/Table/Body.svelte
+++ b/packages/visualizations/src/components/Table/Body.svelte
@@ -1,15 +1,23 @@
 <script lang="ts">
-    import type { Column, TableData } from './types';
-    import Cell, { LoadingCell } from './Cell';
+    import type { Column, RowProps, TableData } from './types';
+    import { LoadingCell } from './Cell';
     import EmptyRow from './EmptyRow.svelte';
+    import Row from './Row.svelte';
 
     export let loadingRowsNumber: number | null;
     export let columns: Column[];
+    export let rowProps: RowProps | undefined;
     export let records: TableData | undefined;
     export let emptyStateLabel: string | undefined;
+
+    let hoveredRow: number | null;
 </script>
 
-<tbody>
+<tbody
+    on:mouseleave={() => {
+        hoveredRow = null;
+    }}
+>
     {#if records?.length === 0 && !loadingRowsNumber}
         <EmptyRow label={emptyStateLabel} />
     {/if}
@@ -22,22 +30,19 @@
             </tr>
         {/each}
     {:else if records}
-        {#each records as record}
-            <tr>
-                {#each columns as column}
-                    <Cell rawValue={record[column.key]} {column} />
-                {/each}
-            </tr>
+        {#each records as record, rowIndex}
+            <Row
+                {columns}
+                {rowProps}
+                {record}
+                setHovered={() => {
+                    hoveredRow = rowIndex;
+                }}
+                isHovered={hoveredRow === rowIndex}
+            />
         {/each}
     {/if}
 </tbody>
 
 <style>
-    :global(.ods-dataviz--default) tr {
-        border-bottom: 1px solid var(--border-color);
-    }
-
-    :global(.ods-dataviz--default) tr:last-child {
-        border-bottom: none;
-    }
 </style>
diff --git a/packages/visualizations/src/components/Table/Cell/Cell.svelte b/packages/visualizations/src/components/Table/Cell/Cell.svelte
index f501ce3d..4d67098a 100644
--- a/packages/visualizations/src/components/Table/Cell/Cell.svelte
+++ b/packages/visualizations/src/components/Table/Cell/Cell.svelte
@@ -1,17 +1,39 @@
 <script lang="ts">
+    import { isValidRawValue } from 'components/Format';
+    import BooleanFormat from 'components/Format/BooleanFormat.svelte';
+    import DateFormat from 'components/Format/DateFormat.svelte';
+    import GeoFormat from 'components/Format/GeoFormat.svelte';
+    import ShortTextFormat from 'components/Format/ShortTextFormat.svelte';
+    import LongTextFormat from 'components/Format/LongTextFormat.svelte';
+    import NumberFormat from 'components/Format/NumberFormat.svelte';
+    import URLFormat from 'components/Format/URLFormat.svelte';
+    import { DATA_FORMAT } from '../constants';
+    import { locale } from '../store';
     import type { Column } from '../types';
-    import Format, { isValidRawValue } from './Format';
+    import isColumnOfType from './utils';
 
     export let rawValue: unknown;
     export let column: Column;
-
-    $: ({ dataFormat, options = {} } = column);
 </script>
 
 <!-- To display a format value, rawValue must be different from undefined or null -->
-<td class={`table-data--${dataFormat}`}>
+<td class={`table-data--${column.dataFormat}`}>
     {#if isValidRawValue(rawValue)}
-        <svelte:component this={Format[dataFormat]} {rawValue} {...options} />
+        {#if isColumnOfType(column, DATA_FORMAT.boolean)}
+            <BooleanFormat {rawValue} {...column.options} />
+        {:else if isColumnOfType(column, DATA_FORMAT.date)}
+            <DateFormat {rawValue} {...column?.options} locale={$locale} />
+        {:else if isColumnOfType(column, DATA_FORMAT.geo)}
+            <GeoFormat {rawValue} {...column.options} />
+        {:else if isColumnOfType(column, DATA_FORMAT.shortText)}
+            <ShortTextFormat {rawValue} {...column.options} />
+        {:else if isColumnOfType(column, DATA_FORMAT.longText)}
+            <LongTextFormat {rawValue} {...column.options} />
+        {:else if isColumnOfType(column, DATA_FORMAT.number)}
+            <NumberFormat {rawValue} {...column.options} locale={$locale} />
+        {:else if isColumnOfType(column, DATA_FORMAT.url)}
+            <URLFormat {rawValue} {...column.options} />
+        {/if}
     {/if}
 </td>
 
diff --git a/packages/visualizations/src/components/Table/Cell/Format/DateFormat.svelte b/packages/visualizations/src/components/Table/Cell/Format/DateFormat.svelte
deleted file mode 100644
index 81ecc387..00000000
--- a/packages/visualizations/src/components/Table/Cell/Format/DateFormat.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script lang="ts">
-    import { locale } from '../../store';
-    import { warn } from './utils';
-
-    export let rawValue: unknown;
-    export let display = (v: string) => v;
-    export let intl: Intl.DateTimeFormatOptions;
-
-    $: format = (v: unknown) => {
-        if (
-            (typeof v === 'string' || typeof v === 'number') &&
-            !Number.isNaN(new Date(v).getTime())
-        ) {
-            const intlValue = Intl.DateTimeFormat($locale, intl).format(new Date(v));
-            return display(intlValue);
-        }
-        warn(v, 'date');
-        return v;
-    };
-
-    $: value = format(rawValue);
-</script>
-
-{value}
diff --git a/packages/visualizations/src/components/Table/Cell/Format/LongTextFormat.svelte b/packages/visualizations/src/components/Table/Cell/Format/LongTextFormat.svelte
deleted file mode 100644
index 97b42260..00000000
--- a/packages/visualizations/src/components/Table/Cell/Format/LongTextFormat.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script lang="ts">
-    import { warn } from './utils';
-
-    export let rawValue: unknown;
-    export let display = (v: string) => v;
-
-    $: format = (v: unknown) => {
-        if (typeof v !== 'string') {
-            warn(v, 'text');
-        }
-        return display(v as string);
-    };
-
-    $: value = format(rawValue);
-</script>
-
-<!-- Wrap value to style properly line clamp -->
-<span>{value}</span>
diff --git a/packages/visualizations/src/components/Table/Cell/Format/NumberFormat.svelte b/packages/visualizations/src/components/Table/Cell/Format/NumberFormat.svelte
deleted file mode 100644
index 562d306b..00000000
--- a/packages/visualizations/src/components/Table/Cell/Format/NumberFormat.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script lang="ts">
-    import { locale } from '../../store';
-    import { warn } from './utils';
-
-    export let rawValue: unknown;
-    export let display = (v: string) => v;
-    export let intl: Intl.NumberFormatOptions;
-
-    $: format = (v: unknown) => {
-        if (!Number.isFinite(v)) {
-            warn(v, 'number');
-            return v;
-        }
-        const intlValue = new Intl.NumberFormat($locale, intl).format(v as number);
-        return display(intlValue);
-    };
-
-    $: value = format(rawValue);
-</script>
-
-{value}
diff --git a/packages/visualizations/src/components/Table/Cell/Format/ShortTextFormat.svelte b/packages/visualizations/src/components/Table/Cell/Format/ShortTextFormat.svelte
deleted file mode 100644
index d0d1eb2e..00000000
--- a/packages/visualizations/src/components/Table/Cell/Format/ShortTextFormat.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-<script lang="ts">
-    import { warn } from './utils';
-
-    export let rawValue: unknown;
-    export let display = (v: string) => v;
-
-    $: format = (v: unknown) => {
-        if (typeof v !== 'string') {
-            warn(v, 'text');
-        }
-        return display(v as string);
-    };
-
-    $: value = format(rawValue);
-</script>
-
-{value}
diff --git a/packages/visualizations/src/components/Table/Cell/utils.ts b/packages/visualizations/src/components/Table/Cell/utils.ts
new file mode 100644
index 00000000..26f57ea8
--- /dev/null
+++ b/packages/visualizations/src/components/Table/Cell/utils.ts
@@ -0,0 +1,8 @@
+import type { DataFormat, Column, ColumnOfType } from '../types';
+
+export default function isColumnOfType<K extends DataFormat>(
+    column: Column,
+    format: K
+): column is ColumnOfType<K> {
+    return column.dataFormat === format;
+}
diff --git a/packages/visualizations/src/components/Table/Headers/Headers.svelte b/packages/visualizations/src/components/Table/Headers/Headers.svelte
index fea4ce4f..0047921f 100644
--- a/packages/visualizations/src/components/Table/Headers/Headers.svelte
+++ b/packages/visualizations/src/components/Table/Headers/Headers.svelte
@@ -3,10 +3,14 @@
     import type { Column } from '../types';
 
     export let columns: Column[];
+    export let extraButtonColumn = false;
 </script>
 
 <thead>
     <tr>
+        {#if extraButtonColumn}
+            <th />
+        {/if}
         {#each columns as column}
             <th class={`table-header--${column.dataFormat}`}>
                 {#if column.onClick}
diff --git a/packages/visualizations/src/components/Table/Row.svelte b/packages/visualizations/src/components/Table/Row.svelte
new file mode 100644
index 00000000..dcf9d942
--- /dev/null
+++ b/packages/visualizations/src/components/Table/Row.svelte
@@ -0,0 +1,105 @@
+<script lang="ts">
+    import Cell from './Cell';
+    import ZoomIcon from './ZoomIcon.svelte';
+    import type { Column, RowProps, HoverEvent } from './types';
+
+    export let columns: Column[];
+    export let rowProps: RowProps | undefined;
+    export let record: Record<string, unknown>;
+    export let isHovered = false;
+    export let setHovered: () => void;
+
+    $: ({ onClick, onMouseEnter, onMouseLeave, actionAriaLabel } = rowProps || {});
+    $: handleMouseEnter = (e: HoverEvent<HTMLTableRowElement>) => {
+        if (onMouseEnter) {
+            onMouseEnter(record, e);
+        }
+        setHovered();
+    };
+    $: handleMouseLeave = (e: HoverEvent<HTMLTableRowElement>) => {
+        if (onMouseLeave) {
+            onMouseLeave(record, e);
+        }
+    };
+    $: handleClick = (e: HoverEvent<HTMLButtonElement>) => {
+        if (onClick) {
+            onClick(record, e);
+        }
+    };
+</script>
+
+<tr
+    on:mouseenter={rowProps && handleMouseEnter}
+    on:mouseleave={rowProps && handleMouseLeave}
+    on:focusin={rowProps && handleMouseEnter}
+    on:focusout={rowProps && handleMouseLeave}
+>
+    {#if rowProps?.onClick}
+        <td class="button-cell">
+            <button
+                on:click={rowProps && handleClick}
+                aria-label={actionAriaLabel || 'Expand Record'}
+            >
+                <span class:visually-hidden={!isHovered}>
+                    <ZoomIcon />
+                </span>
+            </button>
+        </td>
+    {/if}
+    {#each columns as column}
+        <Cell rawValue={record[column.key]} {column} />
+    {/each}
+</tr>
+
+<style>
+    :global(.ods-dataviz--default tr) {
+        border-bottom: 1px solid var(--border-color);
+    }
+
+    :global(.ods-dataviz--default tr:last-child) {
+        border-bottom: none;
+    }
+
+    :global(.ods-dataviz--default .button-cell button) {
+        background-color: transparent;
+        color: inherit;
+        border-radius: 50%;
+        height: 28px;
+        width: 28px;
+        padding: 6px;
+        margin-right: -6px; /* cancels next cell padding */
+        border: none;
+        box-shadow: none;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    span {
+        width: 100%;
+        height: 100%;
+    }
+
+    /* Hides visually but leaves it accessible by kb/sr */
+    .visually-hidden:not(:focus):not(:active) {
+        clip: rect(0 0 0 0);
+        clip-path: inset(50%);
+        height: 1px;
+        overflow: hidden;
+        position: absolute;
+        white-space: nowrap;
+        width: 1px;
+    }
+
+    :global(.ods-dataviz--default .button-cell button:hover),
+    :global(.ods-dataviz--default .button-cell button:focus-visible) {
+        background-color: lightgray;
+        cursor: pointer;
+    }
+
+    :global(.ods-dataviz--default .button-cell) {
+        padding: 0;
+        padding-left: 6px;
+        width: 34px;
+    }
+</style>
diff --git a/packages/visualizations/src/components/Table/Table.svelte b/packages/visualizations/src/components/Table/Table.svelte
index 352ccda8..81de6c9a 100644
--- a/packages/visualizations/src/components/Table/Table.svelte
+++ b/packages/visualizations/src/components/Table/Table.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import type { DataFrame } from 'types';
     import { generateId } from 'components/utils';
-    import type { Column } from './types';
+    import type { Column, RowProps } from './types';
     import Headers from './Headers';
     import Body from './Body.svelte';
 
@@ -10,14 +10,14 @@
     export let records: DataFrame | undefined;
     export let description: string | undefined;
     export let emptyStateLabel: string | undefined;
-
+    export let rowProps: RowProps | undefined;
     const tableId = `table-${generateId()}`;
 </script>
 
 <div class="scrollbox">
     <table aria-describedby={description ? tableId : undefined}>
-        <Headers {columns} />
-        <Body {loadingRowsNumber} {records} {columns} {emptyStateLabel} />
+        <Headers {columns} extraButtonColumn={Boolean(rowProps?.onClick)} />
+        <Body {loadingRowsNumber} {records} {columns} {rowProps} {emptyStateLabel} />
     </table>
 </div>
 {#if description}
diff --git a/packages/visualizations/src/components/Table/TableCard.svelte b/packages/visualizations/src/components/Table/TableCard.svelte
index 254c94b2..aaf88dde 100644
--- a/packages/visualizations/src/components/Table/TableCard.svelte
+++ b/packages/visualizations/src/components/Table/TableCard.svelte
@@ -12,8 +12,10 @@
     export let options: $$Props['options'];
 
     $: ({ value: records, loading: isLoading } = data);
+
     $: ({
         columns,
+        rowProps,
         title,
         subtitle,
         description,
@@ -33,7 +35,7 @@
 
 <Card {title} {subtitle} {source} defaultStyle={!unstyled}>
     <div class="table-container">
-        <Table {loadingRowsNumber} {records} {columns} {description} {emptyStateLabel} />
+        <Table {loadingRowsNumber} {records} {columns} {description} {emptyStateLabel} {rowProps} />
         {#if pagination}
             <Pagination {...pagination} />
         {/if}
diff --git a/packages/visualizations/src/components/Table/ZoomIcon.svelte b/packages/visualizations/src/components/Table/ZoomIcon.svelte
new file mode 100644
index 00000000..bcbc7d88
--- /dev/null
+++ b/packages/visualizations/src/components/Table/ZoomIcon.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+</script>
+
+<!-- eslint-disable max-len -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+    <path
+        d="M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748ZM10 10V7H12V10H15V12H12V15H10V12H7V10H10Z"
+    />
+</svg>
+
+<style>
+    path {
+        color: currentColor;
+    }
+</style>
diff --git a/packages/visualizations/src/components/Table/types.ts b/packages/visualizations/src/components/Table/types.ts
index f850e998..a2d1232d 100644
--- a/packages/visualizations/src/components/Table/types.ts
+++ b/packages/visualizations/src/components/Table/types.ts
@@ -1,4 +1,12 @@
-import type { WebGlMapData, WebGlMapOptions } from 'components/Map';
+import type {
+    BooleanFormatProps,
+    DateFormatProps,
+    GeoFormatProps,
+    ShortTextFormatProps,
+    LongTextFormatProps,
+    NumberFormatProps,
+    URLFormatProps,
+} from 'components/Format/types';
 import type { Async, DataFrame, Source } from 'types';
 import type { Pagination } from '../Pagination/types';
 import type { DATA_FORMAT } from './constants';
@@ -26,88 +34,48 @@ type BaseColumn = {
     onClick?: () => void;
 };
 
-export type ShortTextColumn = BaseColumn & {
-    dataFormat: typeof DATA_FORMAT.shortText;
-    options?: {
-        display?: (v: string) => string;
-    };
-};
+// Eliminate rawValue from props to match column options
+type ColumnOptions<T> = Omit<T, 'rawValue'>;
 
-export type LongTextColumn = BaseColumn & {
-    dataFormat: typeof DATA_FORMAT.longText;
-    options?: {
-        display?: (v: string) => string;
-    };
+type FormatPropsTypeMap = {
+    [DATA_FORMAT.boolean]: ColumnOptions<BooleanFormatProps>;
+    [DATA_FORMAT.date]: ColumnOptions<DateFormatProps>;
+    [DATA_FORMAT.geo]: ColumnOptions<GeoFormatProps>;
+    [DATA_FORMAT.shortText]: ColumnOptions<ShortTextFormatProps>;
+    [DATA_FORMAT.longText]: ColumnOptions<LongTextFormatProps>;
+    [DATA_FORMAT.number]: ColumnOptions<NumberFormatProps>;
+    [DATA_FORMAT.url]: ColumnOptions<URLFormatProps>;
 };
 
-export type NumberColumn = BaseColumn & {
-    dataFormat: typeof DATA_FORMAT.number;
-    options?: {
-        /** Function to update the data value. Takes an argument which is the result of Intl.NumberFormat. */
-        display?: (v: string) => string;
-        /**
-         * Configuration options for formatting numbers using Intl.NumberFormat. See:
-         * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options
-         */
-        intl?: Intl.NumberFormatOptions;
-    };
+export type ColumnOfType<F extends DataFormat> = BaseColumn & {
+    dataFormat: F;
+    options?: FormatPropsTypeMap[F];
 };
 
-export type DateColumn = BaseColumn & {
-    dataFormat: typeof DATA_FORMAT.date;
-    options?: {
-        /** Function to update the data value. Takes an argument which is the result of Intl.DateTimeFormat. */
-        display?: (v: string) => string;
-        /**
-         * Configuration options for formatting dates using Intl.DateTimeFormat. See:
-         * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options
-         */
-        intl?: Intl.DateTimeFormatOptions;
-    };
-};
+export type Column = ColumnOfType<DataFormat>;
 
-export type BooleanColumn = BaseColumn & {
-    dataFormat: typeof DATA_FORMAT.boolean;
-    options?: {
-        display?: (v: boolean) => string;
-    };
-};
+export type BooleanColumn = ColumnOfType<typeof DATA_FORMAT.boolean>;
+export type DateColumn = ColumnOfType<typeof DATA_FORMAT.date>;
+export type GeoColumn = ColumnOfType<typeof DATA_FORMAT.geo>;
+export type ShortTextColumn = ColumnOfType<typeof DATA_FORMAT.shortText>;
+export type LongTextColumn = ColumnOfType<typeof DATA_FORMAT.longText>;
+export type NumberColumn = ColumnOfType<typeof DATA_FORMAT.number>;
+export type URLColumn = ColumnOfType<typeof DATA_FORMAT.url>;
 
-/**
- * Render HTML \<a> tag if the record value is a valid URL.
- */
-export type URLColumn = BaseColumn & {
-    dataFormat: typeof DATA_FORMAT.url;
-    options?: {
-        display?: (v: string) => string;
-        /** Default is `_blank` */
-        target?: string;
-        /** Default is `nofollow noopener noreferrer` */
-        rel?: string;
-    };
+export type HoverEvent<T extends HTMLElement> = (MouseEvent | FocusEvent) & {
+    currentTarget: EventTarget & T;
 };
 
-export type GeoColumn = BaseColumn & {
-    dataFormat: typeof DATA_FORMAT.geo;
-    options?: Partial<{
-        mapOptions: WebGlMapOptions;
-        display: (v: unknown) => string;
-        sources: (v: unknown) => WebGlMapData['sources'];
-        layers: (v: unknown) => WebGlMapData['layers'];
-    }>;
+export type RowProps = {
+    onClick?: (record?: Record<string, unknown>, e?: HoverEvent<HTMLButtonElement>) => void;
+    onMouseEnter?: (record?: Record<string, unknown>, e?: HoverEvent<HTMLTableRowElement>) => void;
+    onMouseLeave?: (record?: Record<string, unknown>, e?: HoverEvent<HTMLTableRowElement>) => void;
+    actionAriaLabel?: string;
 };
 
-export type Column =
-    | ShortTextColumn
-    | LongTextColumn
-    | NumberColumn
-    | DateColumn
-    | BooleanColumn
-    | URLColumn
-    | GeoColumn;
-
 export type TableOptions = {
     columns: Column[];
+    rowProps?: RowProps;
     title?: string;
     subtitle?: string;
     description?: string;
diff --git a/packages/visualizations/src/index.ts b/packages/visualizations/src/index.ts
index ac723372..40eba4c2 100644
--- a/packages/visualizations/src/index.ts
+++ b/packages/visualizations/src/index.ts
@@ -21,5 +21,15 @@ export * from './components/MarkdownText/types';
 export * from './components/Pagination/types';
 export { default as Table } from './components/Table';
 export * from './components/Table/types';
+export {
+    BooleanFormat,
+    DateFormat,
+    GeoFormat,
+    ShortTextFormat,
+    LongTextFormat,
+    NumberFormat,
+    URLFormat,
+} from './components/Format';
+export * from './components/Format/types';
 export * from './components/utils';
 export * from './types';