Table

A responsive table component.

A list of your recent invoices.
Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00
INV004	Paid	Credit Card	$450.00
INV005	Paid	PayPal	$550.00
INV006	Pending	Bank Transfer	$200.00
INV007	Unpaid	Credit Card	$300.00
Total			$2,500.00

package examples import "github.com/axadrn/shadcn-templ/v2/components/table"

package examples import "github.com/axadrn/shadcn-templ/v2/components/table" type tableInvoice struct {	Invoice       string	PaymentStatus string	TotalAmount   string	PaymentMethod string} var tableInvoices = []tableInvoice{	{"INV001", "Paid", "$250.00", "Credit Card"},	{"INV002", "Pending", "$150.00", "PayPal"},	{"INV003", "Unpaid", "$350.00", "Bank Transfer"},	{"INV004", "Paid", "$450.00", "Credit Card"},	{"INV005", "Paid", "$550.00", "PayPal"},	{"INV006", "Pending", "$200.00", "Bank Transfer"},	{"INV007", "Unpaid", "$300.00", "Credit Card"},} templ TableDemo() {	@table.Table() {		@table.Caption() {			A list of your recent invoices.		}		@table.Header() {			@table.Row() {				@table.Head(table.HeadProps{Class: "w-[100px]"}) {					Invoice				}				@table.Head() {					Status				}				@table.Head() {					Method				}				@table.Head(table.HeadProps{Class: "text-right"}) {					Amount				}			}		}		@table.Body() {			for _, invoice := range tableInvoices {				@table.Row() {					@table.Cell(table.CellProps{Class: "font-medium"}) {						{ invoice.Invoice }					}					@table.Cell() {						{ invoice.PaymentStatus }					}					@table.Cell() {						{ invoice.PaymentMethod }					}					@table.Cell(table.CellProps{Class: "text-right"}) {						{ invoice.TotalAmount }					}				}			}		}		@table.Footer() {			@table.Row() {				@table.Cell(table.CellProps{Attributes: templ.Attributes{"colspan": "3"}}) {					Total				}				@table.Cell(table.CellProps{Class: "text-right"}) {					$2,500.00				}			}		}	}}

Installation

shadcn-templ add table

Copy and paste the following code into your project.

components/table/table.templ

package table import "github.com/axadrn/shadcn-templ/v2/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} 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 data-slot="table-container" class="cn-table-container">		<table			if p.ID != "" {				id={ p.ID }			}			data-slot="table"			class={ utils.CN("cn-table", 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 }		}		data-slot="table-header"		class={ utils.CN("cn-table-header", 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 }		}		data-slot="table-body"		class={ utils.CN("cn-table-body", 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 }		}		data-slot="table-footer"		class={ utils.CN("cn-table-footer", 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 }		}		data-slot="table-row"		class={ utils.CN("cn-table-row has-aria-expanded:bg-muted/50", p.Class) }		{ p.Attributes... }	>		{ children... }	</tr>} templ Head(props ...HeadProps) {	{{ var p HeadProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	// cn-table-head-aria adds the checkbox padding for our	// data-slot=checkbox markup (our checkbox has no role attribute).	<th		if p.ID != "" {			id={ p.ID }		}		data-slot="table-head"		class={ utils.CN("cn-table-head cn-table-head-aria", p.Class) }		{ p.Attributes... }	>		{ children... }	</th>} templ Cell(props ...CellProps) {	{{ var p CellProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	// cn-table-cell-aria adds the checkbox padding for our	// data-slot=checkbox markup (our checkbox has no role attribute).	<td		if p.ID != "" {			id={ p.ID }		}		data-slot="table-cell"		class={ utils.CN("cn-table-cell cn-table-cell-aria", 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 }		}		data-slot="table-caption"		class={ utils.CN("cn-table-caption", p.Class) }		{ p.Attributes... }	>		{ children... }	</caption>}

Update the import paths to match your project setup.

Usage

import "github.com/axadrn/shadcn-templ/v2/components/table"

@table.Table() {	@table.Caption() {		A list of your recent invoices.	}	@table.Header() {		@table.Row() {			@table.Head(table.HeadProps{Class: "w-[100px]"}) {				Invoice			}			@table.Head() {				Status			}			@table.Head() {				Method			}			@table.Head(table.HeadProps{Class: "text-right"}) {				Amount			}		}	}	@table.Body() {		@table.Row() {			@table.Cell(table.CellProps{Class: "font-medium"}) {				INV001			}			@table.Cell() {				Paid			}			@table.Cell() {				Credit Card			}			@table.Cell(table.CellProps{Class: "text-right"}) {				$250.00			}		}	}}

