Merge pull request #340 from appwrite/feat-virtual-tables

Add virtual table support and improve table API

Author: TorstenDittmann

pnpm-lock.yaml

@@ -32,6 +32,7 @@
         "@floating-ui/dom": "^1.6.13",
         "@melt-ui/pp": "^0.3.2",
         "@melt-ui/svelte": "^0.86.6",
+        "@tanstack/svelte-virtual": "^3.13.10",
         "ansicolor": "^2.0.3",
         "d3": "^7.9.0",
         "fuse.js": "^7.1.0",

v2/pink-sb/.genauigkeit/references/chromium/components-table--virtual-desktop.png

@@ -11,7 +11,8 @@
     let timeout: ReturnType<typeof setTimeout>;
     let showCopySuccess = false;
 
-    function toggleVisibility() {
+    function toggleVisibility(event: MouseEvent) {
+        event.preventDefault();
         clearTimeout(timeout);
         if (isVisible) {
             isVisible = false;
@@ -23,7 +24,8 @@
         }
     }
 
-    async function copyToClipboard() {
+    async function copyToClipboard(event: MouseEvent) {
+        event.preventDefault();
         await clipboardCopy(value ?? text);
         showCopySuccess = true;
         setTimeout(() => {
@@ -61,9 +63,9 @@
         {/if}
         {#if copy}
             <div class="copy-container">
-                <button type="button" title="Copy to clipboard" on:click={copyToClipboard}
-                    ><IconDuplicate /></button
-                >
+                <button type="button" title="Copy to clipboard" on:click={copyToClipboard}>
+                    <IconDuplicate />
+                </button>
                 <div role="tooltip" aria-hidden={!showCopySuccess}>Copied</div>
             </div>
         {/if}

v2/pink-sb/.genauigkeit/references/chromium/components-table--virtual-with-checkboxes-desktop.png

@@ -40,7 +40,7 @@
     export let imageWidth: $$Props['imageWidth'] = undefined;
     export let disabled: $$Props['disabled'] = undefined;
 
-    const constrainedImageHeight = Math.min(imageHeight, 148);
+    $: constrainedImageHeight = Math.min(imageHeight || 148, 148);
 </script>
 
 <Card.Label {variant} {radius} {padding} selected={value === group} {disabled}>

v2/pink-sb/package.json

@@ -4,7 +4,7 @@
     import type { HTMLTextareaAttributes } from 'svelte/elements';
     import type { States } from './types.js';
     import { autofocusInput } from './autofocus.js';
-    import { Layout } from '$lib';
+    import { Layout } from '$lib/index.js';
 
     type $$Props = HTMLTextareaAttributes &
         Partial<{

v2/pink-sb/src/lib/InteractiveText.svelte

@@ -96,7 +96,7 @@
             border-radius: var(--border-radius-xxs);
         }
 
-        &:hover:not(.active):not([aria-disabled='true']):not([disabled]) {
+        &:hover:not(.active):not([disabled]) {
             background-color: var(--overlay-button-neutral-hover);
         }
 
@@ -105,8 +105,7 @@
             background-color: var(--bgcolor-neutral-invert);
         }
 
-        &:disabled,
-        &[aria-disabled='true'] {
+        &:disabled {
             opacity: 0.4;
             cursor: default;
             background-color: var(--bgcolor-neutral-tertiary);

v2/pink-sb/src/lib/card/Selector.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-    import type { Alignment, RootProp } from './index.js';
+    import type { Alignment, RootProp } from '../index.js';
 
     export let column: string | undefined = undefined;
     export let root: RootProp;
     export let alignment: Alignment = 'middle-middle';
 
-    $: options = column !== undefined && root.columns?.[column];
+    $: options = column !== undefined && root.columnsMap?.[column];
     $: isVerticalStart = alignment.startsWith('start');
     $: isVerticalEnd = alignment.startsWith('end');
     $: isHorizontalStart = alignment.endsWith('start');

v2/pink-sb/src/lib/input/Textarea.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+    import type { VirtualItem } from '@tanstack/svelte-virtual';
+    import type { Alignment, RootProp } from '../index.js';
+
+    export let column: string | undefined = undefined;
+    export let root: RootProp;
+    export let virtualItem: VirtualItem;
+    export let alignment: Alignment = 'middle-middle';
+
+    $: options = column !== undefined && root.columnsMap?.[column];
+    $: isVerticalStart = alignment.startsWith('start');
+    $: isVerticalEnd = alignment.startsWith('end');
+    $: isHorizontalStart = alignment.endsWith('start');
+    $: isHorizontalEnd = alignment.endsWith('end');
+</script>
+
+{#if !options || options?.hide !== true}
+    <div
+        role="cell"
+        class:vertical-start={isVerticalStart}
+        class:vertical-end={isVerticalEnd}
+        class:horizontal-start={isHorizontalStart}
+        class:horizontal-end={isHorizontalEnd}
+        style:width="{virtualItem.size}px"
+        style:transform="translateX({virtualItem.start}px)"
+    >
+        <slot />
+    </div>
+{/if}
+
+<style lang="scss">
+    [role='cell'] {
+        --p-cell-width: var(--cell-width);
+        --p-cell-max-width: var(--cell-max-width);
+        --p-cell-alignment: var(--cell-alignment);
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: flex;
+        align-items: center;
+        padding-inline: var(--space-6);
+        height: 40px;
+        border-bottom: var(--border-width-s) solid var(--border-neutral);
+        overflow: hidden;
+        white-space: nowrap;
+
+        &.horizontal-start {
+            justify-content: flex-start;
+        }
+
+        &.horizontal-end {
+            justify-content: flex-end;
+        }
+
+        &.vertical-start {
+            align-items: flex-start;
+        }
+
+        &.vertical-end {
+            align-items: flex-end;
+        }
+    }
+</style>

v2/pink-sb/src/lib/selector/Checkbox.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { Button } from '$lib/button/index.js';
     import type { ComponentProps, ComponentType } from 'svelte';
-    import Cell from '../Cell.svelte';
+    import Cell from '../cell/Base.svelte';
     import Icon from '$lib/Icon.svelte';
 
     type $$Props = ComponentProps<Cell>;

v2/pink-sb/src/lib/table/Cell.svelte renamed to v2/pink-sb/src/lib/table/cell/Base.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import type { ComponentProps } from 'svelte';
-    import Cell from '../Cell.svelte';
+    import Cell from '../cell/Base.svelte';
 
     type $$Props = ComponentProps<Cell>;
     export let column: $$Props['column'];

v2/pink-sb/src/lib/table/cell/Virtual.svelte

@@ -1,7 +1,10 @@
-import Root from './Root.svelte';
-import Cell from './Cell.svelte';
+import Root from './root/Default.svelte';
+import VirtualRoot from './root/Virtual.svelte';
+import Cell from './cell/Base.svelte';
+import VirtualCell from './cell/Virtual.svelte';
 import Row from './row/index.js';
 import Header from './header/index.js';
+
 export type Column = {
     id: string;
     width?:
@@ -22,7 +25,8 @@ export type RootProp = {
     selectedAll: boolean;
     selectedNone: boolean;
     selectedSome: boolean;
-    columns: Record<Column['id'], Column>;
+    columns: Array<Column> | number;
+    columnsMap: Record<Column['id'], Column>;
     toggle: (id: string) => void;
     toggleAll: () => void;
     addAvailableId: (id: string) => void;
@@ -42,7 +46,9 @@ export type Alignment =
 
 export default {
     Root,
+    VirtualRoot,
     Cell,
+    VirtualCell,
     Row,
     Header
 };

v2/pink-sb/src/lib/table/header/Action.svelte

@@ -1,57 +1,13 @@
 <script lang="ts">
-    import type { Column, RootProp } from './index.js';
-    import Row from './row/Base.svelte';
+    import type { Column, RootProp } from '../index.js';
 
     export let columns: Array<Column> | number;
     export let allowSelection: boolean = false;
     export let selectedRows: Array<string> = [];
+    export let element: HTMLElement | undefined = undefined;
 
     let availableIds: Set<string> = new Set();
 
-    function widthWithPadding(width: number): string {
-        return `calc(${width}px + var(--p-table-cell-padding-inline))`;
-    }
-
-    function createGridTemplateColumns(cols: typeof columns) {
-        if (typeof cols === 'number') {
-            return `repeat(${cols}, 1fr)`;
-        }
-        const columns = cols.filter((column) => column.hide !== true);
-        const hasOnlyMaxWidth = columns.every(
-            (column) => typeof column.width === 'number' || (column.width && 'max' in column.width)
-        );
-
-        return columns.reduce(
-            (acc, column) => {
-                if (column.width === undefined) return `${acc} 1fr`;
-                if (typeof column.width === 'number') {
-                    return `${acc} ${widthWithPadding(column.width)}`;
-                }
-                if ('min' in column.width && 'max' in column.width) {
-                    if (hasOnlyMaxWidth) {
-                        return `${acc} minmax(${widthWithPadding(column.width.min)}, 1fr)`;
-                    }
-                    return `${acc} minmax(${widthWithPadding(column.width.min)}, ${widthWithPadding(column.width.max)})`;
-                }
-                if ('min' in column.width) {
-                    return `${acc} minmax(${widthWithPadding(column.width.min)}, 1fr)`;
-                }
-                return acc;
-            },
-            allowSelection ? ' 40px' : '' // Default width for selection column
-        );
-    }
-
-    function groupById(cols: typeof columns): RootProp['columns'] {
-        if (typeof cols === 'number') {
-            return {};
-        }
-        return cols.reduce<Record<Column['id'], Column>>((acc, column) => {
-            acc[column.id] = column;
-            return acc;
-        }, {});
-    }
-
     $: someRowsSelected =
         availableIds.size > 0 &&
         selectedRows.length > 0 &&
@@ -87,10 +43,21 @@
         availableIds = availableIds;
     }
 
+    function groupById(cols: typeof columns): RootProp['columnsMap'] {
+        if (typeof cols === 'number') {
+            return {};
+        }
+        return cols.reduce<Record<Column['id'], Column>>((acc, column) => {
+            acc[column.id] = column;
+            return acc;
+        }, {});
+    }
+
     $: root = {
         allowSelection,
         selectedRows,
-        columns: groupById(columns),
+        columns: columns,
+        columnsMap: groupById(columns),
         toggleAll,
         toggle,
         selectedSome: someRowsSelected,
@@ -101,33 +68,20 @@
     } as RootProp;
 </script>
 
-<div class="root">
-    <div role="table" style:--grid-template-columns={createGridTemplateColumns(columns)}>
-        {#if $$slots.header}
-            <Row type="header" {root}>
-                <slot name="header" {root} />
-            </Row>
-        {/if}
-        <slot {root} />
-    </div>
+<div class="root" bind:this={element}>
+    <slot {root} />
 </div>
 
 <style lang="scss">
     .root {
         --p-table-cell-padding-inline: var(--space-6);
-        overflow-x: auto;
         border: 1px solid var(--border-neutral);
         border-radius: var(--border-radius-s);
         background: var(--bgcolor-neutral-primary);
+        overflow-x: auto;
 
         ::-webkit-scrollbar {
             display: none;
         }
-
-        [role='table'] {
-            display: grid;
-            grid-template-columns: var(--grid-template-columns);
-            width: 100%;
-        }
     }
 </style>