---
title: Table
description: A responsive table component.
---

```templ
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

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
shadcn-templ add table
```

</TabsContent>

<TabsContent value="manual">

<Steps className="mb-0 pt-2">

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="table" title="components/table/table.templ" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

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

```templ showLineNumbers
@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`:

```text
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
```

## Footer

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

```templ
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.

```templ
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` | -       |