Table

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

Base

Show code

<template>
  <o-table :data="data">
    <o-table-column
        v-for="column in columns"
        v-bind="column"
        #default="{ row }">
        {{ row[column.field]}}
    </o-table-column>
  </o-table>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

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

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

    return {
      data,
      columns
    }
  }
})
</script>

Sandbox

Show code

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

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

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

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

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

<script lang="ts">
import { defineComponent, 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',
    },
]

export default defineComponent({
  setup() {
    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 isLoading = ref(false)
    const data = ref(tableData)
    const hasMobileCards = ref(true)

    return {
      data,
      isEmpty,
      isBordered,
      isStriped,
      isNarrowed,
      isHoverable,
      isFocusable,
      isLoading,
      hasMobileCards
    }
  }
})
</script>

Selection

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

Show code

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

    <p>
      {{ selected }}
    </p>

    <o-table
      :data="data"
      v-model:selected="selected"
      focusable
    >
        <o-table-column
            v-for="column in columns"
            v-bind="column"
            #default="{ row }">
            {{ row[column.field]}}
        </o-table-column>
    </o-table>
  </section>
</template>


<script>
import { defineComponent, 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',
      },
]

export default defineComponent({
  setup() {
    const data = ref(tableData)
    const selected = ref(tableData[1])

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

    return {
      data,
      selected,
      columns
    }
  }
})
</script>

Pagination

PaginatedSimple pagination

Show code

<template>
  <section>
    <o-field grouped group-multiline>
      <o-select v-model="defaultSortDirection">
        <option value="asc">Default sort direction: ASC</option>
        <option value="desc">Default sort direction: DESC</option>
      </o-select>
      <o-select v-model="perPage" :disabled="!isPaginated">
        <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-button @click="currentPage = 2" :disabled="!isPaginated"
        >Set page to 2</o-button
      >
      <o-switch v-model="isPaginated">Paginated</o-switch>
      <o-switch v-model="isPaginationSimple" :disabled="!isPaginated"
        >Simple pagination</o-switch
      >
      <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-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-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-table
      :data="data"
      :paginated="isPaginated"
      :per-page="perPage"
      v-model:current-page="currentPage"
      :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
          field="id"
          label="ID"
          width="40"
          sortable
          numeric
          #default="props"
        >
          {{ props.row.id }}
        </o-table-column>

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

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

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

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

    </o-table>
  </section>
</template>

