# Table
## Examples
### Default
```html
| Name | Email | Role |
| John Doe | john@example.com | Admin |
| Jane Roe | jane@example.com | Editor |
| Total: 2 |
```
### WithHeaderAndActions
```html
| Name | Email | Role | Actions |
| John Doe | john@example.com | Admin |
|
| Jane Roe | jane@example.com | Editor |
|
```
### WithCheckboxes
```html
| Name | Email | Role | Actions |
| John Doe | john@example.com | Admin | Edit | Delete |
| Jane Roe | jane@example.com | Editor | Edit | Delete |
```
### CellAlignments
```html
| Left Aligned |
Center Aligned |
Right Aligned |
Default (Left) |
| Left aligned text |
Centered text |
Right aligned text |
Default alignment |
| Another left |
Another center |
Another right |
Another default |
| Numbers: 123 |
Numbers: 456 |
Numbers: 789 |
Numbers: 000 |
```
### MixedAlignments
```html
| Product |
Status |
Price |
Quantity |
Total |
| Premium Widget |
In Stock |
$29.99 |
5 |
$149.95 |
| Basic Widget |
Low Stock |
$19.99 |
2 |
$39.98 |
| Deluxe Widget |
Out of Stock |
$49.99 |
0 |
$0.00 |
| Grand Total: |
7 |
$189.93 |
```
### Sortable
```html
| Name |
Email |
Role |
Join Date |
| Alice Johnson | alice@example.com | User | 2023-01-15 |
| Bob Smith | bob@example.com | User | 2023-02-20 |
| John Doe | john@example.com | Admin | 2022-12-01 |
| Jane Roe | jane@example.com | Editor | 2023-03-10 |
```
### SortableWithMixedColumns
```html
| ID |
Name |
Email |
Status |
Score |
| 1 | Alice Johnson | alice@example.com | Active | 95 |
| 2 | Bob Smith | bob@example.com | Pending | 87 |
| 3 | John Doe | john@example.com | Active | 92 |
| 4 | Jane Roe | jane@example.com | Inactive | 78 |
```
### SortableWithEventListener
```html
{
const handleSort = (event: CustomEvent) => {
console.log('Sort event received:', event.detail);
// Here you would implement your actual sorting logic
// The component only dispatches the event - you need to sort your data
};
return html`
| Name |
Email |
Role |
| Alice Johnson | alice@example.com | User |
| Bob Smith | bob@example.com | User |
| John Doe | john@example.com | Admin |
| Jane Roe | jane@example.com | Editor |
`;
}
```
### SortableWithAccessibility
```html
Accessibility Features:
- Keyboard navigation: Tab to headers, Enter/Space to sort
- Screen reader support: ARIA labels and sort states
- Visual indicators: Sort icons and hover states
- Focus management: Clear focus indicators
| Product Name |
Price |
Stock |
Category |
| Premium Widget | $29.99 | 15 | Electronics |
| Basic Widget | $19.99 | 8 | Electronics |
| Deluxe Widget | $49.99 | 3 | Premium |
| Standard Widget | $24.99 | 12 | Standard |
```
### WithCaption
```html
User Management
| Name | Email | Role |
| John Doe | john@example.com | Admin |
| Jane Roe | jane@example.com | Editor |
```
### WithCaptionAndButton
```html
User Management
Add User
| Name | Email | Role | Actions |
| John Doe | john@example.com | Admin |
|
| Jane Roe | jane@example.com | Editor |
|
```