diff --git a/src/DataTable/DataTable.svelte b/src/DataTable/DataTable.svelte index e59b3f00..79ed16f3 100644 --- a/src/DataTable/DataTable.svelte +++ b/src/DataTable/DataTable.svelte @@ -93,6 +93,9 @@ /** Set to `true` for the radio selection variant */ export let radio = false; + /** Set to `true` for the overflow menu selection variant */ + export let overflowMenu = false; + /** * Set to `true` for the selectable variant * Automatically set to `true` if `radio` or `batchSelection` are `true` @@ -126,11 +129,15 @@ /** Set to `number` to set current page */ export let page = 0; + /** Obtain a reference to the trigger body element */ + export let tRef = null; + import { createEventDispatcher, setContext } from "svelte"; import { writable } from "svelte/store"; import ChevronRight from "../icons/ChevronRight.svelte"; import InlineCheckbox from "../Checkbox/InlineCheckbox.svelte"; import RadioButton from "../RadioButton/RadioButton.svelte"; + import OverflowMenu from "../OverflowMenu/OverflowMenu.svelte"; import Table from "./Table.svelte"; import TableBody from "./TableBody.svelte"; import TableCell from "./TableCell.svelte"; @@ -194,7 +201,7 @@ expandable = true; expanded = expandedRowIds.length === expandableRowIds.length; } - $: if (radio || batchSelection) selectable = true; + $: if (radio || batchSelection || overflowMenu) selectable = true; $: headerKeys = headers.map(({ key }) => key); $: tableCellsByRowId = rows.reduce((rows, row) => { rows[row.id] = headerKeys.map((key, index) => ({ @@ -258,7 +265,7 @@ }; - + {#if title || $$slots.title || description || $$slots.description}
{#if title || $$slots.title} @@ -307,9 +314,9 @@ {/if} {#if selectable && !batchSelection} - + {/if} - {#if batchSelection && !radio} + {#if batchSelection && !radio && !overflowMenu} + {:else if overflowMenu} + + + {:else}