<script lang="ts">
import { defineComponent, 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'
  },
  {
    id: 30,
    user: { first_name: 'Alan', last_name: 'Mendoza' },
    date: '2016/04/22 10:48:02',
    gender: 'Male'
  },
  {
    id: 31,
    user: { first_name: 'James', last_name: 'Davis' },
    date: '2017/01/16 15:17:03',
    gender: 'Male'
  },
  {
    id: 32,
    user: { first_name: 'Scott', last_name: 'Welch' },
    date: '2016/10/04 23:31:51',
    gender: 'Male'
  },
  {
    id: 33,
    user: { first_name: 'Mildred', last_name: 'Myers' },
    date: '2016/11/23 13:46:18',
    gender: 'Female'
  },
  {
    id: 34,
    user: { first_name: 'Victor', last_name: 'Martinez' },
    date: '2016/04/06 17:05:07',
    gender: 'Male'
  },
  {
    id: 35,
    user: { first_name: 'Susan', last_name: 'Medina' },
    date: '2016/12/09 10:33:37',
    gender: 'Female'
  },
  {
    id: 36,
    user: { first_name: 'Judy', last_name: 'Long' },
    date: '2016/07/26 16:19:04',
    gender: 'Female'
  },
  {
    id: 37,
    user: { first_name: 'Joan', last_name: 'Myers' },
    date: '2016/09/22 04:55:54',
    gender: 'Female'
  },
  {
    id: 38,
    user: { first_name: 'Rachel', last_name: 'Gonzales' },
    date: '2016/07/15 13:56:38',
    gender: 'Female'
  },
  {
    id: 39,
    user: { first_name: 'Roger', last_name: 'Hunt' },
    date: '2016/08/14 10:43:11',
    gender: 'Male'
  },
  {
    id: 40,
    user: { first_name: 'Dorothy', last_name: 'Howard' },
    date: '2016/06/19 05:34:49',
    gender: 'Female'
  },
  {
    id: 41,
    user: { first_name: 'Eugene', last_name: 'Lynch' },
    date: '2016/12/24 08:19:24',
    gender: 'Male'
  },
  {
    id: 42,
    user: { first_name: 'Kathy', last_name: 'Webb' },
    date: '2017/04/01 21:09:05',
    gender: 'Female'
  },
  {
    id: 43,
    user: { first_name: 'Antonio', last_name: 'White' },
    date: '2017/02/10 06:51:20',
    gender: 'Male'
  },
  {
    id: 44,
    user: { first_name: 'Louis', last_name: 'Spencer' },
    date: '2016/10/08 02:20:22',
    gender: 'Male'
  },
  {
    id: 45,
    user: { first_name: 'Andrea', last_name: 'Marshall' },
    date: '2016/09/04 10:59:57',
    gender: 'Female'
  },
  {
    id: 46,
    user: { first_name: 'Eugene', last_name: 'Sims' },
    date: '2017/03/15 06:39:48',
    gender: 'Male'
  },
  {
    id: 47,
    user: { first_name: 'Mildred', last_name: 'Gibson' },
    date: '2016/04/18 06:43:54',
    gender: 'Female'
  },
  {
    id: 48,
    user: { first_name: 'Joan', last_name: 'Arnold' },
    date: '2016/12/16 04:52:23',
    gender: 'Female'
  },
  {
    id: 49,
    user: { first_name: 'Jesse', last_name: 'Schmidt' },
    date: '2016/06/11 02:44:33',
    gender: 'Male'
  },
  {
    id: 50,
    user: { first_name: 'David', last_name: 'Frazier' },
    date: '2017/02/15 21:46:30',
    gender: 'Male'
  },
  {
    id: 51,
    user: { first_name: 'Nicholas', last_name: 'Howell' },
    date: '2016/11/01 15:08:31',
    gender: 'Male'
  },
  {
    id: 52,
    user: { first_name: 'Douglas', last_name: 'Chapman' },
    date: '2017/02/08 03:33:24',
    gender: 'Male'
  },
  {
    id: 53,
    user: { first_name: 'Bruce', last_name: 'Simmons' },
    date: '2016/07/14 12:11:17',
    gender: 'Male'
  },
  {
    id: 54,
    user: { first_name: 'Antonio', last_name: 'George' },
    date: '2016/11/07 19:12:55',
    gender: 'Male'
  },
  {
    id: 55,
    user: { first_name: 'Chris', last_name: 'Marshall' },
    date: '2016/07/03 12:11:45',
    gender: 'Male'
  },
  {
    id: 56,
    user: { first_name: 'Ashley', last_name: 'Hudson' },
    date: '2016/10/14 21:08:05',
    gender: 'Female'
  },
  {
    id: 57,
    user: { first_name: 'Alan', last_name: 'Edwards' },
    date: '2017/03/22 21:10:25',
    gender: 'Male'
  },
  {
    id: 58,
    user: { first_name: 'George', last_name: 'Clark' },
    date: '2016/04/28 03:15:05',
    gender: 'Male'
  },
  {
    id: 59,
    user: { first_name: 'Frank', last_name: 'Porter' },
    date: '2016/09/08 00:48:14',
    gender: 'Male'
  },
  {
    id: 60,
    user: { first_name: 'Christopher', last_name: 'Palmer' },
    date: '2016/05/24 08:58:12',
    gender: 'Male'
  }
]

export default defineComponent({
  setup() {
    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(5)
    const data = ref(tableData)

    return {
      data,
      isPaginated,
      isPaginationSimple,
      paginationPosition,
      defaultSortDirection,
      sortIcon,
      sortIconSize,
      currentPage,
      perPage
    }
  }
})
</script>

Async Data

Show code

<template>
  <section>
    <o-table
      :data="data"
      :loading="loading"
      paginated
      backend-pagination
      :total="total"
      :per-page="perPage"
      @page-change="onPageChange"
      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]"
      @sort="onSort"
    >
        <o-table-column
          field="original_title"
          label="Title"
          sortable
          #default="props"
        >
          {{ props.row.original_title }}
        </o-table-column>
        <o-table-column
          field="vote_average"
          label="Vote Average"
          numeric
          sortable
          #default="props"
        >
          <span class="tag" :class="type(props.row.vote_average)">
            {{ props.row.vote_average }}
          </span>
        </o-table-column>
        <o-table-column
          field="vote_count"
          label="Vote Count"
          numeric
          sortable
          #default="props"
        >
          {{ props.row.vote_count }}
        </o-table-column>
        <o-table-column
          field="release_date"
          label="Release Date"
          sortable
          centered
          #default="props"
        >
          {{
            props.row.release_date
              ? new Date(props.row.release_date).toLocaleDateString()
              : 'unknown'
          }}
        </o-table-column>
        <o-table-column label="Overview" width="500" #default="props">
          {{ props.row.overview }}
        </o-table-column>
    </o-table>
  </section>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'

