Table

The Table component uses HTML's native table element. It allows tabular data to be displayed in a responsive way with special case cells.

Examples

Base

Each row is represented as an object in an array passed to the data prop.

Show code

HTML

<section>
    <o-table :data="data">
        <o-table-column field="id" label="Id" width="40" numeric sortable />
        <o-table-column field="first_name" label="First Name" sortable />
        <o-table-column field="last_name" label="Last Name" sortable />
        <o-table-column
            field="date"
            label="Date"
            position="centered"
            sortable />
        <o-table-column field="gender" label="Gender" sortable />
    </o-table>
</section>

JS

import { ref } from "vue";

const data = ref([
    {
        id: 1,
        first_name: "Jesse",
        last_name: "Simmons",
        date: "2016-10-15 13:43:27",
        gender: "Male",
    },
    {
        id: 2,
        first_name: "John",
        last_name: "Jacobs",
        date: "2016-12-15 06:00:53",
        gender: "Male",
    },
    {
        id: 3,
        first_name: "Tina",
        last_name: "Gilbert",
        date: "2016-04-26 06:26:28",
        gender: "Female",
    },
    {
        id: 4,
        first_name: "Clarence",
        last_name: "Flores",
        date: "2016-04-10 10:28:46",
        gender: "Male",
    },
    {
        id: 5,
        first_name: "Anne",
        last_name: "Lee",
        date: "2016-12-06 14:38:38",
        gender: "Female",
    },
]);

Customise

Define the table in the way that you need it to be.

Show code

HTML

<section>
    <o-field grouped multiline>
        <o-switch v-model="isBordered" label="Bordered" />
        <o-switch v-model="isStriped" label="Striped" />
        <o-switch v-model="isNarrowed" label="Narrowed" />
        <o-switch v-model="isHoverable" label="Hoverable" />
        <o-switch v-model="isSelectable" label="Selectable" />
        <o-switch v-model="isCheckbale" label="Checkable" />
        <o-switch v-model="isLoading" label="Loading state" />
        <o-switch v-model="isEmpty" label="Empty" />
        <o-switch v-model="hasMobileCards">
            Mobile cards
            <small>(collapsed rows) </small>
        </o-switch>
    </o-field>

    <o-table
        :data="isEmpty ? [] : data"
        :bordered="isBordered"
        :striped="isStriped"
        :narrowed="isNarrowed"
        :hoverable="isHoverable"
        :checkable="isCheckbale"
        :loading="isLoading"
        :selectable="isSelectable"
        :mobile-cards="hasMobileCards"
        empty-label="Table is empty"
        empty-icon="frown">
        <o-table-column
            v-slot="{ row }"
            field="id"
            label="ID"
            width="40"
            numeric
            sortable>
            {{ row.id }}
        </o-table-column>

        <o-table-column
            v-slot="{ row }"
            field="first_name"
            label="First Name"
            sortable>
            {{ row.first_name }}
        </o-table-column>

        <o-table-column
            v-slot="{ row }"
            field="last_name"
            label="Last Name"
            sortable>
            {{ row.last_name }}
        </o-table-column>

        <o-table-column
            v-slot="{ row }"
            field="date"
            label="Date"
            position="centered"
            sortable>
            {{ new Date(row.date).toLocaleDateString() }}
        </o-table-column>

        <o-table-column v-slot="{ row }" label="Gender" sortable>
            <o-icon
                pack="fas"
                :icon="row.gender === 'Male' ? 'mars' : 'venus'" />
            {{ row.gender }}
        </o-table-column>

        <template #footer>
            <td colspan="5">Custom Footer</td>
        </template>
    </o-table>
</section>

JS

import { ref } from "vue";

const data = ref([
    {
        id: 1,
        first_name: "Jesse",
        last_name: "Simmons",
        date: "2016/10/15 13:43:27",
        gender: "Male",
    },
    {
        id: 2,
        first_name: "John",
        last_name: "Jacobs",
        date: "2016/12/15 06:00:53",
        gender: "Male",
    },
    {
        id: 3,
        first_name: "Tina",
        last_name: "Gilbert",
        date: "2016/04/26 06:26:28",
        gender: "Female",
    },
    {
        id: 4,
        first_name: "Clarence",
        last_name: "Flores",
        date: "2016/04/10 10:28:46",
        gender: "Male",
    },
    {
        id: 5,
        first_name: "Anne",
        last_name: "Lee",
        date: "2016/12/06 14:38:38",
        gender: "Female",
    },
]);

const isEmpty = ref(false);
const isBordered = ref(false);
const isStriped = ref(false);
const isNarrowed = ref(false);
const isHoverable = ref(false);
const isSelectable = ref(false);
const isCheckbale = ref(false);
const isLoading = ref(false);
const hasMobileCards = ref(true);

Columns

Columns can either be defined by adding <o-table-column> components to the default slot, or by adding an array to the columns prop, where each object defines a column. It is possible to mix both approaches by adding a columns prop as well as passing <o-table-column> components in the before or after slots.

Show code

HTML

<section>
    <o-table :data="data" :columns="columns" />
</section>

JS

import { ref } from "vue";
import type { TableColumn } from "@oruga-ui/oruga-next";

const data = ref([
    {
        id: 1,
        first_name: "Jesse",
        last_name: "Simmons",
        date: "2016-10-15 13:43:27",
        gender: "Male",
    },
    {
        id: 2,
        first_name: "John",
        last_name: "Jacobs",
        date: "2016-12-15 06:00:53",
        gender: "Male",
    },
    {
        id: 3,
        first_name: "Tina",
        last_name: "Gilbert",
        date: "2016-04-26 06:26:28",
        gender: "Female",
    },
    {
        id: 4,
        first_name: "Clarence",
        last_name: "Flores",
        date: "2016-04-10 10:28:46",
        gender: "Male",
    },
    {
        id: 5,
        first_name: "Anne",
        last_name: "Lee",
        date: "2016-12-06 14:38:38",
        gender: "Female",
    },
]);

const columns = ref<TableColumn<(typeof data.value)[number]>[]>([
    {
        field: "id",
        label: "ID",
        width: "40",
        numeric: true,
        sortable: true,
    },
    {
        field: "first_name",
        label: "First Name",
        sortable: true,
    },
    {
        field: "last_name",
        label: "Last Name",
        sortable: true,
    },
    {
        field: "date",
        label: "Date",
        position: "centered",
        sortable: true,
        formatter: (v): string => new Date(String(v)).toLocaleDateString(),
    },
    {
        field: "gender",
        label: "Gender",
        sortable: true,
    },
]);

Selection

When the selectable prop is set, the selected prop represents the currently selected element. The prop is two-way bindable.Consider defining whether a row is selectable with a function given by the is-row-selectable prop.

Show code

HTML

<section>
    <o-button
        variant="danger"
        :disabled="!selected"
        icon-left="times"
        label="Clear selected"
        @click="selected = undefined" />

    <p><b>Selection:</b> {{ selected }}</p>

    <o-table
        v-model:selected="selected"
        :data="data"
        :columns="columns"
        selectable />
