Appearance

Table ​

Display data in a table.

Usage ​

Use the rows prop to set the data to display in the table. By default, the table will display all the fields of the rows.

IdNameTitleEmailRole
1Lindsay WaltonFront-end Developerlindsay.walton@example.comMember
2Courtney HenryDesignercourtney.henry@example.comAdmin
3Tom CookDirector of Producttom.cook@example.comMember
4Whitney FrancisCopywriterwhitney.francis@example.comAdmin
5Leonard KrasnerSenior Designerleonard.krasner@example.comOwner
6Floyd MilesPrincipal Designerfloyd.miles@example.comMember
vue
<script setup>
const people = [{
  id: 1,
  name: 'Lindsay Walton',
  title: 'Front-end Developer',
  email: 'lindsay.walton@example.com',
  role: 'Member'
}, {
  id: 2,
  name: 'Courtney Henry',
  title: 'Designer',
  email: 'courtney.henry@example.com',
  role: 'Admin'
}, {
  id: 3,
  name: 'Tom Cook',
  title: 'Director of Product',
  email: 'tom.cook@example.com',
  role: 'Member'
}, {
  id: 4,
  name: 'Whitney Francis',
  title: 'Copywriter',
  email: 'whitney.francis@example.com',
  role: 'Admin'
}, {
  id: 5,
  name: 'Leonard Krasner',
  title: 'Senior Designer',
  email: 'leonard.krasner@example.com',
  role: 'Owner'
}, {
  id: 6,
  name: 'Floyd Miles',
  title: 'Principal Designer',
  email: 'floyd.miles@example.com',
  role: 'Member'
}]
</script>

<template>
  <s-table :rows="people" />
</template>

Columns ​

Use the columns prop to configure which columns to display. It's an array of objects with the following properties:

  • label - The label to display in the table header. Can be changed through the column-attribute prop.
  • key - The field to display from the row data.
  • sortable - Whether the column is sortable. Defaults to false.
  • direction - The sort direction to use on first click. Defaults to asc.
  • class - The class to apply to the column cells.
  • sort - Pass your own sort function. Defaults to a simple greater than / less than comparison.
IDUser nameJob positionEmail
1Lindsay WaltonFront-end Developerlindsay.walton@example.comMember
2Courtney HenryDesignercourtney.henry@example.comAdmin
3Tom CookDirector of Producttom.cook@example.comMember
4Whitney FrancisCopywriterwhitney.francis@example.comAdmin
5Leonard KrasnerSenior Designerleonard.krasner@example.comOwner
6Floyd MilesPrincipal Designerfloyd.miles@example.comMember
vue
<script setup lang="ts">
const columns = [{
  key: 'id',
  label: 'ID'
}, {
  key: 'name',
  label: 'User name'
}, {
  key: 'title',
  label: 'Job position'
}, {
  key: 'email',
  label: 'Email'
}, {
  key: 'role'
}]

const people = [{
  id: 1,
  name: 'Lindsay Walton',
  title: 'Front-end Developer',
  email: 'lindsay.walton@example.com',
  role: 'Member'
}, {
  id: 2,
  name: 'Courtney Henry',
  title: 'Designer',
  email: 'courtney.henry@example.com',
  role: 'Admin'
}, {
  id: 3,
  name: 'Tom Cook',
  title: 'Director of Product',
  email: 'tom.cook@example.com',
  role: 'Member'
}, {
  id: 4,
  name: 'Whitney Francis',
  title: 'Copywriter',
  email: 'whitney.francis@example.com',
  role: 'Admin'
}, {
  id: 5,
  name: 'Leonard Krasner',
  title: 'Senior Designer',
  email: 'leonard.krasner@example.com',
  role: 'Owner'
}, {
  id: 6,
  name: 'Floyd Miles',
  title: 'Principal Designer',
  email: 'floyd.miles@example.com',
  role: 'Member'
}]
</script>

<template>
  <STable :columns="columns" :rows="people"/>
</template>

You can easily use the SelectMenu component to change the columns to display.

