@invopop/popui 0.1.35 → 0.1.40

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

@@ -0,0 +1,188 @@
+<script lang="ts" generics="TData">
+  import type { DataTableHeaderCellProps } from './data-table-types.js'
+  import type { Column, Header } from '@tanstack/table-core'
+  import type { HTMLAttributes } from 'svelte/elements'
+  import * as Table from '../table/index.js'
+  import BaseDropdown from '../BaseDropdown.svelte'
+  import BaseTableHeaderOrderBy from '../BaseTableHeaderOrderBy.svelte'
+  import FlexRender from './flex-render.svelte'
+  import { Icon } from '@steeze-ui/svelte-icon'
+  import { ArrowUp, ArrowDown } from '@invopop/ui-icons'
+  import { cn } from '../utils.js'
+  import { calculateFrozenOffset } from './data-table-helpers.js'
+  import { getHeaderStyle, getHeaderClasses } from './table-styles.js'
+  import clsx from 'clsx'
+
+  let {
+    header,
+    index,
+    headers,
+    frozenColumns,
+    columnDropdowns = $bindable({}),
+    onSortingChange,
+    onFilterChange,
+    onFreezeChange,
+    loading = false
+  }: DataTableHeaderCellProps<TData> = $props()
+
+  const isLastScrollable = $derived(index === headers.length - 2)
+  const isFirstHeader = $derived(index === 0)
+  const isLastHeader = $derived(index === headers.length - 1)
+  const prevHeader = $derived(index > 0 ? headers[index - 1] : null)
+  const isFrozen = $derived(frozenColumns.has(header.id))
+  const lastFrozenHeaderId = $derived(
+    headers
+      .slice()
+      .reverse()
+      .find((h) => frozenColumns.has(h.id))?.id
+  )
+  const isLastFrozenHeader = $derived(isFrozen && header.id === lastFrozenHeaderId)
+  const frozenOffset = $derived(isFrozen ? calculateFrozenOffset(header.id, headers, frozenColumns) : 0)
+  const hasSelectColumn = $derived(headers.some((h) => h.id === 'select'))
+</script>
+
+{#snippet ResizeHandle({
+  side,
+  targetHeader,
+  label
+}: {
+  side: 'left' | 'right'
+  targetHeader: Header<TData, unknown>
+  label: string
+})}
+  <div
+    role="button"
+    tabindex="0"
+    aria-label={label}
+    class={cn(
+      'absolute top-0 h-full w-6 cursor-col-resize select-none touch-none group z-0',
+      side === 'left' ? 'left-0 -ml-3' : 'right-0 -mr-3'
+    )}
+    onmousedown={targetHeader.getResizeHandler()}
+    ontouchstart={targetHeader.getResizeHandler()}
+  >
+    <div
+      class={cn(
+        'absolute top-0 h-full w-0.5 bg-border-default-secondary transition-opacity opacity-0',
+        side === 'left' ? 'left-1.5' : 'right-1.5',
+        !targetHeader.column.getIsResizing() && 'group-hover:opacity-100'
+      )}
+    ></div>
+  </div>
+{/snippet}
+
+{#snippet ColumnHeader({
+  column,
+  title,
+  class: className,
+  isFirst = false,
+  hasSelectColumn = false,
+  ...restProps
+}: {
+  column: Column<TData>
+  title?: string
+  isFirst?: boolean
+  hasSelectColumn?: boolean
+} & HTMLAttributes<HTMLDivElement>)}
+  {@const isCurrency = column.columnDef.meta?.cellType === 'currency'}
+  {@const needsEdgePadding = isFirst && !hasSelectColumn}
+  <div
+    class={cn(
+      'flex items-center w-full [th[data-last-frozen=true]_&]:border-r [th[data-last-frozen=true]_&]:border-border',
+      className
+    )}
+    oncontextmenu={(e) => {
+      e.preventDefault()
+      columnDropdowns[column.id]?.toggle()
+    }}
+    {...restProps}
+  >
+    <BaseDropdown bind:this={columnDropdowns[column.id]} fullWidth usePortal={false}>
+      {#snippet trigger()}
+        <button
+          class={clsx(
+            'data-[state=open]:bg-accent hover:bg-background-default-secondary w-full flex items-center gap-1 py-2.5',
+            {
+              'justify-end': isCurrency,
+              'text-left': !isCurrency,
+              'pl-4 pr-3': needsEdgePadding,
+              'px-3': !needsEdgePadding
+            }
+          )}
+        >
+          <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}
+        isFrozen={frozenColumns.has(column.id)}
+        showSortOptions={column.getCanSort()}
+        showFilterOption={!column.columnDef.meta?.disableColumnFilter}
+        onOrderBy={(direction) => {
+          column.toggleSorting(direction === 'desc')
+          if (onSortingChange) {
+            onSortingChange(column.id, direction)
+          }
+          columnDropdowns[column.id]?.toggle()
+        }}
+        onHide={() => {
+          column.toggleVisibility(false)
+          columnDropdowns[column.id]?.toggle()
+        }}
+        onFilter={() => {
+          onFilterChange?.(column.id)
+          columnDropdowns[column.id]?.toggle()
+        }}
+        onFreeze={() => {
+          onFreezeChange?.(column.id)
+          columnDropdowns[column.id]?.toggle()
+        }}
+      />
+    </BaseDropdown>
+  </div>
+{/snippet}
+
+<Table.Head
+  colspan={header.colSpan}
+  style={getHeaderStyle(header, isLastScrollable, isFrozen, frozenOffset)}
+  class={getHeaderClasses(
+    header,
+    isLastScrollable,
+    isFirstHeader,
+    isLastHeader,
+    isFrozen,
+    isLastFrozenHeader
+  )}
+  data-last-frozen={isFrozen && isLastFrozenHeader ? 'true' : undefined}
+>
+  {#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,
+        isFirst: isFirstHeader,
+        hasSelectColumn
+      })}
+    {:else if header.id === 'select'}
+      <div class={cn('flex items-center', loading && 'opacity-30')}>
+        <FlexRender content={header.column.columnDef.header} context={header.getContext()} />
+      </div>
+    {:else}
+      <FlexRender content={header.column.columnDef.header} context={header.getContext()} />
+    {/if}
+  {/if}
+  {#if prevHeader && prevHeader.column.getCanResize()}
+    {@render ResizeHandle({ side: 'left', targetHeader: prevHeader, label: 'Resize previous column' })}
+  {/if}
+  {#if header.column.getCanResize()}
+    {@render ResizeHandle({ side: 'right', targetHeader: header, label: 'Resize column' })}
+  {/if}
+</Table.Head>

package/dist/data-table/data-table-header-cell.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { DataTableHeaderCellProps } from './data-table-types.js';
+declare function $$render<TData>(): {
+    props: DataTableHeaderCellProps<TData>;
+    exports: {};
+    bindings: "columnDropdowns";
+    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(): "columnDropdowns";
+    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 DataTableHeaderCell: $$IsomorphicComponent;
+type DataTableHeaderCell<TData> = InstanceType<typeof DataTableHeaderCell<TData>>;
+export default DataTableHeaderCell;

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

@@ -0,0 +1,10 @@
+import type { Table, Row } from '@tanstack/table-core';
+import type BaseDropdown from '../BaseDropdown.svelte';
+export declare function reorderFrozenColumn<TData>(columnId: string, table: Table<TData>, frozenColumns: Set<string>): void;
+export declare function reorderUnfrozenColumn<TData>(columnId: string, table: Table<TData>, frozenColumns: Set<string>): void;
+export declare function calculateFrozenOffset(columnId: string, headers: any[], frozenColumns: Set<string>): number;
+export declare function handleScrollEvent(event: Event, lastScrollLeft: number, columnDropdowns: Record<string, BaseDropdown>): number;
+export declare function shouldIgnoreKeyEvent(event: KeyboardEvent): boolean;
+export declare function handleArrowDown<TData>(currentIndex: number, rows: Row<TData>[], shiftKey: boolean, enableSelection: boolean, onScroll: () => void): number;
+export declare function handleArrowUp<TData>(currentIndex: number, rows: Row<TData>[], shiftKey: boolean, enableSelection: boolean, onScroll: () => void): number;
+export declare function handleSelectKey<TData>(currentIndex: number, rows: Row<TData>[], enableSelection: boolean): void;

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

@@ -0,0 +1,124 @@
+export function reorderFrozenColumn(columnId, table, frozenColumns) {
+    const currentOrder = table.getState().columnOrder.length > 0
+        ? table.getState().columnOrder
+        : table.getAllLeafColumns().map((col) => col.id);
+    const newOrder = [...currentOrder];
+    const columnIndex = newOrder.indexOf(columnId);
+    if (columnIndex > -1) {
+        newOrder.splice(columnIndex, 1);
+        const selectIndex = newOrder.indexOf('select');
+        const insertIndex = selectIndex >= 0 ? selectIndex + 1 : 0;
+        let lastFrozenIndex = insertIndex;
+        for (let i = insertIndex; i < newOrder.length; i++) {
+            if (frozenColumns.has(newOrder[i])) {
+                lastFrozenIndex = i + 1;
+            }
+            else {
+                break;
+            }
+        }
+        newOrder.splice(lastFrozenIndex, 0, columnId);
+        table.setColumnOrder(newOrder);
+    }
+}
+export function reorderUnfrozenColumn(columnId, table, frozenColumns) {
+    const currentOrder = table.getState().columnOrder.length > 0
+        ? table.getState().columnOrder
+        : table.getAllLeafColumns().map((col) => col.id);
+    const newOrder = [...currentOrder];
+    const columnIndex = newOrder.indexOf(columnId);
+    if (columnIndex > -1) {
+        newOrder.splice(columnIndex, 1);
+        const selectIndex = newOrder.indexOf('select');
+        const insertIndex = selectIndex >= 0 ? selectIndex + 1 : 0;
+        // Find the first unfrozen column position (after all frozen columns)
+        let firstUnfrozenIndex = insertIndex;
+        for (let i = insertIndex; i < newOrder.length; i++) {
+            if (frozenColumns.has(newOrder[i])) {
+                firstUnfrozenIndex = i + 1;
+            }
+            else {
+                break;
+            }
+        }
+        newOrder.splice(firstUnfrozenIndex, 0, columnId);
+        table.setColumnOrder(newOrder);
+    }
+}
+export function calculateFrozenOffset(columnId, headers, frozenColumns) {
+    let offset = 0;
+    // Find the position of current column
+    for (const header of headers) {
+        if (header.id === columnId) {
+            break;
+        }
+        // Only add width of previous frozen columns that are visible (or select column)
+        const isVisible = header.column?.getIsVisible?.() ?? true;
+        if (isVisible && (frozenColumns.has(header.id) || header.id === 'select')) {
+            offset += header.getSize();
+        }
+    }
+    return offset;
+}
+export function handleScrollEvent(event, lastScrollLeft, columnDropdowns) {
+    const target = event.target;
+    if (target.scrollLeft !== lastScrollLeft) {
+        // Close all column dropdowns
+        Object.values(columnDropdowns).forEach((dropdown) => {
+            if (dropdown) {
+                dropdown.close();
+            }
+        });
+        return target.scrollLeft;
+    }
+    return lastScrollLeft;
+}
+// Keyboard navigation helpers
+export function shouldIgnoreKeyEvent(event) {
+    const targetTag = event.target.tagName;
+    return targetTag === 'INPUT' || targetTag === 'TEXTAREA';
+}
+export function handleArrowDown(currentIndex, rows, shiftKey, enableSelection, onScroll) {
+    if (currentIndex === -1 && rows.length > 0) {
+        // No row focused, focus first row
+        const newIndex = 0;
+        onScroll();
+        if (shiftKey && enableSelection) {
+            rows[newIndex].toggleSelected(true);
+        }
+        return newIndex;
+    }
+    else if (currentIndex < rows.length - 1) {
+        // Move down
+        const newIndex = currentIndex + 1;
+        onScroll();
+        if (shiftKey && enableSelection) {
+            rows[newIndex].toggleSelected(true);
+        }
+        return newIndex;
+    }
+    return currentIndex;
+}
+export function handleArrowUp(currentIndex, rows, shiftKey, enableSelection, onScroll) {
+    // Deselect current row first when going up with shift
+    if (shiftKey && enableSelection && currentIndex >= 0) {
+        rows[currentIndex].toggleSelected(false);
+    }
+    if (currentIndex === -1 && rows.length > 0) {
+        // No row focused, focus first row
+        onScroll();
+        return 0;
+    }
+    else if (currentIndex > 0) {
+        // Move up
+        const newIndex = currentIndex - 1;
+        onScroll();
+        return newIndex;
+    }
+    return currentIndex;
+}
+export function handleSelectKey(currentIndex, rows, enableSelection) {
+    if (currentIndex >= 0 && currentIndex < rows.length && enableSelection) {
+        rows[currentIndex].toggleSelected();
+    }
+}

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

@@ -0,0 +1,214 @@
+<script lang="ts">
+  import Button from '../button/button.svelte'
+  import InputSelect from '../InputSelect.svelte'
+  import InputText from '../InputText.svelte'
+  import { ArrowLeft, ArrowRight, ScrollLeft, ScrollRight } from '@invopop/ui-icons'
+  import { cn } from '../utils.js'
+  import clsx from 'clsx'
+  import type { DataTablePaginationProps } from './data-table-types.js'
+
+  let {
+    table,
+    id,
+    class: className,
+    showRowsPerPage = true,
+    rowsPerPageOptions = [10, 25, 50, 100],
+    itemsLabel = 'items',
+    children,
+    onPageChange,
+    onPageSizeChange,
+    data,
+    rowCount,
+    manualPagination,
+    disabled = false
+  }: DataTablePaginationProps<any> = $props()
+
+  let currentPage = $derived(table.getState().pagination.pageIndex + 1)
+  let rowsPerPage = $derived(table.getState().pagination.pageSize)
+  let totalItems = $derived.by(() => {
+    // Use direct props for reactivity
+    if (manualPagination && rowCount !== undefined) {
+      return rowCount
+    }
+    // For client-side pagination, use data length directly
+    return data?.length ?? 0
+  })
+  // Calculate totalPages from reactive values instead of calling table.getPageCount()
+  let totalPages = $derived(Math.ceil(totalItems / rowsPerPage) || 1)
+
+  let pageInputValue = $derived(`${currentPage}`)
+
+  function handlePageInput(value: string) {
+    const numValue = parseInt(value)
+    if (numValue >= 1 && numValue <= totalPages) {
+      if (manualPagination) {
+        table.setPagination({ pageIndex: numValue - 1, pageSize: rowsPerPage })
+      } else {
+        table.setPageIndex(numValue - 1)
+      }
+      onPageChange?.(numValue)
+    }
+  }
+
+  function handlePageBlur(event: Event) {
+    const target = event.target as HTMLInputElement
+    const value = parseInt(target.value)
+    if (isNaN(value) || value < 1) {
+      target.value = `${currentPage}`
+    } else if (value > totalPages) {
+      target.value = `${totalPages}`
+      if (manualPagination) {
+        table.setPagination({ pageIndex: totalPages - 1, pageSize: rowsPerPage })
+      } else {
+        table.setPageIndex(totalPages - 1)
+      }
+      onPageChange?.(totalPages)
+    }
+  }
+
+  function formatNumber(num: number): string {
+    return new Intl.NumberFormat('en-US').format(num)
+  }
+</script>
+
+<div
+  {id}
+  class={cn(
+    'flex items-center justify-between h-11 px-4 py-[5px] bg-background backdrop-blur-[10px] border-t border-border',
+    className
+  )}
+>
+  <div class={clsx('flex items-center gap-3', {
+    'pointer-events-none opacity-30': disabled
+  })}>
+    <div class="flex items-center gap-2">
+      <div class="flex items-center gap-1.5">
+        <div class="flex items-center">
+          <Button
+            variant="ghost"
+            size="md"
+            icon={ScrollLeft}
+            onclick={() => {
+              if (manualPagination) {
+                table.setPagination({ pageIndex: 0, pageSize: rowsPerPage })
+              } else {
+                table.setPageIndex(0)
+              }
+              onPageChange?.(1)
+            }}
+            disabled={currentPage === 1}
+            class={cn(currentPage === 1 && 'pointer-events-none opacity-30')}
+            aria-label="First page"
+          />
+          <Button
+            variant="ghost"
+            size="md"
+            icon={ArrowLeft}
+            onclick={() => {
+              const newPage = currentPage - 1
+              if (manualPagination) {
+                // For manual pagination, bypass TanStack's navigation and use setPagination directly
+                // to avoid clamping issues with stale pageCount
+                table.setPagination({ pageIndex: newPage - 1, pageSize: rowsPerPage })
+              } else {
+                table.previousPage()
+              }
+              onPageChange?.(newPage)
+            }}
+            disabled={currentPage === 1}
+            class={cn(currentPage === 1 && 'pointer-events-none opacity-30')}
+            aria-label="Previous page"
+          />
+        </div>
+        <div class="flex items-center gap-1.5">
+          <div
+            class="w-12 [&>div]:gap-0 [&_input]:[appearance:textfield] [&_input]:[&::-webkit-outer-spin-button]:appearance-none [&_input]:[&::-webkit-inner-spin-button]:appearance-none"
+          >
+            <InputText
+              bind:value={pageInputValue}
+              type="number"
+              min="1"
+              max={totalPages}
+              size="sm"
+              oninput={handlePageInput}
+              onblur={handlePageBlur}
+            />
+          </div>
+          <span class="text-base text-foreground-default-secondary whitespace-nowrap">
+            / {totalPages}
+          </span>
+        </div>
+        <div class="flex items-center">
+          <Button
+            variant="ghost"
+            size="md"
+            icon={ArrowRight}
+            onclick={() => {
+              const newPage = currentPage + 1
+              if (manualPagination) {
+                // For manual pagination, bypass TanStack's navigation and use setPagination directly
+                // to avoid clamping issues with stale pageCount
+                table.setPagination({ pageIndex: newPage - 1, pageSize: rowsPerPage })
+              } else {
+                table.nextPage()
+              }
+              onPageChange?.(newPage)
+            }}
+            disabled={currentPage === totalPages}
+            class={cn(currentPage === totalPages && 'pointer-events-none opacity-30')}
+            aria-label="Next page"
+          />
+          <Button
+            variant="ghost"
+            size="md"
+            icon={ScrollRight}
+            onclick={() => {
+              if (manualPagination) {
+                table.setPagination({ pageIndex: totalPages - 1, pageSize: rowsPerPage })
+              } else {
+                table.setPageIndex(totalPages - 1)
+              }
+              onPageChange?.(totalPages)
+            }}
+            disabled={currentPage === totalPages}
+            class={cn(currentPage === totalPages && 'pointer-events-none opacity-30')}
+            aria-label="Last page"
+          />
+        </div>
+      </div>
+      {#if showRowsPerPage}
+        <div class="w-[105px]">
+          <InputSelect
+            value={`${rowsPerPage}`}
+            options={rowsPerPageOptions.map((size) => ({
+              value: `${size}`,
+              label: `${size} rows`
+            }))}
+            size="sm"
+            onchange={(value) => {
+              const size = Number(value)
+              table.setPageSize(size)
+              table.setPageIndex(0)
+              onPageSizeChange?.(size)
+              onPageChange?.(1)
+            }}
+            placeholder="Rows per page"
+            disablePlaceholder={true}
+            aria-label="Rows per page"
+          />
+        </div>
+      {/if}
+    </div>
+    {#if totalItems > 0}
+      <span class="text-base text-foreground-default-secondary">
+        {formatNumber(totalItems)}
+        {itemsLabel}
+      </span>
+    {/if}
+  </div>
+  {#if children}
+    <div class="flex items-center gap-2">
+      {@render children()}
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,4 @@
+import type { DataTablePaginationProps } from './data-table-types.js';
+declare const DataTablePagination: import("svelte").Component<DataTablePaginationProps<any>, {}, "">;
+type DataTablePagination = ReturnType<typeof DataTablePagination>;
+export default DataTablePagination;

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

@@ -0,0 +1,57 @@
+<script lang="ts" generics="TData">
+  import type { DataTableRowProps } from './data-table-types.js'
+  import * as Table from '../table/index.js'
+  import DataTableCell from './data-table-cell.svelte'
+  import { cn } from '../utils.js'
+  import clsx from 'clsx'
+
+  let {
+    row,
+    rowIndex,
+    frozenColumns,
+    focusedRowIndex,
+    loading = false,
+    onRowClick,
+    getRowClassName,
+    getRowState,
+    StickyCellWrapper
+  }: DataTableRowProps<TData> = $props()
+
+  const rowState = $derived(getRowState?.(row.original as TData))
+  const isError = $derived(rowState?.isError ?? false)
+  const isSuccess = $derived(rowState?.isSuccess ?? false)
+  const isWarning = $derived(rowState?.isWarning ?? false)
+  const dataState = $derived.by(() => {
+    if (row.getIsSelected()) return 'selected'
+    if (isError) return 'error'
+    if (isWarning) return 'warning'
+    if (isSuccess) return 'success'
+    return undefined
+  })
+</script>
+
+<Table.Row
+  data-state={dataState}
+  data-row-index={rowIndex}
+  data-focused={focusedRowIndex === rowIndex ? 'true' : undefined}
+  class={cn(
+    clsx('shadow-[inset_0_-1px_0_0_var(--color-border)]', {
+      'cursor-pointer': onRowClick && !loading,
+      'pointer-events-none': loading
+    }),
+    getRowClassName?.(row.original as TData)
+  )}
+  onclick={() => !loading && onRowClick?.(row.original as TData)}
+>
+  {#each row.getVisibleCells() as cell, index (cell.id)}
+    <DataTableCell
+      {cell}
+      {index}
+      visibleCells={row.getVisibleCells()}
+      allCells={row.getAllCells()}
+      {frozenColumns}
+      {loading}
+      {StickyCellWrapper}
+    />
+  {/each}
+</Table.Row>

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

@@ -0,0 +1,25 @@
+import type { DataTableRowProps } from './data-table-types.js';
+declare function $$render<TData>(): {
+    props: DataTableRowProps<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 DataTableRow: $$IsomorphicComponent;
+type DataTableRow<TData> = InstanceType<typeof DataTableRow<TData>>;
+export default DataTableRow;