Sveltewind

Components

Datatable

Editable, sortable tables with typed filters, selection, creation dialogs, and built-in pagination.

Props

Native Div attributes and events are forwarded to the root. Common theme, visibility, and transition props are supported. Feature flags default to true except isDataControlled, which defaults to false. Pagination defaults to page 1 with 10 rows per page.

Theme entries: datatable,datatableActions,datatableApply,datatableCell,datatableClose,datatableDeleteActions,datatableDeleteDialog,datatableDialog,datatableFilterAnchor,datatableFilterCount,datatableFilters,datatableHeading,datatableIcon,datatableNumericInput,datatablePageControls,datatablePagination,datatableScroll,datatableSort,datatableSortIcon,datatableToolbar,datatableUnsortedIcon,datatableWarningIcon.

PropTypeDefaultDescription
children Snippet — Replaces the built-in toolbar, table, and pagination content.
class string — Local root class override.
columns (string | ColumnInput)[] — Explicit column list and order. Omit to infer columns from the first row. Supports dotted property paths.
element HTMLDivElement | null — Bindable native root HTMLDivElement.
filters Filter[] — Bindable filters combined with AND for local data.
getRowKey ({ index, row }: { index: number; row: Row }) => RowKey — Stable selection key; defaults to row.id, row._id, or the original input index.
inTransition TransitionProps — Overrides the enter transition.
isCreatable boolean — Enables the creatable feature.
isCustomizable boolean — Enables the customizable feature.
isDataControlled boolean — Skips local filtering, sorting, and slicing when the application supplies a page of rows.
isDeletable boolean — Enables the deletable feature.
isEditable boolean — Enables the editable feature.
isFilterable boolean — Enables the filterable feature.
isPaginatable boolean — Enables the paginatable feature.
isSortable boolean — Enables the sortable feature.
isVisible boolean — Bindable root visibility; hiding the component closes its dialogs.
oncreate (row: Row) => void | Promise<void> — Persists a new row. The component does not mutate the supplied rows.
ondelete (rows: Row[]) => void | Promise<void> — Persists deletion of the selected visible rows.
onfilter (filters: Filter[]) => void | Promise<void> — Receives filters when Apply is clicked.
onpaginate (pagination: Pagination) => void | Promise<void> — Receives page changes from buttons, the page selector, and page-size customization.
onsort (sort: Sort) => void | Promise<void> — Receives the updated sort state.
onupdate (args: { key: string; row: Row; value: any }) => void | Promise<void> — Persists an edited cell using its row, dotted key, and new value.
outTransition TransitionProps — Overrides the exit transition.
pagination Pagination — Bindable one-based page and positive rows-per-page configuration.
rows Row[] — Input records; defaults to an empty array.
sort Sort — Bindable sort state; direction is asc or desc.
table Snippet — Overrides the built-in table content with a snippet.
tbody Snippet — Overrides the built-in tbody content with a snippet.
td Snippet<[CellSnippetProps]> — Cell override receiving column, key, row, value, and update. Render a Td in the snippet.
th Snippet<[Column]> — Column-header override receiving the column. Render a Th in the snippet.
thead Snippet — Overrides the built-in thead content with a snippet.
theme Theme — Theme applied to the root and every built-in child component.
toolbar Snippet — Overrides the built-in toolbar content with a snippet.
totalRows number — Total remote result count. Supplying this value bypasses local page slicing.
transition TransitionProps — Root transition tuple; defaults to noopTransition.
variants string[] — Root theme variants.

Default usage

Import Datatable from sveltewind/components. This example shows its default styling in a usable context.
Page 1 of 2
+page.svelte 
Loading...

The preview supports creating, editing, and deleting local records. Application callbacks persist changes; the component never writes data to a server.

Explicit columns define the table order and work with an empty dataset. Without columns, fields are inferred from the first row. Provide a unique id or _id for each record, or supply getRowKey. Its index is the original input index before local filtering and sorting. Selection clears when the input rows reference changes and when the user changes sort, filters, or page.

Bind sort, filters, and pagination to observe their state. For remote data, set isDataControlled, supply totalRows and the current page of rows, and fetch data in the callbacks. Each feature can be disabled individually. isDeletable also controls row selection.

Column snippets and td receive column, key, row, value, and update; render a Td component in these snippets. Dotted keys are passed unchanged to onupdate, so the application can persist nested fields. table, tbody, thead, th, and toolbar provide additional rendering overrides.

Examples

Theme variants

Every variant available for Datatable in the built-in themes is shown below.

compact — Apply the compact variant.
Page 1 of 2
+page.svelte 
Loading...

spacious — Apply the spacious variant.
Page 1 of 2
+page.svelte 
Loading...

soft — Apply the soft variant.
Page 1 of 2
+page.svelte 
Loading...

Class overrides

Apply rounded-xl border border-primary-500/40 p-4 locally.
Page 1 of 2
+page.svelte 
Loading...

Props and behavior

Change isEditable, isDeletable, isCreatable while retaining the default component styling.
Page 1 of 2
+page.svelte 
Loading...

Content and values

Provide different text, child content, or definitions inside the required parent context.
Page 1 of 2
+page.svelte 
Loading...