Table

package showcase

import "github.com/axzilla/templui/components"

templ Table() {
	@components.Table() {
		@components.TableCaption() {
			A list of your recent hires.
		}
		@components.TableHeader() {
			@components.TableRow() {
				@components.TableHead() {
					Name 
				}
				@components.TableHead() {
					Role 
				}
				@components.TableHead() {
					Status 
				}
				@components.TableHead() {
					Actions 
				}
			}
		}
		@components.TableBody() {
			@components.TableRow() {
				@components.TableCell() {
					John Doe 
				}
				@components.TableCell() {
					Software Engineer 
				}
				@components.TableCell() {
					Active 
				}
				@components.TableCell() {
					Edit 
				}
			}
			@components.TableRow() {
				@components.TableCell() {
					Jane Smith 
				}
				@components.TableCell() {
					Designer 
				}
				@components.TableCell() {
					Active 
				}
				@components.TableCell() {
					Edit 
				}
			}
			@components.TableRow() {
				@components.TableCell() {
					Bob Johnson 
				}
				@components.TableCell() {
					Product Manager 
				}
				@components.TableCell() {
					Inactive 
				}
				@components.TableCell() {
					Edit 
				}
			}
			@components.TableFooter() {
				@components.TableRow() {
					@components.TableHead() {
						3 items 
					}
					@components.TableHead() {
						1 page 
					}
					@components.TableHead() {
						1-3 of 3 
					}
					@components.TableHead() {
						Next 
					}
				}
			}
		}
	}
}

package components

import "github.com/axzilla/templui/utils"

type TableProps struct {
	ID         string
	Class      string
	Attributes templ.Attributes
}

type TableHeaderProps struct {
	ID         string
	Class      string
	Attributes templ.Attributes
}

type TableBodyProps struct {
	ID         string
	Class      string
	Attributes templ.Attributes
}

type TableFooterProps struct {
	ID         string
	Class      string
	Attributes templ.Attributes
}

type TableRowProps struct {
	ID         string
	Class      string
	Attributes templ.Attributes
	Selected   bool
}

type TableHeadProps struct {
	ID         string
	Class      string
	Attributes templ.Attributes
}

type TableCellProps struct {
	ID         string
	Class      string
	Attributes templ.Attributes
}

type TableCaptionProps struct {
	ID         string
	Class      string
	Attributes templ.Attributes
}

templ Table(props ...TableProps) {
	{{ var p TableProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<div class="relative w-full overflow-auto">
		<table
			if p.ID != "" {
				id={ p.ID }
			}
			class={ utils.TwMerge("w-full caption-bottom text-sm", p.Class) }
			{ p.Attributes... }
		>
			{ children... }
		</table>
	</div>
}

templ TableHeader(props ...TableHeaderProps) {
	{{ var p TableHeaderProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<thead
		if p.ID != "" {
			id={ p.ID }
		}
		class={ utils.TwMerge("[&_tr]:border-b", p.Class) }
		{ p.Attributes... }
	>
		{ children... }
	</thead>
}

templ TableBody(props ...TableBodyProps) {
	{{ var p TableBodyProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<tbody
		if p.ID != "" {
			id={ p.ID }
		}
		class={ utils.TwMerge("[&_tr:last-child]:border-0", p.Class) }
		{ p.Attributes... }
	>
		{ children... }
	</tbody>
}

templ TableFooter(props ...TableFooterProps) {
	{{ var p TableFooterProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<tfoot
		if p.ID != "" {
			id={ p.ID }
		}
		class={ utils.TwMerge("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", p.Class) }
		{ p.Attributes... }
	>
		{ children... }
	</tfoot>
}

templ TableRow(props ...TableRowProps) {
	{{ var p TableRowProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<tr
		if p.ID != "" {
			id={ p.ID }
		}
		class={
			utils.TwMerge(
				"border-b transition-colors hover:bg-muted/50",
				utils.If(p.Selected, "data-[state=selected]:bg-muted"),
				p.Class,
			),
		}
		{ p.Attributes... }
	>
		{ children... }
	</tr>
}

templ TableHead(props ...TableHeadProps) {
	{{ var p TableHeadProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<th
		if p.ID != "" {
			id={ p.ID }
		}
		class={
			utils.TwMerge(
				"h-10 px-2 text-left align-middle font-medium text-muted-foreground",
				"[&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
				p.Class,
			),
		}
		{ p.Attributes... }
	>
		{ children... }
	</th>
}

templ TableCell(props ...TableCellProps) {
	{{ var p TableCellProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<td
		if p.ID != "" {
			id={ p.ID }
		}
		class={
			utils.TwMerge(
				"p-2 align-middle",
				"[&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
				p.Class,
			),
		}
		{ p.Attributes... }
	>
		{ children... }
	</td>
}

templ TableCaption(props ...TableCaptionProps) {
	{{ var p TableCaptionProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<caption
		if p.ID != "" {
			id={ p.ID }
		}
		class={ utils.TwMerge("mt-4 text-sm text-muted-foreground", p.Class) }
		{ p.Attributes... }
	>
		{ children... }
	</caption>
}