Table

The Table component needs to be used with the Column component.

Examples

Density variants

Available ui size props: compact / loose.

Density

CompactNormalLoose

Size

MediumSmall

3154	Steve Rogers	¥1024.00	2013-11-17
3155	Thor Odinson	¥598.00	2014-02-14
3156	Tony Stark	¥820.00	2017-06-10
3157	Stephen Strange	¥736.00	2018-01-09

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <h4>Density</h4>
    <veui-radio-group
      v-model="density"
      :items="[
        { label: 'Compact', value: 'compact' },
        { label: 'Normal', value: 'normal' },
        { label: 'Loose', value: 'loose' }
      ]"
    />
  </section>
  <section>
    <h4>Size</h4>
    <veui-radio-group
      v-model="size"
      :items="[
        { label: 'Medium', value: 'm' },
        { label: 'Small', value: 's' }
      ]"
    />
  </section>
  <section>
    <veui-table
      :ui="ui"
      :data="data"
      key-field="id"
    >
      <veui-table-column
        field="id"
        title="ID"
      />
      <veui-table-column
        field="name"
        title="Name"
      />
      <veui-table-column
        field="bid"
        title="Bid"
        width="160"
        align="right"
      >
        <template #default="{ bid }">
          {{ bid | currency }}
        </template>
      </veui-table-column>
      <veui-table-column
        field="updateDate"
        title="Last updated"
        align="center"
      >
        <template #default="{ updateDate }">
          {{ updateDate | date }}
        </template>
      </veui-table-column>
      <veui-table-column
        field="operation"
        title="Operations"
      >
        <template #default="{ index }">
          <veui-button
            ui="text"
            @click="remove(index)"
          >
            Remove
          </veui-button>
        </template>
      </veui-table-column>
    </veui-table>
  </section>
</article>
</template>

<script>
import { Table, Column, RadioGroup, Button } from 'veui'

