Components
Td
A themed native table data cell.
Props
Native attributes and event handlers are forwarded to the underlying td element unless
handled by the component.
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | undefined | Content snippet rendered by the component. |
class | string | '' | Tailwind classes merged with the theme and variants. |
element | HTMLTableCellElement | null | null | Bindable reference to the underlying DOM element. |
inTransition | TransitionProps | undefined | Overrides the opening transition. |
isVisible | boolean | true | Bindable visibility state. |
outTransition | TransitionProps | undefined | Overrides the closing transition. |
theme | Theme | global theme | Optional local theme override. |
transition | TransitionProps | [noopTransition, {}] | A Svelte transition function and its options. |
variants | string[] | [] | Local variant names or theme references such as button.base. |
Default usage
Import Td from sveltewind/components. This example shows its default styling in a usable context.
| Name | Role |
|---|---|
| Ada | Developer |
+page.svelte
Loading...Use Td inside a complete table to preserve native table structure.
Examples
Theme variants
Every variant available for Td in the built-in themes is shown below.
compact — Apply the compact variant.
| Name | Role |
|---|---|
| Ada | Developer |
+page.svelte
Loading...soft — Apply the soft variant.
| Name | Role |
|---|---|
| Ada | Developer |
+page.svelte
Loading...accent — Apply the accent variant.
| Name | Role |
|---|---|
| Ada | Developer |
+page.svelte
Loading...Class overrides
Apply bg-primary-500/10 locally.
| Name | Role |
|---|---|
| Ada | Developer |
+page.svelte
Loading...Props and behavior
Change colspan while retaining the default component styling.
| Name | Role | ||
|---|---|---|---|
| Ada | Developer | ||
+page.svelte
Loading...Content and values
Provide different text, child content, or definitions inside the required parent context.
| Name | Role |
|---|---|
| Your project content | Developer |
+page.svelte
Loading...Custom classes
Use class to merge Tailwind utilities with the component theme.
| Name | Role |
|---|---|
| Ada | Developer |
+page.svelte
Loading...