utils

Classes

RenderComponentConfig

Defined in: packages/ui/build/utils/index.d.ts:40

A helper class to make it easy to identify Svelte components in columnDef.cell and columnDef.header properties.

NOTE: This class should only be used internally by the adapter. If you're reading this and you don't know what this is for, you probably don't need it.

Example

The cast below is illustrative for the JSDoc snippet only — not runtime code.

{@const result = content(context as any)}
{#if result instanceof RenderComponentConfig}
  {@const { component: Component, props } = result}
  <Component {...props} />
{/if}

Type Parameters

Type Parameter
`TComponent` extends `Component`

Constructors

Constructor

new RenderComponentConfig<TComponent>(component, props?): RenderComponentConfig<TComponent>;

Defined in: packages/ui/build/utils/index.d.ts:43

Parameters

Parameter	Type
`component`	`TComponent`
`props?`	`ComponentProps`<`TComponent`> \| `Record`<`string`, `never`>

Returns

RenderComponentConfig<TComponent>

Properties

component

component: TComponent;

Defined in: packages/ui/build/utils/index.d.ts:41

props

props: Record<string, never> | ComponentProps<TComponent>;

Defined in: packages/ui/build/utils/index.d.ts:42

RenderSnippetConfig

Defined in: packages/ui/build/utils/index.d.ts:61

A helper class to make it easy to identify Svelte Snippets in columnDef.cell and columnDef.header properties.

NOTE: This class should only be used internally by the adapter. If you're reading this and you don't know what this is for, you probably don't need it.

Example

The cast below is illustrative for the JSDoc snippet only — not runtime code.

{@const result = content(context as any)}
{#if result instanceof RenderSnippetConfig}
  {@const { snippet, params } = result}
  {@render snippet(params)}
{/if}

Type Parameters

Type Parameter
`TProps`

Constructors

Constructor

new RenderSnippetConfig<TProps>(snippet, params): RenderSnippetConfig<TProps>;

Defined in: packages/ui/build/utils/index.d.ts:64

Parameters

Parameter	Type
`snippet`	`Snippet`<[`TProps`]>
`params`	`TProps`

Returns

RenderSnippetConfig<TProps>

Properties

params

params: TProps;

Defined in: packages/ui/build/utils/index.d.ts:63

snippet

snippet: Snippet<[TProps]>;

Defined in: packages/ui/build/utils/index.d.ts:62

Type Aliases

InfiniteLoader

type InfiniteLoader<T> = object;

Defined in: packages/ui/build/utils/infinite_loader.svelte.d.ts:1

Type Parameters

Type Parameter
`T`

Properties

Property	Type	Description	Defined in
`error`	`Error` \| `null`	-	packages/ui/build/utils/infinite_loader.svelte.d.ts:8
`fetchNextPage`	() => `Promise`<`void`>	-	packages/ui/build/utils/infinite_loader.svelte.d.ts:9
`hasNextPage`	`boolean`	-	packages/ui/build/utils/infinite_loader.svelte.d.ts:6
`insertRecord`	(`record`, `index?`) => `void`	Insert a row at index (clamped); bumps total when the list is not full.	packages/ui/build/utils/infinite_loader.svelte.d.ts:16
`isFetchingNextPage`	`boolean`	-	packages/ui/build/utils/infinite_loader.svelte.d.ts:5
`isLoading`	`boolean`	-	packages/ui/build/utils/infinite_loader.svelte.d.ts:4
`items`	`T`[]	-	packages/ui/build/utils/infinite_loader.svelte.d.ts:2
`loadedCount`	`number`	-	packages/ui/build/utils/infinite_loader.svelte.d.ts:7
`refresh`	() => `Promise`<`void`>	-	packages/ui/build/utils/infinite_loader.svelte.d.ts:10
`removeRecord`	(`matcher`) => `T` \| `undefined`	Remove a row; returns the removed record when found.	packages/ui/build/utils/infinite_loader.svelte.d.ts:14
`replaceRecord`	(`matcher`, `next`) => `void`	Replace a loaded row in place (e.g. after inline edit) without refetching the list.	packages/ui/build/utils/infinite_loader.svelte.d.ts:12
`total`	`number`	-	packages/ui/build/utils/infinite_loader.svelte.d.ts:3

WithElementRef

type WithElementRef<T, U> = T & object;

Defined in: packages/ui/build/utils/index.d.ts:20

Type Declaration

ref?

optional ref?: U | null;

Type Parameters

Type Parameter	Default type
`T`	-
`U` extends `HTMLElement`	`HTMLElement`

WithoutChild

type WithoutChild<T> = T extends object ? Omit<T, "child"> : T;

Defined in: packages/ui/build/utils/index.d.ts:13

Type Parameters

Type Parameter
`T`

WithoutChildren

type WithoutChildren<T> = T extends object ? Omit<T, "children"> : T;

Defined in: packages/ui/build/utils/index.d.ts:16

Type Parameters

Type Parameter
`T`

WithoutChildrenOrChild

type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;

Defined in: packages/ui/build/utils/index.d.ts:19

Type Parameters

Type Parameter
`T`

Variables

DEFAULT_CSS

const DEFAULT_CSS: object;

Defined in: packages/ui/build/utils/index.d.ts:6

Type Declaration

INPUT_ELEMENT

INPUT_ELEMENT: object;

INPUT_ELEMENT.PX

PX: number;

INPUT_ELEMENT.REM

REM: number;

INPUT_ELEMENT.TW_UNIT

TW_UNIT: number;

Functions

cn()

function cn(...inputs): string;

Defined in: packages/ui/build/utils/index.d.ts:4

Parameters

Parameter	Type
...`inputs`	`ClassValue`[]

Returns

string

createInfiniteLoader()

function createInfiniteLoader<T>(fetcher, limit): InfiniteLoader<T>;

Defined in: packages/ui/build/utils/infinite_loader.svelte.d.ts:18

Type Parameters

Type Parameter
`T`

Parameters

Parameter	Type
`fetcher`	(`opts`) => `Promise`<{ `records`: `T`[]; `total`: `number`; }>
`limit`	`number`

Returns

InfiniteLoader<T>

formatDateRangeLocal()

function formatDateRangeLocal(range, options?): string;

Defined in: packages/std/build/date/display.d.ts:8

Format a stored UTC date-range in the viewer's local timezone.

Parameters

Parameter	Type
`range`	\| `DateRangeWire` \| `null` \| `undefined`
`options?`	`FormatInstantOptions`

Returns

string

formatFileSize()

function formatFileSize(bytes): string;

Defined in: packages/ui/build/utils/index.d.ts:5

Parameters

Parameter	Type
`bytes`	`number`

Returns

string

formatUtcInstantLocal()

function formatUtcInstantLocal(value, options?): string;

Defined in: packages/std/build/date/display.d.ts:6

Format a stored UTC ISO instant in the viewer's local timezone.

Parameters

Parameter	Type
`value`	`string`
`options?`	`FormatInstantOptions`

Returns

string

parseServerTimestamp()

function parseServerTimestamp(input): Date | null;

Defined in: packages/ui/build/utils/index.d.ts:115

Parses a stored UTC ISO instant for display in the local timezone.

Parameters

Parameter	Type
`input`	`string`

Returns

Date | null

parseUtcInstantZoned()

function parseUtcInstantZoned(value): ZonedDateTime;

Defined in: packages/ui/build/utils/index.d.ts:117

Parse a stored UTC ISO instant for calendar/time pickers (local timezone).

Parameters

Parameter	Type
`value`	`string`

Returns

ZonedDateTime

renderComponent()

function renderComponent<T, Props>(component, props): RenderComponentConfig<T>;

Defined in: packages/ui/build/utils/index.d.ts:88

A helper function to help create cells from Svelte components through ColumnDef's cell and header properties.

This is only to be used with Svelte Components - use renderSnippet for Svelte Snippets.

Type Parameters

Type Parameter
`T` extends `Component`<`any`, { }, `string`>
`Props` extends `any`

Parameters

Parameter	Type	Description
`component`	`T`	A Svelte component
`props`	`Props`	The props to pass to `component`

Returns

RenderComponentConfig<T>

A RenderComponentConfig object that helps svelte-table know how to render the header/cell component.

Example

// +page.svelte
const defaultColumns = [
  columnHelper.accessor('name', {
    header: header => renderComponent(SortHeader, { label: 'Name', header }),
  }),
  columnHelper.accessor('state', {
    header: header => renderComponent(SortHeader, { label: 'State', header }),
  }),
]

See

https://tanstack.com/table/latest/docs/guide/column-defs

renderSnippet()

function renderSnippet<TProps>(snippet, params): RenderSnippetConfig<TProps>;

Defined in: packages/ui/build/utils/index.d.ts:113

A helper function to help create cells from Svelte Snippets through ColumnDef's cell and header properties.

The snippet must only take one parameter.

This is only to be used with Snippets - use renderComponent for Svelte Components.

Type Parameters

Type Parameter
`TProps`

Parameters

Parameter	Type
`snippet`	`Snippet`<[`TProps`]>
`params`	`TProps`

Returns

RenderSnippetConfig<TProps>

A RenderSnippetConfig object that helps svelte-table know how to render the header/cell snippet.

Example

// +page.svelte
const defaultColumns = [
  columnHelper.accessor('name', {
    cell: cell => renderSnippet(nameSnippet, { name: cell.row.name }),
  }),
  columnHelper.accessor('state', {
    cell: cell => renderSnippet(stateSnippet, { state: cell.row.state }),
  }),
]

See

https://tanstack.com/table/latest/docs/guide/column-defs