# 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	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

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

<script>
  export default {
    data() {
      return {
        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'
          }
        ],
        columns: [
          {
            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'
          }
        ]
      }
    }
  }
</script>

# Sandbox

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

<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="props">
        {{ props.row.id }}
      </o-table-column>

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

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

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

      <o-table-column label="Gender" v-slot="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>
  export default {
    data() {
      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'
        }
      ]

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

# Selection

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

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

<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" :columns="columns" :selected.sync="selected" focusable> </o-table>
  </section>
</template>

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

      return {
        data,
        selected: data[1],
        columns: [
          {
            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'
          }
        ]
      }
    }
  }
</script>

# Pagination

Paginated Simple pagination

ID	First Name	Last Name	Date	Gender
30	Alan	Mendoza	4/22/2016	Male
57	Alan	Edwards	3/22/2017	Male
20	Albert	Mendoza	8/8/2016	Male
45	Andrea	Marshall	9/4/2016	Female
8	Andrew	Greene	11/20/2016	Male

<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"
      :current-page.sync="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 v-slot="props">
        {{ props.row.id }}
      </o-table-column>

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

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

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

      <o-table-column label="Gender" v-slot="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>
  const data = [
    {
      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 {
    data() {
      return {
        data,
        isPaginated: true,
        isPaginationSimple: false,
        paginationPosition: 'bottom',
        defaultSortDirection: 'asc',
        sortIcon: 'arrow-up',
        sortIconSize: 'small',
        currentPage: 1,
        perPage: 5
      }
    }
  }
</script>

# Async Data

Title	Vote Average	Vote Count	Release Date	Overview
Inception	8.368	37339	7/15/2010	Cobb, a skilled thief who commits corporate espionage by infiltrating the subconscious of his targets is offered a chance to regain his old life as payment for a task considered to be impossible: "inception", the implantation of another person's idea into a target's subconscious.
Interstellar	8.453	36941	11/5/2014	The adventures of a group of explorers who make use of a newly discovered wormhole to surpass the limitations on human space travel and conquer the vast distances involved in an interstellar voyage.
The Dark Knight	8.519	33711	7/16/2008	Batman raises the stakes in his war on crime. With the help of Lt. Jim Gordon and District Attorney Harvey Dent, Batman sets out to dismantle the remaining criminal organizations that plague the streets. The partnership proves to be effective, but they soon find themselves prey to a reign of chaos unleashed by a rising criminal mastermind known to the terrified citizens of Gotham as the Joker.
Avatar	7.588	32142	12/15/2009	In the 22nd century, a paraplegic Marine is dispatched to the moon Pandora on a unique mission, but becomes torn between following orders and protecting an alien civilization.
The Avengers	7.737	31560	4/25/2012	When an unexpected enemy emerges and threatens global safety and security, Nick Fury, director of the international peacekeeping agency known as S.H.I.E.L.D., finds himself in need of a team to pull the world back from the brink of disaster. Spanning the globe, a daring recruitment effort begins!
Deadpool	7.622	31512	2/9/2016	The origin story of former Special Forces operative turned mercenary Wade Wilson, who, after being subjected to a rogue experiment that leaves him with accelerated healing powers, adopts the alter ego Deadpool. Armed with his new abilities and a dark, twisted sense of humor, Deadpool hunts down the man who nearly destroyed his life.
Avengers: Infinity War	8.2	30407	4/25/2018	As the Avengers and their allies have continued to protect the world from threats too large for any one hero to handle, a new danger has emerged from the cosmic shadows: Thanos. A despot of intergalactic infamy, his goal is to collect all six Infinity Stones, artifacts of unimaginable power, and use them to inflict his twisted will on all of reality. Everything the Avengers have fought for has led up to this moment - the fate of Earth and existence itself has never been more uncertain.
Fight Club	8.438	30149	10/15/1999	A ticking-time-bomb insomniac and a slippery soap salesman channel primal male aggression into a shocking new form of therapy. Their concept catches on, with underground "fight clubs" forming in every town, until an eccentric gets in the way and ignites an out-of-control spiral toward oblivion.
Pulp Fiction	8.49	28560	9/10/1994	A burger-loving hit man, his philosophical partner, a drug-addled gangster's moll and a washed-up boxer converge in this sprawling, comedic crime caper. Their adventures unfurl in three stories that ingeniously trip back and forth in time.
Guardians of the Galaxy	7.904	28439	7/30/2014	Light years from Earth, 26 years after being abducted, Peter Quill finds himself the prime target of a manhunt after discovering an orb wanted by Ronan the Accuser.
The Shawshank Redemption	8.7	28128	9/23/1994	Imprisoned in the 1940s for the double murder of his wife and her lover, upstanding banker Andy Dufresne begins a new life at the Shawshank prison, where he puts his accounting skills to work for an amoral warden. During his long stretch in prison, Dufresne comes to be admired by the other inmates -- including an older prisoner named Red -- for his integrity and unquenchable sense of hope.
Harry Potter and the Philosopher's Stone	7.902	28103	11/16/2001	Harry Potter has lived under the stairs at his aunt and uncle's house his whole life. But on his 11th birthday, he learns he's a powerful wizard—with a place waiting for him at the Hogwarts School of Witchcraft and Wizardry. As he learns to harness his newfound powers with the help of the school's kindly headmaster, Harry uncovers the truth about his parents' deaths—and about the villain who's to blame.
Forrest Gump	8.468	28094	6/23/1994	A man with a low IQ has accomplished great things in his life and been present during significant historic events—in each case, far exceeding what anyone imagined he could do. But despite all he has achieved, his one true love eludes him.
Iron Man	7.65	26876	4/30/2008	After being held captive in an Afghan cave, billionaire engineer Tony Stark creates a unique weaponized suit of armor to fight evil.
Django Unchained	8.183	26671	12/25/2012	With the help of a German bounty hunter, a freed slave sets out to rescue his wife from a brutal Mississippi plantation owner.
Joker	8.139	26340	10/1/2019	During the 1980s, a failed stand-up comedian is driven insane and turns to a life of crime and chaos in Gotham City while becoming an infamous psychopathic crime figure.
The Matrix	8.224	26263	3/31/1999	Set in the 22nd century, The Matrix tells the story of a computer hacker who joins a group of underground insurgents fighting the vast and powerful computers who now rule the earth.
Avengers: Endgame	8.237	26230	4/24/2019	After the devastating events of Avengers: Infinity War, the universe is in ruins due to the efforts of the Mad Titan, Thanos. With the help of remaining allies, the Avengers must assemble once more in order to undo Thanos' actions and restore order to the universe once and for all, no matter what consequences may be in store.
Titanic	7.906	25885	11/18/1997	101-year-old Rose DeWitt Bukater tells the story of her life aboard the Titanic, 84 years later. A young Rose boards the ship with her mother and fiancé. Meanwhile, Jack Dawson and Fabrizio De Rossi win third-class tickets aboard the ship. Rose tells the whole story from Titanic's departure through to its death—on its first and last voyage—on April 15, 1912.
The Lord of the Rings: The Fellowship of the Ring	8.419	25867	12/18/2001	Young hobbit Frodo Baggins, after inheriting a mysterious ring from his uncle Bilbo, must leave his home in order to keep it from falling into the hands of its evil creator. Along the way, a fellowship is formed to protect the ringbearer and make sure that the ring arrives at its final destination: Mt. Doom, the only place where it can be destroyed.

<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 v-slot="props">
        {{ props.row.original_title }}
      </o-table-column>
      <o-table-column field="vote_average" label="Vote Average" numeric sortable v-slot="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 v-slot="props">
        {{ props.row.vote_count }}
      </o-table-column>
      <o-table-column field="release_date" label="Release Date" sortable centered v-slot="props">
        {{ props.row.release_date ? new Date(props.row.release_date).toLocaleDateString() : 'unknown' }}
      </o-table-column>
      <o-table-column label="Overview" width="500" v-slot="props">
        {{ props.row.overview }}
      </o-table-column>
    </o-table>
  </section>
</template>
<script>
  export default {
    data() {
      return {
        data: [],
        total: 0,
        loading: false,
        sortField: 'vote_count',
        sortOrder: 'desc',
        defaultSortOrder: 'desc',
        page: 1,
        perPage: 20
      }
    },
    methods: {
      /*
       * Load async data
       */
      loadAsyncData() {
        const params = [
          'api_key=bb6f51bef07465653c3e553d6ab161a8',
          'language=en-US',
          'include_adult=false',
          'include_video=false',
          `sort_by=${this.sortField}.${this.sortOrder}`,
          `page=${this.page}`
        ].join('&')
        this.loading = true
        fetch(`https://api.themoviedb.org/3/discover/movie?${params}`)
          .then(response => response.json())
          .then(data => {
            // api.themoviedb.org manage max 1000 pages
            this.data = []
            let currentTotal = data.total_results
            if (data.total_results / this.perPage > 1000) {
              currentTotal = this.perPage * 1000
            }
            this.total = currentTotal
            data.results.forEach(item => {
              item.release_date = item.release_date ? item.release_date.replace(/-/g, '/') : null
              this.data.push(item)
            })
            this.loading = false
          })
          .catch(error => {
            this.data = []
            this.total = 0
            this.loading = false
            throw error
          })
      },
      /*
       * Handle page-change event
       */
      onPageChange(page) {
        this.page = page
        this.loadAsyncData()
      },
      /*
       * Handle sort event
       */
      onSort(field, order) {
        this.sortField = field
        this.sortOrder = order
        this.loadAsyncData()
      },
      /*
       * Type style in relation to the value
       */
      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'
        }
      }
    },
    mounted() {
      this.loadAsyncData()
    }
  }
