Table

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

Examples

Base

Show code

HTML

<section>
    <o-table :data="data">
        <o-table-column
            v-for="(column, idx) in columns"
            :key="idx"
            v-slot="{ row }"
            v-bind="column">
            {{ row[column.field] }}
        </o-table-column>
    </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 columns = ref([
    {
        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",
    },
]);

css

Column prop

Show code

HTML

<section>
    <o-table :data="data" :columns="columns" />
</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 columns = ref([
    {
        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",
    },
]);

css

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="isFocusable" label="Focusable" />
        <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"
        :focusable="isFocusable"
        :mobile-cards="hasMobileCards">
        <o-table-column
            v-slot="props"
            field="id"
            label="ID"
            width="40"
            numeric>
            {{ props.row.id }}
        </o-table-column>

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

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

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

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

JS

import { ref } from "vue";

const tableData = [
    {
        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 isFocusable = ref(false);
const isCheckbale = ref(false);
const isLoading = ref(false);
const data = ref(tableData);
const hasMobileCards = ref(true);

css

Selection

Show code

HTML

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

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

    <o-table v-model:selected="selected" :data="data" focusable>
        <o-table-column
            v-for="(column, idx) in columns"
            :key="idx"
            v-slot="{ row }"
            v-bind="column">
            {{ row[column.field] }}
        </o-table-column>
    </o-table>
</section>

JS

import { ref } from "vue";

const tableData = [
    {
        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 data = ref(tableData);
const selected = ref(tableData[1]);

const columns = ref([
    {
        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",
    },
]);

css

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"
        :is-row-checkable="(row) => row.id !== 3 && row.id !== 4"
        checkable
        :checkbox-position="checkboxPosition">
        <o-table-column
            v-for="(column, idx) in columns"
            :key="idx"
            v-slot="{ row }"
            v-bind="column">
            {{ row[column.field] }}
        </o-table-column>
        <template #bottom-left>
            <b>Total checked</b>: {{ checkedRows.length }}
        </template>
    </o-table>
</section>

JS

import { ref } from "vue";

const tableData = [
    {
        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 data = ref(tableData);
const checkboxPosition = ref("left");
const checkedRows = ref([tableData[1], tableData[3]]);

const columns = ref([
    {
        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",
    },
]);

css

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="column.title" />
        </div>
    </o-field>

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

            <template v-else>
                <a @click="toggle(props.row)">
                    {{ props.row.name }}
                </a>
            </template>
        </o-table-column>

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

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

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

        <template #detail="props">
            <tr v-for="item in props.row.items" :key="item.name">
                <td v-if="showDetailIcon"></td>
                <td v-show="columnsVisible['name'].display">
                    &nbsp;&nbsp;&nbsp;&nbsp;{{ 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 table = ref(null);

const toggle = (row) => {
    table.value.toggleDetails(row);
};

css

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="props"
            field="id"
            label="ID"
            width="40"
            sortable
            numeric>
            {{ props.row.id }}
        </o-table-column>

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

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

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

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

            {{ props.row.gender }}
        </o-table-column>
    </o-table>
</section>

JS

import { ref } from "vue";

const tableData = [
    {
        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");
const sortIcon = ref("arrow-up");
const sortIconSize = ref("small");
const defaultSortDirection = ref("asc");
const currentPage = ref(1);
const perPage = ref(3);
const data = ref(tableData);

css

Async Data

Show code

HTML

<section>
    <o-table
        :data="data"
        :loading="loading"
        paginated
        backend-pagination
        :total="total"
        :per-page="perPage"
        backend-sorting
        :default-sort-direction="defaultSortOrder"
        :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="props"
            field="original_title"
            label="Title"
            sortable>
            {{ props.row.original_title }}
        </o-table-column>
        <o-table-column
            v-slot="props"
            field="vote_average"
            label="Vote Average"
            numeric
            sortable>
            <span class="tag" :class="type(props.row.vote_average)">
                {{ props.row.vote_average }}
            </span>
        </o-table-column>
        <o-table-column
            v-slot="props"
            field="vote_count"
            label="Vote Count"
            numeric
            sortable>
            {{ props.row.vote_count }}
        </o-table-column>
        <o-table-column
            v-slot="props"
            field="release_date"
            label="Release Date"
            sortable
            centered>
            {{
                props.row.release_date
                    ? new Date(props.row.release_date).toLocaleDateString()
                    : "unknown"
            }}
        </o-table-column>
        <o-table-column v-slot="props" label="Overview" width="500">
            {{ props.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("desc");
const defaultSortOrder = ref("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();
});

css

Sticky

Show code

HTML

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

    <o-table :data="data" :sticky-header="stickyHeaders">
        <o-table-column
            v-for="(column, idx) in columns"
            :key="idx"
            v-slot="{ row }"
            v-bind="column">
            {{ row[column.field] }}
        </o-table-column>
    </o-table>
</section>

JS

import { ref } from "vue";

const stickyHeaders = ref(true);

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([
    {
        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,
        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",
    },
]);

SCSS

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

Searchable

Show code

HTML

<section>
    <o-table :data="data">
        <o-table-column
            v-for="(column, idx) in columns"
            :key="idx"
            v-slot="{ row }"
            v-bind="column">
            {{ row[column.field] }}
        </o-table-column>
    </o-table>

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

    <o-table :data="data" :debounce-search="1000">
        <o-table-column
            v-for="(column, idx) in columns"
            :key="idx"
            v-slot="{ row }"
            v-bind="column">
            {{ row[column.field] }}
        </o-table-column>
    </o-table>

    <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="props">
                <o-input
                    v-model="props.filters[props.column.field]"
                    placeholder="Search..."
                    icon="search"
                    size="small" />
            </template>
            <template #default="props">
                {{ props.row[column.field] }}
            </template>
        </o-table-column>
    </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 columns = ref([
    {
        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",
    },
    {
        field: "gender",
        label: "Gender",
    },
]);

css

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"
        draggable
        draggable-column
        @dragstart="dragstart"
        @drop="drop"
        @dragover="dragover"
        @dragleave="dragleave"
        @columndragstart="columndragstart"
        @columndrop="columndrop"
        @columndragover="columndragover"
        @columndragleave="columndragleave">
        <o-table-column
            v-for="(column, idx) in columns"
            :key="idx"
            v-slot="{ row }"
            v-bind="column">
            {{ row[column.field] }}
        </o-table-column>
    </o-table>
</section>

JS

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

const oruga = useOruga();

const draggingRow = ref(null);
const draggingRowIndex = ref(null);
const draggingColumnIndex = ref(null);
const draggingColumn = ref(null);

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

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

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

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

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

function drop(row, index, event) {
    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) {
    draggingColumn.value = column;
    draggingColumnIndex.value = index;
    event.dataTransfer.effectAllowed = "copy";
}

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

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

function columndrop(column, index, event) {
    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}`,
    );
}

css

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	string	left, right	From config: table: {   checkboxPosition: "left" }
checkboxVariant	Color of the checkbox when 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	array	-	[]
columns	Table columns	Column[]	-	Default function (see source code)
currentPage	Current page of table data (if paginated), use v-model:currentPage to make it two-way binding	number	-	1
customDetailRow	Custom style on details	boolean	-	false
customIsChecked	Custom method to verify if row is checked, works when is checkable. Useful for backend pagination	(row: unknown, data: unknown[]) => boolean	-
customRowKey	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: {   customRowKey: undefined }
data	Table data	unknown[]	-	Default function (see source code)
debounceSearch	Filtering debounce time (in milliseconds)	number	-	From config: table: {   debounceSearch: undefined }
defaultSort	Sets the default sort column and order — e.g. ['first_name', 'desc']	string | string[]	-	From config: table: {   defaultSort: undefined }
defaultSortDirection	Sets the default sort column direction on the first click	string	asc, desc	From config: table: {   defaultSortDirection: "asc" }
detailIcon	Icon name of detail action	string	-	From config: table: {   detailIcon: "chevron-right" }
detailKey	Use a unique key of your data Object when use detailed or opened detailed. (id recommended)	string	-	From config: table: {   detailKey: undefined }
detailTransition		string	-	From config: table: {   detailTransition: "slide" }
detailed	Allow row details	boolean	-	false
draggable	Allows rows to be draggable	boolean	-	false
draggableColumn	Allows columns to be draggable	boolean	-	false
filtersEvent	Add a native event to filter	string	-	""
focusable	Table can be focused and user can navigate with keyboard arrows (require selected) and rows are highlighted when hovering	boolean	-	false
hasDetailedVisible	Controls the visibility of the trigger that toggles the detailed rows.	(row: unknown) => boolean	-	From config: table: {   hasDetailedVisible: (row) => true }
headerCheckable	Show check/uncheck all checkbox in table header when checkable	boolean	-	true
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 }
isRowCheckable	Custom method to verify if a row is checkable, works when is checkable	(row: unknown) => boolean	-	From config: table: {   isRowCheckable: (row) => true }
isRowSelectable	Custom method to verify if a row is selectable, works when is selected.	func	-	Default function (see source code)
loading	Enable loading state	boolean	-	false
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	Text when nothing is selected	string	-	From config: table: {   mobileSortPlaceholder: undefined }
narrowed	Makes the cells narrower	boolean	-	From config: table: {   narrowed: false }
openedDetailed	Allow pre-defined opened details. Ideal to open details via vue-router. (A unique key is required; check detail-key prop)	array	-	[]
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	string	centered, right, left	From config: table: {   paginationOrder: undefined }
paginationPosition	Pagination position (if paginated)	string	bottom, top, both	From config: table: {   paginationPosition: "bottom" }
paginationRounded	Rounded pagination 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	-	From config: table: {   paginationSize: "small" }
perPage	How many rows per page (if paginated)	number|string	-	From config: table: {   perPage: 20 }
rowClass	Add a class to row based on the return	(row: unknown, index: number) => string	-	From config: table: {   rowClass: (row,index) => "" }
scrollable	Add a horizontal scrollbar when table is too wide	boolean	-
selected	Set which row is selected, use v-model:selected to make it two-way binding	object	-
showDetailIcon	Allow chevron icon and column to be visible	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 when checkable	boolean	-	false
stickyHeader	Show a sticky table header	boolean	-	false
striped	Whether table is striped	boolean	-	From config: table: {   striped: false }
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 typeof data - row data index number - index of clicked row event Event - native click event	on row double click event
mouseenter	row typeof data - row data index number - index of clicked row event Event - native mouseenter event	on row mouseenter event
mouseleave	row typeof data - row data index number - index of clicked row event Event - native mouseleave event	on row mouseleave event
contextmenu	row typeof data - row data index number - index of clicked row event Event - native contextmenu event	on row right click event
cell-click	row typeof data - row data column Column - 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 typeof data - updated select prop	select prop two-way binding
select	newRow typeof data - new select value oldRow typeof data - old select value	on row select event
check	value Array<typeof data> - all checked rows row typeof data - row data	on row checked event
check-all	value Array<typeof data> - all checked rows	on all rows checked event
update:checkedRows	value Array<typeof data> - updated checkedRows prop	checkedRows prop two-way binding
sort	column Column - column data direction string - 'asc' or 'desc' event Event - native event	on column sort change event
filters-change	filters Record<string, string> - filter object	on filter change event
filters-event	filtersEvent string - props filtersEvent value filters Record<string, string> - filter object event Event - native event	on natvie filter event based on props filtersEvent
update:openedDetailed	value Array<typeof data> - updated openedDetailed prop	openedDetailed prop two-way binding
details-open	row typeof data - row data	on details open event
details-close	row typeof data - row data	on details close event
click	row typeof data - row data index number - index of clicked row event Event - native click event	on row click event
dragstart	row typeof data - row data index number - index of draged row event DragEvent - native dragstart event	on row dragstart event
dragend	row typeof data - row data index number - index of draged row event DragEvent - native dragend event	on row dragend event
drop	row typeof data - row data index number - index of draged row event DragEvent - native drop event	on row drop event
dragleave	row typeof data - row data index number - index of draged row event DragEvent - native dragleave event	on row dragleave event
dragover	row typeof data - row data index number - index of draged row event DragEvent - native dragover event	on row dragover event
columndragstart	column Column - column data index number - index of draged column event DragEvent - native columndragstart event	on column columndragstart event
columndragend	column Column - column data index number - index of draged column event DragEvent - native columndragend event	on column columndragend event
columndrop	column Column - column data index number - index of draged column event DragEvent - native columndrop event	on column columndrop event
columndragleave	column Column - column data index number - index of draged column event DragEvent - native columndragleave event	on column columndragleave event
columndragover	column Column - 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
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 unknown - 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 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 funtion for the filter 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	-
headerSelectable	Make header selectable	boolean	-	false
label	Define the column label	string	-
meta	Add addtional meta information for the column for custom purpose	string|number|boolean|func|object|array	-
numeric	Define column value as number	boolean	-	false
position	Position of the column content	string	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	(row: unknown, column: typeof props) => object	-	Default function (see source code)
thAttrs	Adds native attributes to th	(column: typeof props) => object	-	Default function (see source code)
visible	Define whether the column is visible or not	boolean	-	true
width	Column fixed width	number|string	-

Slots

Name	Description	Bindings
default	Default Slot	row unknown - row data column Column - column definition index number - row index colindex number - column index toggle-details (row): void - toggle details function
header	Override header label	column Column - column definition index number - column index
subheading	Override subheading label	column Column - column definition index number - column index
searchable	Override searchable input	column Column - column definition index number - column index filters Record<string,string> - active filters object

Sass variables

Current theme ➜ Oruga Base

SASS Variable	Default
$table-background-color	#fff
$table-background	#f5f5f5
$table-boder	1px solid transparent
$table-border-radius	$base-border-radius
$table-card-box-shadow	0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($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	$grey
$table-current-sort-font-weight	700
$table-current-sort-hover-border-color	$grey
$table-detail-background	#fafafa
$table-detail-box-shadow	inset 0 1px 3px $grey
$table-detail-chevron-color	$primary
$table-detail-chevron-width	40px
$table-detail-padding	1rem
$table-focus-border-color	$primary
$table-focus-box-shadow	0 0 0 0.125em rgba($primary, 0.25)
$table-hoverable-background-color	#fafafa
$table-narrow-padding	0.25em 0.5em
$table-row-active-background-color	$primary
$table-row-active-color	$primary-invert
$table-sticky-header-height	300px
$table-sticky-zindex	1
$table-striped-background-color	#fafafa
$table-td-border	1px solid $grey-lighter
$table-td-padding	0.5em 0.75em
$table-th-border	2px solid $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 ➜ Oruga Full

SASS Variable	Default
$table-background-color	#fff
$table-background	#f5f5f5
$table-boder	1px solid transparent
$table-border-radius	$base-border-radius
$table-card-box-shadow	0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($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	$grey
$table-current-sort-font-weight	700
$table-current-sort-hover-border-color	$grey
$table-detail-background	#fafafa
$table-detail-box-shadow	inset 0 1px 3px $grey
$table-detail-chevron-color	$primary
$table-detail-chevron-width	40px
$table-detail-padding	1rem
$table-focus-border-color	$primary
$table-focus-box-shadow	0 0 0 0.125em rgba($primary, 0.25)
$table-hoverable-background-color	#fafafa
$table-narrow-padding	0.25em 0.5em
$table-row-active-background-color	$primary
$table-row-active-color	$primary-invert
$table-sticky-header-height	300px
$table-sticky-zindex	1
$table-striped-background-color	#fafafa
$table-td-border	1px solid $grey-lighter
$table-td-padding	0.5em 0.75em
$table-th-border	2px solid $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

The theme does not have any custom variables for this component.

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-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-focus-color	var(--#{$prefix}-info-rgb)
$table-card-spacer	$spacer

See ➜ 📄 Full scss file