Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 14 additions & 2 deletions v2/pink-sb/src/lib/table/Root.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@
export let columns: Array<Column> | number;
export let allowSelection: boolean = false;
export let selectedRows: Array<string> = [];
export let stickyHeaders: boolean = false;
export let maxHeight: string | undefined = undefined;

let availableIds: Set<string> = new Set();

Expand Down Expand Up @@ -77,8 +79,9 @@
}

$: root = {
allowSelection,
stickyHeaders,
selectedRows,
allowSelection,
columns: groupById(columns),
toggleAll,
toggle,
Expand All @@ -90,7 +93,7 @@
} as RootProp;
</script>

<div class="root">
<div class="root" class:has-max-height={!!maxHeight} style:max-height={maxHeight}>
<div role="table" style:--grid-template-columns={createGridTemplateColumns(columns)}>
{#if $$slots.header}
<Row type="header" {root}>
Expand All @@ -108,6 +111,15 @@
border-radius: var(--border-radius-s);
background: var(--bgcolor-neutral-primary);

&.has-max-height {
scrollbar-width: none;
-ms-overflow-style: none;

&::-webkit-scrollbar {
display: none;
}
}

::-webkit-scrollbar {
display: none;
}
Expand Down
1 change: 1 addition & 0 deletions v2/pink-sb/src/lib/table/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ export type Column = {
};

export type RootProp = {
stickyHeaders: boolean;
allowSelection: boolean;
selectedRows: string[];
selectedAll: boolean;
Expand Down
11 changes: 10 additions & 1 deletion v2/pink-sb/src/lib/table/row/Base.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,14 @@
};
});

$: stickyHeaders = root.stickyHeaders;
$: selected = id ? root.selectedRows.includes(id) : false;
</script>

<div role={type === 'row' ? 'row' : 'rowheader'}>
<div
role={type === 'row' ? 'row' : 'rowheader'}
class:sticky={type !== 'row' ? stickyHeaders : undefined}
>
{#if root.allowSelection}
{@const isHeader = type === 'header'}
<Cell column={`__select_${id}`} {root}>
Expand Down Expand Up @@ -66,5 +70,10 @@
border-bottom: 0;
}
}

&.sticky {
top: 0;
position: sticky;
}
}
</style>
44 changes: 43 additions & 1 deletion v2/pink-sb/src/stories/Table.stories.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,12 @@

<script lang="ts">
import Avatar from '$lib/avatar/Avatar.svelte';
import { Button, Badge, Tag, Icon, Status, Typography } from '$lib/index.js';
import { Button, Badge, Tag, Icon, Status, Typography, InlineCode } from '$lib/index.js';
import { Story } from '@storybook/addon-svelte-csf';
import { IconDuplicate } from '@appwrite.io/pink-icons-svelte';
import type { Column } from '$lib/table/index.ts';
import Modal from '$lib/Modal.svelte';
import Stack from '$lib/layout/Stack.svelte';

const columns: Array<Column> = [
{
Expand All @@ -25,6 +27,8 @@
id: 'third'
}
];

let openModal = false;
</script>

<Story name="Default">
Expand Down Expand Up @@ -241,3 +245,41 @@
</Table.Row.Link>
</Table.Root>
</Story>

<Story name="Sticky headers">
<Layout.Stack alignItems="center">
<Modal title="Table with Sticky Headers" bind:open={openModal}>
<span slot="description">
The table must have a <InlineCode code="maxHeight" size="m" /> set for sticky headers
to take effect.
</span>

<Table.Root columns={4} let:root stickyHeaders maxHeight="17rem">
<svelte:fragment slot="header" let:root>
<Table.Header.Cell column="first" {root}>First</Table.Header.Cell>
<Table.Header.Cell column="second" {root}>Second</Table.Header.Cell>
<Table.Header.Cell column="third" {root}>Third</Table.Header.Cell>
<Table.Header.Cell column="fourth" {root}>Fourth</Table.Header.Cell>
</svelte:fragment>

{#each Array(20) as _}
<Table.Row.Base {root} id="lorem">
<Table.Cell column="first" {root}>Lorem</Table.Cell>
<Table.Cell column="second" {root}>Base</Table.Cell>
<Table.Cell column="third" {root}>Ipsum</Table.Cell>
<Table.Cell column="fourth" {root}>Lorem</Table.Cell>
</Table.Row.Base>
{/each}
</Table.Root>

<svelte:fragment slot="footer">
<Stack direction="row" gap="s" justifyContent="flex-end">
<Button.Button variant="secondary" size="s" on:click={() => (openModal = false)}
>Close</Button.Button
>
</Stack>
</svelte:fragment>
</Modal>
<Button.Button on:click={() => (openModal = !openModal)}>Open Modal</Button.Button>
</Layout.Stack>
</Story>
Loading