</script>

# 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

<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"
      :columns="columns"
      :checked-rows.sync="checkedRows"
      :is-row-checkable="(row) => row.id !== 3 && row.id !== 4"
      checkable
      :checkbox-position="checkboxPosition"
    >
      <template slot="bottom-left"> <b>Total checked</b>: {{ checkedRows.length }} </template>
    </o-table>
  </section>
</template>

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

      return {
        data,
        checkboxPosition: 'left',
        checkedRows: [data[1], data[3]],
        columns: [
          {
            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'
          }
        ]
      }
    }
  }
</script>

# 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	2016/10/15 13:43:27	Male	1	1	1	1	1	1	1	1	1	1	1	1	1
2	John	Jacobs	2016/12/15 06:00:53	Male	2	2	2	2	2	2	2	2	2	2	2	2	2
3	Tina	Gilbert	2016/04/26 06:26:28	Female	3	3	3	3	3	3	3	3	3	3	3	3	3
4	Clarence	Flores	2016/04/10 10:28:46	Male	4	4	4	4	4	4	4	4	4	4	4	4	4
5	Anne	Lee	2016/12/06 14:38:38	Female	5	5	5	5	5	5	5	5	5	5	5	5	5
6	Sara	Armstrong	2016/09/23 18:50:04	Female	6	6	6	6	6	6	6	6	6	6	6	6	6
7	Anthony	Webb	2016/08/30 23:49:38	Male	7	7	7	7	7	7	7	7	7	7	7	7	7
8	Andrew	Greene	2016/11/20 14:57:47	Male	8	8	8	8	8	8	8	8	8	8	8	8	8
9	Russell	White	2016/07/13 09:29:49	Male	9	9	9	9	9	9	9	9	9	9	9	9	9
10	Lori	Hunter	2016/12/09 01:44:05	Female	10	10	10	10	10	10	10	10	10	10	10	10	10

