---
metaTitle: TableHead component | AwesCode UI
meta:
  - name: description
    content: The <AwTableHead /> component is used to render TableHead - UI Vue component for AwesCode UI.
title: TableHead
---

# AwTableHead

**Category:** Organism (Internal) | **Import:** Dynamic

The `AwTableHead` component is an internal table sub-component that renders the table header (`<thead>`) with column titles and sorting indicators. It's used internally by `AwTable`.

## Overview

`AwTableHead` provides table header rendering with:
- Column title display
- Sort order indicators
- Clickable sortable columns
- Custom header cell rendering
- Route query integration for sorting

## Usage

This component is used internally by `AwTable`. Direct usage is not recommended unless building custom table components.

### Internal Usage

```markup
<AwTableHead
    :columns="columns"
    @click="handleHeaderClick"
/>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| columns | Array of column configuration objects | `Array` | `false` | `[]` |

**Column Object Format:**
```javascript
{
  text: 'Column Title',      // Required: header text
  align: 'text-center',      // Optional: text alignment class
  orderable: {               // Optional: orderable config
    param: 'order',
    ascValue: 'name_asc',
    descValue: 'name_desc',
    default: 'asc'
  }
}
```

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| th | Custom header cell rendering | `{ column, key }` | Default column title with sort indicators |

### Events

| Name | Payload | Description |
|------|---------|-------------|
| click | `{ column, key }` | Emitted when header cell is clicked (if listener exists) |

### Config Options

The component validates column schema using `validateBySchema` utility.

## Related Components

- `AwTable` - Main table component
- `AwTableCol` - Column configuration component
- `AwTableRow` - Table row component

## Notes

- **Import Method:** Dynamic - Component is loaded on-demand as an organism
- Component is internal (used within `AwTable`)
- Only renders if `columns.length > 0`
- Sort indicators show based on route query parameters
- Ascending/descending indicators use CSS classes
- Default sort is applied when no query parameter is present
- Click handler only fires if listener is provided
- Column alignment classes are applied to header cells
- Component checks route query for current sort state
- Sort indicators: `aw-table__col--asc`, `aw-table__col--desc`