Table

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

Examples

Base

ID	First Name	Last Name	Date	Gender
1	Jesse	Simmons	10/15/2016	Male
2	John	Jacobs	12/15/2016	Male
3	Tina	Gilbert	4/26/2016	Female
4	Clarence	Flores	4/10/2016	Male
5	Anne	Lee	12/6/2016	Female

Show code

Customise

ID	First Name	Last Name	Date	Gender
1	Jesse	Simmons	10/15/2016	Male
2	John	Jacobs	12/15/2016	Male
3	Tina	Gilbert	4/26/2016	Female
4	Clarence	Flores	4/10/2016	Male
5	Anne	Lee	12/6/2016	Female
Custom Footer

Show code

HTMLJS

html

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

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

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

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

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

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

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

javascript

import { ref } from "vue";

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

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

Selection

Selection: { "id": 3, "first_name": "Tina", "last_name": "Gilbert", "date": "2016-04-26 06:26:28", "gender": "Female" }

ID	First Name	Last Name	Date	Gender
1	Jesse	Simmons	10/15/2016	Male
2	John	Jacobs	12/15/2016	Male
3	Tina	Gilbert	4/26/2016	Female
4	Clarence	Flores	4/10/2016	Male
5	Anne	Lee	12/6/2016	Female

Show code

Checkable

ID	First Name	Last Name	Date	Gender
1	Jesse	Simmons	2016-10-15 13:43:27	Male
2	John	Jacobs	2016-12-15 06:00:53	Male
3	Tina	Gilbert	2016-04-26 06:26:28	Female
4	Clarence	Flores	2016-04-10 10:28:46	Male
5	Anne	Lee	2016-12-06 14:38:38	Female

Total checked: 2

Show code

HTMLJS

html

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

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

javascript

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

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

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

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

Detailed

Name	Stock Sold	Stock Available	Stock Cleared
Board Games	131	301	44%

Monopoly	57	100	57%
Scrabble	23	84	27%
Chess	37	61	61%
Battleships	14	56	25%
Books	434	721	60%
Jigsaws & Puzzles	88	167	53%

Show code

HTMLJS

html

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

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

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

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

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

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

        <template #detail="{ row }">
            <tr v-for="item in row.items" :key="item.name">
                <td v-if="showDetailIcon"></td>
                <td v-show="columnsVisible['name'].display">
                    {{ item.name }}
                </td>
                <td v-show="columnsVisible['sold'].display">
                    {{ item.sold }}
                </td>
                <td v-show="columnsVisible['available'].display">
                    {{ item.available }}
                </td>
                <td v-show="columnsVisible['cleared'].display">
                    <span>
                        {{
                            Math.round((item.sold / item.available) * 100)
                        }}%
                    </span>
                </td>
            </tr>
        </template>
    </o-table>
</section>

javascript

import { ref } from "vue";

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

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

Pagination

Paginated

Simple pagination

Page: 1

ID	First Name	Last Name	Date	Gender
20	Albert	Mendoza	8/8/2016	Male
8	Andrew	Greene	11/20/2016	Male
5	Anne	Lee	12/6/2016	Female

Show code

HTMLJS

html

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

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

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

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

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

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

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

javascript

import { ref } from "vue";

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

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

Async Data

Title	Vote Average	Vote Count	Release Date	Overview

Show code

HTMLJS

html

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

javascript

import { ref, onMounted } from "vue";

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

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

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

/*
 * Handle page-change event
 */
const onPageChange = (p) => {
    page.value = p;
    loadAsyncData();
};

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

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

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

Sticky

Sticky Headers

ID	First Name	Last Name	Date	Gender	Column A	Column B	Column C	Column D	Column E	Column F	Column G	Column H	Column I	Column L	Column M	Column N	Column O
1	Jesse	Simmons	10/15/2016	Male	1	1	1	1	1	1	1	1	1	1	1	1	1
2	John	Jacobs	12/15/2016	Male	2	2	2	2	2	2	2	2	2	2	2	2	2
3	Tina	Gilbert	4/26/2016	Female	3	3	3	3	3	3	3	3	3	3	3	3	3
4	Clarence	Flores	4/10/2016	Male	4	4	4	4	4	4	4	4	4	4	4	4	4
5	Anne	Lee	12/6/2016	Female	5	5	5	5	5	5	5	5	5	5	5	5	5

