Table

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

Examples

Base

Show code

Customise

Show code

HTMLJS

html

<section>
    <o-field grouped group-multiline>
        <o-switch v-model="isBordered">Bordered</o-switch>
        <o-switch v-model="isStriped">Striped</o-switch>
        <o-switch v-model="isNarrowed">Narrowed</o-switch>
        <o-switch v-model="isHoverable">Hoverable</o-switch>
        <o-switch v-model="isFocusable">Focusable</o-switch>
        <o-switch v-model="isCheckbale">Checkable</o-switch>
        <o-switch v-model="isLoading">Loading state</o-switch>
        <o-switch v-model="isEmpty">Empty</o-switch>
        <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">
            <span>
                <o-icon
                    pack="fas"
                    :icon="
                        props.row.gender === 'Male' ? 'mars' : 'venus'
                    " />

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

html

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

scss

css

Selection

Selection: { "id": 2, "first_name": "John", "last_name": "Jacobs", "date": "2016-12-15 06:00:53", "gender": "Male" }

Show code

Checkable

Show code

HTMLJS

html

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

html

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

scss

css

Detailed



Monopoly	57	100	57%
Scrabble	23	84	27%
Chess	37	61	61%
Battleships	14	56	25%

Show code

HTMLJS

html

<section>
    <o-field grouped group-multiline>
        <o-checkbox v-model="showDetailIcon">
            Show detail chevron
        </o-checkbox>
        <o-checkbox v-model="showDefaultDetail">
            Custom detail column
        </o-checkbox>
        <div v-for="(column, index) in columnsVisible" :key="index">
            <o-checkbox v-model="column.display">
                {{ column.title }}
            </o-checkbox>
        </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>

html

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

scss

css

Pagination

Paginated

Simple pagination

Page: 1

Show code

HTMLJS

html

<section>
    <o-field grouped group-multiline>
        <o-field>
            <o-switch v-model="isPaginated">Paginated</o-switch>
        </o-field>
        <o-field>
            <o-switch v-model="isPaginationSimple" :disabled="!isPaginated">
                Simple pagination
            </o-switch>
        </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"
                @click="currentPage = 2">
                Set page to 2
            </o-button>
        </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"
        aria-next-label="Next page"
        aria-previous-label="Previous page"
        aria-page-label="Page"
        aria-current-label="Current page">
        <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">
            <span>
                <o-icon
                    pack="fas"
                    :icon="
                        props.row.gender === 'Male' ? 'mars' : 'venus'
                    " />

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

html

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

scss

css

Async Data

Show code

HTMLJS

html

<section>
    <o-table
        :data="data"
        :loading="loading"
        paginated
        backend-pagination
        :total="total"
        :per-page="perPage"
        aria-next-label="Next page"
        aria-previous-label="Previous page"
        aria-page-label="Page"
        aria-current-label="Current page"
        backend-sorting
        :default-sort-direction="defaultSortOrder"
        :default-sort="[sortField, sortOrder]"
        @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>

html

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 = (field, order) => {
    sortField.value = 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();
});

scss

css

Sticky

Sticky Headers

Show code

HTMLJSSCSS

html

<section class="overflow">
    <o-field grouped>
        <o-switch v-model="stickyHeaders">Sticky Headers</o-switch>
    </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>

html

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

You can debounce search filter to avoid multiple filtering when typing.

You can also customize the search input using a scoped slot.

Show code

HTMLJS

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>

html

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

scss

css

Draggable rows/columns

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

Show code

HTMLJS

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>

html

import { ref } from "vue";

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(payload) {
    draggingRow.value = payload.row;
    draggingRowIndex.value = payload.index;
    payload.event.dataTransfer.effectAllowed = "copy";
}

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

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

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

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

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

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

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

scss

css

Class props

This is the footer

How does the Class props inspector work?

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

Table component

html

<o-table></o-table>

Props

