@ibobbyts/svelte-ui-utils 0.1.2

package/dist/data-table/BaseDataTable.svelte

@@ -0,0 +1,322 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { getUiMessages, type UiLanguage } from '../i18n.js';
+  import { getAriaSort, getCellValue, toggleSort } from './state.js';
+  import type {
+    DataTableCellValue,
+    DataTableColumn,
+    DataTableLayout,
+    DataTableRowAttributes,
+    DataTableRowKey,
+    DataTableSortChangeHandler,
+    SortState
+  } from './types.js';
+
+  export let rows: unknown[] = [];
+  export let columns: DataTableColumn[] = [];
+  export let sort: SortState | null = null;
+  export let zebra = true;
+  export let bordered = true;
+  export let verticalSeparators = false;
+  export let tableLayout: DataTableLayout = 'auto';
+  export let stickyHeader = true;
+  export let stickyHeaderTop: string | undefined = undefined;
+  export let stickyHeaderOffset: string | undefined = undefined;
+  export let preserveScrollOnSort = true;
+  export let language: UiLanguage = 'en_us';
+  export let emptyText: string | undefined = undefined;
+  export let rowKey: DataTableRowKey | undefined = undefined;
+  export let rowClass: string | ((row: unknown, index: number) => string | undefined | null) | undefined = undefined;
+  export let rowAttributes: DataTableRowAttributes | undefined = undefined;
+  export let onSortChange: DataTableSortChangeHandler | undefined = undefined;
+
+  let scrollRestoreSequence = 0;
+  let tableElement: HTMLTableElement | undefined = undefined;
+  let stickyHeaderVisible = false;
+  let stickyHeaderLeft = 0;
+  let stickyHeaderWidth = 0;
+  let stickyHeaderColumnWidths: number[] = [];
+  let stickyHeaderUpdateFrame: number | null = null;
+  let stickyHeaderOffsetProbe: HTMLSpanElement | undefined = undefined;
+  $: messages = getUiMessages(language);
+  $: resolvedEmptyText = emptyText ?? messages.table.emptyText;
+  $: resolvedStickyHeaderTop = stickyHeaderOffset ?? stickyHeaderTop;
+
+  function restoreScrollPosition(scrollX: number, scrollY: number, sequence: number) {
+    if (!preserveScrollOnSort || typeof window === 'undefined' || sequence !== scrollRestoreSequence) {
+      return;
+    }
+
+    window.scrollTo(scrollX, scrollY);
+  }
+
+  function queueScrollRestore(scrollX: number, scrollY: number, sequence: number) {
+    if (!preserveScrollOnSort || typeof window === 'undefined') {
+      return;
+    }
+
+    const restore = () => restoreScrollPosition(scrollX, scrollY, sequence);
+    restore();
+    window.requestAnimationFrame?.(restore);
+    setTimeout(restore, 0);
+    setTimeout(restore, 50);
+  }
+
+  function updateStickyHeader() {
+    if (!stickyHeader || typeof window === 'undefined' || !tableElement) {
+      stickyHeaderVisible = false;
+      return;
+    }
+
+    const header = tableElement.tHead;
+    const firstHeaderCell = header?.querySelector('th');
+    if (!header || !firstHeaderCell) {
+      stickyHeaderVisible = false;
+      return;
+    }
+
+    const tableRect = tableElement.getBoundingClientRect();
+    const headerRect = header.getBoundingClientRect();
+    const stickyTop = stickyHeaderOffsetProbe?.getBoundingClientRect().top ?? 0;
+    const nextVisible = headerRect.top <= stickyTop && tableRect.bottom > stickyTop + headerRect.height;
+    stickyHeaderVisible = nextVisible;
+
+    if (!nextVisible) {
+      return;
+    }
+
+    stickyHeaderLeft = tableRect.left;
+    stickyHeaderWidth = tableRect.width;
+    stickyHeaderColumnWidths = Array.from(header.querySelectorAll('th')).map((cell) => cell.getBoundingClientRect().width);
+  }
+
+  function queueStickyHeaderUpdate() {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    if (stickyHeaderUpdateFrame !== null) {
+      window.cancelAnimationFrame(stickyHeaderUpdateFrame);
+    }
+
+    stickyHeaderUpdateFrame = window.requestAnimationFrame(() => {
+      stickyHeaderUpdateFrame = null;
+      updateStickyHeader();
+    });
+  }
+
+  async function handleSort(column: DataTableColumn) {
+    if (!column.sortable) {
+      return;
+    }
+
+    const shouldPreserveScroll = preserveScrollOnSort && typeof window !== 'undefined';
+    const scrollX = shouldPreserveScroll ? window.scrollX : 0;
+    const scrollY = shouldPreserveScroll ? window.scrollY : 0;
+    const sequence = shouldPreserveScroll ? scrollRestoreSequence + 1 : scrollRestoreSequence;
+    scrollRestoreSequence = sequence;
+
+    const sortResult = onSortChange?.(toggleSort(sort, column.key));
+    if (!shouldPreserveScroll) {
+      return;
+    }
+
+    queueScrollRestore(scrollX, scrollY, sequence);
+    try {
+      await sortResult;
+    } finally {
+      queueScrollRestore(scrollX, scrollY, sequence);
+    }
+  }
+
+  function resolveRowKey(row: unknown, index: number) {
+    if (typeof rowKey === 'function') {
+      return rowKey(row, index);
+    }
+
+    if (rowKey && row && typeof row === 'object' && rowKey in row) {
+      return (row as Record<string, unknown>)[rowKey] as string | number;
+    }
+
+    return index;
+  }
+
+  function resolveRowClass(row: unknown, index: number) {
+    if (typeof rowClass === 'function') {
+      return rowClass(row, index) ?? '';
+    }
+
+    return rowClass ?? '';
+  }
+
+  function resolveRowAttributes(row: unknown, index: number) {
+    return rowAttributes?.(row, index) ?? {};
+  }
+
+  function resolveCellClass(column: DataTableColumn, row: unknown, value: DataTableCellValue) {
+    if (typeof column.class === 'function') {
+      return column.class(row, value, column) ?? '';
+    }
+
+    return column.class ?? '';
+  }
+
+  onMount(() => {
+    const update = () => queueStickyHeaderUpdate();
+    const observer = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(update) : undefined;
+
+    if (tableElement) {
+      observer?.observe(tableElement);
+    }
+
+    window.addEventListener('scroll', update, { passive: true });
+    window.addEventListener('resize', update);
+    queueStickyHeaderUpdate();
+
+    return () => {
+      window.removeEventListener('scroll', update);
+      window.removeEventListener('resize', update);
+      observer?.disconnect();
+      if (stickyHeaderUpdateFrame !== null) {
+        window.cancelAnimationFrame(stickyHeaderUpdateFrame);
+      }
+    };
+  });
+
+  $: {
+    rows;
+    columns;
+    sort;
+    stickyHeader;
+    resolvedStickyHeaderTop;
+    queueStickyHeaderUpdate();
+  }
+</script>
+
+<div class:suu-table-wrap--borderless={!bordered} class="suu-table-wrap" style:--suu-table-sticky-top={resolvedStickyHeaderTop}>
+  <span bind:this={stickyHeaderOffsetProbe} class="suu-table__sticky-offset-probe" aria-hidden="true"></span>
+
+  {#if stickyHeaderVisible}
+    <div
+      class="suu-table__sticky-clone"
+      style:left={`${stickyHeaderLeft}px`}
+      style:width={`${stickyHeaderWidth}px`}
+      aria-hidden="true"
+    >
+      <table
+        class:suu-table--layout-auto={tableLayout === 'auto'}
+        class:suu-table--layout-fixed={tableLayout === 'fixed'}
+        class:suu-table--sticky-header={stickyHeader}
+        class:suu-table--zebra={zebra}
+        class:suu-table--vertical-separators={verticalSeparators}
+        class="suu-table"
+      >
+        <thead>
+          <tr>
+            {#each columns as column, columnIndex (column.key)}
+              <th
+                class={column.headerClass}
+                aria-sort={column.sortable ? getAriaSort(sort, column.key) : undefined}
+                data-align={column.align ?? 'left'}
+                scope="col"
+                style:width={stickyHeaderColumnWidths[columnIndex] ? `${stickyHeaderColumnWidths[columnIndex]}px` : undefined}
+                style:min-width={stickyHeaderColumnWidths[columnIndex] ? `${stickyHeaderColumnWidths[columnIndex]}px` : undefined}
+                style:max-width={stickyHeaderColumnWidths[columnIndex] ? `${stickyHeaderColumnWidths[columnIndex]}px` : undefined}
+              >
+                {#if column.sortable}
+                  <button class="suu-table__sort-button" type="button" on:click={() => handleSort(column)}>
+                    <span><slot name="header" {column} {sort}>{column.header}</slot></span>
+                    <span class="suu-table__sort-indicator" aria-hidden="true">
+                      {#if sort?.key === column.key && sort.direction === 'asc'}
+                        <svg class="suu-table__sort-icon suu-table__sort-icon--asc" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+                          <path d="M5 9.5 8 6.5l3 3" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6" />
+                        </svg>
+                      {:else if sort?.key === column.key}
+                        <svg class="suu-table__sort-icon suu-table__sort-icon--desc" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+                          <path d="m5 6.5 3 3 3-3" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6" />
+                        </svg>
+                      {:else}
+                        <svg class="suu-table__sort-icon suu-table__sort-icon--both" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+                          <path d="M5 6.5 8 3.5l3 3" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6" />
+                          <path d="m5 9.5 3 3 3-3" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6" />
+                        </svg>
+                      {/if}
+                    </span>
+                  </button>
+                {:else}
+                  <slot name="header" {column} {sort}>{column.header}</slot>
+                {/if}
+              </th>
+            {/each}
+          </tr>
+        </thead>
+      </table>
+    </div>
+  {/if}
+
+  <table
+    bind:this={tableElement}
+    class:suu-table--layout-auto={tableLayout === 'auto'}
+    class:suu-table--layout-fixed={tableLayout === 'fixed'}
+    class:suu-table--sticky-header={stickyHeader}
+    class:suu-table--sticky-header-shadowed={stickyHeaderVisible}
+    class:suu-table--zebra={zebra}
+    class:suu-table--vertical-separators={verticalSeparators}
+    class="suu-table"
+  >
+    <thead>
+      <tr>
+        {#each columns as column (column.key)}
+          <th
+            class={column.headerClass}
+            aria-sort={column.sortable ? getAriaSort(sort, column.key) : undefined}
+            data-align={column.align ?? 'left'}
+            scope="col"
+          >
+            {#if column.sortable}
+              <button class="suu-table__sort-button" type="button" on:click={() => handleSort(column)}>
+                <span><slot name="header" {column} {sort}>{column.header}</slot></span>
+                <span class="suu-table__sort-indicator" aria-hidden="true">
+                  {#if sort?.key === column.key && sort.direction === 'asc'}
+                    <svg class="suu-table__sort-icon suu-table__sort-icon--asc" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+                      <path d="M5 9.5 8 6.5l3 3" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6" />
+                    </svg>
+                  {:else if sort?.key === column.key}
+                    <svg class="suu-table__sort-icon suu-table__sort-icon--desc" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+                      <path d="m5 6.5 3 3 3-3" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6" />
+                    </svg>
+                  {:else}
+                    <svg class="suu-table__sort-icon suu-table__sort-icon--both" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+                      <path d="M5 6.5 8 3.5l3 3" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6" />
+                      <path d="m5 9.5 3 3 3-3" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6" />
+                    </svg>
+                  {/if}
+                </span>
+              </button>
+            {:else}
+              <slot name="header" {column} {sort}>{column.header}</slot>
+            {/if}
+          </th>
+        {/each}
+      </tr>
+    </thead>
+    <tbody>
+      {#if rows.length > 0}
+        {#each rows as row, rowIndex (resolveRowKey(row, rowIndex))}
+          <tr {...resolveRowAttributes(row, rowIndex)} class={resolveRowClass(row, rowIndex)}>
+            {#each columns as column (column.key)}
+              {@const value = getCellValue(row, column)}
+              <td class={resolveCellClass(column, row, value)} data-align={column.align ?? 'left'} data-nowrap={column.nowrap === false ? 'false' : 'true'}>
+                <slot name="cell" {row} {column} {value}>{value as string}</slot>
+              </td>
+            {/each}
+          </tr>
+        {/each}
+      {:else}
+        <tr>
+          <td class="suu-table__empty" colspan={Math.max(1, columns.length)}>{resolvedEmptyText}</td>
+        </tr>
+      {/if}
+    </tbody>
+  </table>
+</div>

package/dist/data-table/BaseDataTable.svelte.d.ts

@@ -0,0 +1,49 @@
+import { type UiLanguage } from '../i18n.js';
+import type { DataTableColumn, DataTableLayout, DataTableRowAttributes, DataTableRowKey, DataTableSortChangeHandler, SortState } from './types.js';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const BaseDataTable: $$__sveltets_2_IsomorphicComponent<{
+    rows?: unknown[];
+    columns?: DataTableColumn[];
+    sort?: SortState | null;
+    zebra?: boolean;
+    bordered?: boolean;
+    verticalSeparators?: boolean;
+    tableLayout?: DataTableLayout;
+    stickyHeader?: boolean;
+    stickyHeaderTop?: string | undefined;
+    stickyHeaderOffset?: string | undefined;
+    preserveScrollOnSort?: boolean;
+    language?: UiLanguage;
+    emptyText?: string | undefined;
+    rowKey?: DataTableRowKey | undefined;
+    rowClass?: string | ((row: unknown, index: number) => string | undefined | null) | undefined;
+    rowAttributes?: DataTableRowAttributes | undefined;
+    onSortChange?: DataTableSortChangeHandler | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    header: {
+        column: DataTableColumn<unknown>;
+        sort: SortState | null;
+    };
+    cell: {
+        row: unknown;
+        column: DataTableColumn<unknown>;
+        value: any;
+    };
+}, {}, string>;
+type BaseDataTable = InstanceType<typeof BaseDataTable>;
+export default BaseDataTable;
+//# sourceMappingURL=BaseDataTable.svelte.d.ts.map

package/dist/data-table/BaseDataTable.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseDataTable.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/data-table/BaseDataTable.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AAE5D,OAAO,KAAK,EAER,eAAe,EACf,eAAe,EACf,sBAAsB,EACtB,eAAe,EACf,0BAA0B,EAC1B,SAAS,EACV,MAAM,YAAY,CAAC;AA6RtB,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAUD,QAAA,MAAM,aAAa;WAfic,OAAO,EAAE;cAAY,eAAe,EAAE;WAAS,SAAS,GAAG,IAAI;;;;kBAAkH,eAAe;;sBAAwD,MAAM,GAAG,SAAS;yBAAuB,MAAM,GAAG,SAAS;;eAAiE,UAAU;gBAAc,MAAM,GAAG,SAAS;aAAW,eAAe,GAAG,SAAS;eAAa,MAAM,GAAG,CAAC,CAAC,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC,GAAG,SAAS;oBAAkB,sBAAsB,GAAG,SAAS;mBAAiB,0BAA0B,GAAG,SAAS;;;;;;;;;;;;;cAez/B,CAAC;AACvF,KAAK,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAC1D,eAAe,aAAa,CAAC"}

package/dist/data-table/DataTable.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+  import BaseDataTable from './BaseDataTable.svelte';
+  import Pagination from '../pagination/Pagination.svelte';
+  import { getUiMessages, type UiLanguage } from '../i18n.js';
+  import type {
+    DataTableColumn,
+    DataTableLayout,
+    DataTableRowAttributes,
+    DataTableRowKey,
+    DataTableSortChangeHandler,
+    PaginationChangeHandler,
+    PaginationState,
+    SortState
+  } from './types.js';
+
+  export let rows: unknown[] = [];
+  export let columns: DataTableColumn[] = [];
+  export let rowKey: DataTableRowKey | undefined = undefined;
+  export let language: UiLanguage = 'en_us';
+  export let emptyText: string | undefined = undefined;
+  export let sort: SortState | null = null;
+  export let onSortChange: DataTableSortChangeHandler | undefined = undefined;
+  export let showPagination = true;
+  export let page = 1;
+  export let pageSize = 20;
+  export let totalRows: number | undefined = undefined;
+  export let pageSizeOptions: number[] = [10, 20, 50, 100];
+  export let pageSizeLabel: string | undefined = undefined;
+  export let maxPageButtons = 15;
+  export let onPaginationChange: PaginationChangeHandler | undefined = undefined;
+  export let zebra = true;
+  export let bordered = true;
+  export let verticalSeparators = true;
+  export let tableLayout: DataTableLayout = 'auto';
+  export let stickyHeader = true;
+  export let stickyHeaderTop: string | undefined = undefined;
+  export let stickyHeaderOffset: string | undefined = undefined;
+  export let preserveScrollOnSort = true;
+  export let rowClass: string | ((row: unknown, index: number) => string | undefined | null) | undefined = undefined;
+  export let rowAttributes: DataTableRowAttributes | undefined = undefined;
+
+  $: messages = getUiMessages(language);
+  $: resolvedEmptyText = emptyText ?? messages.table.emptyText;
+  $: resolvedPageSizeLabel = pageSizeLabel ?? messages.table.pageSizeLabel;
+  $: resolvedTotalRows = totalRows ?? rows.length;
+  $: minimumPageSizeOption = pageSizeOptions.length > 0 ? Math.min(...pageSizeOptions) : 0;
+  $: shouldShowPagination = showPagination && (minimumPageSizeOption <= 0 || resolvedTotalRows >= minimumPageSizeOption);
+  $: pagination = { page, pageSize };
+
+  function updatePagination(next: PaginationState) {
+    void onPaginationChange?.(next);
+  }
+</script>
+
+<div class="suu-data-table">
+  {#if shouldShowPagination}
+    <Pagination
+      {pagination}
+      {language}
+      totalRows={resolvedTotalRows}
+      {pageSizeOptions}
+      pageSizeLabel={resolvedPageSizeLabel}
+      {maxPageButtons}
+      pageSizeDropdownPlacement="down"
+      onPaginationChange={updatePagination}
+    />
+  {/if}
+
+  <BaseDataTable
+    {rows}
+    {columns}
+    {sort}
+    {zebra}
+    {bordered}
+    {verticalSeparators}
+    {tableLayout}
+    {stickyHeader}
+    {stickyHeaderTop}
+    {stickyHeaderOffset}
+    {preserveScrollOnSort}
+    {language}
+    emptyText={resolvedEmptyText}
+    {rowKey}
+    {rowClass}
+    {rowAttributes}
+    {onSortChange}
+  >
+    <slot name="header" slot="header" let:column let:sort {column} {sort}>{column.header}</slot>
+    <slot name="cell" slot="cell" let:row let:column let:value {row} {column} {value}>{value}</slot>
+  </BaseDataTable>
+
+  {#if shouldShowPagination}
+    <Pagination
+      {pagination}
+      {language}
+      totalRows={resolvedTotalRows}
+      {pageSizeOptions}
+      pageSizeLabel={resolvedPageSizeLabel}
+      {maxPageButtons}
+      pageSizeDropdownPlacement="up"
+      onPaginationChange={updatePagination}
+    />
+  {/if}
+</div>

package/dist/data-table/DataTable.svelte.d.ts

@@ -0,0 +1,59 @@
+import { type UiLanguage } from '../i18n.js';
+import type { DataTableColumn, DataTableLayout, DataTableRowAttributes, DataTableRowKey, DataTableSortChangeHandler, PaginationChangeHandler, SortState } from './types.js';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const DataTable: $$__sveltets_2_IsomorphicComponent<{
+    rows?: unknown[];
+    columns?: DataTableColumn[];
+    rowKey?: DataTableRowKey | undefined;
+    language?: UiLanguage;
+    emptyText?: string | undefined;
+    sort?: SortState | null;
+    onSortChange?: DataTableSortChangeHandler | undefined;
+    showPagination?: boolean;
+    page?: number;
+    pageSize?: number;
+    totalRows?: number | undefined;
+    pageSizeOptions?: number[];
+    pageSizeLabel?: string | undefined;
+    maxPageButtons?: number;
+    onPaginationChange?: PaginationChangeHandler | undefined;
+    zebra?: boolean;
+    bordered?: boolean;
+    verticalSeparators?: boolean;
+    tableLayout?: DataTableLayout;
+    stickyHeader?: boolean;
+    stickyHeaderTop?: string | undefined;
+    stickyHeaderOffset?: string | undefined;
+    preserveScrollOnSort?: boolean;
+    rowClass?: string | ((row: unknown, index: number) => string | undefined | null) | undefined;
+    rowAttributes?: DataTableRowAttributes | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    header: {
+        slot: string;
+        column: DataTableColumn<unknown>;
+        sort: SortState | null;
+    };
+    cell: {
+        slot: string;
+        row: unknown;
+        column: DataTableColumn<unknown>;
+        value: any;
+    };
+}, {}, string>;
+type DataTable = InstanceType<typeof DataTable>;
+export default DataTable;
+//# sourceMappingURL=DataTable.svelte.d.ts.map

package/dist/data-table/DataTable.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/data-table/DataTable.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,KAAK,EACR,eAAe,EACf,eAAe,EACf,sBAAsB,EACtB,eAAe,EACf,0BAA0B,EAC1B,uBAAuB,EAEvB,SAAS,EACV,MAAM,YAAY,CAAC;AAgEtB,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAUD,QAAA,MAAM,SAAS;WAf2qB,OAAO,EAAE;cAAY,eAAe,EAAE;aAAW,eAAe,GAAG,SAAS;eAAa,UAAU;gBAAc,MAAM,GAAG,SAAS;WAAS,SAAS,GAAG,IAAI;mBAAiB,0BAA0B,GAAG,SAAS;;;;gBAAsG,MAAM,GAAG,SAAS;sBAAoB,MAAM,EAAE;oBAAkB,MAAM,GAAG,SAAS;;yBAA+D,uBAAuB,GAAG,SAAS;;;;kBAAkH,eAAe;;sBAAwD,MAAM,GAAG,SAAS;yBAAuB,MAAM,GAAG,SAAS;;eAAiE,MAAM,GAAG,CAAC,CAAC,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC,GAAG,SAAS;oBAAkB,sBAAsB,GAAG,SAAS;;;;;;;;;;;;;;;cAe7/C,CAAC;AACnF,KAAK,SAAS,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,CAAC;AAClD,eAAe,SAAS,CAAC"}