IDNameTitleEmailRole
1Lindsay WaltonFront-end Developerlindsay.walton@example.comMember
2Courtney HenryDesignercourtney.henry@example.comAdmin
3Tom CookDirector of Producttom.cook@example.comMember
4Whitney FrancisCopywriterwhitney.francis@example.comAdmin
5Leonard KrasnerSenior Designerleonard.krasner@example.comOwner
6Floyd MilesPrincipal Designerfloyd.miles@example.comMember
vue
<script setup lang="ts">
import {ref} from 'vue'

const columns = [{
  key: 'id',
  label: 'ID'
}, {
  key: 'name',
  label: 'Name'
}, {
  key: 'title',
  label: 'Title'
}, {
  key: 'email',
  label: 'Email'
}, {
  key: 'role',
  label: 'Role'
}]

const selectedColumns = ref([...columns])

const people = [{
  id: 1,
  name: 'Lindsay Walton',
  title: 'Front-end Developer',
  email: 'lindsay.walton@example.com',
  role: 'Member'
}, {
  id: 2,
  name: 'Courtney Henry',
  title: 'Designer',
  email: 'courtney.henry@example.com',
  role: 'Admin'
}, {
  id: 3,
  name: 'Tom Cook',
  title: 'Director of Product',
  email: 'tom.cook@example.com',
  role: 'Member'
}, {
  id: 4,
  name: 'Whitney Francis',
  title: 'Copywriter',
  email: 'whitney.francis@example.com',
  role: 'Admin'
}, {
  id: 5,
  name: 'Leonard Krasner',
  title: 'Senior Designer',
  email: 'leonard.krasner@example.com',
  role: 'Owner'
}, {
  id: 6,
  name: 'Floyd Miles',
  title: 'Principal Designer',
  email: 'floyd.miles@example.com',
  role: 'Member'
}]
</script>

<template>
  <div>
    <div class="flex px-3 py-3.5 border-b border-gray-200 dark:border-gray-700">
      <SSelectMenu v-model="selectedColumns" :options="columns" multiple placeholder="Columns" />
    </div>

    <STable :columns="selectedColumns" :rows="people" />
  </div>
</template>

Sortable ​

You can make the columns sortable by setting the sortable property to true in the column configuration.

You may specify the default direction of each column through the direction property. It can be either asc or desc, but it will default to asc.

IDRole
1Lindsay WaltonFront-end Developerlindsay.walton@example.comMember
2Courtney HenryDesignercourtney.henry@example.comAdmin
3Tom CookDirector of Producttom.cook@example.comMember
4Whitney FrancisCopywriterwhitney.francis@example.comAdmin
5Leonard KrasnerSenior Designerleonard.krasner@example.comOwner
6Floyd MilesPrincipal Designerfloyd.miles@example.comMember
vue
<script setup lang="ts">
const columns = [{
  key: 'id',
  label: 'ID'
}, {
  key: 'name',
  label: 'Name',
  sortable: true
}, {
  key: 'title',
  label: 'Title',
  sortable: true
}, {
  key: 'email',
  label: 'Email',
  sortable: true,
  direction: 'desc' as const
}, {
  key: 'role',
  label: 'Role'
}]

const people = [{
  id: 1,
  name: 'Lindsay Walton',
  title: 'Front-end Developer',
  email: 'lindsay.walton@example.com',
  role: 'Member'
}, {
  id: 2,
  name: 'Courtney Henry',
  title: 'Designer',
  email: 'courtney.henry@example.com',
  role: 'Admin'
}, {
  id: 3,
  name: 'Tom Cook',
  title: 'Director of Product',
  email: 'tom.cook@example.com',
  role: 'Member'
}, {
  id: 4,
  name: 'Whitney Francis',
  title: 'Copywriter',
  email: 'whitney.francis@example.com',
  role: 'Admin'
}, {
  id: 5,
  name: 'Leonard Krasner',
  title: 'Senior Designer',
  email: 'leonard.krasner@example.com',
  role: 'Owner'
}, {
  id: 6,
  name: 'Floyd Miles',
  title: 'Principal Designer',
  email: 'floyd.miles@example.com',
  role: 'Member'
}]
</script>

<template>
  <STable :columns="columns" :rows="people"/>
</template>

Released under the MIT License.

Copyright © 2023-present Manuk Minasyan