</section>

JS

import { ref } from "vue";
import type { TableColumn } from "@oruga-ui/oruga-next";

const data = [
    {
        id: 1,
        first_name: "Jesse",
        last_name: "Simmons",
        date: "2016-10-15 13:43:27",
        gender: "Male",
    },
    {
        id: 2,
        first_name: "John",
        last_name: "Jacobs",
        date: "2016-12-15 06:00:53",
        gender: "Male",
    },
    {
        id: 3,
        first_name: "Tina",
        last_name: "Gilbert",
        date: "2016-04-26 06:26:28",
        gender: "Female",
    },
    {
        id: 4,
        first_name: "Clarence",
        last_name: "Flores",
        date: "2016-04-10 10:28:46",
        gender: "Male",
    },
    {
        id: 5,
        first_name: "Anne",
        last_name: "Lee",
        date: "2016-12-06 14:38:38",
        gender: "Female",
    },
];

const columns: TableColumn<(typeof data)[number]>[] = [
    {
        field: "id",
        label: "ID",
        width: "40",
        numeric: true,
    },
    {
        field: "first_name",
        label: "First Name",
    },
    {
        field: "last_name",
        label: "Last Name",
    },
    {
        field: "date",
        label: "Date",
        position: "centered",
        formatter: (v): string => new Date(String(v)).toLocaleDateString(),
    },
    {
        field: "gender",
        label: "Gender",
    },
];

const selected = ref<(typeof data)[number] | undefined>(data[2]);

Checkable

When the checkable prop is set, each row will have a checkbox. The checkbox position can be changed from left to right using the checkbox-position prop. The checked rows are combined in the checked-rows prop, which is two-way bindable. Consider defining whether a row is checkable with a function given by the is-row-checkable prop.

Show code

HTML

<section>
    <o-field grouped multiline>
        <o-button
            variant="danger"
            :disabled="!checkedRows.length"
            icon-left="times"
            label="Clear checked"
            @click="checkedRows = []" />
        <o-select v-model="checkboxPosition" aria-label="Checkbox position">
            <option value="left">Checkbox at left</option>
            <option value="right">Checkbox at right</option>
        </o-select>
    </o-field>

    <o-table
        v-model:checked-rows="checkedRows"
        :data="data"
        :columns="columns"
        checkable
        row-key="id"
        :is-row-checkable="(row) => row.id !== 3 && row.id !== 4"
        :checkbox-position="checkboxPosition">
        <template #bottom-left>
            <b>Total checked</b>: {{ checkedRows.length }}
        </template>
    </o-table>
</section>

JS

import { ref } from "vue";
import type { TableColumn } from "@oruga-ui/oruga-next";

const data = [
    {
        id: 1,
        first_name: "Jesse",
        last_name: "Simmons",
        date: "2016-10-15 13:43:27",
        gender: "Male",
    },
    {
        id: 2,
        first_name: "John",
        last_name: "Jacobs",
        date: "2016-12-15 06:00:53",
        gender: "Male",
    },
    {
        id: 3,
        first_name: "Tina",
        last_name: "Gilbert",
        date: "2016-04-26 06:26:28",
        gender: "Female",
    },
    {
        id: 4,
        first_name: "Clarence",
        last_name: "Flores",
        date: "2016-04-10 10:28:46",
        gender: "Male",
    },
    {
        id: 5,
        first_name: "Anne",
        last_name: "Lee",
        date: "2016-12-06 14:38:38",
        gender: "Female",
    },
];

const columns: TableColumn<(typeof data)[number]>[] = [
    {
        field: "id",
        label: "ID",
        width: "40",
        numeric: true,
    },
    {
        field: "first_name",
        label: "First Name",
    },
    {
        field: "last_name",
        label: "Last Name",
    },
    {
        field: "date",
        label: "Date",
        position: "centered",
    },
    {
        field: "gender",
        label: "Gender",
    },
];

const checkboxPosition = ref<"left" | "right">("left");
const checkedRows = ref([data[1], data[3]]);

Detailed

Each row can have a collapse section by adding the detailed prop. The rows with an open detail section are combined in the detailed-rows prop, which is two-way bindable. By default, the detail is displayed as another tr, but adding custom-detail-row removes the tr wrapper from the provided detail slot. Consider defining whether a row can have a detail section with a function given by the is-detailed-visibile prop.

Show code

HTML

<section>
    <o-field grouped multiline>
        <o-switch v-model="showDetailIcon" label="Show detail chevron" />
        <o-switch
            v-model="showCustomDetail"
            label="Custom custom detail row" />
        <div v-for="(column, index) in columnsVisible" :key="index">
            <o-switch
                v-model="column.display"
                :label="`Show column '${column.title}'`" />
        </div>
    </o-field>

    <o-table
        :data="data"
        detailed
        hoverable
        row-key="name"
        :detailed-rows="detailedRows"
        :default-sort="['name', 'asc']"
        :custom-detail-row="showCustomDetail"
        :show-detail-icon="showDetailIcon">
        <o-table-column
            v-slot="{ row, toggleDetails }"
            field="name"
            :visible="columnsVisible['name'].display"
            :label="columnsVisible['name'].title"
            width="300"
            sortable>
            <template v-if="showDetailIcon">
                {{ row.name }}
            </template>

            <button v-else @click="toggleDetails()">
                {{ row.name }}
            </button>
        </o-table-column>

        <o-table-column
            v-slot="{ row }"
            field="sold"
            :visible="columnsVisible['sold'].display"
            :label="columnsVisible['sold'].title"
            sortable
            position="centered">
            {{ row.sold }}
        </o-table-column>

        <o-table-column
            v-slot="{ row }"
            field="available"
            :visible="columnsVisible['available'].display"
            :label="columnsVisible['available'].title"
            sortable
            position="centered">
            {{ row.available }}
        </o-table-column>

        <o-table-column
            v-slot="{ row }"
            :visible="columnsVisible['cleared'].display"
            :label="columnsVisible['cleared'].title"
            position="centered">
            <span>
                {{ Math.round((row.sold / row.available) * 100) }}%
            </span>
        </o-table-column>

        <template #detail="{ row }">
            <!-- when using `custom-detail-row`, make sure that each element in the slot has a unique `key` attribute -->
            <tr v-for="item in row.items" :key="item.name">
                <td v-if="showDetailIcon"></td>
                <td v-show="columnsVisible['name'].display">
                    {{ item.name }}
                </td>
                <td v-show="columnsVisible['sold'].display">
                    {{ item.sold }}
                </td>
                <td v-show="columnsVisible['available'].display">
                    {{ item.available }}
                </td>
                <td v-show="columnsVisible['cleared'].display">
                    <span>
                        {{
                            Math.round((item.sold / item.available) * 100)
                        }}%
                    </span>
                </td>
            </tr>
        </template>
    </o-table>
</section>

JS

import { ref } from "vue";

