Table

1export { default as Table } from "./table.svelte";2export { default as TableHeader } from "./table-header.svelte";3export { default as TableBody } from "./table-body.svelte";4export { default as TableFooter } from "./table-footer.svelte";5export { default as TableRow } from "./table-row.svelte";6export { default as TableHead } from "./table-head.svelte";7export { default as TableCell } from "./table-cell.svelte";8export { default as TableCaption } from "./table-caption.svelte";9

1<script lang="ts">
2  import { cn } from "@/lib/utils"
3  import { type PolymorphicProps, Sprawlify } from "@sprawlify/svelte";
4  import type { HTMLAttributes } from "svelte/elements"
5
6  interface Props extends HTMLAttributes<HTMLTableSectionElement>, PolymorphicProps<"tbody"> {}
7
8  let { class: className, children, ...props }: Props = $props()
9</script>
10
11<Sprawlify
12  as="tbody"
13  data-slot="table-body" 
14  class={cn("[&_tr:last-child]:border-0", className)} 
15  {...props}
16>
17  {@render children?.()}
18</Sprawlify>

1<script lang="ts">
2  import { cn } from "@/lib/utils"
3  import type { HTMLAttributes } from "svelte/elements"
4  import { type PolymorphicProps, Sprawlify } from "@sprawlify/svelte";
5
6  interface Props extends HTMLAttributes<HTMLElement>, PolymorphicProps<"caption"> {}
7
8  let { class: className, children, ...props }: Props = $props()
9</script>
10
11<Sprawlify
12  as="caption"
13  data-slot="table-caption"
14  class={cn("mt-4 text-sm text-muted-foreground", className)}
15  {...props}
16>
17  {@render children?.()}
18</Sprawlify>

1<script lang="ts">
2  import { cn } from "@/lib/utils"
3  import type { HTMLTdAttributes } from "svelte/elements";
4  import { Sprawlify, type PolymorphicProps } from "@sprawlify/svelte";
5
6  interface Props extends HTMLTdAttributes, PolymorphicProps<"td"> {}
7
8  let { class: className, children, ...props }: Props = $props()
9</script>
10
11<Sprawlify
12  as="td"
13  data-slot="table-cell" 
14  class={cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)} 
15  {...props}
16>
17  {@render children?.()}
18</Sprawlify>

1<script lang="ts">
2  import { cn } from "@/lib/utils"
3  import type { HTMLAttributes } from "svelte/elements"
4  import { type PolymorphicProps, Sprawlify } from "@sprawlify/svelte";
5
6  interface Props extends HTMLAttributes<HTMLTableSectionElement>, PolymorphicProps<"tfoot"> {}
7
8  let { class: className, children, ...props }: Props = $props()
9</script>
10
11<Sprawlify
12  as="tfoot"
13  data-slot="table-footer"
14  class={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
15  {...props}
16>
17  {@render children?.()}
18</Sprawlify>

1<script lang="ts">
2  import { cn } from "@/lib/utils"
3  import type { HTMLThAttributes } from "svelte/elements"
4  import { type PolymorphicProps, Sprawlify } from "@sprawlify/svelte";
5
6  interface Props extends HTMLThAttributes, PolymorphicProps<"th"> {}
7
8  let { class: className, children, ...props }: Props = $props()
9</script>
10
11<Sprawlify
12  as="th"
13  data-slot="table-head"
14  class={cn("h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0", className)}
15  {...props}
16>
17  {@render children?.()}
18</Sprawlify>

1<script lang="ts">
2  import { cn } from "@/lib/utils"
3  import type { HTMLAttributes } from "svelte/elements"
4  import { type PolymorphicProps, Sprawlify } from "@sprawlify/svelte";
5
6  interface Props extends HTMLAttributes<HTMLTableSectionElement>, PolymorphicProps<"thead"> {}
7
8  let { class: className, children, ...props }: Props = $props()
9</script>
10
11<Sprawlify
12  as="thead"
13  data-slot="table-header"
14  class={cn("[&_tr]:border-b", className)}
15  {...props}
16>
17  {@render children?.()}
18</Sprawlify>

1<script lang="ts">
2  import { cn } from "@/lib/utils"
3  import type { HTMLAttributes } from "svelte/elements"
4  import { type PolymorphicProps, Sprawlify } from "@sprawlify/svelte";
5
6  interface Props extends HTMLAttributes<HTMLTableRowElement>, PolymorphicProps<"tr"> {}
7
8  let { class: className, children, ...props }: Props = $props()
9</script>
10
11<Sprawlify
12  as="tr"
13  data-slot="table-row"
14  class={cn("border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted", className)} 
15  {...props}
16>
17  {@render children?.()}
18</Sprawlify>

1<script lang="ts">
2  import { cn } from "@/lib/utils"
3  import type { HTMLTableAttributes } from "svelte/elements"
4  import { type PolymorphicProps, Sprawlify } from "@sprawlify/svelte";
5
6  interface Props extends HTMLTableAttributes, PolymorphicProps<"table"> {}
7
8  let { class: className, children, ...props }: Props = $props()
9</script>
10
11<div data-slot="table-container" class="relative w-full overflow-x-auto">
12  <Sprawlify
13    as="table"
14    data-slot="table" 
15    class={cn("w-full caption-bottom text-sm", className)} 
16    {...props}
17  >
18    {@render children?.()}
19  </Sprawlify>
20</div>