# Tables

## Basic tables

A table is always wrapped in `<div class="table-responsive"> ... </div>` The table element must have the class `table`.

![Standard table.](/files/-LZoJfVY9g1HFpt46YAK)

```markup
<div class="table-responsive">
    <table class="table">
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td colspan="2">Footer</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Cell 1</td>
                <td>Cell 2</td>
            </tr>
        </tbody>
    </table>
</div>
```

## Table rows

You can enrich the table by adding additional classes.

![Decorated table rows.](/files/-LZoJfVdeSsNEN0hQTqI)

```markup
<div class="table-responsive">
    <table class="table table-hover">
            <thead>
                <tr>
                    <th>Column 1</th>
                    <th>Column 2</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <td colspan="2">Footer</td>
                </tr>
            </tfoot>
            <tbody>
                <tr class="active">
                    <td>Cell 1</td>
                    <td>Cell 2</td>
                </tr>
                <tr class="info">
                    <td>Cell 3</td>
                    <td>Cell 4</td>
                </tr>
                <tr class="warning">
                    <td>Cell 1</td>
                    <td>Cell 2</td>
                </tr>
                <tr class="danger">
                    <td>Cell 3</td>
                    <td>Cell 4</td>
                </tr>
                <tr class="success">
                    <td>Cell 1</td>
                    <td>Cell 2</td>
                </tr>
            </tbody>
    </table>
</div>
```

## Context menu

Each row can have a context menu.

![Table row with context menu open.](/files/-LZoJfVfwOjp4hitR-aA)

```markup
<div class="table-responsive">
    <table class="table">
            <tbody>
                <tr>
                    <td>Cell 1</td>
                    <td>Cell 2</td>
                    <td class="panel-table-button">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fas fa-ellipsis-h"></i></a>
                        <ul class="dropdown-menu dropdown-menu-right">
                            <li class="disabled"><a href="#" class="disabled"><i class="fas fa-arrow-right"></i> Go to</a></li>
                            <li><a href="#"><i class="fas fa-trash"></i> Delete</a></li>
                            <li class="dropdown-function">
                                <div class="dropdown-form">
                                    <label class="control-label">Betaler:</label>
                                    <div class="form-group input-icon-group">
                                        <div class="input-group">
                                            <input class="form-control input-sm">
                                            <a href="#" class="input-group-addon">
                                                <i class="fas fa-plus"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </td>
                </tr>
            </tbody>
    </table>
</div>
```

## Editible data

Edit data in table. For these text input fields to look right inside tables, you must apply some classes on the row and individual cells.

![Table row with editable data.](/files/-LZoJfVhR87JS-TBVMY4)

```markup
<div class="table-responsive">
    <table class="table">
        <tbody>
            <tr class="table-edit-mode">
                <td class="cell-edit-mode">
                    <div class="form-group">
                        <input type="text" value="Cell 1" class="form-control">
                    </div>
                </td>
                <td class="cell-edit-mode">
                    <div class="form-group">
                        <input type="text" value="Cell 2" class="form-control">
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
```

In case of checkboxes or radio buttons in tables, you do not need to apply cell-edit-mode.

```markup
<div class="table-responsive">
    <table class="table">
        <tbody>
            <tr class="table-edit-mode">
                <td>
                    <input type="checkbox">
                </td>
                <td class="cell-edit-mode">
                    <div class="form-group">
                        <input type="text" value="Cell 2" class="form-control">
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
```

## Expand rows

![Table row expanded.](/files/-LZoJfVjFMUDK6t5X1OL)

```markup
<div class="table-responsive">
    <table class="table">
        <colgroup>
            <col style="width: 1%;">
            <col style="width: auto;">
            <col style="width: 20%;">
        </colgroup>
        <tbody>
            <tr>
                <td>
                    <button class="btn-unstyled"><i class="fas fa-chevron-up"></i></button>
                </td>
                <td>Cell 1</td>
                <td>Cell 2</td>
            </tr>
            <tr class="table-row-expand">
                <td></td>
                <td colspan="2" class="no-padding">
                    <p class="mini-headline">Headline</p>
                    <div class="table-responsive">
                        <table class="table table-condensed">
                            <thead>
                                <tr>
                                    <th>Column 1</th>
                                    <th>Column 2</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Cell 1</td>
                                    <td>Cell 2</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://dev.xena.biz/xena-developer/user-interface/styleguide/tables.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.