const data = ref([
    {
        name: "Board Games",
        sold: 131,
        available: 301,
        items: [
            {
                name: "Monopoly",
                sold: 57,
                available: 100,
            },
            {
                name: "Scrabble",
                sold: 23,
                available: 84,
            },
            {
                name: "Chess",
                sold: 37,
                available: 61,
            },
            {
                name: "Battleships",
                sold: 14,
                available: 56,
            },
        ],
    },
    {
        name: "Jigsaws & Puzzles",
        sold: 88,
        available: 167,
        items: [
            {
                name: "World Map",
                sold: 31,
                available: 38,
            },
            {
                name: "London",
                sold: 23,
                available: 29,
            },
            {
                name: "Sharks",
                sold: 20,
                available: 44,
            },
            {
                name: "Disney",
                sold: 14,
                available: 56,
            },
        ],
    },
    {
        name: "Books",
        sold: 434,
        available: 721,
        items: [
            {
                name: "Hamlet",
                sold: 101,
                available: 187,
            },
            {
                name: "The Lord Of The Rings",
                sold: 85,
                available: 156,
            },
            {
                name: "To Kill a Mockingbird",
                sold: 78,
                available: 131,
            },
            {
                name: "Catch-22",
                sold: 73,
                available: 98,
            },
            {
                name: "Frankenstein",
                sold: 51,
                available: 81,
            },
            {
                name: "Alice's Adventures In Wonderland",
                sold: 46,
                available: 68,
            },
        ],
    },
]);

const columnsVisible = ref({
    name: { title: "Name", display: true },
    sold: { title: "Stock Sold", display: true },
    available: { title: "Stock Available", display: true },
    cleared: { title: "Stock Cleared", display: true },
});
const showDetailIcon = ref(true);
const showCustomDetail = ref(true);
const detailedRows = ref([data.value[0]]);

Pagination

The table component uses the pagination component when the paginated prop is set. The per-page prop can be used to specify the number of rows per page. Any property prefixed with "pagination" is passed to the pagination component.

Show code

HTML

<section>
    <o-field grouped multiline>
        <o-field>
            <o-switch v-model="isPaginated" label="Paginated" />
        </o-field>
        <o-field>
            <o-switch
                v-model="isPaginationSimple"
                :disabled="!isPaginated"
                label="Simple pagination" />
        </o-field>
        <o-field>
            <o-select
                v-model="defaultSortDirection"
                aria-label="Sort direction">
                <option value="asc">Default sort direction: ASC</option>
                <option value="desc">Default sort direction: DESC</option>
            </o-select>
        </o-field>
        <o-field>
            <o-select
                v-model="perPage"
                :disabled="!isPaginated"
                aria-label="Rows per page">
                <option value="3">3 per page</option>
                <option value="5">5 per page</option>
                <option value="10">10 per page</option>
                <option value="15">15 per page</option>
                <option value="20">20 per page</option>
            </o-select>
        </o-field>
        <o-field>
            <o-select
                v-model="paginationPosition"
                :disabled="!isPaginated"
                aria-label="Pagination position">
                <option value="bottom">bottom pagination</option>
                <option value="top">top pagination</option>
                <option value="both">both</option>
            </o-select>
        </o-field>
        <o-field>
            <o-select v-model="sortIcon" aria-label="Arrow icon">
                <option value="arrow-up">Arrow sort icon</option>
                <option value="caret-up">Caret sort icon</option>
                <option value="chevron-up">Chevron sort icon</option>
            </o-select>
        </o-field>
        <o-field>
            <o-select v-model="sortIconSize" aria-label="Sort icon size">
                <option value="small">Small sort icon</option>
                <option value="">Regular sort icon</option>
                <option value="medium">Medium sort icon</option>
                <option value="large">Large sort icon</option>
            </o-select>
        </o-field>
        <o-field>
            <o-button
                variant="info"
                :disabled="!isPaginated"
                label="Set page to 2"
                @click="currentPage = 2" />
        </o-field>
    </o-field>

    <p><b>Page:</b> {{ currentPage }}</p>

    <o-table
        v-model:current-page="currentPage"
        :data="data"
        :paginated="isPaginated"
        :per-page="perPage"
        :pagination-simple="isPaginationSimple"
        :pagination-position="paginationPosition"
        :sort-icon="sortIcon"
        :sort-icon-size="sortIconSize"
        :default-sort-direction="defaultSortDirection"
        default-sort="user.first_name">
        <o-table-column
            v-slot="{ row }"
            field="id"
            label="ID"
            width="40"
            sortable
            numeric>
            {{ row.id }}
        </o-table-column>

        <o-table-column
            v-slot="{ row }"
            field="user.first_name"
            label="First Name"
            sortable>
            {{ row.user.first_name }}
        </o-table-column>

        <o-table-column
            v-slot="{ row }"
            field="user.last_name"
            label="Last Name"
            sortable>
            {{ row.user.last_name }}
        </o-table-column>

        <o-table-column
            v-slot="{ row }"
            field="date"
            label="Date"
            sortable
            position="centered">
            {{ new Date(row.date).toLocaleDateString() }}
        </o-table-column>

        <o-table-column v-slot="{ row }" label="Gender">
            <o-icon
                pack="fas"
                :icon="row.gender === 'Male' ? 'mars' : 'venus'" />
            {{ row.gender }}
        </o-table-column>
    </o-table>
</section>

JS

import { ref } from "vue";

