CSS Styling

Here is the list of predefined class that you can use to style vuetable.

• .vuetable
• .vuetable th.sortable
• .vuetable th.actions
• .vuetable-actions
• .vuetable-pagination
• .vuetable-pagination-info
• .vuetable-pagination-component

Basic HTML structure of vuetable

veutable uses HTML table and div tags in the template. CSS framework specific stylings (denoted inside {{ }} in the template below) can be passed in via component's props.

The default styling in those props are Semantic UI specific.

.sortable only appears if the field defines sortField option.

.vuetable-actions only appears for the special field __actions.

<div class="{{wrapperClass}}">
    <table class="vuetable {{tableClass}}">
        <thead>
            <tr>
                <th id="_{{field.name}}" class="{{field.titleClass}} sortable"></th>
                ...
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="{{field.dataClass}} vuetable-actions"></td>
                ...
            </tr>
        </tbody>
    </table>
    <div class="vuetable-pagination {{paginationClass}}">
        <div class="vuetable-pagination-info {{paginationInfoClass}}"></div>
        <div class="vuetable-pagination-component {{paginationComponentClass}}"></div>
    </div>
</div>

You can also do the styling for each column as vuetable also generate id for each column, where it begins with an underscore character (_), follows by the field name as defined. For example, you have defined the following fields:

    fields: [
        'name',
        'address',
        'phone',
        '__actions',
    ]

Then, the following column id will be generated.

    <th id="_name"></th>
    <th id="_address"></th>
    <th id="_phone"></th>
    <th id="__actions"></th>

Please note that, special field __actions will not have additional prefix of underscore.

So, you can do something like this

    // CSS
    .vuetable th#_name { width: 20%; }
    .vuetable th#_address { width: 50%; }
    .vuetable th#_phone { width: 20%; }
    .vuetable th#__actions { width: 10% }