<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" :columns="columns" :sticky-header="stickyHeaders"></o-table>
  </section>
</template>

<script>
  export default {
    data() {
      return {
        data: [
          {
            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'
          }
        ],
        columns: [
          {
            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'
          }
        ],
        stickyHeaders: true
      }
    }
  }
</script>

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

# 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%

<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="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="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="props">
        {{ props.row.available }}
      </o-table-column>

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

      <template slot="detail" slot-scope="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>
  export default {
    data() {
      return {
        data: [
          {
            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
              }
            ]
          }
        ],
        columnsVisible: {
          name: { title: 'Name', display: true },
          sold: { title: 'Stock Sold', display: true },
          available: { title: 'Stock Available', display: true },
          cleared: { title: 'Stock Cleared', display: true }
        },
        showDetailIcon: true,
        showDefaultDetail: true
      }
    },
    methods: {
      toggle(row) {
        this.$refs.table.toggleDetails(row)
      }
    }
  }
</script>

# Searchable

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

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

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

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

<template>
  <section>
    <o-table :data="data" :columns="columns"> </o-table>
    <hr />
    <p>
      You can debounce search filter to avoid multiple filtering when typing.
    </p>
    <o-table :data="data" :columns="columns" :debounce-search="1000"> </o-table>
    <p>You can also customize the search input using a scoped slot.</p>
    <o-table :data="data">
      <template v-for="column in columns">
        <o-table-column :key="column.id" v-bind="column">
          <template v-if="column.searchable && !column.numeric" slot="searchable" slot-scope="props">
            <o-input v-model="props.filters[props.column.field]" placeholder="Search..." icon="search" size="small" />
          </template>
          <template v-slot="props">
            {{ props.row[column.field] }}
          </template>
        </o-table-column>
      </template>
    </o-table>
  </section>
</template>

<script>
  export default {
    data() {
      return {
        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'
          }
        ],
        columns: [
          {
            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'
          }
        ]
      }
    }
  }
</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

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