const data = ref([
    {
        id: 1,
        user: { first_name: "Jesse", last_name: "Simmons" },
        date: "2016/10/15 13:43:27",
        gender: "Male",
    },
    {
        id: 2,
        user: { first_name: "John", last_name: "Jacobs" },
        date: "2016/12/15 06:00:53",
        gender: "Male",
    },
    {
        id: 3,
        user: { first_name: "Tina", last_name: "Gilbert" },
        date: "2016/04/26 06:26:28",
        gender: "Female",
    },
    {
        id: 4,
        user: { first_name: "Clarence", last_name: "Flores" },
        date: "2016/04/10 10:28:46",
        gender: "Male",
    },
    {
        id: 5,
        user: { first_name: "Anne", last_name: "Lee" },
        date: "2016/12/06 14:38:38",
        gender: "Female",
    },
    {
        id: 6,
        user: { first_name: "Sara", last_name: "Armstrong" },
        date: "2016/09/23 18:50:04",
        gender: "Female",
    },
    {
        id: 7,
        user: { first_name: "Anthony", last_name: "Webb" },
        date: "2016/08/30 23:49:38",
        gender: "Male",
    },
    {
        id: 8,
        user: { first_name: "Andrew", last_name: "Greene" },
        date: "2016/11/20 14:57:47",
        gender: "Male",
    },
    {
        id: 9,
        user: { first_name: "Russell", last_name: "White" },
        date: "2016/07/13 09:29:49",
        gender: "Male",
    },
    {
        id: 10,
        user: { first_name: "Lori", last_name: "Hunter" },
        date: "2016/12/09 01:44:05",
        gender: "Female",
    },
    {
        id: 11,
        user: { first_name: "Ronald", last_name: "Wood" },
        date: "2016/12/04 02:23:48",
        gender: "Male",
    },
    {
        id: 12,
        user: { first_name: "Michael", last_name: "Harper" },
        date: "2016/07/27 13:28:15",
        gender: "Male",
    },
    {
        id: 13,
        user: { first_name: "George", last_name: "Dunn" },
        date: "2017/03/07 12:26:52",
        gender: "Male",
    },
    {
        id: 14,
        user: { first_name: "Eric", last_name: "Rogers" },
        date: "2016/06/07 05:41:52",
        gender: "Male",
    },
    {
        id: 15,
        user: { first_name: "Juan", last_name: "Meyer" },
        date: "2017/02/01 04:56:34",
        gender: "Male",
    },
    {
        id: 16,
        user: { first_name: "Silvia", last_name: "Rosa" },
        date: "2017/01/26 11:50:04",
        gender: "Female",
    },
    {
        id: 17,
        user: { first_name: "Lori", last_name: "Cunningham" },
        date: "2016/05/01 10:00:56",
        gender: "Female",
    },
    {
        id: 18,
        user: { first_name: "Charles", last_name: "Graham" },
        date: "2016/05/31 06:43:30",
        gender: "Male",
    },
    {
        id: 19,
        user: { first_name: "Henry", last_name: "Morrison" },
        date: "2016/09/27 16:15:44",
        gender: "Male",
    },
    {
        id: 20,
        user: { first_name: "Albert", last_name: "Mendoza" },
        date: "2016/08/08 05:29:24",
        gender: "Male",
    },
    {
        id: 21,
        user: { first_name: "Ruby", last_name: "Snyder" },
        date: "2017/04/01 12:04:39",
        gender: "Female",
    },
    {
        id: 22,
        user: { first_name: "Jesse", last_name: "Warren" },
        date: "2016/08/20 01:36:38",
        gender: "Male",
    },
    {
        id: 23,
        user: { first_name: "Carlos", last_name: "Ferguson" },
        date: "2016/05/31 10:40:29",
        gender: "Male",
    },
    {
        id: 24,
        user: { first_name: "Melissa", last_name: "Peters" },
        date: "2016/07/23 00:41:54",
        gender: "Female",
    },
    {
        id: 25,
        user: { first_name: "Arthur", last_name: "Garza" },
        date: "2017/03/11 14:11:37",
        gender: "Male",
    },
    {
        id: 26,
        user: { first_name: "Joe", last_name: "Berry" },
        date: "2016/07/09 15:16:56",
        gender: "Male",
    },
    {
        id: 27,
        user: { first_name: "Joseph", last_name: "Bishop" },
        date: "2016/10/04 19:44:54",
        gender: "Male",
    },
    {
        id: 28,
        user: { first_name: "Sarah", last_name: "Harper" },
        date: "2016/09/23 05:09:11",
        gender: "Female",
    },
    {
        id: 29,
        user: { first_name: "Christopher", last_name: "Fuller" },
        date: "2016/04/12 00:05:35",
        gender: "Male",
    },
]);

const isPaginated = ref(true);
const isPaginationSimple = ref(false);
const paginationPosition = ref<"bottom" | "top" | "both">("bottom");
const sortIcon = ref("arrow-up");
const sortIconSize = ref("small");
const defaultSortDirection = ref<"asc" | "desc">("asc");
const currentPage = ref(1);
const perPage = ref(3);

Searchable

Columns can have a search filter input by adding searchable to the TableColumn component item. The search filter can be debounced to avoid multiple filtering when typing wich adding the filter-debounce prop to the Table component.

Show code

HTML

<section>
    <o-table :data="data" :columns="columns" />

    <p>You can also customize the search input using a scoped slot.</p>
    <o-table :data="data">
        <o-table-column
            v-for="(column, idx) in columns"
            :key="idx"
            v-bind="column">
            <template
                v-if="column.searchable && !column.numeric"
                #searchable="{ filters }">
                <o-input
                    v-if="column.field"
                    v-model="filters[column.field]"
                    placeholder="Search..."
                    icon="search"
                    size="small" />
            </template>

            <template #default="{ row }">
                {{ column.field ? row[column.field] : "" }}
            </template>
        </o-table-column>
    </o-table>
</section>

JS

import type { TableColumn } from "@oruga-ui/oruga-next";

const data = [
    {
        id: 1,
        first_name: "Jesse",
        last_name: "Simmons",
        date: "2016-10-15 13:43:27",
        gender: "Male",
    },
    {
        id: 2,
        first_name: "John",
        last_name: "Jacobs",
        date: "2016-12-15 06:00:53",
        gender: "Male",
    },
    {
        id: 3,
        first_name: "Tina",
        last_name: "Gilbert",
        date: "2016-04-26 06:26:28",
        gender: "Female",
    },
    {
        id: 4,
        first_name: "Clarence",
        last_name: "Flores",
        date: "2016-04-10 10:28:46",
        gender: "Male",
    },
    {
        id: 5,
        first_name: "Anne",
        last_name: "Lee",
        date: "2016-12-06 14:38:38",
        gender: "Female",
    },
];

const columns: TableColumn<(typeof data)[number]>[] = [
    {
        field: "id",
        label: "ID",
        width: "100",
        numeric: true,
        searchable: true,
    },
    {
        field: "first_name",
        label: "First Name",
        searchable: true,
    },
    {
        field: "last_name",
        label: "Last Name",
        searchable: true,
    },
    {
        field: "date",
        label: "Date",
        position: "centered",
        formatter: (v): string => new Date(String(v)).toLocaleDateString(),
    },
    {
        field: "gender",
        label: "Gender",
    },
];

Async Data

Every data-related function supports asynchronous loading behaviour. Consider adding backend-pagination, backend-sorting and backend-filtering in addition to the required normal props to prevent the component from handling the events. Each functionality fires an event that can be used to update the data. A loading state can also be enabled by using the loading prop.

Show code

HTML

<section>
    <o-table
        :data="data"
        :loading="loading"
        paginated
        backend-pagination
        :total="total"
        :per-page="perPage"
        backend-sorting
        :default-sort="[sortField, sortOrder]"
        aria-next-label="Next page"
        aria-previous-label="Previous page"
        aria-page-label="Page"
        aria-current-label="Current page"
        @page-change="onPageChange"
        @sort="onSort">
        <o-table-column
            v-slot="{ row }"
            field="original_title"
            label="Title"
            sortable>
            {{ row.original_title }}
        </o-table-column>
        <o-table-column
            v-slot="{ row }"
            field="vote_average"
            label="Vote Average"
            numeric
            sortable>
            <span class="tag" :class="type(row.vote_average)">
                {{ row.vote_average }}
            </span>
        </o-table-column>
        <o-table-column
            v-slot="{ row }"
            field="vote_count"
            label="Vote Count"
            numeric
            sortable>
            {{ row.vote_count }}
        </o-table-column>
        <o-table-column
            v-slot="{ row }"
            field="release_date"
            label="Release Date"
            sortable
            centered>
            {{
                row.release_date
                    ? new Date(row.release_date).toLocaleDateString()
                    : "unknown"
            }}
        </o-table-column>
        <o-table-column v-slot="{ row }" label="Overview" width="500">
            {{ row.overview }}
        </o-table-column>
    </o-table>
