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

# AwTableCol

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

The `AwTableCol` component is an internal table sub-component that defines a column configuration for `AwTable`. It specifies field mapping, alignment, ordering, and rendering for table columns.

## Overview

`AwTableCol` provides column configuration with:
- Field path mapping
- Column title
- Text and vertical alignment
- Orderable configuration
- Mobile visibility control
- Custom cell rendering

## Usage

This component is used inside `AwTable` to define columns:

```markup
<AwTable :rows="data">
    <AwTableCol field="name" title="Name" />
    <AwTableCol field="email" title="Email" text-align="center" />
    <AwTableCol field="status" title="Status" :orderable="true" />
</AwTable>
```

### With Custom Rendering

```markup
<AwTable :rows="data">
    <AwTableCol field="name" title="Name">
        <template #default="{ cell, index }">
            <AwBadge :text="cell" />
        </template>
    </AwTableCol>
</AwTable>
```

### With Nested Field

```markup
<AwTable :rows="data">
    <AwTableCol field="user.profile.name" title="User Name" />
</AwTable>
```

### Orderable Column

```markup
<AwTable :rows="data">
    <AwTableCol 
        field="created_at" 
        title="Date" 
        :orderable="{ param: 'order', ascValue: 'created_at_asc', descValue: 'created_at_desc' }"
    />
</AwTable>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| field | Path to property in row data (supports nested paths) | `String` | `false` | `null` |
| title | Column header title | `String` | `false` | `''` |
| textAlign | Text alignment: `'left'`, `'center'`, `'right'` | `String` | `false` | `''` |
| verticalAlign | Vertical alignment: `'top'`, `'middle'`, `'bottom'` | `String` | `false` | `''` (inherited) |
| orderable | Orderable configuration (object) or enable/disable (boolean) | `Boolean` / `Object` | `false` | `false` |
| hideMobile | Hide column on mobile view | `Boolean` | `false` | `false` |

**Orderable Object Format:**
```javascript
{
  param: 'order',           // Query parameter name
  ascValue: 'name_asc',     // Value for ascending order
  descValue: 'name_desc',    // Value for descending order
  default: 'asc'            // Default order (optional)
}
```

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| default | Custom cell content | `{ cell, index, rowData }` | Field value as text |

**Slot Props:**
- `cell` - Cell value (from field path)
- `index` - Row index
- `rowData` - Full row data object

### Events

This component does not emit events directly.

## Related Components

- `AwTable` - Main table component
- `AwTableHead` - Table header component
- `AwTableRow` - Table row component

## Notes

- **Import Method:** Dynamic - Component is loaded on-demand as an organism
- Component is internal (used within `AwTable`)
- Field path supports nested properties (e.g., `'user.profile.name'`)
- If field is not provided, entire row data is passed to slot
- Vertical align defaults to table's `verticalAlign` prop if not specified
- Orderable columns show sort indicators in header
- Mobile columns can be hidden for responsive design
- Component uses render function (stub implementation)
- Column configuration is collected by parent `AwTable` component