Show code

HTMLJSSCSS

html

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

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

javascript

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

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

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

const stickyHeaders = ref(true);

scss

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

Searchable

ID	First Name	Last Name	Date	Gender

1	Jesse	Simmons	10/15/2016	Male
2	John	Jacobs	12/15/2016	Male
3	Tina	Gilbert	4/26/2016	Female
4	Clarence	Flores	4/10/2016	Male
5	Anne	Lee	12/6/2016	Female

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

ID	First Name	Last Name	Date	Gender

1	Jesse	Simmons	10/15/2016	Male
2	John	Jacobs	12/15/2016	Male
3	Tina	Gilbert	4/26/2016	Female
4	Clarence	Flores	4/10/2016	Male
5	Anne	Lee	12/6/2016	Female

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

ID	First Name	Last Name	Date	Gender

1	Jesse	Simmons	2016-10-15 13:43:27	Male
2	John	Jacobs	2016-12-15 06:00:53	Male
3	Tina	Gilbert	2016-04-26 06:26:28	Female
4	Clarence	Flores	2016-04-10 10:28:46	Male
5	Anne	Lee	2016-12-06 14:38:38	Female

Show code

HTMLJS

html

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

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

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

    <p>You can also customize the search input using a scoped slot.</p>

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

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

javascript

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

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

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

Draggable rows/columns

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

ID	First Name	Last Name	Date	Gender
1	Jesse	Simmons	2016-10-15 13:43:27	Male
2	John	Jacobs	2016-12-15 06:00:53	Male
3	Tina	Gilbert	2016-04-26 06:26:28	Female
4	Clarence	Flores	2016-04-10 10:28:46	Male
5	Anne	Lee	2016-12-06 14:38:38	Female

Show code

HTMLJSSCSS

html

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

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

javascript

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

const oruga = useOruga();

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

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

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

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

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

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

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

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

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

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

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

scss

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

Class props

	ID	First Name	Last Name	Date	Gender	Column A	Column B	Column C	Column D	Column E	Column F

	1	Jesse	Simmons	2016-10-15 13:43:27	Male	1	1	1	1	1	1
	2	John	Jacobs	2016-12-15 06:00:53	Male	2	2	2	2	2	2
	3	Tina	Gilbert	2016-04-26 06:26:28	Female	3	3	3	3	3	3
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 it 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`
thSubheadingClass	Class of the Table `th` subheading element.	`subheading`
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

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

html

<o-table></o-table>

Props

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

Events

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

Slots

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

TableColumn component

html

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

Props

Prop name	Description	Type	Values	Default
customSearch	Define a custom filter funtion for the search	((row: unknown, filter: string) => boolean)	-
customSort	Define a custom sort function	((a: unknown, b: unknown, isAsc: boolean) => number)	-
field	Define an object property key if data is an object	string	-
formatter	Provide a formatter function to edit the output	((value: unknown, row: unknown) => string)	-
headerSelectable	Make header selectable	boolean	-	`false`
label	Define the column label	string	-
numeric	Define column value as number	boolean	-	`false`
position	Position of the column content	"centered" \| "left" \| "right"	`left`, `centered`, `right`
searchable	Enable an additional searchbar below the column header	boolean	-	`false`
sortable	Enable column sortability	boolean	-	`false`
sticky	Whether the column is sticky or not	boolean	-	`false`
subheading	Define a column sub heading	string	-
tdAttrs	Adds native attributes to td	object	-
thAttrs	Adds native attributes to th	object	-
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 `T` - row data column `TableColumn` - column definition index `number` - row index colindex `number` - column index toggle-details `(): void` - toggle details function
header	Override header label	column `TableColumn` - column definition index `number` - column index
subheading	Override subheading label	column `TableColumn` - column definition index `number` - column index
searchable	Override searchable input	column `TableColumn` - column definition index `number` - column index filters `object` - active filters object

Sass variables

Current theme ➜ Oruga

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

See ➜ 📄 Full scss file

Current theme ➜ Bulma

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

See ➜ 📄 Full scss file

Current theme ➜ Bootstrap

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

See ➜ 📄 Full scss file

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 ​

Slots ​

Sass variables ​

Table

Examples

Class props

Table component

Props

Events

Slots

TableColumn component

Props

Slots

Sass variables