Table

Display tabular data with rich formatting and interaction options

Source Tailwind CSS

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/templui/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

API Reference

Required parameter

Hover for description

Table

Main table container component for displaying tabular data.

Name	Type	Default
`ID` Unique identifier for the table element.	`string`	-
`Class` Additional CSS classes to apply to the table.	`string`	-
`Attributes` Additional HTML attributes to apply to the table element.	`templ.Attributes`	-

Header

Table header container for column headers.

Name	Type	Default
`ID` Unique identifier for the header element.	`string`	-
`Class` Additional CSS classes to apply to the header.	`string`	-
`Attributes` Additional HTML attributes to apply to the header element.	`templ.Attributes`	-

Body

Table body container for table rows and data.

Name	Type	Default
`ID` Unique identifier for the body element.	`string`	-
`Class` Additional CSS classes to apply to the body.	`string`	-
`Attributes` Additional HTML attributes to apply to the body element.	`templ.Attributes`	-

Footer

Table footer container for summary or additional information.

Name	Type	Default
`ID` Unique identifier for the footer element.	`string`	-
`Class` Additional CSS classes to apply to the footer.	`string`	-
`Attributes` Additional HTML attributes to apply to the footer element.	`templ.Attributes`	-

Row

Table row component for containing table cells.

Name	Type	Default
`ID` Unique identifier for the row element.	`string`	-
`Class` Additional CSS classes to apply to the row.	`string`	-
`Attributes` Additional HTML attributes to apply to the row element.	`templ.Attributes`	-
`Selected` Whether the row is selected (adds selected styling).	`bool`	`false`

Head

Table header cell component for column headers.

Name	Type	Default
`ID` Unique identifier for the header cell element.	`string`	-
`Class` Additional CSS classes to apply to the header cell.	`string`	-
`Attributes` Additional HTML attributes to apply to the header cell element.	`templ.Attributes`	-

Cell

Table data cell component for displaying content.

Name	Type	Default
`ID` Unique identifier for the cell element.	`string`	-
`Class` Additional CSS classes to apply to the cell.	`string`	-
`Attributes` Additional HTML attributes to apply to the cell element.	`templ.Attributes`	-

Caption

Table caption component for describing the table content.

Name	Type	Default
`ID` Unique identifier for the caption element.	`string`	-
`Class` Additional CSS classes to apply to the caption.	`string`	-
`Attributes` Additional HTML attributes to apply to the caption element.	`templ.Attributes`	-

Menu

Getting Started

Components

Table

Installation

API Reference

Table

Header

Body

Footer

Row

Head

Cell

Caption