export default {
  components: {
    'veui-table': Table,
    'veui-table-column': Column,
    'veui-radio-group': RadioGroup,
    'veui-button': Button
  },
  filters: {
    currency (value) {
      return '¥' + value.toFixed(2)
    },
    date (value) {
      let [, ...parts] = value.match(/(\d{4})(\d{2})(\d{2})/) || []
      return parts.join('-')
    }
  },
  data () {
    return {
      density: 'normal',
      size: 'm',
      data: [
        {
          id: '3154',
          name: 'Steve Rogers',
          bid: 1024,
          updateDate: '20131117'
        },
        {
          id: '3155',
          name: 'Thor Odinson',
          bid: 598,
          updateDate: '20140214'
        },
        {
          id: '3156',
          name: 'Tony Stark',
          bid: 820,
          updateDate: '20170610'
        },
        {
          id: '3157',
          name: 'Stephen Strange',
          bid: 736,
          updateDate: '20180109'
        }
      ]
    }
  },
  computed: {
    ui () {
      return `${this.density} ${this.size}`
    }
  },
  methods: {
    remove (index) {
      this.data.splice(index, 1)
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 20px;
}

h4 {
  margin-top: 0;
}
</style>

Selecting and sorting

Allows customization of unique keys, selection modes, and sorting.

Multiple selection Display “Operations” Select by “Group” (instead of “ID”)

3154	1577	Steve Rogers	¥1024.00	2013-11-17
3155	1577	Thor Odinson	¥598.00	2014-02-14
3156	1578	Tony Stark	¥820.00	2017-06-10
3157	1578	Stephen Strange	¥736.00	2018-01-09

Selected: ["1577"]

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <veui-button
      ui="primary"
      @click="append"
    >
      Add
    </veui-button>
  </section>
  <section>
    <veui-checkbox
      v-model="mode"
      class="checkbox"
      true-value="multiple"
      false-value="single"
    >
      Multiple selection
    </veui-checkbox>
    <veui-checkbox
      v-model="showOps"
      class="checkbox"
    >
      Display “Operations”
    </veui-checkbox>
    <veui-checkbox
      v-model="selectSpanRow"
      class="checkbox"
    >
      Select by “Group” <small>(instead of “ID”)</small>
    </veui-checkbox>
  </section>
  <section>
    <veui-table
      :data="data"
      :key-field="selectSpanRow ? 'group' : 'id'"
      selectable
      :select-mode="mode"
      :order-by="orderBy"
      :order="order"
      :selected.sync="selected"
      @sort="handleSort"
    >
      <veui-table-column
        field="id"
        title="ID"
        sortable
      >
        <template #head>
          <strong>ID</strong>
        </template>
        <template #foot>
          <strong>Total</strong>
        </template>
      </veui-table-column>
      <veui-table-column
        field="group"
        title="Group"
        :span="groupSpan"
      />
      <veui-table-column
        field="name"
        title="Name"
        width="160"
      />
      <veui-table-column
        field="bid"
        title="Bid"
        sortable
        width="160"
        align="right"
      >
        <template #default="{ bid }">
          {{ bid | currency }}
        </template>
        <template #foot>
          <strong>{{ total | currency }}</strong>
        </template>
      </veui-table-column>
      <veui-table-column
        field="updateDate"
        title="Last updated"
        align="center"
      >
        <template #default="{ id, updateDate }">
          <span :ref="`time-a-${id}`">{{ updateDate | date }}</span>
          <veui-tooltip :target="`time-a-${id}`">
            {{ updateDate | time }}
          </veui-tooltip>
        </template>
      </veui-table-column>
      <veui-table-column
        v-if="showOps"
        field="operation"
        title="Opertaions"
      >
        <template #default="{ index }">
          <veui-button
            ui="text"
            @click="del(index)"
          >
            Remove
          </veui-button>
        </template>
      </veui-table-column>
    </veui-table>
    <p>Selected: {{ JSON.stringify(selected) }}</p>
  </section>
</article>
</template>

<script>
import { groupBy } from 'lodash'
import { Button, Checkbox, Table, Column, Tooltip } from 'veui'

export default {
  components: {
    'veui-button': Button,
    'veui-table': Table,
    'veui-table-column': Column,
    'veui-tooltip': Tooltip,
    'veui-checkbox': Checkbox
  },
  filters: {
    currency (value) {
      return '¥' + value.toFixed(2)
    },
    date (value) {
      let [, ...parts] = value.match(/(\d{4})(\d{2})(\d{2})/) || []
      return parts.join('-')
    },
    time (value) {
      let [, ...parts] = value.match(/(\d{4})(\d{2})(\d{2})/) || []
      return parts.join('-') + ' 00:00:00'
    }
  },
  data () {
    return {
      mode: 'multiple',
      showOps: true,
      selectSpanRow: true,
      data: [
        {
          id: '3154',
          name: 'Steve Rogers',
          bid: 1024,
          updateDate: '20131117',
          group: '1577'
        },
        {
          id: '3155',
          name: 'Thor Odinson',
          bid: 598,
          updateDate: '20140214',
          group: '1577'
        },
        {
          id: '3156',
          name: 'Tony Stark',
          bid: 820,
          updateDate: '20170610',
          group: '1578'
        },
        {
          id: '3157',
          name: 'Stephen Strange',
          bid: 736,
          updateDate: '20180109',
          group: '1578'
        }
      ],
      nextId: 3158,
      nextIndex: 4,
      order: false,
      orderBy: null,
      selected: ['1577'],
      groupSpan: i => {
        let groups = groupBy(this.data, 'group')
        let item = this.data[i]
        let itemGroup = groups[item.group]
        if (item.id === (itemGroup[0] || {}).id) {
          return {
            row: itemGroup.length
          }
        }
        return {
          row: 0
        }
      }
    }
  },
  computed: {
    total () {
      return this.data.reduce((total, item) => {
        return total + item.bid
      }, 0)
    }
  },
  methods: {
    del (index) {
      this.data.splice(index, 1)
    },
    append () {
      let d = new Date(Date.now() + Math.floor(Math.random() * 1e10))

      let item = {
        id: String(this.nextId),
        group: String(Math.floor(this.nextId / 2)),
        name: `Character-${this.nextIndex}`,
        bid: Math.floor(Math.random() * 1280),
        updateDate:
          d.getFullYear() +
          String(d.getMonth() + 1).padStart(2, '0') +
          String(d.getMonth() + 1).padStart(2, '0')
      }
      this.nextId++
      this.nextIndex++
      this.data.push(item)
    },
    handleSort (orderBy, order) {
      this.orderBy = orderBy
      this.order = order
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 20px;
}

.checkbox {
  margin-right: 20px;
}
</style>

Filtering

Use the filter slot of the Column component to enable custom filtering.

Layout

Crowded layout

3154	Steve Rogers	¥1024.00	2013-11-17
3155	Thor Odinson	¥598.00	2014-02-14
3156	Tony Stark	¥820.00	2017-06-10
3157	Stephen Strange	¥736.00	2018-01-09

You can use the ui prop value crowded to hide filter button by default when there are too many columns to be displayed.

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <h4>Layout</h4>
    <veui-checkbox
      v-model="crowded"
      class="checkbox"
    >
      Crowded layout
    </veui-checkbox>
  </section>
  <section>
    <veui-table
      :ui="crowded ? 'crowded' : null"
      :data="filteredData"
      key-field="id"
    >
      <veui-table-column
        field="id"
        title="ID"
      />
      <veui-table-column
        field="name"
        title="Name"
      />
      <veui-table-column
        field="bid"
        title="Bid"
        width="160"
        align="right"
        :filter-value="filtered || null"
      >
        <template #default="{ bid }">
          {{ bid | currency }}
        </template>
        <template #filter="{ close }">
          <veui-checkbox
            v-model="filtered"
            class="checkbox"
          >
            &gt;800
          </veui-checkbox>
        </template>
      </veui-table-column>
      <veui-table-column
        field="updateDate"
        title="Last updated"
        align="center"
      >
        <template #default="{ updateDate }">
          {{ updateDate | date }}
        </template>
      </veui-table-column>
      <veui-table-column
        field="operation"
        title="Operations"
      >
        <template #default="{ index }">
          <veui-button
            ui="text"
            @click="remove(index)"
          >
            Remove
          </veui-button>
        </template>
      </veui-table-column>
    </veui-table>
  </section>
</article>
</template>

<script>
import { Table, Column, Checkbox, Button } from 'veui'

export default {
  components: {
    'veui-table': Table,
    'veui-table-column': Column,
    'veui-checkbox': Checkbox,
    'veui-button': Button
  },
  filters: {
    currency (value) {
      return '¥' + value.toFixed(2)
    },
    date (value) {
      let [, ...parts] = value.match(/(\d{4})(\d{2})(\d{2})/) || []
      return parts.join('-')
    }
  },
  data () {
    return {
      data: [
        {
          id: '3154',
          name: 'Steve Rogers',
          bid: 1024,
          updateDate: '20131117'
        },
        {
          id: '3155',
          name: 'Thor Odinson',
          bid: 598,
          updateDate: '20140214'
        },
        {
          id: '3156',
          name: 'Tony Stark',
          bid: 820,
          updateDate: '20170610'
        },
        {
          id: '3157',
          name: 'Stephen Strange',
          bid: 736,
          updateDate: '20180109'
        }
      ],
      crowded: false,
      filtered: null
    }
  },
  computed: {
    filteredData () {
      if (!this.filtered) {
        return this.data
      }
      return this.data.filter(({ bid }) => bid > 800)
    }
  },
  methods: {
    remove (index) {
      this.data.splice(index, 1)
    }
  }
}
</script>

<style lang="less" scoped>
.checkbox {
  margin: 8px 16px;
}

section {
  margin-bottom: 20px;
}

h4 {
  margin-top: 0;
}
</style>

Internal scrolling

Allows enabling of internal scrolling mode to achieve a fixed table header and footer effect.

3154	Steve Rogers	¥1024.00	2013-11-17
3155	Thor Odinson	¥598.00	2014-02-14
3156	Tony Stark	¥820.00	2017-06-10
3157	Stephen Strange	¥736.00	2018-01-09
3158	Natalie Romanoff	¥736.00	2018-01-23
3159	Bruce Banner	¥736.00	2018-12-01
3160	Peter Parker	¥736.00	2018-11-13
3161	T'Challa	¥736.00	2018-07-30
3162	Loki	¥736.00	2018-06-01

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <veui-table
      :data="data"
      scroll="360"
      key-field="id"
    >
      <veui-table-column
        field="id"
        title="ID"
      />
      <veui-table-column
        field="name"
        title="Name"
      />
      <veui-table-column
        field="bid"
        title="Bid"
        width="160"
        align="right"
      >
        <template #default="{ bid }">
          {{ bid | currency }}
        </template>
      </veui-table-column>
      <veui-table-column
        field="updateDate"
        title="Last updated"
        align="center"
      >
        <template #default="{ updateDate }">
          {{ updateDate | date }}
        </template>
      </veui-table-column>
    </veui-table>
  </section>
</article>
</template>

<script>
import { Table, Column } from 'veui'

export default {
  components: {
    'veui-table': Table,
    'veui-table-column': Column
  },
  filters: {
    currency (value) {
      return '¥' + value.toFixed(2)
    },
    date (value) {
      let [, ...parts] = value.match(/(\d{4})(\d{2})(\d{2})/) || []
      return parts.join('-')
    }
  },
  data () {
    return {
      data: [
        {
          id: '3154',
          name: 'Steve Rogers',
          bid: 1024,
          updateDate: '20131117'
        },
        {
          id: '3155',
          name: 'Thor Odinson',
          bid: 598,
          updateDate: '20140214'
        },
        {
          id: '3156',
          name: 'Tony Stark',
          bid: 820,
          updateDate: '20170610'
        },
        {
          id: '3157',
          name: 'Stephen Strange',
          bid: 736,
          updateDate: '20180109'
        },
        {
          id: '3158',
          name: 'Natalie Romanoff',
          bid: 736,
          updateDate: '20180123'
        },
        {
          id: '3159',
          name: 'Bruce Banner',
          bid: 736,
          updateDate: '20181201'
        },
        {
          id: '3160',
          name: 'Peter Parker',
          bid: 736,
          updateDate: '20181113'
        },
        {
          id: '3161',
          name: "T'Challa",
          bid: 736,
          updateDate: '20180730'
        },
        {
          id: '3162',
          name: 'Loki',
          bid: 736,
          updateDate: '20180601'
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 20px;
}
</style>

Fixed columns

Use the scroll prop of the Table component and the fixed prop of the Column component to control the position of fixed columns.

3154	Steve Rogers	Captain America	¥1024.00	2013-11-17
3155	Thor Odinson	God of Thunder	¥598.00	2014-02-14
3156	Tony Stark	Ironman	¥820.00	2017-06-10
3157	Stephen Strange	Doctor Strange	¥736.00	2018-01-09

The width prop must be specified for fixed columns.

Edit this demo on GitHubEdit

<template>
<article>
  <veui-table
    :data="data"
    key-field="id"
    :scroll="{ x: 800 }"
  >
    <veui-table-column
      field="id"
      title="ID"
      width="80"
      fixed="left"
    />
    <veui-table-column title="Characters">
      <veui-table-column
        field="name"
        title="Name"
        width="200"
      />
      <veui-table-column
        field="title"
        title="Title"
        width="200"
      />
    </veui-table-column>
    <veui-table-column
      field="bid"
      title="Bid"
      width="160"
      align="right"
    >
      <template #default="{ bid }">
        {{ bid | currency }}
      </template>
    </veui-table-column>
    <veui-table-column
      field="updateDate"
      title="Last updated"
      align="center"
      width="200"
    >
      <template #default="{ updateDate }">
        {{ updateDate | date }}
      </template>
    </veui-table-column>
    <veui-table-column
      field="operation"
      title="Operations"
      width="140"
      fixed="right"
    >
      <template #default="{ index }">
        <veui-button
          ui="text"
          @click="remove(index)"
        >
          Remove
        </veui-button>
      </template>
    </veui-table-column>
  </veui-table>
</article>
</template>

<script>
import { Table, Column, Button } from 'veui'

export default {
  components: {
    'veui-table': Table,
    'veui-table-column': Column,
    'veui-button': Button
  },
  filters: {
    currency (value) {
      return '¥' + value.toFixed(2)
    },
    date (value) {
      let [, ...parts] = value.match(/(\d{4})(\d{2})(\d{2})/) || []
      return parts.join('-')
    }
  },
  data () {
    return {
      data: [
        {
          id: '3154',
          name: 'Steve Rogers',
          bid: 1024,
          title: 'Captain America',
          updateDate: '20131117'
        },
        {
          id: '3155',
          name: 'Thor Odinson',
          bid: 598,
          title: 'God of Thunder',
          updateDate: '20140214'
        },
        {
          id: '3156',
          name: 'Tony Stark',
          bid: 820,
          title: 'Ironman',
          updateDate: '20170610'
        },
        {
          id: '3157',
          name: 'Stephen Strange',
          bid: 736,
          title: 'Doctor Strange',
          updateDate: '20180109'
        }
      ]
    }
  },
  methods: {
    remove (index) {
      this.data.splice(index, 1)
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 20px;
}

h4 {
  margin-top: 0;
}
</style>

Expandable rows

Supports expanding rows with child data.

3154	Steve Rogers	¥1024.00	2013-11-17
3155	Thor Odinson	¥598.00	2014-02-14
3156	Tony Stark	¥820.00	2017-06-10
3157	Stephen Strange	¥736.00	2018-01-09

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <veui-table
      :data="data"
      expandable
      key-field="id"
    >
      <veui-table-column
        field="id"
        title="ID"
      />
      <veui-table-column
        field="name"
        title="Name"
      />
      <veui-table-column
        field="bid"
        title="Bid"
        width="160"
        align="right"
      >
        <template #default="{ bid }">
          {{ bid | currency }}
        </template>
      </veui-table-column>
      <veui-table-column
        field="updateDate"
        title="Last updated"
        align="center"
      >
        <template #default="{ updateDate }">
          {{ updateDate | date }}
        </template>
      </veui-table-column>
    </veui-table>
  </section>
</article>
</template>

<script>
import { Table, Column } from 'veui'

export default {
  components: {
    'veui-table': Table,
    'veui-table-column': Column
  },
  filters: {
    currency (value) {
      return '¥' + value.toFixed(2)
    },
    date (value) {
      let [, ...parts] = value.match(/(\d{4})(\d{2})(\d{2})/) || []
      return parts.join('-')
    }
  },
  data () {
    return {
      data: [
        {
          id: '3154',
          name: 'Steve Rogers',
          bid: 1024,
          updateDate: '20131117',
          children: [
            {
              id: '3154',
              name: 'Steve Rogers',
              bid: 1024,
              updateDate: '20131117'
            },
            {
              id: '3154',
              name: 'Steve Rogers',
              bid: 1001,
              updateDate: '20131116'
            },
            {
              id: '3154',
              name: 'Steve Rogers',
              bid: 985,
              updateDate: '20131115'
            }
          ]
        },
        {
          id: '3155',
          name: 'Thor Odinson',
          bid: 598,
          updateDate: '20140214',
          children: [
            {
              id: '3155',
              name: 'Thor Odinson',
              bid: 520,
              updateDate: '20131116'
            }
          ]
        },
        {
          id: '3156',
          name: 'Tony Stark',
          bid: 820,
          updateDate: '20170610',
          children: [
            {
              id: '3156',
              name: 'Tony Stark',
              bid: 800,
              updateDate: '20131116'
            },
            { id: '3156', name: 'Tony Stark', bid: 763, updateDate: '20131115' }
          ]
        },
        {
          id: '3157',
          name: 'Stephen Strange',
          bid: 736,
          updateDate: '20180109',
          children: [
            {
              id: '3157',
              name: 'Stephen Strange',
              bid: 704,
              updateDate: '20131116'
            },
            {
              id: '3157',
              name: 'Stephen Strange',
              bid: 666,
              updateDate: '20131112'
            },
            {
              id: '3157',
              name: 'Stephen Strange',
              bid: 521,
              updateDate: '20131111'
            },
            {
              id: '3157',
              name: 'Stephen Strange',
              bid: 428,
              updateDate: '20131110'
            }
          ]
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 20px;
}
</style>

Header description

Use the desc prop or desc slot of the Column component to add description information to the table header.

31541	Steve Rogers	¥1024.00
31552	Thor Odinson	¥598.00
31563	Tony Stark	¥820.00
31574	Stephen Strange	¥736.00

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <veui-table
      :data="data"
      key-field="id"
    >
      <veui-table-column
        field="id"
        title="ID"
      />
      <veui-table-column
        field="name"
        title="Name"
        :desc="nameDesc"
      />
      <veui-table-column
        field="bid"
        title="Bid"
        width="160"
        align="right"
      >
        <template #default="{ bid }">
          {{ bid | currency }}
        </template>
        <template #desc="{ close }">
          <p>This is a description for bid.</p>
          <veui-button @click="close">
            close
          </veui-button>
        </template>
      </veui-table-column>
    </veui-table>
  </section>
</article>
</template>

<script>
import { Table, Column, Button } from 'veui'

export default {
  components: {
    'veui-table': Table,
    'veui-table-column': Column,
    'veui-button': Button
  },
  filters: {
    currency (value) {
      return '¥' + value.toFixed(2)
    }
  },
  data () {
    return {
      data: [
        {
          id: '31541',
          name: 'Steve Rogers',
          bid: 1024,
          updateDate: '20131117'
        },
        {
          id: '31552',
          name: 'Thor Odinson',
          bid: 598,
          updateDate: '20140214'
        },
        {
          id: '31563',
          name: 'Tony Stark',
          bid: 820,
          updateDate: '20170610'
        },
        {
          id: '31574',
          name: 'Stephen Strange',
          bid: 736,
          updateDate: '20180109'
        }
      ],
      nameDesc: 'This is a description for name.'
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 20px;
}

h4 {
  margin-top: 0;
}
</style>

Sorting

Use the order prop and order-by prop to specify the sorting state on the table header.

Listen for the sort event to handle changes in sorting state.

Set the allowed-orders prop to customize the allowed sorting states.

Allow unordered

31541	Steve Rogers	¥1024.00
31552	Thor Odinson	¥598.00
31563	Tony Stark	¥820.00
31574	Stephen Strange	¥736.00

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <div>
      <veui-checkbox
        v-model="allowFalse"
        @change="handleChange"
      >
        Allow unordered
      </veui-checkbox>
    </div>
    <veui-table
      :data="sorted"
      key-field="id"
      :order="order"
      :order-by="orderBy"
      :allowed-orders="allowedOrders"
      @sort="handleSort"
    >
      <veui-table-column
        field="id"
        title="ID"
        sortable
      />
      <veui-table-column
        field="name"
        title="Name"
      />
      <veui-table-column
        field="bid"
        title="Bid"
        width="160"
        align="right"
        sortable
      >
        <template #default="{ bid }">
          {{ bid | currency }}
        </template>
      </veui-table-column>
    </veui-table>
  </section>
</article>
</template>

<script>
import { Table, Column, Checkbox } from 'veui'

let data = [
  {
    id: '31552',
    name: 'Thor Odinson',
    bid: 598,
    updateDate: '20140214'
  },
  {
    id: '31541',
    name: 'Steve Rogers',
    bid: 1024,
    updateDate: '20131117'
  },
  {
    id: '31563',
    name: 'Tony Stark',
    bid: 820,
    updateDate: '20170610'
  },
  {
    id: '31574',
    name: 'Stephen Strange',
    bid: 736,
    updateDate: '20180109'
  }
]

let allowedOrders = [false, 'desc', 'asc']

export default {
  components: {
    'veui-table': Table,
    'veui-table-column': Column,
    'veui-checkbox': Checkbox
  },
  filters: {
    currency (value) {
      return '¥' + value.toFixed(2)
    }
  },
  data () {
    return {
      order: 'asc',
      orderBy: 'id',
      allowFalse: true
    }
  },
  computed: {
    sorted () {
      let result = data.slice(0)
      if (this.order) {
        const sign = this.order === 'desc' ? -1 : 1
        result.sort((a, b) => {
          return sign * (+a[this.orderBy] - +b[this.orderBy])
        })
      }
      return result
    },
    allowedOrders () {
      let result = allowedOrders.slice(0)
      return this.allowFalse ? result : result.filter(item => item)
    }
  },
  methods: {
    handleSort (field, order) {
      this.order = order
      this.orderBy = field
    },
    handleChange (val) {
      // 不允许不排序时，当前却是不排序，随便改下
      if (!val && !this.order) {
        this.order = 'desc'
      }
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 20px;
}

h4 {
  margin-top: 0;
}
</style>

Loading

Use the loading prop to specify that the table is in a loading state. Use loading-options to specify the style of the loading state.

No data

Modal

Use spinner

31552	Thor Odinson	¥598.00
31541	Steve Rogers	¥1024.00
31563	Tony Stark	¥820.00
31574	Stephen Strange	¥736.00

Edit this demo on GitHubEdit

<template>
<article>
  <section class="settings">
    <veui-switch
      v-model="loading"
      ui="s"
    >
      Loading
    </veui-switch>
    <veui-switch
      v-model="noData"
      ui="s"
      :disabled="spinner"
    >
      No data
    </veui-switch>
    <veui-switch
      v-model="modal"
      ui="s"
    >
      Modal
    </veui-switch>
    <veui-switch
      v-model="spinner"
      ui="s"
    >
      Use spinner
    </veui-switch>
  </section>
  <veui-table
    :data="noData ? [] : data"
    :loading="loading"
    :loading-options="{ type: spinner ? 'spinner' : 'bar', modal }"
    key-field="id"
  >
    <veui-table-column
      field="id"
      title="ID"
      sortable
    />
    <veui-table-column
      field="name"
      title="Name"
    />
    <veui-table-column
      field="bid"
      title="Bid"
      width="160"
      align="right"
      sortable
    >
      <template #default="{ bid }">
        {{ bid | currency }}
      </template>
    </veui-table-column>
  </veui-table>
</article>
</template>

<script>
import { Table, Column, Switch } from 'veui'

let data = [
  {
    id: '31552',
    name: 'Thor Odinson',
    bid: 598,
    updateDate: '20140214'
  },
  {
    id: '31541',
    name: 'Steve Rogers',
    bid: 1024,
    updateDate: '20131117'
  },
  {
    id: '31563',
    name: 'Tony Stark',
    bid: 820,
    updateDate: '20170610'
  },
  {
    id: '31574',
    name: 'Stephen Strange',
    bid: 736,
    updateDate: '20180109'
  }
]

export default {
  components: {
    'veui-table': Table,
    'veui-table-column': Column,
    'veui-switch': Switch
  },
  filters: {
    currency (value) {
      return '¥' + value.toFixed(2)
    }
  },
  data () {
    return {
      data,
      noData: false,
      loading: true,
      modal: true,
      spinner: false
    }
  }
}
</script>

<style lang="less" scoped>
.settings {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

h4 {
  margin-top: 0;
}
</style>

Use the tooltip prop of the Column component to specify a hover tooltip when content is truncated.

3154	Steve Rogers	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos, quibusdam! Pariatur, laboriosam? Voluptatibus, sunt.
3155	Thor Odinson	Lorem ipsum.
3156	Tony Stark	Lorem ipsum.
3157	Stephen Strange	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos, quibusdam! Pariatur, laboriosam? Voluptatibus, sunt.

Edit this demo on GitHubEdit

<template>
<article>
  <veui-table
    :data="data"
    key-field="id"
  >
    <veui-table-column
      field="id"
      title="ID"
    />
    <veui-table-column
      field="name"
      title="Name"
    />
    <veui-table-column
      field="desc"
      title="Description"
      tooltip
    />
  </veui-table>
</article>
</template>

<script>
import { Table, Column } from 'veui'

const long = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos, quibusdam! Pariatur, laboriosam? Voluptatibus, sunt.'
const short = 'Lorem ipsum.'

export default {
  components: {
    'veui-table': Table,
    'veui-table-column': Column
  },
  data () {
    return {
      density: 'normal',
      size: 'm',
      data: [
        {
          id: '3154',
          name: 'Steve Rogers',
          desc: long
        },
        {
          id: '3155',
          name: 'Thor Odinson',
          desc: short
        },
        {
          id: '3156',
          name: 'Tony Stark',
          desc: short
        },
        {
          id: '3157',
          name: 'Stephen Strange',
          desc: long
        }
      ]
    }
  }
}
</script>

Table

API

Props

Name Type Default Description

ui

string

Preset style.

Value	Description
`compact`	Compact style.
`loose`	Loose style.
`s`	Small size style.
`m`	Medium size style.

data Array<Object> - Table data.

key-field string - Specifies the column identifier that serves as the table data. The value corresponds to the name of a field in the data property of a data item. The value of the corresponding field will be output as the row element's key property. When the selectable property is true, it can also be used to specify which column's different rows to select in the presence of vertically merged cells. In this case, the value must come from the field property of an internal Column component.

selectable boolean false Whether to enable row selection.

select-mode string 'multiple' The selection mode, with supported values of single / multiple, corresponding to single/multiple selection modes.

selected

Array<*>|*

[]

.sync

Selected rows. When the select-mode property is 'multiple', it is an array of values corresponding to the key-field of the selected rows. When the select-mode property is 'single', it is the value of the key-field of the selected row.

expandable boolean false Whether to allow row expansion.

expanded

Array<*>

[]

.sync

Expanded rows. It is an array of values corresponding to the key-field of the expanded rows.

order string | boolean false The order of sorting. When false, it indicates unordered, and when a string value of 'asc' / 'desc', it indicates ascending / descending order respectively.

order-by string - Specifies the column that the current sorting is based on, and the value must come from the field property of an internal Column component.

scroll number - Specifies the maximum height of the scroll area. When exceeded, the table will enter a mode where only the data area is allowed to scroll with fixed headers and footers.

loading boolean false Specifies whether the table is in the loading state.

loading-options

Object

table.loadingOptions

The configuration of the loading state, with a type of {type, modal}.

Name	Type	Description
`type`	`'bar' \\| 'spinner`	The loading type, with a default value of `'bar'`, which indicates the loading bar style.
`modal`	`boolean`	The loading mask, which can only be configured as `false` when `type` is `bar`.

allowed-orders

Array

[false, 'desc', 'asc']

Specifies the sorting range of columns at the table level.

Value	Description
`false`	No sorting.
`'asc'`	Ascending order.
`'desc'`	Descending order.

bordered boolean false Specifies whether the table has a border.

column-filter Array<string> | (field: string) => boolean - Used for filtering the columns of the table. When passed an array, the values of the elements are the field values corresponding to that column. When passed a function, the parameter is the field value corresponding to that column, and the return value indicates whether that column should be displayed. By default, all columns are displayed.

Slots

Name	Description
`default`	Used to define table columns and can only contain `Column` components.
`no-data`	Used to define the content to display when there is no data.
`foot`	The content in the table footer, and the entire area will be opened as a container without maintaining column separation.
`sub-row`	The content of the child row that appears after a row is expanded. When using this slot, the content will be displayed as the child row content that spans the entire bottom of the expanded row. When using this slot, it will override the `sub-row` slot content of the `Column`. The slot parameters are all fields in the current row data of `data` and the corresponding index value `index`.

Edit this page on GitHubEdit

VEUI

Table

Examples

Density variants

Density

Size

Selecting and sorting

Filtering

Layout

Internal scrolling

Fixed columns

Expandable rows

Header description

Sorting

Loading

Truncation tooltip

Table

API

Props

Slots