Prop name	Description	Type	Values	Default
ariaCurrentLabel		string	-
ariaNextLabel		string	-
ariaPageLabel		string	-
ariaPreviousLabel		string	-
backendFiltering	Columns won't be filtered with Javascript, use with searchable prop to the columns to filter in your backend	boolean	-
backendPagination	Rows won't be paginated with Javascript, use with page-change event to paginate in your backend	boolean	-
backendSorting	Columns won't be sorted with Javascript, use with sort event to sort in your backend	boolean	-
bordered	Border to all cells	boolean	-
checkable	Rows can be checked (multiple)	boolean	-
checkboxPosition	Position of the checkbox (if checkable is true)	string	`left`, `right`	'left'
checkboxVariant	Color of the checkbox when checkable, optional	string	`primary`, `info`, `success`, `warning`, `danger`, `and any other custom color`	undefined
checkedRows	Set which rows are checked, use v-model:checkedRows to make it two-way binding	array	-	[]
columns	Table columns	array	-	[]
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	func	-
customRowKey	Use a unique key of your data Object for each row. Useful if your data prop has dynamic indices. (id recommended)	string	-
data	Table data	array	-	[]
debounceSearch	Filtering debounce time (in milliseconds)	number	-
defaultSort	Sets the default sort column and order — e.g. ['first_name', 'desc']	string\|array	-
defaultSortDirection	Sets the default sort column direction on the first click	string	`asc`, `desc`	'asc'
detailIcon	Icon name of detail action	string	-	'chevron-right'
detailKey	Use a unique key of your data Object when use detailed or opened detailed. (id recommended)	string	-	''
detailTransition		string	-	''
detailed	Allow row details	boolean	-
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	-
hasDetailedVisible	Controls the visibility of the trigger that toggles the detailed rows.	func	-	Default function (see source code)
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	-
iconPack	Icon pack to use	string	-
isRowCheckable	Custom method to verify if a row is checkable, works when is checkable	func	-	Default function (see source code)
isRowSelectable	Custom method to verify if a row is selectable, works when is selected.	func	-	Default function (see source code)
loading	Loading state	boolean	-
mobileBreakpoint	Mobile breakpoint as max-width value	string	-
mobileCards	Rows appears as cards on mobile (collapse rows)	boolean	-	From config: `table: { mobileCards: true }`
mobileSortPlaceholder	Text when nothing is selected	string	-
narrowed	Makes the cells narrower	boolean	-
openedDetailed	Allow pre-defined opened details. Ideal to open details via vue-router. (A unique key is required; check detail-key prop)	array	-	[]
override		boolean	-
paginated	Adds pagination to the table	boolean	-
paginationOrder	Pagination buttons order if paginated	string	-
paginationPosition	Pagination position (if paginated)	string	`bottom`, `top`, `bot`	From config: `table: { paginationPosition: 'bottom' }`
paginationRounded	Rounded pagination if paginated	boolean	-
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	func	-	Default function (see source code)
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	-	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	-
striped	Whether table is striped	boolean	-
total	Total number of table data if backend-pagination is enabled	number\|string	-	0

Events

Event name	Properties	Description
page-change
dblclick
contextmenu
cell-click
click	row `Object` - clicked row index `number` - index of clicked row
check	newCheckedRows `Array<Object>` - checked rows
check-all
update:checkedRows
select	row `Object` - selected row selected `Array<Object>` - selected rows
update:selected
filters-change
details-open
details-close
update:openedDetailed
mouseenter
mouseleave
sort	field `string` - column field direction `boolean` - 'asc' or 'desc' event `Event` - native event
sorting-priority-removed
dragstart
dragend
drop
dragleave
dragover
columndragstart
columndragend
columndrop
columndragleave
columndragover
update:currentPage

Slots

Name	Description	Bindings
default
pagination
top-left
caption
preheader
detail
empty
footer
loading
bottom-left

TableColumn component

html

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

Props

Prop name	Description	Type	Values	Default
customKey		string\|number	-
customSearch		func	-
customSort		func	-
field		string	-
headerSelectable		boolean	-
label		string	-
meta		string\|number\|boolean\|func\|object\|array	-
numeric		boolean	-
position	Optional, position of column content	string	`left`, `centered`, `right`
searchable		boolean	-
sortable		boolean	-
sticky		boolean	-
subheading		string	-
tdAttrs	Adds native attributes to td :td-attrs="(row, column)" => ({})"	func	-	Default function (see source code)
thAttrs	Adds native attributes to th :th-attrs="(column)" => ({})"	func	-	Default function (see source code)
visible		boolean	-	true
width		number\|string	-

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

Table ​

Examples ​

Base

Customise

Selection

Checkable

Detailed

Pagination

Async Data

Sticky

Searchable

Draggable rows/columns

Class props ​

Class prop

Description

Props

Suffixes

Table component ​

Props ​

Events ​

Slots ​

TableColumn component ​

Props ​

Sass variables ​

Table

Examples

Class props

Table component

Props

Events

Slots

TableColumn component

Props

Sass variables