export default defineComponent({
    setup() {
        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 > 1000) {
                        currentTotal = perPage.value * 1000
                    }
                    total.value = currentTotal;
                    data.value = result.results.map((item) => {
                        item.release_date = item.release_date
                            ? item.release_date.replace(/-/g, '/') : null;
                        return item
                    });
                    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()
        })

        return {
            data, total, loading,
            sortField, sortOrder, defaultSortOrder,
            page, perPage,
            loadAsyncData, onPageChange, onSort, type
        }
    }
})
</script>

Checkable

Show code

<template>
  <section>
    <o-field grouped group-multiline>
      <o-button
        variant="danger"
        @click="checkedRows = []"
        :disabled="!checkedRows.length"
        icon-left="times"
      >
        <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
      :data="data"
      v-model:checked-rows="checkedRows"
      :is-row-checkable="(row) => row.id !== 3 && row.id !== 4"
      checkable
      :checkbox-position="checkboxPosition"
    >
      <o-table-column
        v-for="column in columns"
        v-bind="column"
        #default="{ row }">
        {{ row[column.field]}}
      </o-table-column>
      <template #bottom-left>
        <b>Total checked</b>: {{ checkedRows.length }}
      </template>
    </o-table>
  </section>
</template>

<script lang="ts">
import { defineComponent, 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',
      },
]

export default defineComponent({
  setup() {
    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'
      }
    ])

    return {
      data,
      checkboxPosition,
      checkedRows,
      columns
    }
  }
})
</script>

Sticky

Sticky Headers

Show code

<template>
  <section>
    <o-field grouped group-multiline>
      <div class="control">
        <o-switch v-model="stickyHeaders">Sticky Headers</o-switch>
      </div>
    </o-field>
    <o-table
      :data="data"
      :sticky-header="stickyHeaders"
    >
        <o-table-column
            v-for="column in columns"
            v-bind="column"
            #default="{ row }">
            {{ row[column.field]}}
        </o-table-column>
    </o-table>
  </section>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    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'
      }
    ])

    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'
      }
    ])

    const stickyHeaders = ref(true)

    return {
      data,
      columns,
      stickyHeaders
    }
  }
})
</script>

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

Detailed



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

Show code

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

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

        <o-table-column
            :visible="columnsVisible['cleared'].display"
            :label="columnsVisible['cleared'].title"
            position="centered"
            v-slot:default="props"
        >
            <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>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
    setup() {
        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.toggleDetails(row);
        }

        return {
            data, columnsVisible, showDetailIcon, showDefaultDetail,
            toggle
        }
    }
})
</script>

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

<template>
  <section>
    <o-table :data="data">
        <o-table-column
            v-for="column in columns"
            v-bind="column"
            #default="{ row }">
            {{ row[column.field]}}
        </o-table-column>
    </o-table>
    <hr />
    <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 in columns"
            v-bind="column"
            #default="{ row }">
            {{ 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 in columns"
            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>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    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'
      }
    ])

    return {
      data,
      columns
    }
  }
})
</script>

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

<template>
  <div>
    <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 in columns"
            v-bind="column"
            #default="{ row }">
            {{ row[column.field]}}
        </o-table-column>
    </o-table>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {

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

    return {
      data,
      columns,
      draggingRow,
      draggingRowIndex,
      draggingColumn,
      draggingColumnIndex,
      dragstart,
      dragover,
      dragleave,
      drop,
      columndragstart,
      columndragover,
      columndragleave,
      columndrop
    }
  }
})
</script>

Class props

This is the footer

How does 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`
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.

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), checked rows will have a .is-checked class if you want to style	boolean	-
checkboxPosition	Position of the checkbox (if checkable is true)	string	`left`, `right`	'left'
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	-
paginationPosition	Pagination position (if paginated)	string	`bottom`, `top`, `bot`	From config `table: { paginationPosition: 'bottom' }`
paginationRounded	Rounded pagination if paginated	boolean	-
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
detail
empty
footer
loading
bottom-left

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	-

Style

📄 Full scss file

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

Table #

Base

Sandbox

Selection

Pagination

Async Data

Checkable

Sticky

Detailed

Searchable

Draggable rows/columns

Class props #

Class prop

Description

Props

Suffixes

Props #

Events #

Slots #

Table Column #

Props #

Style #

Table

Class props

Props

Events

Slots

Table Column

Props

Style