<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"
      :columns="columns"
      draggable
      draggable-column
      @dragstart="dragstart"
      @drop="drop"
      @dragover="dragover"
      @dragleave="dragleave"
      @columndragstart="columndragstart"
      @columndrop="columndrop"
      @columndragover="columndragover"
      @columndragleave="columndragleave"
    >
    </o-table>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        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' }
        ],
        columns: [
          {
            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'
          }
        ],
        draggingRow: null,
        draggingRowIndex: null,
        draggingColumn: null,
        draggingColumnIndex: null
      }
    },
    methods: {
      dragstart(payload) {
        this.draggingRow = payload.row
        this.draggingRowIndex = payload.index
        payload.event.dataTransfer.effectAllowed = 'copy'
      },
      dragover(payload) {
        payload.event.dataTransfer.dropEffect = 'copy'
        payload.event.target.closest('tr').classList.add('is-selected')
        payload.event.preventDefault()
      },
      dragleave(payload) {
        payload.event.target.closest('tr').classList.remove('is-selected')
        payload.event.preventDefault()
      },
      drop(payload) {
        payload.event.target.closest('tr').classList.remove('is-selected')
        const droppedOnRowIndex = payload.index
        this.$oruga.notification.open(`Moved ${this.draggingRow.first_name} from row ${this.draggingRowIndex + 1} to ${droppedOnRowIndex + 1}`)
      },

      columndragstart(payload) {
        this.draggingColumn = payload.column
        this.draggingColumnIndex = payload.index
        payload.event.dataTransfer.effectAllowed = 'copy'
      },
      columndragover(payload) {
        payload.event.dataTransfer.dropEffect = 'copy'
        payload.event.target.closest('th').classList.add('is-selected')
        payload.event.preventDefault()
      },
      columndragleave(payload) {
        payload.event.target.closest('th').classList.remove('is-selected')
        payload.event.preventDefault()
      },
      columndrop(payload) {
        payload.event.target.closest('th').classList.remove('is-selected')
        const droppedOnColumnIndex = payload.index
        this.$oruga.notification.open(`Moved ${this.draggingColumn.field} from column ${this.draggingColumnIndex + 1} to ${droppedOnColumnIndex + 1}`)
      }
    }
  }
</script>

# Class props

📄 Full scss file

	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	2016-10-15 13:43:27	Male	1	1	1	1	1	1	1	1	1	1	1	1	1
	2	John	Jacobs	2016-12-15 06:00:53	Male	2	2	2	2	2	2	2	2	2	2	2	2	2
	3	Tina	Gilbert	2016-04-26 06:26:28	Female	3	3	3	3	3	3	3	3	3	3	3	3	3
	4	Clarence	Flores	2016-04-10 10:28:46	Male	4	4	4	4	4	4	4	4	4	4	4	4	4
	5	Brandon	Lee	2016-12-06 14:38:38	Female	5	5	5	5	5	5	5	5	5	5	5	5	5
	6	Anne	Straus	2017-12-06 14:38:38	Female	6	6	6	6	6	6	6	6	6	6	6	6	6
	7	Mark	Knopfler	2018-12-06 14:38:38	Male	7	7	7	7	7	7	7	7	7	7	7	7	7
	8	Craig	David	2019-12-06 14:38:38	Male	8	8	8	8	8	8	8	8	8	8	8	8	8
	9	Dave	Copperfield	2020-12-06 14:38:38	Male	9	9	9	9	9	9	9	9	9	9	9	9	9
	10	Hilary	Nelson	2021-12-06 14:38:38	Female	10	10	10	10	10	10	10	10	10	10	10	10	10
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 the .sync modifier (Vue 2.x) or v-model:checkedRows (Vue 3.x) to make it two-way binding	array	-	[]
columns	Table columns	array	-	[]
currentPage	Current page of table data (if paginated), use the .sync modifier (Vue 2.x) or v-model:currentPage (Vue 3.x) 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	Override classes	boolean	-	false
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 }`
scrollable	Add a horizontal scrollbar when table is too wide	boolean	-
selected	Set which row is selected, use the .sync modifier (Vue 2.x) or v-model:selected (Vue 3.x) to make it two-way binding	object	-
showDetailIcon	Allow 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
update:currentPage
filters-change
sort	field `string` - column field direction `boolean` - 'asc' or 'desc' event `Event` - native event
check	newCheckedRows `Array<Object>` - checked rows
check-all
update:checkedRows
click	row `Object` - clicked row index `number` - index of clicked row
select	row `Object` - selected row selected `Array<Object>` - selected rows
update:selected
details-close
details-open
update:openedDetailed
dragstart
dragend
drop
dragover
dragleave
columndragstart
columndragend
columndrop
columndragover
columndragleave

# Slots

Name	Description	Bindings
default
pagination
top-left
caption
detail
empty
footer
loading
bottom-left
preheader	A slot inside `<thead>` above the normal header row.

# 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	`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

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

← Switch Tabs →

# Table

# Examples

# 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