Table

Display tabular data with rich formatting and interaction options

TailwindCSS

A list of your recent hires.
Name	Role	Status	Actions
John Doe	Software Engineer	Active	Edit
Jane Smith	Designer	Active	Edit
Bob Johnson	Product Manager	Inactive	Edit
3 items	1 page	1-3 of 3	Next

package showcase

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

templ Table() {
	@table.Table() {
		@table.Caption() {
			A list of your recent hires.
		}
		@table.Header() {
			@table.Row() {
				@table.Head() {
					Name 
				}
				@table.Head() {
					Role 
				}
				@table.Head() {
					Status 
				}
				@table.Head() {
					Actions 
				}
			}
		}
		@table.Body() {
			@table.Row() {
				@table.Cell() {
					John Doe 
				}
				@table.Cell() {
					Software Engineer 
				}
				@table.Cell() {
					Active 
				}
				@table.Cell() {
					Edit 
				}
			}
			@table.Row() {
				@table.Cell() {
					Jane Smith 
				}
				@table.Cell() {
					Designer 
				}
				@table.Cell() {
					Active 
				}
				@table.Cell() {
					Edit 
				}
			}
			@table.Row() {
				@table.Cell() {
					Bob Johnson 
				}
				@table.Cell() {
					Product Manager 
				}
				@table.Cell() {
					Inactive 
				}
				@table.Cell() {
					Edit 
				}
			}
			@table.Footer() {
				@table.Row() {
					@table.Head() {
						3 items 
					}
					@table.Head() {
						1 page 
					}
					@table.Head() {
						1-3 of 3 
					}
					@table.Head() {
						Next 
					}
				}
			}
		}
	}
}

Installation

templui add table

Copy and paste the following code into your project:

package table

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

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

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

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

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

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

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

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

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

templ Table(props ...Props) {
	{{ var p Props }}
	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 Header(props ...HeaderProps) {
	{{ var p HeaderProps }}
	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 Body(props ...BodyProps) {
	{{ var p BodyProps }}
	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 Footer(props ...FooterProps) {
	{{ var p FooterProps }}
	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 Row(props ...RowProps) {
	{{ var p RowProps }}
	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 Head(props ...HeadProps) {
	{{ var p HeadProps }}
	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 Cell(props ...CellProps) {
	{{ var p CellProps }}
	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 Caption(props ...CaptionProps) {
	{{ var p CaptionProps }}
	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>
}

Update the import paths to match your project setup.

Getting Started

Components

Table

Installation