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

# AwTableRow

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

The `AwTableRow` component is an internal table sub-component that renders a table row (`<tr>`) with cells. It's a functional component used internally by `AwTable` to render each row of data.

## Overview

`AwTableRow` provides table row rendering with:
- Row data rendering
- Cell content from columns
- Mobile header support
- Row click handling
- Dropdown support
- Toggle support for expandable rows

## Usage

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

### Internal Usage

```markup
<AwTableRow
    :row-data="rowData"
    :row-index="index"
    :columns="columns"
    :has-row-click-listener="true"
    :is-desktop="isDesktop"
/>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| rowData | Row data object | `Object` | `false` | `{}` |
| rowIndex | Row index (0-based) | `Number` | `true` | - |
| columns | Array of column configurations | `Array` | `true` | - |
| hasRowClickListener | Row has click listener | `Boolean` | `false` | `false` |
| isDesktop | Desktop view mode | `Boolean` | `false` | `false` |
| mobileHeaderSlots | Mobile header slot data | `Object` | `false` | `{}` |
| dropdownSlot | Dropdown slot function | `Function` | `false` | `null` |

**Mobile Header Slots Object:**
```javascript
{
  default: Function,      // Default mobile header slot
  content: Function,     // Mobile header content slot
  button: Function       // Mobile header button slot
}
```

### Slots

This component does not have slots (functional component).

### Events

This component does not emit events directly (handled by parent).

## Related Components

- `AwTable` - Main table component
- `AwTableCell` - Table cell component
- `AwTableCellHeader` - Mobile header cell component
- `AwTableCellDropdown` - Dropdown cell component

## Notes

- **Import Method:** Dynamic - Component is loaded on-demand as an organism
- Component is functional (stateless) for optimal performance
- Component is internal (used within `AwTable`)
- Row data is extracted using field paths from columns
- Mobile view shows header cell when slots are provided
- Row click handling is enabled via `hasRowClickListener`
- Row index is stored in data attribute for click detection
- Desktop/mobile views render differently
- Dropdown slot is rendered in mobile header when provided
- Component uses `path` utility to extract nested field values
- Row classes: `aw-table__row`, `aw-table__row--mobile`, `aw-table__row--hoverable`