</section>

JS

import { ref, onMounted } from "vue";

const data = ref([]);
const total = ref(0);
const loading = ref(false);
const sortField = ref("vote_count");
const sortOrder = ref<"asc" | "desc">("desc");
const page = ref(1);
const perPage = ref(5);

function loadAsyncData(): void {
    const params = [
        "api_key=bb6f51bef07465653c3e553d6ab161a8",
        "language=en-US",
        "include_adult=false",
        "include_video=false",
        `sort_by=${sortField.value}.${sortOrder.value}`,
        `page=${page.value}`,
    ].join("&");
    loading.value = true;
    fetch(`https://api.themoviedb.org/3/discover/movie?${params}`)
        .then((response) => response.json())
        .then((result) => {
            // api.themoviedb.org manage max 1000 pages
            let currentTotal = result.total_results;
            if (result.total_results / perPage.value > 100)
                currentTotal = perPage.value * 100;

            total.value = currentTotal;
            data.value = result.results.map((item) => {
                item.release_date = item.release_date
                    ? item.release_date.replace(/-/g, "/")
                    : null;
                return item;
            });
            // cap results for usability
            if (data.value.length > 10) data.value = data.value.slice(0, 5);
            loading.value = false;
        })
        .catch((error) => {
            data.value = [];
            total.value = 0;
            loading.value = false;
            throw error;
        });
}

/*
 * Handle page-change event
 */
function onPageChange(p): void {
    page.value = p;
    loadAsyncData();
}

/*
 * Handle sort event
 */
function onSort(column, order): void {
    sortField.value = column?.field;
    sortOrder.value = order;
    loadAsyncData();
}

/*
 * Type style in relation to the value
 */
function type(value): string {
    const number = parseFloat(value);
    if (number < 6) {
        return "is-danger";
    } else if (number >= 6 && number < 8) {
        return "is-warning";
    } else if (number >= 8) {
        return "is-success";
    } else return "";
}

onMounted(() => {
    loadAsyncData();
});

Sticky

Adding the sticky-header prop to the Table component makes the header stick to the top when scrolling vertically. Adding the sticky prop to individual TableColumn components makes the column stick to the left when scrolling horizontally.

Show code

HTML

<section>
    <o-field grouped>
        <o-switch v-model="stickyHeaders" label="Sticky Headers" />
    </o-field>

    <o-table
        :data="data"
        :columns="columns"
        :sticky-header="stickyHeaders" />
</section>

JS

import { ref } from "vue";
import type { TableColumn } from "@oruga-ui/oruga-next";

const data = ref([
    {
        id: 1,
        user: { first_name: "Jesse", last_name: "Simmons" },
        date: "2016/10/15 13:43:27",
        gender: "Male",
    },
    {
        id: 2,
        user: { first_name: "John", last_name: "Jacobs" },
        date: "2016/12/15 06:00:53",
        gender: "Male",
    },
    {
        id: 3,
        user: { first_name: "Tina", last_name: "Gilbert" },
        date: "2016/04/26 06:26:28",
        gender: "Female",
    },
    {
        id: 4,
        user: { first_name: "Clarence", last_name: "Flores" },
        date: "2016/04/10 10:28:46",
        gender: "Male",
    },
    {
        id: 5,
        user: { first_name: "Anne", last_name: "Lee" },
        date: "2016/12/06 14:38:38",
        gender: "Female",
    },
]);

const columns = ref<TableColumn<(typeof data.value)[number]>[]>([
    {
        field: "id",
        label: "ID",
        width: "40",
        numeric: true,
        sticky: true,
        thAttrs: { class: "is-sticky-column-one" },
        tdAttrs: { class: "is-sticky-column-one" },
    },
    {
        field: "user.first_name",
        label: "First Name",
    },
    {
        field: "user.last_name",
        label: "Last Name",
    },
    {
        field: "date",
        label: "Date",
        position: "centered",
        sticky: true,
        formatter: (v): string => new Date(String(v)).toLocaleDateString(),
        thAttrs: { class: "is-sticky-column-two" },
        tdAttrs: { class: "is-sticky-column-two" },
    },
    {
        field: "gender",
        label: "Gender",
    },
    {
        field: "id",
        label: "Column A",
    },
    {
        field: "id",
        label: "Column B",
    },
    {
        field: "id",
        label: "Column C",
    },
    {
        field: "id",
        label: "Column D",
    },
    {
        field: "id",
        label: "Column E",
    },
    {
        field: "id",
        label: "Column F",
    },
    {
        field: "id",
        label: "Column G",
    },
    {
        field: "id",
        label: "Column H",
    },
    {
        field: "id",
        label: "Column I",
    },
    {
        field: "id",
        label: "Column L",
    },
    {
        field: "id",
        label: "Column M",
    },
    {
        field: "id",
        label: "Column N",
    },
    {
        field: "id",
        label: "Column O",
    },
]);

const stickyHeaders = ref(true);

SCSS

.is-sticky-column-one {
    background: #006724 !important;
    color: white !important;
}
.is-sticky-column-two {
    background: #167df0 !important;
    color: white !important;
}

Draggable rows/columns

Use draggable/draggable-column prop to allow rows and columns to be draggable. Manage dragging using dragstart/columndragstart, dragover/columndragover and drop/columndrop events.

Show code

HTML

<section>
    <o-table
        :data="data"
        :columns="columns"
        draggable
        draggable-column
        @dragstart="dragstart"
        @drop="drop"
        @dragover="dragover"
        @dragleave="dragleave"
        @columndragstart="columndragstart"
        @columndrop="columndrop"
        @columndragover="columndragover"
        @columndragleave="columndragleave" />
</section>

JS

import { ref } from "vue";
import { useOruga } from "@oruga-ui/oruga-next";
import type { TableColumn } from "@oruga-ui/oruga-next";

const oruga = useOruga();

const columns: TableColumn[] = [
    {
        field: "id",
        label: "ID",
        width: "40",
        numeric: true,
    },
    {
        field: "first_name",
        label: "First Name",
    },
    {
        field: "last_name",
        label: "Last Name",
    },
    {
        field: "date",
        label: "Date",
        position: "centered",
    },
    {
        field: "gender",
        label: "Gender",
    },
];

