Table

The BTable component can be used to display data in a tabular format. It has built in sorting and pagination functionality.

Basic usage

In it's simplest form you can pass an array of objects to the rows prop and an array of objects to the cols prop. The cols prop is used to define the headings and what data and order to display in each column. The rows prop is used to define the data to display in each row.

Name	City	Country	Phone	ID
John	New York	USA	+1 555 123456	1
Jane	London	UK	+44 555 123456	2
Bob	Paris	France	+33 555 123456	3
Alice	Berlin	Germany	+49 555 123456	4
Hans	Munich	Germany	+49 555 123456	5
Love	Umeå	Sweden	+49 555 123456	6
Hate	Umeå	Sweden		7

<script setup lang="ts">
import { useGroupModel } from 'bragi-vue'
import { rows } from './data'

const cols = [
  {
    key: 'name',
    label: 'Name',
    sortable: true,
  },
  {
    key: 'city',
    label: 'City',
  },
  {
    key: 'country',
    label: 'Country',
  },
  {
    key: 'phone',
    label: 'Phone',
  },
  {
    key: 'id',
    label: 'ID',
    sortable: true,
  },
]

const { options, select, value } = useGroupModel({
  options: ['Horizontal', 'Vertical'],
  multi: true,
})

// preselect one value
value.value = new Set(['Horizontal'])
</script>

<template>
  <BTable
    :cols="cols"
    :rows="rows"
    :border-horizontal="value.has('Horizontal')"
    :border-vertical="value.has('Vertical')"
  />
  <div class="flex flex-wrap justify-end gap-2 mt-4">
    <BChip
      v-for="option in options"
      :key="option.value"
      :icon="option.isSelected && 'i-mdi:check'"
      :color="option.isSelected ? 'primary' : 'secondary'"
      :variant="option.isSelected ? 'filled' : 'outlined'"
      @click="select(option.value)"
    >
      {{ option.value }}
    </BChip>
  </div>
</template>

Alignment and styling

By default headings and cells are left aligned as this is easier to read than center or left aligned text. The exceptions to this is columns with numeric content which are easier to read and compare when right aligned. You can change the default alignment by setting the numeric field to true for the column. This will right align that columns data and center the heading.

Name	City	Age	Income
John	New York	120	1000
Jane	London	24	12000
Bob	Paris	31	110000
Alice	Berlin	19	32
Hans	Munich	29	99000
Love	Umeå	3	100000
Hate	Umeå	3

<script setup lang="ts">
import { rows } from './data'

const cols = [
  {
    key: 'name',
    label: 'Name',
    sortable: true,
  },
  {
    key: 'city',
    label: 'City',
  },
  {
    key: 'age',
    label: 'Age',
    numeric: true,
    sortable: true,
  },
  {
    key: 'income',
    label: 'Income',
    numeric: true,
    sortable: true,
  },
]
</script>

<template>
  <BTable
    :cols="cols"
    :rows="rows"
    border-vertical
  />
</template>

Styling and slots

There are a number of dynamic slots available to allow you to customize the table. The header-<column key>} slot allows you to customize the table headings. The cell-<column key> slot allows you to customize the table cells.

Name	City	Income	Actions
John	New York	1000
Jane	London	12000
Bob	Paris	110000
Alice	Berlin	32
Hans	Munich	99000
Love	Umeå	100000
Hate	Umeå

<script setup lang="ts">
import { ref } from 'vue'
import { rows } from './data'

const cols = [
  {
    key: 'name',
    label: 'Name',
    sortable: true,
  },
  {
    key: 'city',
    label: 'City',
  },
  {
    key: 'income',
    label: 'Income',
    numeric: true,
    sortable: true,
  },
  {
    key: 'actions',
    label: 'Actions',
    numeric: true,
  },
]

const data = ref(rows)
</script>

<template>
  <BTable
    :cols="cols"
    :rows="data"
    border-vertical
    th-class="bg-container-high"
  >
    <template #header-name="{ label, order }">
      <i class="i-mdi:account-circle text-error mr-2" />
      <span :class="order ? 'text-green-600 font-bold' : 'italic'">{{ label }}</span>
    </template>
    <template #cell-name="{ row: { name } }">
      <i class="i-mdi:account-circle text-secondary mr-2" />
      <span>{{ name }}</span>
    </template>

    <template #cell-income="{ row: { income } }">
      <div class="flex justify-between">
        <i class="i-mdi:currency-usd text-secondary mr-2" />
        <span>{{ income }}</span>
      </div>
    </template>

    <template #cell-actions="{ row: { id } }">
      <BIconBtn
        icon="i-mdi:account-edit"
        variant="text"
      />
      <BIconBtn
        icon="i-mdi:account-remove"
        color="error"
        variant="text"
        @click="data.splice(data.findIndex(row => row.id === id), 1)"
      />
    </template>
  </BTable>
</template>

The body slot

The body slot allows you to customize the whole table body. This is useful if the default row implementation does not meet your needs. For example you could add expandable rows or a row with a form to edit data.

Name	City	Income	Actions
John	New York	1000
Jane	London	12000
Bob	Paris	110000
Alice	Berlin	32
Hans	Munich	99000
Love	Umeå	100000
Hate	Umeå

<script setup lang="ts">
import { ref } from 'vue'
import { rows } from './data'

const cols = [
  {
    key: 'name',
    label: 'Name',
    sortable: true,
  },
  {
    key: 'city',
    label: 'City',
  },
  {
    key: 'income',
    label: 'Income',
    numeric: true,
    sortable: true,
  },
  {
    key: 'actions',
    label: 'Actions',
    numeric: true,
  },
]

const data = ref(rows)
</script>

<template>
  <BTable
    :cols="cols"
    :rows="data"
    border-horizontal
  >
    <template #body="sortedRows">
      <template
        v-for="(row, rowIndex) in sortedRows"
        :key="rowIndex"
      >
        <tr>
          <td
            v-for="(col, colIndex) in cols"
            :key="colIndex"
            class="whitespace-nowrap"
            :class="{ 'text-right': col.numeric }"
          >
            {{ row[col.key] }}
            <BIconBtn
              v-if="row[col.key] === undefined"
              variant="text"
              icon="i-mdi:chevron-down"
              @click="row.isExpanded = !row.isExpanded"
            />
          </td>
        </tr>

        <td
          class="!py-0"
          colspan="4"
        >
          <BTransitionExpand>
            <div v-if="row.isExpanded">
              <p class="py-4">
                My phone nbr was hidden {{ row.phone }}
              </p>
            </div>
          </BTransitionExpand>
        </td>
      </template>
    </template>
  </BTable>
</template>