mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 11:36:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

add an overflow menu selection variant for DataTable

Browse source
This commit is contained in:
Bilux 2022-10-20 18:40:46 +01:00 • committed by GitHub
commit 9c761137e8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/DataTable/DataTable.svelte
View file

@ -93,6 +93,9 @@
/** Set to `true` for the radio selection variant */ /** Set to `true` for the radio selection variant */
export let radio = false; export let radio = false;
/** Set to `true` for the overflow menu selection variant */
export let overflowMenu = false;
/** /**
* Set to `true` for the selectable variant * Set to `true` for the selectable variant
* Automatically set to `true` if `radio` or `batchSelection` are `true` * Automatically set to `true` if `radio` or `batchSelection` are `true`
@ -126,11 +129,15 @@
/** Set to `number` to set current page */ /** Set to `number` to set current page */
export let page = 0; export let page = 0;
/** Obtain a reference to the trigger body element */
export let tRef = null;
import { createEventDispatcher, setContext } from "svelte"; import { createEventDispatcher, setContext } from "svelte";
import { writable } from "svelte/store"; import { writable } from "svelte/store";
import ChevronRight from "../icons/ChevronRight.svelte"; import ChevronRight from "../icons/ChevronRight.svelte";
import InlineCheckbox from "../Checkbox/InlineCheckbox.svelte"; import InlineCheckbox from "../Checkbox/InlineCheckbox.svelte";
import RadioButton from "../RadioButton/RadioButton.svelte"; import RadioButton from "../RadioButton/RadioButton.svelte";
import OverflowMenu from "../OverflowMenu/OverflowMenu.svelte";
import Table from "./Table.svelte"; import Table from "./Table.svelte";
import TableBody from "./TableBody.svelte"; import TableBody from "./TableBody.svelte";
import TableCell from "./TableCell.svelte"; import TableCell from "./TableCell.svelte";
@ -194,7 +201,7 @@
expandable = true; expandable = true;
expanded = expandedRowIds.length === expandableRowIds.length; expanded = expandedRowIds.length === expandableRowIds.length;
} }
$: if (radio || batchSelection) selectable = true; $: if (radio || batchSelection || OverflowMenu) selectable = true;
$: headerKeys = headers.map(({ key }) => key); $: headerKeys = headers.map(({ key }) => key);
$: tableCellsByRowId = rows.reduce((rows, row) => { $: tableCellsByRowId = rows.reduce((rows, row) => {
rows[row.id] = headerKeys.map((key, index) => ({ rows[row.id] = headerKeys.map((key, index) => ({
@ -258,7 +265,7 @@
}; };
</script> </script>
<TableContainer useStaticWidth="{useStaticWidth}" {...$$restProps}> <TableContainer bind:ref={tRef} useStaticWidth="{useStaticWidth}" {...$$restProps}>
{#if title || $$slots.title || description || $$slots.description} {#if title || $$slots.title || description || $$slots.description}
<div class:bx--data-table-header="{true}"> <div class:bx--data-table-header="{true}">
{#if title || $$slots.title} {#if title || $$slots.title}
@ -309,7 +316,7 @@
{#if selectable && !batchSelection} {#if selectable && !batchSelection}
<th scope="col"></th> <th scope="col"></th>
{/if} {/if}
{#if batchSelection && !radio} {#if batchSelection && !radio && !overflowMenu}
<th scope="col" class:bx--table-column-checkbox="{true}"> <th scope="col" class:bx--table-column-checkbox="{true}">
<InlineCheckbox <InlineCheckbox
bind:ref="{refSelectAll}" bind:ref="{refSelectAll}"
@ -450,6 +457,10 @@
dispatch('click:row--select', { row, selected: true }); dispatch('click:row--select', { row, selected: true });
}}" }}"
/> />
{:else if overflowMenu}
<svelte:component this={OverflowMenu} bind:parentRef={tRef}>
<slot name="overflowMenu" row="{row}" />
</svelte:component>
{:else} {:else}
<InlineCheckbox <InlineCheckbox
name="select-row-{row.id}" name="select-row-{row.id}"

12
types/DataTable/DataTable.svelte.d.ts vendored
View file

@ -128,6 +128,12 @@ export interface DataTableProps
*/ */
radio?: boolean; radio?: boolean;
/**
* Set to `true` for the overflow menu selection variant
* @default false
*/
overflowMenu?: boolean;
/** /**
* Set to `true` for the selectable variant * Set to `true` for the selectable variant
* Automatically set to `true` if `radio` or `batchSelection` are `true` * Automatically set to `true` if `radio` or `batchSelection` are `true`
@ -176,6 +182,12 @@ export interface DataTableProps
* @default 0 * @default 0
*/ */
page?: number; page?: number;
/**
* Obtain a reference to the TableContainer Div HTML element
* @type {null | HTMLDivElement}
*/
tref?: null | HTMLDivElement;
} }
export default class DataTable extends SvelteComponentTyped< export default class DataTable extends SvelteComponentTyped<