const data = [
    {
        id: 1,
        first_name: "Jesse",
        last_name: "Simmons",
        date: "2016-10-15 13:43:27",
        gender: "Male",
    },
    {
        id: 2,
        first_name: "John",
        last_name: "Jacobs",
        date: "2016-12-15 06:00:53",
        gender: "Male",
    },
    {
        id: 3,
        first_name: "Tina",
        last_name: "Gilbert",
        date: "2016-04-26 06:26:28",
        gender: "Female",
    },
    {
        id: 4,
        first_name: "Clarence",
        last_name: "Flores",
        date: "2016-04-10 10:28:46",
        gender: "Male",
    },
    {
        id: 5,
        first_name: "Anne",
        last_name: "Lee",
        date: "2016-12-06 14:38:38",
        gender: "Female",
    },
];

const draggingRow = ref<any>();
const draggingRowIndex = ref<number>(0);
const draggingColumn = ref<TableColumn>();
const draggingColumnIndex = ref<number>(0);

function dragstart(row, index, event): void {
    draggingRow.value = row;
    draggingRowIndex.value = index;
    event.dataTransfer.effectAllowed = "copy";
}

function dragover(row, index, event): void {
    event.preventDefault();
    event.dataTransfer.dropEffect = "copy";
    event.target.closest("tr").classList.add("is-selected");
}

function dragleave(row, index, event): void {
    event.preventDefault();
    event.target.closest("tr").classList.remove("is-selected");
}

function drop(row, index, event): void {
    event.target.closest("tr").classList.remove("is-selected");
    const droppedOnRowIndex = index;
    oruga.notification.open(
        `Moved ${draggingRow.value?.first_name} from row ${
            draggingRowIndex.value + 1
        } to ${droppedOnRowIndex + 1}`,
    );
}

function columndragstart(column, index, event): void {
    draggingColumn.value = column;
    draggingColumnIndex.value = index;
    event.dataTransfer.effectAllowed = "copy";
}

function columndragover(column, index, event): void {
    event.preventDefault();
    event.dataTransfer.dropEffect = "copy";
    event.target.closest("th").classList.add("is-selected");
}

function columndragleave(column, index, event): void {
    event.preventDefault();
    event.target.closest("th").classList.remove("is-selected");
}

function columndrop(column, index, event): void {
    event.target.closest("th").classList.remove("is-selected");
    const droppedOnColumnIndex = index;
    oruga.notification.open(
        `Moved ${draggingColumn.value?.field} from column ${
            draggingColumnIndex.value + 1
        } to ${droppedOnColumnIndex + 1}`,
    );
}

SCSS

:deep(.is-selected) {
    background-color: lightblue;
}

Table component

Tabulated data are sometimes needed, it's even better when it's responsive.

<o-table></o-table>

Props

