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

# AwTable

**Category:** Organism | **Import:** Dynamic

The `AwTable` component is a flexible, responsive table system that supports column definitions, sorting, row interactions, and mobile-optimized layouts. It works with `AwTableCol` components to define columns and provides customizable rendering.

## Overview

`AwTable` provides a comprehensive table solution with:
- Column-based structure using `AwTableCol` components
- Responsive design with mobile-optimized layout
- Sortable columns (configurable)
- Row click and press event handling
- Horizontal scrolling support
- Customizable header, body, and footer
- Integration with orderable configuration

## Usage

### Basic Example

```markup
<AwTable :rows="tableData">
    <AwTableCol field="name" title="Name" />
    <AwTableCol field="email" title="Email" />
    <AwTableCol field="role" title="Role" />
</AwTable>
```

### With Custom Cell Rendering

```markup
<AwTable :rows="tableData">
    <AwTableCol field="name" title="Name" />
    <AwTableCol field="status" title="Status">
        <template #default="{ cell }">
            <AwBadge :text="cell.status" :color="cell.status === 'active' ? 'success' : 'error'" />
        </template>
    </AwTableCol>
</AwTable>
```

### With Sortable Columns

```markup
<AwTable :rows="tableData" :orderable="{ param: 'sort', ascTemplate: '%s', descTemplate: '%s_desc' }">
    <AwTableCol field="name" title="Name" orderable />
    <AwTableCol field="email" title="Email" orderable />
</AwTable>
```

### With Row Click Handler

```markup
<AwTable :rows="tableData" @row-click="handleRowClick">
    <AwTableCol field="name" title="Name" />
    <AwTableCol field="email" title="Email" />
</AwTable>
```

### Custom Header

```markup
<AwTable :rows="tableData">
    <template #thead="{ thead }">
        <AwTableHead :columns="thead" />
    </template>
    
    <AwTableCol field="name" title="Name" />
    <AwTableCol field="email" title="Email" />
</AwTable>
```

### Custom Row Rendering

```markup
<AwTable :rows="tableData">
    <template #tr="{ rows }">
        <AwTableRow 
            v-for="(row, index) in rows" 
            :key="row.id"
            :row-data="row"
            :row-index="index"
        />
    </template>
    
    <AwTableCol field="name" title="Name" />
</AwTable>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| rows | Array of row data objects | `Array` | `true` | - |
| verticalAlign | Vertical alignment: `'top'`, `'middle'`, or `'bottom'` | `String` | `false` | `'middle'` |
| orderable | Orderable config (merged with global config) | `Object` | `false` | `null` |
| breakpoint | Breakpoint for desktop layout | `String` | `false` | `'lg'` |

**Orderable Config:**
```javascript
{
  param: 'orderBy',        // GET parameter name
  ascTemplate: '%s',       // Ascending template (%s = column name)
  descTemplate: '%s_desc', // Descending template
  default: false            // Default sort column
}
```

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| default | Column definitions (use `AwTableCol` components) | - | - |
| thead | Custom table header | `{ thead }` | Default `AwTableHead` component |
| tr | Custom table row rendering | `{ rows }` | Default `AwTableRow` components |
| tfoot | Table footer | - | Empty |

### Events

| Name | Payload | Description |
|------|---------|-------------|
| row-click | `{ rowData, rowIndex, event }` | Emitted when row is clicked |
| row-press | `{ rowData, rowIndex, event }` | Emitted when row is long-pressed |
| head-click | `{ column, event }` | Emitted when column header is clicked (for sorting) |

### Config Options

The component uses default configuration from `@AwConfig`. You can override these defaults in your project's `awes.config.js`:

```javascript
export default {
  AwTable: {
    orderable: {
      param: 'orderBy',
      ascTemplate: '%s',
      descTemplate: '%s_desc',
      default: false
    }
  }
}
```

## Related Components

- `AwTableCol` - Column definition component
- `AwTableHead` - Table header component
- `AwTableRow` - Table row component
- `AwTableFoot` - Table footer component (optional)

## Notes

- **Import Method:** Dynamic - Component is loaded on-demand as an organism
- Table automatically extracts column definitions from `AwTableCol` components in default slot
- On mobile, table uses card-based layout instead of traditional table
- Horizontal scrolling is enabled for wide tables
- Row click events are handled with pointer events
- Sortable columns emit `head-click` events that can be handled for custom sorting
- Uses Hammer.js for touch gesture support (row press)
- Column props from `AwTableCol` are automatically extracted and merged
- Desktop layout shows at breakpoint (default: `lg`)
- Mobile layout shows cards with column titles as labels