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

# AwTableBuilder

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

The `AwTableBuilder` component is a comprehensive table solution that combines `AwTable` with data fetching, pagination, infinite scroll, empty states, and loading states. It works with vue-mc collections for data management.

## Overview

`AwTableBuilder` provides a complete table solution with:
- Automatic data fetching from collections
- Pagination support
- Infinite scroll support
- Empty state handling
- Loading state management
- Pull-to-refresh support
- Sortable columns
- Responsive design
- Custom list rendering

## Usage

### Basic Example

```markup
<AwTableBuilder :collection="usersCollection">
    <AwTableCol field="name" title="Name" />
    <AwTableCol field="email" title="Email" />
</AwTableBuilder>
```

### With Pagination

```markup
<AwTableBuilder
    :collection="usersCollection"
    :limits="[10, 25, 50, 100]"
    arrow-nav
>
    <AwTableCol field="name" title="Name" />
    <AwTableCol field="email" title="Email" />
</AwTableBuilder>
```

### With Infinite Scroll

```markup
<AwTableBuilder
    :collection="usersCollection"
    infinite-scroll
>
    <AwTableCol field="name" title="Name" />
    <AwTableCol field="email" title="Email" />
</AwTableBuilder>
```

### Custom List Rendering

```markup
<AwTableBuilder :collection="usersCollection">
    <template #list="{ item }">
        <AwCard>{{ item.name }}</AwCard>
    </template>
</AwTableBuilder>
```

### Custom Empty State

```markup
<AwTableBuilder :collection="usersCollection">
    <template #empty-container>
        <AwEmptyContainer
            icon="custom-icon"
            title="No data available"
            message="Try adding some items to get started."
        />
    </template>
    
    <AwTableCol field="name" title="Name" />
</AwTableBuilder>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| collection | vue-mc Collection instance | `Object` | `true` | - |
| pageParam | Query parameter name for page | `String` | `false` | `'page'` |
| limitParam | Query parameter name for limit | `String` | `false` | `'limit'` |
| limits | Available limit options | `Array` | `false` | `null` |
| scrollOnPage | Scroll to top on page change | `Boolean` | `false` | `false` |
| verticalAlign | Vertical alignment for cells | `String` | `false` | `''` |
| infiniteScroll | Enable infinite scroll | `Boolean` | `false` | `false` |
| mixed | Enable both pagination and infinite scroll | `Boolean` | `false` | `false` |
| defaultHeight | Default height for empty/loading blocks | `String` | `false` | `'50vh'` |
| arrowNav | Enable keyboard navigation (Ctrl+Arrow) | `Boolean` | `false` | `false` |
| orderable | Orderable configuration | `Object` | `false` | `null` |

**Orderable Config:**
```javascript
{
  param: 'order',        // Query parameter name
  ascValue: 'asc',       // Ascending value
  descValue: 'desc'      // Descending value
}
```

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| default | Table columns (`AwTableCol` components) | - | - |
| list | Custom list rendering (replaces table) | `{ item }` | - |
| thead | Custom table header | `{ thead }` | Default header |
| mobile-header | Mobile header content | `{ cell, index }` | - |
| mobile-header-content | Mobile header main content | `{ cell, index }` | - |
| mobile-header-button | Mobile header button | `{ cell, index }` | - |
| dropdown | Row dropdown menu | `{ cell }` | - |
| empty-container | Empty state (no data) | - | `AwEmptyContainer` with icon and title |
| empty-filter-container | Empty filtered state | - | `AwEmptyContainer` with icon and title |
| empty-loading-container | Loading state container | - | Empty card block |
| loading | Custom loading block | - | Default loading |
| before-refresh | Content before refresh wrapper | - | - |

### Events

| Name | Payload | Description |
|------|---------|-------------|
| `TABLE_HEAD_CLICK_EVENT` | `{ column, key }` | Emitted when table header is clicked |

### Mixins

- `WatchParams` - Watches route parameters and refetches data

## Related Components

- `AwTable` - Main table component
- `AwTableCol` - Column configuration component
- `AwPagination` - Pagination component (used internally)
- `AwRefreshWrapper` - Pull-to-refresh wrapper
- `AwEmptyContainer` - Empty state component (used for empty states)

## Notes

- **Import Method:** Dynamic - Component is loaded on-demand as an organism
- Requires vue-mc Collection instance for data management
- Collection must have `fetch()`, `fetchMore()`, and `loading` properties
- Empty state uses `AwEmptyContainer` component with default icon and messages
- Filtered empty state uses `AwEmptyContainer` component when filters return no results
- Loading state shows blur effect on table/list
- Infinite scroll loads more data on "Load more" button click
- Mixed mode shows both pagination and infinite scroll
- Component automatically syncs with route query parameters
- Pull-to-refresh is enabled by default
- Table columns are defined using `AwTableCol` in default slot
- Custom list rendering replaces table when `list` slot is used