@invopop/popui 0.1.3 → 0.1.4-beta.1

package/dist/data-table/data-table-svelte.svelte.js

@@ -0,0 +1,111 @@
+import { createTable, } from "@tanstack/table-core";
+/**
+ * Creates a reactive TanStack table object for Svelte.
+ * @param options Table options to create the table with.
+ * @returns A reactive table object.
+ * @example
+ * ```svelte
+ * <script>
+ *   const table = createSvelteTable({ ... })
+ * </script>
+ *
+ * <table>
+ *   <thead>
+ *     {#each table.getHeaderGroups() as headerGroup}
+ *       <tr>
+ *         {#each headerGroup.headers as header}
+ *           <th colspan={header.colSpan}>
+ *         	   <FlexRender content={header.column.columnDef.header} context={header.getContext()} />
+ *         	 </th>
+ *         {/each}
+ *       </tr>
+ *     {/each}
+ *   </thead>
+ * 	 <!-- ... -->
+ * </table>
+ * ```
+ */
+export function createSvelteTable(options) {
+    const resolvedOptions = mergeObjects({
+        state: {},
+        onStateChange() { },
+        renderFallbackValue: null,
+        mergeOptions: (defaultOptions, options) => {
+            return mergeObjects(defaultOptions, options);
+        },
+    }, options);
+    const table = createTable(resolvedOptions);
+    let state = $state(table.initialState);
+    function updateOptions() {
+        table.setOptions((prev) => {
+            return mergeObjects(prev, options, {
+                state: mergeObjects(state, options.state || {}),
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                onStateChange: (updater) => {
+                    if (updater instanceof Function)
+                        state = updater(state);
+                    else
+                        state = mergeObjects(state, updater);
+                    options.onStateChange?.(updater);
+                },
+            });
+        });
+    }
+    updateOptions();
+    $effect.pre(() => {
+        updateOptions();
+    });
+    return table;
+}
+/**
+ * Lazily merges several objects (or thunks) while preserving
+ * getter semantics from every source.
+ *
+ * Proxy-based to avoid known WebKit recursion issue.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function mergeObjects(...sources) {
+    const resolve = (src) => typeof src === "function" ? (src() ?? undefined) : src;
+    const findSourceWithKey = (key) => {
+        for (let i = sources.length - 1; i >= 0; i--) {
+            const obj = resolve(sources[i]);
+            if (obj && key in obj)
+                return obj;
+        }
+        return undefined;
+    };
+    return new Proxy(Object.create(null), {
+        get(_, key) {
+            const src = findSourceWithKey(key);
+            return src?.[key];
+        },
+        has(_, key) {
+            return !!findSourceWithKey(key);
+        },
+        ownKeys() {
+            // eslint-disable-next-line svelte/prefer-svelte-reactivity
+            const all = new Set();
+            for (const s of sources) {
+                const obj = resolve(s);
+                if (obj) {
+                    for (const k of Reflect.ownKeys(obj)) {
+                        all.add(k);
+                    }
+                }
+            }
+            return [...all];
+        },
+        getOwnPropertyDescriptor(_, key) {
+            const src = findSourceWithKey(key);
+            if (!src)
+                return undefined;
+            return {
+                configurable: true,
+                enumerable: true,
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                value: src[key],
+                writable: true,
+            };
+        },
+    });
+}

package/dist/data-table/data-table-toolbar.svelte

@@ -0,0 +1,16 @@
+<script lang="ts" generics="TData">
+  import type { Table } from '@tanstack/table-core'
+  import type { Snippet } from 'svelte'
+  import { DataTableViewOptions } from './index.js'
+
+  let { table, filters }: { table: Table<TData>; filters?: Snippet } = $props()
+</script>
+
+<div class="flex items-center justify-between">
+  {#if filters}
+    <div class="flex-1">
+      {@render filters()}
+    </div>
+  {/if}
+  <DataTableViewOptions {table} />
+</div>

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

@@ -0,0 +1,29 @@
+import type { Table } from '@tanstack/table-core';
+import type { Snippet } from 'svelte';
+declare function $$render<TData>(): {
+    props: {
+        table: Table<TData>;
+        filters?: Snippet;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataTableToolbar: $$IsomorphicComponent;
+type DataTableToolbar<TData> = InstanceType<typeof DataTableToolbar<TData>>;
+export default DataTableToolbar;

package/dist/data-table/data-table-types.d.ts

@@ -0,0 +1,74 @@
+import type { Component, Snippet } from 'svelte';
+import type { StatusType, AnyProp, TableAction, EmptyStateProps } from '../types.js';
+import type { IconSource } from '@steeze-ui/svelte-icon';
+import type { Table } from '@tanstack/table-core';
+export type CellType = 'text' | 'boolean' | 'tag' | 'date' | 'currency' | 'custom';
+export interface TextCellConfig {
+    className?: string;
+}
+export interface BooleanCellConfig {
+    icon?: IconSource;
+    iconClass?: string;
+    showWhenTrue?: boolean;
+    showWhenFalse?: boolean;
+}
+export interface TagCellConfig {
+    options: Array<{
+        value: string;
+        label: string;
+        color: StatusType;
+    }>;
+    showDot?: boolean;
+}
+export interface DateCellConfig {
+    className?: string;
+}
+export interface CurrencyCellConfig {
+    className?: string;
+}
+export type CellConfig = TextCellConfig | BooleanCellConfig | TagCellConfig | DateCellConfig | CurrencyCellConfig;
+export interface DataTableColumn<TData> {
+    id: string;
+    accessorKey?: keyof TData;
+    header?: string;
+    cellType?: CellType;
+    cellConfig?: CellConfig;
+    cell?: (value: any, row: TData) => Snippet | Component | string;
+    enableSorting?: boolean;
+    enableHiding?: boolean;
+    enableResizing?: boolean;
+    size?: number;
+    minSize?: number;
+    maxSize?: number;
+}
+export interface DataTableProps<TData> {
+    data: TData[];
+    columns: DataTableColumn<TData>[];
+    disableSelection?: boolean;
+    disablePagination?: boolean;
+    rowActions?: TableAction[];
+    onRowAction?: (action: AnyProp, row: TData) => void;
+    initialPageSize?: number;
+    pageSizeOptions?: number[];
+    emptyState?: Omit<EmptyStateProps, 'children' | 'check'>;
+    onRowClick?: (row: TData) => void;
+    onSelectionChange?: (selectedRows: TData[]) => void;
+    filters?: Snippet;
+    paginationSelectedSlot?: Snippet;
+    paginationUnselectedSlot?: Snippet;
+    onPageChange?: (pageIndex: number) => void;
+    onPageSizeChange?: (pageSize: number) => void;
+}
+export interface DataTablePaginationProps<T> {
+    table: Table<T>;
+    id?: string;
+    class?: string;
+    showRowsPerPage?: boolean;
+    rowsPerPageOptions?: number[];
+    itemsLabel?: string;
+    children?: Snippet;
+    selectedSlot?: Snippet;
+    unselectedSlot?: Snippet;
+    onPageChange?: (pageIndex: number) => void;
+    onPageSizeChange?: (pageSize: number) => void;
+}

package/dist/data-table/data-table-types.js

@@ -0,0 +1 @@
+export {};

package/dist/data-table/data-table-view-options.svelte

@@ -0,0 +1,88 @@
+<script lang="ts" generics="TData">
+  import { Sliders, Drag } from '@invopop/ui-icons'
+  import type { Table } from '@tanstack/table-core'
+  import type { DrawerOption } from '../types.js'
+  import BaseDropdown from '../BaseDropdown.svelte'
+  import DrawerContext from '../DrawerContext.svelte'
+  import InputToggle from '../InputToggle.svelte'
+  import BaseButton from '../BaseButton.svelte'
+  import { capitalize } from '../helpers.js'
+
+  let { table }: { table: Table<TData> } = $props()
+
+  let itemsWithActions = $state<DrawerOption[]>([])
+
+  // Initialize and update items when table state changes
+  $effect(() => {
+    const columnOrder = table.getState().columnOrder
+    const allColumns = table.getAllColumns()
+
+    let orderedColumns
+    // If there's a custom order, use it; otherwise use default order
+    if (columnOrder.length > 0) {
+      orderedColumns = columnOrder
+        .map((id) => allColumns.find((col) => col.id === id))
+        .filter((col) => col && col.id !== 'select' && col.id !== 'actions')
+    } else {
+      orderedColumns = allColumns.filter((col) => col.id !== 'select' && col.id !== 'actions')
+    }
+
+    const newItems = orderedColumns.map((col) => ({
+      label: (col?.columnDef.header as string) || capitalize(col?.id || ''),
+      value: col?.id,
+      icon: Drag,
+      action: toggleAction
+    })) as DrawerOption[]
+
+    // Only update if the order has actually changed (avoid overwriting during drag)
+    const currentOrder = itemsWithActions.map((i) => i.value).join(',')
+    const newOrder = newItems.map((i) => i.value).join(',')
+
+    if (currentOrder !== newOrder) {
+      itemsWithActions = newItems
+    }
+  })
+
+  function handleReorder(reorderedItems: any[]) {
+    // Update local items to match the drag order immediately
+    itemsWithActions = reorderedItems
+
+    const newOrder = reorderedItems.map((item) => item.value)
+    // Get all column IDs from the table
+    const allColumnIds = table.getAllColumns().map((col) => col.id)
+
+    // Filter to keep select and actions in their fixed positions
+    const selectColumn = 'select'
+    const actionsColumn = 'actions'
+
+    // Build final order: select first (if exists), reordered columns in middle, actions last (if exists)
+    const finalOrder = [
+      ...(allColumnIds.includes(selectColumn) ? [selectColumn] : []),
+      ...newOrder.filter((id) => id !== selectColumn && id !== actionsColumn),
+      ...(allColumnIds.includes(actionsColumn) ? [actionsColumn] : [])
+    ]
+
+    table.setColumnOrder(finalOrder)
+  }
+</script>
+
+{#snippet toggleAction(item: DrawerOption)}
+  {@const column = table.getColumn(String(item.value))}
+  {#if column?.getCanHide()}
+    <InputToggle
+      checked={column?.getIsVisible() ?? false}
+      onchange={(v) => column?.toggleVisibility(!!v)}
+    />
+  {/if}
+{/snippet}
+
+<BaseDropdown class="ms-auto hidden lg:flex">
+  {#snippet trigger()}
+    <BaseButton icon={Sliders} variant="outline" size="md" />
+  {/snippet}
+  <DrawerContext items={itemsWithActions} draggable={true} onreorder={handleReorder}>
+    <div class="p-3 py-1.5 text-sm font-medium text-foreground-default-secondary">
+      Table options
+    </div>
+  </DrawerContext>
+</BaseDropdown>

package/dist/data-table/data-table-view-options.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { Table } from '@tanstack/table-core';
+declare function $$render<TData>(): {
+    props: {
+        table: Table<TData>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataTableViewOptions: $$IsomorphicComponent;
+type DataTableViewOptions<TData> = InstanceType<typeof DataTableViewOptions<TData>>;
+export default DataTableViewOptions;

package/dist/data-table/data-table.svelte

@@ -0,0 +1,324 @@
+<script lang="ts" generics="TData">
+  import {
+    type ColumnSizingState,
+    type ColumnSizingInfoState,
+    type ColumnOrderState,
+    type PaginationState,
+    type Row,
+    type RowSelectionState,
+    type SortingState,
+    type VisibilityState,
+    type Column
+  } from '@tanstack/table-core'
+  import DataTableToolbar from './data-table-toolbar.svelte'
+  import DataTablePagination from './data-table-pagination.svelte'
+  import FlexRender from './flex-render.svelte'
+  import * as Table from '../table/index.js'
+  import BaseTableActions from '../BaseTableActions.svelte'
+  import BaseDropdown from '../BaseDropdown.svelte'
+  import BaseTableHeaderOrderBy from '../BaseTableHeaderOrderBy.svelte'
+  import EmptyState from '../EmptyState.svelte'
+  import { Icon } from '@steeze-ui/svelte-icon'
+  import { ArrowUp, ArrowDown, Search } from '@invopop/ui-icons'
+  import type { HTMLAttributes } from 'svelte/elements'
+  import { cn } from '../utils.js'
+  import type { DataTableProps } from './data-table-types.js'
+  import { calculateColumnSizing } from './column-sizing-helpers.js'
+  import { getHeaderStyle, getHeaderClasses, getCellStyle, getCellClasses } from './table-styles.js'
+  import { buildColumns, setupTable } from './table-setup.js'
+
+  let {
+    data,
+    columns: columnConfig,
+    disableSelection = false,
+    disablePagination = false,
+    rowActions = [],
+    onRowAction,
+    initialPageSize = 10,
+    emptyState = {
+      iconSource: Search,
+      title: 'No results',
+      description: 'Try adjusting your filters or search query'
+    },
+    onRowClick,
+    onSelectionChange,
+    filters,
+    paginationSelectedSlot,
+    paginationUnselectedSlot,
+    onPageChange,
+    onPageSizeChange
+  }: DataTableProps<TData> = $props()
+
+  const enableSelection = !disableSelection
+  const enablePagination = !disablePagination
+
+  let rowSelection = $state<RowSelectionState>({})
+  let columnVisibility = $state<VisibilityState>({})
+  let sorting = $state<SortingState>([])
+  let pagination = $state<PaginationState>({ pageIndex: 0, pageSize: initialPageSize })
+  let columnSizing = $state<ColumnSizingState>({})
+  let columnSizingInfo = $state<ColumnSizingInfoState>({
+    columnSizingStart: [],
+    deltaOffset: null,
+    deltaPercentage: null,
+    isResizingColumn: false,
+    startOffset: null,
+    startSize: null
+  })
+  let columnOrder = $state<ColumnOrderState>([])
+  let containerRef = $state<HTMLDivElement | null>(null)
+
+  // Build TanStack columns from config
+  const columns = $derived.by(() =>
+    buildColumns<TData>(columnConfig, enableSelection, RowActions, rowActions.length > 0)
+  )
+
+  // Calculate initial column sizes based on available width
+  $effect(() => {
+    if (containerRef && Object.keys(columnSizing).length === 0) {
+      const containerWidth = containerRef.offsetWidth
+      const newSizing = calculateColumnSizing(columns, containerWidth)
+      if (newSizing) {
+        columnSizing = newSizing
+      }
+    }
+  })
+
+  // Track selection changes
+  $effect(() => {
+    if (onSelectionChange) {
+      const selectedRows = Object.keys(rowSelection)
+        .filter((key) => rowSelection[key])
+        .map((key) => data[parseInt(key)])
+      onSelectionChange(selectedRows)
+    }
+  })
+
+  const table = setupTable({
+    get data() {
+      return data
+    },
+    get columns() {
+      return columns
+    },
+    enableSelection,
+    enablePagination,
+    getRowSelection: () => rowSelection,
+    getColumnVisibility: () => columnVisibility,
+    getSorting: () => sorting,
+    getPagination: () => pagination,
+    getColumnSizing: () => columnSizing,
+    getColumnSizingInfo: () => columnSizingInfo,
+    getColumnOrder: () => columnOrder,
+    setRowSelection: (value) => (rowSelection = value),
+    setColumnVisibility: (value) => (columnVisibility = value),
+    setSorting: (value) => (sorting = value),
+    setPagination: (value) => (pagination = value),
+    setColumnSizing: (value) => (columnSizing = value),
+    setColumnSizingInfo: (value) => (columnSizingInfo = value),
+    setColumnOrder: (value) => (columnOrder = value)
+  })
+</script>
+
+{#snippet StickyCellWrapper({
+  children,
+  align = 'left'
+}: {
+  children: any
+  align?: 'left' | 'right'
+})}
+  <div
+    class={cn(
+      'h-10 flex items-center px-3 relative group-hover/row:bg-background-default-secondary group-data-[state=selected]/row:bg-background-selected',
+      align === 'right' ? 'justify-end' : ''
+    )}
+  >
+    <div class="relative z-10">
+      {@render children()}
+    </div>
+  </div>
+{/snippet}
+
+{#snippet RowActions({ row }: { row: Row<TData> })}
+  <BaseTableActions
+    actions={rowActions}
+    onclick={(action) => {
+      if (onRowAction) {
+        onRowAction(action, row.original)
+      }
+    }}
+  />
+{/snippet}
+
+{#snippet ColumnHeader({
+  column,
+  title,
+  class: className,
+  ...restProps
+}: { column: Column<TData>; title?: string } & HTMLAttributes<HTMLDivElement>)}
+  {#if !column?.getCanSort()}
+    <div class={className} {...restProps}>
+      {title || ''}
+    </div>
+  {:else}
+    <div class={cn('flex items-center w-full', className)} {...restProps}>
+      <BaseDropdown fullWidth>
+        {#snippet trigger()}
+          <button
+            class="data-[state=open]:bg-accent w-full flex items-center gap-1 py-2.5 text-left"
+          >
+            <span>
+              {title || ''}
+            </span>
+            {#if column.getIsSorted() === 'desc'}
+              <Icon src={ArrowDown} class="size-4" />
+            {:else if column.getIsSorted() === 'asc'}
+              <Icon src={ArrowUp} class="size-4" />
+            {/if}
+          </button>
+        {/snippet}
+        <BaseTableHeaderOrderBy
+          sortDirection={column.getIsSorted() === 'asc' ? 'asc' : 'desc'}
+          isActive={column.getIsSorted() !== false}
+          onOrderBy={(direction) => column.toggleSorting(direction === 'desc')}
+          onHide={() => column.toggleVisibility(false)}
+        />
+      </BaseDropdown>
+    </div>
+  {/if}
+{/snippet}
+
+<div class="flex flex-col gap-4">
+  <DataTableToolbar {table} {filters} />
+  <div class="flex flex-col gap-[5px]">
+    <div bind:this={containerRef} class="relative bg-background">
+      <div class="overflow-x-auto relative z-10">
+        <Table.Root>
+          <Table.Header>
+            {#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
+              <Table.Row class="hover:!bg-transparent border-b border-border">
+                {#each headerGroup.headers as header, index (header.id)}
+                  {@const isLastScrollable = index === headerGroup.headers.length - 2}
+                  <Table.Head
+                    colspan={header.colSpan}
+                    style={getHeaderStyle(header, isLastScrollable)}
+                    class={getHeaderClasses(header, isLastScrollable)}
+                  >
+                    {#if !header.isPlaceholder}
+                      {#if typeof header.column.columnDef.header === 'string'}
+                        {@render ColumnHeader({
+                          column: header.column as Column<TData>,
+                          title: header.column.columnDef.header as string
+                        })}
+                      {:else}
+                        <FlexRender
+                          content={header.column.columnDef.header}
+                          context={header.getContext()}
+                        />
+                      {/if}
+                    {/if}
+                    {#if header.column.getCanResize()}
+                      <!-- Always visible vertical border -->
+                      <div
+                        class={cn(
+                          'absolute right-0 top-1/2 -translate-y-1/2 h-3 w-px bg-background-default-tertiary',
+                          header.column.getIsResizing() && 'opacity-0'
+                        )}
+                      ></div>
+                      <!-- Resize handler (larger interactive area, enhanced on hover) -->
+                      <div
+                        role="button"
+                        tabindex="0"
+                        aria-label="Resize column"
+                        class="absolute right-0 top-0 h-full w-3 cursor-col-resize select-none touch-none group -mr-1.5"
+                        onmousedown={header.getResizeHandler()}
+                        ontouchstart={header.getResizeHandler()}
+                      >
+                        <div
+                          class={cn(
+                            'absolute right-1.5 top-0 h-full w-0.5 bg-border-default-secondary transition-opacity opacity-0',
+                            !header.column.getIsResizing() && 'group-hover:opacity-100'
+                          )}
+                        ></div>
+                      </div>
+                    {/if}
+                  </Table.Head>
+                {/each}
+              </Table.Row>
+            {/each}
+          </Table.Header>
+          <Table.Body>
+            {#each table.getRowModel().rows as row (row.id)}
+              <Table.Row
+                data-state={row.getIsSelected() ? 'selected' : undefined}
+                class="border-b border-border"
+                onclick={() => onRowClick?.(row.original as TData)}
+              >
+                {#each row.getVisibleCells() as cell, index (cell.id)}
+                  {@const isLastScrollable = index === row.getVisibleCells().length - 2}
+                  {@const visibleCells = row.getVisibleCells()}
+                  {@const firstDataColumnIndex = visibleCells.findIndex(
+                    (c) => c.column.id !== 'select' && c.column.id !== 'actions'
+                  )}
+                  {@const isFirstDataColumn = index === firstDataColumnIndex}
+                  <Table.Cell
+                    style={getCellStyle(cell, isLastScrollable)}
+                    class={getCellClasses(cell, isLastScrollable, isFirstDataColumn)}
+                  >
+                    {#if cell.column.id === 'actions'}
+                      {@render StickyCellWrapper({
+                        align: 'right',
+                        children: CellContent
+                      })}
+                      {#snippet CellContent()}
+                        <FlexRender
+                          content={cell.column.columnDef.cell}
+                          context={cell.getContext()}
+                        />
+                      {/snippet}
+                    {:else if cell.column.id === 'select'}
+                      {@render StickyCellWrapper({
+                        align: 'left',
+                        children: CellContent
+                      })}
+                      {#snippet CellContent()}
+                        <FlexRender
+                          content={cell.column.columnDef.cell}
+                          context={cell.getContext()}
+                        />
+                      {/snippet}
+                    {:else}
+                      <FlexRender
+                        content={cell.column.columnDef.cell}
+                        context={cell.getContext()}
+                      />
+                    {/if}
+                  </Table.Cell>
+                {/each}
+              </Table.Row>
+            {:else}
+              <Table.Row>
+                <Table.Cell colspan={columns.length} class="h-48">
+                  <EmptyState
+                    iconSource={emptyState.iconSource}
+                    title={emptyState.title}
+                    description={emptyState.description}
+                  />
+                </Table.Cell>
+              </Table.Row>
+            {/each}
+          </Table.Body>
+        </Table.Root>
+      </div>
+    </div>
+    {#if enablePagination}
+      <DataTablePagination
+        {table}
+        selectedSlot={paginationSelectedSlot}
+        unselectedSlot={paginationUnselectedSlot}
+        {onPageChange}
+        {onPageSizeChange}
+      />
+    {/if}
+  </div>
+</div>