Prop name	Description	Type	Values	Default
ariaCurrentLabel	Accessibility label for the pagination current page button.	string	-	From config: table: {   ariaCurrentLabel: undefined }
ariaNextLabel	Accessibility label for the pagination next page button.	string	-	From config: table: {   ariaNextLabel: undefined }
ariaPageLabel	Accessibility label for the pagination page button.	string	-	From config: table: {   ariaPageLabel: undefined }
ariaPreviousLabel	Accessibility label for the pagination previous page button.	string	-	From config: table: {   ariaPreviousLabel: undefined }
backendFiltering	Columns won't be filtered on clientside, use with searchable prop to the columns to filter in your backend	boolean	-	From config: table: {   backendFiltering: false }
backendPagination	Rows won't be paginated on clientside, use with page-change event to paginate in your backend	boolean	-	false
backendSorting	Columns won't be sorted on clientside, use with sort event to sort in your backend	boolean	-	From config: table: {   backendSorting: false }
bordered	Border to all cells	boolean	-	From config: table: {   bordered: false }
checkable	Rows can be checked (multiple)	boolean	-	false
checkableHeader	Show check/uncheck all checkbox in table header when checkable (if checkable)	boolean	-	true
checkboxPosition	Position of the checkbox when checkable (if checkable)	"left" | "right"	left, right	From config: table: {   checkboxPosition: "left" }
checkboxVariant	Color of the checkbox when checkable (if checkable)	string	primary, info, success, warning, danger, and any other custom color	From config: table: {   checkboxVariant: undefined }
checkedRows	Set which rows are checked, use v-model:checkedRows to make it two-way binding (if checkable)	unknown[]	-	[]
columns	Table columns	TableColumn<unknown>[]	-
currentPage	Current page of table data (if paginated), use v-model:currentPage to make it two-way binding	number	-	1
customCompare	Define a custom comparison function to check whether two row elements are equal. By default a rowKey comparison is performed if given. Otherwise a simple object comparison is done.	((a: unknown, b: unknown) => boolean)	-
customDetailRow	Enable custom style on details (if detailed)	boolean	-	false
data	Table data	unknown[]	-
defaultSort	Sets the default sort column and order — e.g. 'first_name' or ['first_name', 'desc']	'desc'] | [string, 'asc' | string	-	From config: table: {   defaultSort: undefined }
defaultSortDirection	Sets the default sort column direction on the first click	'asc'|'desc'	asc, desc	From config: table: {   defaultSortDirection: "asc" }
detailIcon	Icon name of detail action (if detailed)	string	-	From config: table: {   detailIcon: "chevron-right" }
detailTransition		string	-	From config: table: {   detailTransition: "slide" }
detailed	Allow row details	boolean	-	false
detailedRows	Set which rows have opened details, use v-model:detailedRows to make it two-way binding (if detailed). Ideal to open details via vue-router. (A unique key is required; check rowKey prop)	unknown[]	-	[]
draggable	Allows rows to be draggable	boolean	-	false
draggableColumn	Allows columns to be draggable	boolean	-	false
emptyIcon	Icon to be shown when the table is empty	string	-	From config: table: {   emptyIcon: undefined }
emptyIconSize	Size of empty icon	string	small, medium, large	From config: table: {   emptyIconSize: undefined }
emptyLabel	Label to be shown when the table is empty	string	-	From config: table: {   emptyLabel: undefined }
filterDebounce	Filtering debounce time (in milliseconds)	number	-	From config: table: {   filterDebounce: 300 }
filtersEvent	Add a native event to filter	string	-	""
filtersIcon	Icon of the column search input	string	-	From config: table: {   filterIcon: undefined }
filtersPlaceholder	Placeholder of the column search input	string	-	From config: table: {   filterPlaceholder: undefined }
height	Table fixed height	number | string	-
hoverable	Rows are highlighted when hovering	boolean	-	From config: table: {   hoverable: false }
iconPack	Icon pack to use	string	mdi, fa, fas and any other custom icon pack	From config: table: {   iconPack: undefined }
isDetailedVisible	Controls the visibility of the trigger that toggles the detailed rows (if detailed)	((row: unknown) => boolean)	-	From config: table: {   isDetailedVisible: }
isRowCheckable	Custom method to verify if a row is checkable (if checkable)	((row: unknown) => boolean)	-	From config: table: {   isRowCheckable: }
isRowChecked	Custom method to verify if a row is checked (if checkable)	((row: unknown) => boolean)	-
isRowSelectable	Custom method to verify if a row is selectable, works when is selectable	((row: unknown) => boolean)	-	true
loading	Enable loading state	boolean	-	false
loadingIcon	Icon for the loading state	string	-	From config: table: {   loadingIcon: "loading" }
loadingLabel	Label for the loading state	string	-	From config: table: {   loadingLabel: undefined }
mobileBreakpoint	Mobile breakpoint as max-width value	string	-	From config: table: {   mobileBreakpoint: undefined }
mobileCards	Rows appears as cards on mobile (collapse rows)	boolean	-	From config: table: {   mobileCards: true }
mobileSortPlaceholder	Select placeholder text when nothing is selected (if mobileCards)	string	-	From config: table: {   mobileSortPlaceholder: undefined }
narrowed	Makes the cells narrower	boolean	-	From config: table: {   narrowed: false }
override	Override existing theme classes completely	boolean	-
paginated	Adds pagination to the table	boolean	-	From config: table: {   paginated: false }
paginationOrder	Pagination buttons order (if paginated)	"centered" | "left" | "right"	centered, right, left	From config: table: {   paginationOrder: undefined }
paginationPosition	Pagination position (if paginated)	"both" | "bottom" | "top"	bottom, top, both	From config: table: {   paginationPosition: "bottom" }
paginationRounded	Enable rounded pagination buttons (if paginated)	boolean	-	From config: table: {   paginationRounded: false }
paginationSimple	Enable simple style pagination (if paginated)	boolean	-	From config: table: {   paginationSimple: false }
paginationSize	Size of pagination (if paginated)	string	small, medium, large	From config: table: {   paginationSize: "small" }
perPage	How many rows per page (if paginated)	number | string	-	From config: table: {   perPage: 20 }
rowKey	Use a unique key of your data Object for each row. Useful if your data prop has dynamic indices. (id recommended)	string	-	From config: table: {   rowKey: undefined }
scrollable	Add a horizontal scrollbar when table is too wide	boolean	-
selectable	Table can be focused and user can select rows. Rows can be navigate with keyboard arrows and are highlighted when hovering.	boolean	-	From config: table: {   selectable: false }
selected	Set which row is selected, use v-model:selected to make it two-way binding (if selectable)	unknown	-
showDetailIcon	Allow detail icon and column to be visible (if detailed)	boolean	-	From config: table: {   showDetailIcon: true }
showHeader	Show header	boolean	-	From config: table: {   showHeader: true }
sortIcon	Sets the header sorting icon	string	-	From config: table: {   sortIcon: "arrow-up" }
sortIconSize	Sets the size of the sorting icon	string	small, medium, large	From config: table: {   sortIconSize: "small" }
stickyCheckbox	Make the checkbox column sticky (if checkable)	boolean	-	false
stickyHeader	Show a sticky table header	boolean	-	false
striped	Whether table is striped	boolean	-	From config: table: {   striped: false }
tdAttrs	Adds native attributes to column td element of a row	((row: unknown, column: TableColumn<unknown>) => object)	-
thAttrs	Adds native attributes to a column th element	((column: TableColumn<unknown>) => object)	-
total	Total number of table data if backend-pagination is enabled	number	-	0

Events

Event name	Properties	Description
page-change	page number - updated page	on pagination page change event
dblclick	row T - row data index number - index of clicked row event Event - native click event	on row double click event
mouseenter	row T - row data index number - index of clicked row event Event - native mouseenter event	on row mouseenter event
mouseleave	row T - row data index number - index of clicked row event Event - native mouseleave event	on row mouseleave event
contextmenu	row T - row data index number - index of clicked row event Event - native contextmenu event	on row right click event
cell-click	row T - row data column TableColumn - column data index number - row index colindex number - column index event Event - native click event	on cell click event
update:currentPage	value number - updated currentPage prop	currentPage prop two-way binding
update:selected	value T - updated select prop	select prop two-way binding
select	newRow T - new select value oldRow T - old select value	on row select event
check	value T[] - all checked rows row T - row data	on row checked event
check-all	value T[] - all checked rows	on all rows checked event
update:checkedRows	value T[] - updated checkedRows prop	checkedRows prop two-way binding
sort	column TableColumn - column data direction string - 'asc' or 'desc' event Event - native event	on column sort change event
filters-change	filters object - filter object	on filter change event
filters-event	filtersEvent string - props filtersEvent value filters object - filter object event Event - native event	on native filter event based on props filtersEvent
update:detailedRows	value T[] - updated detailedRows prop	detailedRows prop two-way binding
details-open	row T - row data	on details open event
details-close	row T - row data	on details close event
click	row T - row data index number - index of clicked row event Event - native click event	on row click event
dragstart	row T - row data index number - index of draged row event DragEvent - native dragstart event	on row dragstart event
dragend	row T - row data index number - index of draged row event DragEvent - native dragend event	on row dragend event
drop	row T - row data index number - index of draged row event DragEvent - native drop event	on row drop event
dragleave	row T - row data index number - index of draged row event DragEvent - native dragleave event	on row dragleave event
dragover	row T - row data index number - index of draged row event DragEvent - native dragover event	on row dragover event
columndragstart	column TableColumn - column data index number - index of draged column event DragEvent - native columndragstart event	on column columndragstart event
columndragend	column TableColumn - column data index number - index of draged column event DragEvent - native columndragend event	on column columndragend event
columndrop	column TableColumn - column data index number - index of draged column event DragEvent - native columndrop event	on column columndrop event
columndragleave	column TableColumn - column data index number - index of draged column event DragEvent - native columndragleave event	on column columndragleave event
columndragover	column TableColumn - column data index number - index of draged column event DragEvent - native columndragover event	on column columndragover event

Slots

Name	Description	Bindings
default	Place o-table-column here
before	Place extra o-table-column components here, even if you have some columns defined by prop
after	Place extra o-table-column components here, even if you have some columns defined by prop
pagination	Override pagination label	current number - current page per-page number - rows per page total number - total rows count change (page: number): void - on page change event
top-left	Additional slot if table is paginated
caption	Define a table caption here
preheader	Define preheader content here
check-all	Override check all checkbox	is-all-checked boolean - if all rows are checked is-all-uncheckable boolean - if check all is uncheckable check-all (): void - check all function
subheading
detail	Place row detail content here	row T - row content index number - row index
empty	Define content if table is empty
footer	Define a custom footer	column-count number - counts of visible columns row-count number - counts of visible rows
loading	Override loading component	loading boolean - is loading state enabled
bottom-left	Additional slot if table is paginated

TableColumn component

Define a column used by the table component.

<o-table-column></o-table-column>

Props

Prop name	Description	Type	Values	Default
customSearch	Define a custom filter funtion for the search	((row: unknown, filter: string) => boolean)	-
customSort	Define a custom sort function	((a: unknown, b: unknown, isAsc: boolean) => number)	-
field	Define an object property key if data is an object	string	-
formatter	Provide a formatter function to edit the output	((value: unknown, row: unknown) => string)	-
headerSelectable	Make header selectable	boolean	-	false
hidden	Define whether the column is visible or not	boolean	-	false
label	Define the column label	string	-
numeric	Define column value as number	boolean	-	false
position	Position of the column content	"centered" | "left" | "right"	left, centered, right
searchable	Enable an additional searchbar below the column header	boolean	-	false
sortable	Enable column sortability	boolean	-	false
sticky	Whether the column is sticky or not	boolean	-	false
subheading	Define a column sub heading	string	-
tdAttrs	Adds native attributes to td	object	-
thAttrs	Adds native attributes to th	object	-
width	Column fixed width	number | string	-

Slots

Name	Description	Bindings
default	Default Slot	row T - row data column TableColumn - column definition index number - row index colindex number - column index toggle-details (): void - toggle details function
header	Override header label	column TableColumn - column definition index number - column index
subheading	Override subheading label	column TableColumn - column definition index number - column index
searchable	Override searchable input	column TableColumn - column definition index number - column index filters object - active filters object

Class Inspector

Classes applied to the element:

How does the Class props inspector work?

Class props inspector is useful to see class props you want to use to customize Oruga components and how they change a component. You can click on Inspect button to find the exact element where a specific class prop acts.

In the Class props inspector there are other columns:

Class prop

This column contains the name of the Class prop you want to inspect.
If you find a name with a link ( ▷ classPropName) this refers to a subitem (e.g. Dropdown Item in Dropdown).

Description

This column contains the description of the Class prop you want to inspect.
👉 This icon indicates some warning, e.g. this Class prop is visible only on mobile.

Props

This column contains a list of props that activate the class, e.g. if a class prop contains disabled prop it means that only when the component has disabled prop.

Suffixes

This column contains all the possible suffixes that you'll receive if you use a function to customize your Class prop.

Class prop	Description	Props	Suffixes
rootClass	Class of the root element.
mobileClass	Class of the root and wrapper element when on mobile. 👉 Switch to mobile view to see it in action!
mobileSortClass	Class of the sortable form wrapper on mobile. 👉 Switch to mobile view to see it in action!
wrapperClass	Class of the table wrapper element.
stickyHeaderClass	Class of the table wrapper element when header is sticky.	stickyHeader
scrollableClass	Class of the table wrapper element when its content is scrollable.	scrollable
tableClass	Class of the table element.
borderedClass	Class of the table element when bordered.	bordered
stripedClass	Class of the table element when striped.	striped
narrowedClass	Class of the table element when narrowed.	narrowed
hoverableClass	Class of the table element when hoverable.	hoverable
emptyClass	Class of the table element when it is empty.
thClass	Class of the table `th` element.
thPositionClass	Class of the table `th` element with position.	position	left centered right
thCheckboxClass	Class of the table `th` element when checkable.	checkable
thStickyClass	Class of the table `th` element when checkbox is sticky.	stickyCheckbox
thDetailedClass	Class of the table `th` element of the detail column of triggers.	detailed
thSortableClass	Class of the table `th` element when sortable.	sortable
thSortIconClass	Class of the table header sort icon element. 👉 Click on 'First Name' header to sort elements and see it in action!
thCurrentSortClass	Class of the table `th` element that is currently sorted. 👉 Click on 'First Name' header to sort elements and see it in action!
thUnselectableClass	Class of the Table `th` element that is unsortable.	headerSelectable sortable
thSubheadingClass	Class of the table `th` subheading element.	subheading
trSelectedClass	Class of the table `tr` element when selected. 👉 Select a row of the table to see it in action!
trDetailedClass	Class of the table `tr` element when detailed. . 👉 Expand details to see it in action!	detailed
trCheckedClass	Class of the table `tr` element when checkable and checked. 👉 Select a row of the table to see it in action!	checkable
trEmptyClass	Class of the table `tr` element when table is empty.
tdClass	Class of the Table `td` element.
tdPositionClass	Class of the table `td` element with position.	position	left centered right
tdStickyClass	Class of the table `td` element when column is sticky.	sticky
tdCheckboxClass	Class of the table `td` element when row is checkable.	checkable
tdDetailedChevronClass	Class of the table `td` element that contains the chevron to trigger details.	detailed
paginationWrapperClass	Class of the table pagination wrapper element.	paginated
footerClass	Class of the table footer element.
loadingClasses	Classes to apply on the internal loading component. More details here.

Sass variables

Current theme ➜ Oruga

SASS Variable	Default
$table-background-color	#fff
$table-background	#f5f5f5
$table-boder	1px solid transparent
$table-border-radius	var(--#{$prefix}base-border-radius)
$table-card-box-shadow	0 2px 3px rgba(var(--#{$prefix}black), 0.1), 0 0 0 1px rgba(var(--#{$prefix}black), 0.1)
$table-card-cell-font-weight	600
$table-card-cell-padding	0 0.5em 0 0
$table-card-cell-text-align	left
$table-card-detail-margin	-1rem 0 0 0
$table-card-margin	0 0 1rem 0
$table-color	black
$table-current-sort-border-color	var(--#{$prefix}grey)
$table-current-sort-font-weight	700
$table-current-sort-hover-border-color	var(--#{$prefix}grey)
$table-detail-background	#fafafa
$table-detail-box-shadow	inset 0 1px 3px var(--#{$prefix}grey)
$table-detail-chevron-color	var(--#{$prefix}primary)
$table-detail-chevron-width	40px
$table-detail-padding	1rem
$table-focus-border-color	var(--#{$prefix}primary)
$table-focus-box-shadow	0 0 0 0.125em rgba(var(--#{$prefix}primary), 0.25)
$table-hoverable-background-color	#fafafa
$table-narrow-padding	0.25em 0.5em
$table-row-active-background-color	var(--#{$prefix}primary)
$table-row-active-color	var(--#{$prefix}primary-invert)
$table-sticky-header-height	300px
$table-sticky-zindex	1
$table-striped-background-color	#fafafa
$table-td-border	1px solid var(--#{$prefix}grey-lighter)
$table-td-padding	0.5em 0.75em
$table-th-border	2px solid var(--#{$prefix}grey-lighter)
$table-th-checkbox-width	40px
$table-th-color	#363636
$table-th-detail-width	14px
$table-th-font-weight	600
$table-th-padding	0.5em 0.75em
$table-pagination-padding	0.5em 0

See ➜ 📄 Full scss file

Current theme ➜ Bulma

SASS Variable	Default
$table-sticky-header-height	300px

See ➜ 📄 Full scss file

Current theme ➜ Bootstrap

SASS Variable	Default
$table-head-bg	initial
$table-head-color	initial
$table-head-border-width	var(--#{$prefix}border-width)
$table-sticky-zindex	1
$table-sticky-bg	initial
$table-sticky-color	initial
$table-sticky-header-height	350px
$table-detail-padding	0.5em 0.75em
$table-detail-bg	var(--#{$prefix}gray-light)
$table-empty-padding	1.5em 0
$table-sortable-hover-border-color	var(--#{$prefix}secondary)
$table-current-sort-bg	var(--#{$prefix}gray-light)
$table-card-spacer	$spacer

See ➜ 📄 Full scss file