Composition

Use the following composition to build a Table:

table.Table├── table.Caption├── table.Header│   └── table.Row│       ├── table.Head│       ├── table.Head│       ├── table.Head│       └── table.Head├── table.Body│   ├── table.Row│   │   ├── table.Cell│   │   ├── table.Cell│   │   ├── table.Cell│   │   └── table.Cell│   └── table.Row│       ├── table.Cell│       ├── table.Cell│       ├── table.Cell│       └── table.Cell└── table.Footer

Use the table.Footer component to add a footer to the table.

A list of your recent invoices.
Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00
Total			$2,500.00

package examples import "github.com/axadrn/shadcn-templ/v2/components/table"

package examples import "github.com/axadrn/shadcn-templ/v2/components/table" templ TableFooterExample() {	@table.Table() {		@table.Caption() {			A list of your recent invoices.		}		@table.Header() {			@table.Row() {				@table.Head(table.HeadProps{Class: "w-[100px]"}) {					Invoice				}				@table.Head() {					Status				}				@table.Head() {					Method				}				@table.Head(table.HeadProps{Class: "text-right"}) {					Amount				}			}		}		@table.Body() {			for _, invoice := range tableInvoices[:3] {				@table.Row() {					@table.Cell(table.CellProps{Class: "font-medium"}) {						{ invoice.Invoice }					}					@table.Cell() {						{ invoice.PaymentStatus }					}					@table.Cell() {						{ invoice.PaymentMethod }					}					@table.Cell(table.CellProps{Class: "text-right"}) {						{ invoice.TotalAmount }					}				}			}		}		@table.Footer() {			@table.Row() {				@table.Cell(table.CellProps{Attributes: templ.Attributes{"colspan": "3"}}) {					Total				}				@table.Cell(table.CellProps{Class: "text-right"}) {					$2,500.00				}			}		}	}}

Actions

A table showing actions for each row using a DropdownMenu component.

Product	Price	Actions
Wireless Mouse	$29.99
Mechanical Keyboard	$129.99
USB-C Hub	$49.99

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/button"	"github.com/axadrn/shadcn-templ/v2/components/dropdownmenu"	"github.com/axadrn/shadcn-templ/v2/components/icon"	"github.com/axadrn/shadcn-templ/v2/components/table") type tableActionProduct struct {	Name  string	Price string} var tableActionProducts = []tableActionProduct{	{"Wireless Mouse", "$29.99"},	{"Mechanical Keyboard", "$129.99"},	{"USB-C Hub", "$49.99"},} templ TableActions() {	@table.Table() {		@table.Header() {			@table.Row() {				@table.Head() {					Product				}				@table.Head() {					Price				}				@table.Head(table.HeadProps{Class: "text-right"}) {					Actions				}			}		}		@table.Body() {			for _, product := range tableActionProducts {				@table.Row() {					@table.Cell(table.CellProps{Class: "font-medium"}) {						{ product.Name }					}					@table.Cell() {						{ product.Price }					}					@table.Cell(table.CellProps{Class: "text-right"}) {						@dropdownmenu.DropdownMenu() {							@button.Button(button.Props{								Variant:    button.VariantGhost,								Size:       button.SizeIcon,								Class:      "size-8",								Attributes: dropdownmenu.Trigger(ctx),							}) {								@icon.Ellipsis()								<span class="sr-only">Open menu</span>							}							@dropdownmenu.Content(dropdownmenu.ContentProps{Align: dropdownmenu.AlignEnd}) {								@dropdownmenu.Item() {									Edit								}								@dropdownmenu.Item() {									Duplicate								}								@dropdownmenu.Separator()								@dropdownmenu.Item(dropdownmenu.ItemProps{Variant: dropdownmenu.ItemVariantDestructive}) {									Delete								}							}						}					}				}			}		}	}}

API Reference

Table

The table.Table component renders a native table inside a scrollable container.

Prop	Type	Default
`Class`	`string`	-

TableHeader, TableBody, TableFooter

The table.Header, table.Body and table.Footer components render the table sections.

Prop	Type	Default
`Class`	`string`	-

TableRow, TableHead, TableCell, TableCaption

The table.Row, table.Head, table.Cell and table.Caption components render rows, header cells, data cells and the caption.

Prop	Type	Default
`Class`	`string`	-

Switch Tabs

On This Page

Installation Usage Composition Footer Actions API Reference Table TableHeader, TableBody, TableFooter TableRow, TableHead, TableCell, TableCaption

Ship your shadcn-templ app with goilerplate

The Go + templ SaaS boilerplate. Auth, payments, UI. Done.

Now $99 instead of $199.