Table

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

Examples

Base

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,
    },
]);

Customise

Show code

HTML

<section>
    <o-field grouped group-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">
        <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);

Selection

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

Show code

HTML

<section>
    <o-field grouped group-multiline>
        <o-button
            variant="danger"
            :disabled="!checkedRows.length"
            icon-left="times"
            label="Clear checked"
            @click="checkedRows = []" />
        <o-select v-model="checkboxPosition">
            <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
        :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

Show code

HTML

<section>
    <o-field grouped group-multiline>
        <o-checkbox v-model="showDetailIcon" label="Show detail chevron" />
        <o-checkbox
            v-model="showDefaultDetail"
            label="Custom detail column" />
        <div v-for="(column, index) in columnsVisible" :key="index">
            <o-checkbox
                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="!showDefaultDetail"
        :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 }">
            <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 showDefaultDetail = ref(true);
const detailedRows = ref([data.value[0]]);

Pagination

Show code

HTML

<section>
    <o-field grouped group-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">
                <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">
                <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">
                <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">
                <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">
                <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"
        :default-sort-direction="defaultSortDirection"
        :sort-icon="sortIcon"
        :sort-icon-size="sortIconSize"
        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);

Async Data

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(20);

const loadAsyncData = () => {
    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
 */
const onPageChange = (p) => {
    page.value = p;
    loadAsyncData();
};

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

/*
 * Type style in relation to the value
 */
const type = (value) => {
    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";
    }
};

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

Sticky

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;
}

Searchable

Show code

HTML

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

    <p>
        You can debounce search filter to avoid multiple filtering when
        typing.
    </p>

    <o-table :data="data" :columns="columns" :debounce-search="1000" />

    <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",
    },
];

Draggable rows/columns

Show code

HTML

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

    <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;
}

Class props

'Classes applied to the element'

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 with Javascript, use with searchable prop to the columns to filter in your backend	boolean	-	From config: table: {   backendFiltering: false }
backendPagination	Rows won't be paginated with Javascript, use with page-change event to paginate in your backend	boolean	-	false
backendSorting	Columns won't be sorted with Javascript, 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
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)	Record<string, any>[]	-	[]
columns	Table columns	TableColumn<Record<string, any>>[]	-
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: Record<string, any>, b: Record<string, any>) => boolean)	-
customDetailRow	Enable custom style on details (if detailed)	boolean	-	false
data	Table data	Record<string, any>[]	-
debounceSearch	Filtering debounce time (in milliseconds)	number	-	From config: table: {   debounceSearch: undefined }
defaultSort	Sets the default sort column and order — e.g. 'first_name' or ['first_name', 'desc']	string | [string, 'asc' | 'desc']	-	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)	Record<string, any>[]	-	[]
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: "large" }
emptyLabel	Label to be shown when the table is empty	string	-	From config: table: {   emptyLabel: undefined }
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 }
headerCheckable	Show check/uncheck all checkbox in table header when checkable (if checkable)	boolean	-	true
height	Table fixed height	string | number	-
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: Record<string, any>) => boolean)	-	From config: table: {   isDetailedVisible: }
isRowCheckable	Custom method to verify if a row is checkable (if checkable)	((row: Record<string, any>) => boolean)	-	From config: table: {   isRowCheckable: }
isRowChecked	Custom method to verify if a row is checked (if checkable)	((row: Record<string, any>) => boolean)	-
isRowSelectable	Custom method to verify if a row is selectable, works when is selectable	((row: Record<string, any>) => 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)	"left" | "right" | "centered"	centered, right, left	From config: table: {   paginationOrder: undefined }
paginationPosition	Pagination position (if paginated)	"bottom" | "top" | "both"	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)	string | number	-	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)	Record<string, any>	-
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: Record<string, any>, column: TableColumn<Record<string, any>>) => object)	-
thAttrs	Adds native attributes to a column th element	((column: TableColumn<Record<string, any>>) => 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
processed	value TableRow[] - computed table rows	is emitted each time the table data is processed into rows
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
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

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

Props

Prop name	Description	Type	Values	Default
customSearch	Define a custom filter funtion for the search	TSFunctionType	-
customSort	Define a custom sort function	TSFunctionType	-
field	Define an object property key if data is an object	string	-
formatter	Provide a formatter function to edit the output	TSFunctionType	-
headerSelectable	Make header selectable	boolean	-	false
label	Define the column label	string	-
numeric	Define column value as number	boolean	-	false
position	Position of the column content	union	-
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	-
visible	Define whether the column is visible or not	boolean	-	true
width	Column fixed width	union	-

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

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

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.5rem 0.75rem
$table-detail-bg	var(--#{$prefix}gray-light)
$table-sortable-hover-border-color	var(--#{$prefix}secondary)
$table-current-sort-bg	var(--#{$prefix}gray-light)
$table-card-spacer	$spacer

See ➜ 📄 Full scss file