Tables ​

<template>
  <div>
    <BTable striped hover :items="items" />
  </div>
</template>

<script setup lang="ts">
const items = [
  {age: 40, first_name: 'Dickerson', last_name: 'Macdonald'},
  {age: 21, first_name: 'Larsen', last_name: 'Shaw'},
  {age: 89, first_name: 'Geneva', last_name: 'Wilson'},
  {age: 38, first_name: 'Jami', last_name: 'Carney'},
]
</script>

<template>
  <div>
    <BTable hover :items="items" />
  </div>
</template>

<script setup lang="ts">
const items = [
  {age: 40, first_name: 'Dickerson', last_name: 'Macdonald'},
  {age: 21, first_name: 'Larsen', last_name: 'Shaw'},
  {
    age: 89,
    first_name: 'Geneva',
    last_name: 'Wilson',
    _rowVariant: 'danger',
  },
  {
    age: 40,
    first_name: 'Thor',
    last_name: 'MacDonald',
    _cellVariants: {age: 'info', first_name: 'warning'},
  },
  {age: 29, first_name: 'Dick', last_name: 'Dunlap'},
]
</script>

<template>
  <div>
    <BTable striped hover :items="items" :fields="fields" />
  </div>
</template>

<script setup lang="ts">
// Note `isActive` is left out and will not appear in the rendered table
const fields = ['first_name', 'last_name', 'age']
const items = [
  {isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald'},
  {isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw'},
  {isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson'},
  {isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney'},
]
</script>

<template>
  <div>
    <BTable striped hover :items="items" :fields="fields" />
  </div>
</template>

<script setup lang="ts">
import type {TableFieldRaw} from 'bootstrap-vue-next'

interface Person {
  first_name: string
  last_name: string
  age: number
  isActive: boolean
}

// Note 'isActive' is left out and will not appear in the rendered table
const fields: TableFieldRaw<Person>[] = [
  {
    key: 'last_name',
    sortable: true,
  },
  {
    key: 'first_name',
    sortable: false,
  },
  {
    key: 'age',
    label: 'Person age',
    sortable: true,
    // Variant applies to the whole column, including the header and footer
    variant: 'danger',
  },
]

const items: Person[] = [
  {isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald'},
  {isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw'},
  {isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson'},
  {isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney'},
]
</script>

<template>
  <div>
    <BFormGroup v-slot="{ariaDescribedby}" label="Table Options" label-cols-lg="2">
      <BFormCheckbox v-model="striped" :aria-describedby="ariaDescribedby" inline
        >Striped</BFormCheckbox
      >
      <BFormCheckbox v-model="stripedColumns" :aria-describedby="ariaDescribedby" inline
        >Striped Columns</BFormCheckbox
      >
      <BFormCheckbox v-model="bordered" :aria-describedby="ariaDescribedby" inline
        >Bordered</BFormCheckbox
      >
      <BFormCheckbox v-model="borderless" :aria-describedby="ariaDescribedby" inline
        >Borderless</BFormCheckbox
      >
      <BFormCheckbox v-model="outlined" :aria-describedby="ariaDescribedby" inline
        >Outlined</BFormCheckbox
      >
      <BFormCheckbox v-model="small" :aria-describedby="ariaDescribedby" inline
        >Small</BFormCheckbox
      >
      <BFormCheckbox v-model="hover" :aria-describedby="ariaDescribedby" inline
        >Hover</BFormCheckbox
      >
      <BFormCheckbox v-model="dark" :aria-describedby="ariaDescribedby" inline>Dark</BFormCheckbox>
      <BFormCheckbox v-model="fixed" :aria-describedby="ariaDescribedby" inline
        >Fixed</BFormCheckbox
      >
      <BFormCheckbox v-model="footClone" :aria-describedby="ariaDescribedby" inline
        >Foot Clone</BFormCheckbox
      >
      <BFormCheckbox v-model="noCollapse" :aria-describedby="ariaDescribedby" inline
        >No border collapse</BFormCheckbox
      >
    </BFormGroup>

    <BFormGroup label="Variant" label-for="table-style-variant" label-cols-lg="2" class="my-2">
      <BFormSelect id="table-style-variant" v-model="variant" :options="variants">
        <template #first>
          <option :value="null">-- None --</option>
        </template>
      </BFormSelect>
    </BFormGroup>

    <BFormGroup label="Head Variant" label-for="head-style-variant" label-cols-lg="2" class="my-2">
      <BFormSelect id="head-style-variant" v-model="headVariant" :options="variants">
        <template #first>
          <option :value="null">-- None --</option>
        </template>
      </BFormSelect>
    </BFormGroup>

    <BFormGroup label="Foot Variant" label-for="foot-style-variant" label-cols-lg="2" class="my-2">
      <BFormSelect id="foot-style-variant" v-model="footVariant" :options="variants">
        <template #first>
          <option :value="null">-- None --</option>
        </template>
      </BFormSelect>
    </BFormGroup>

    <BTable
      :striped="striped"
      :striped-columns="stripedColumns"
      :bordered="bordered"
      :borderless="borderless"
      :outlined="outlined"
      :small="small"
      :hover="hover"
      :dark="dark"
      :fixed="fixed"
      :foot-clone="footClone"
      :no-border-collapse="noCollapse"
      :items="items"
      :fields="fields"
      :variant="variant"
      :head-variant="headVariant"
      :foot-variant="footVariant"
    />
  </div>
</template>

<script setup lang="ts">
import type {ColorVariant} from 'bootstrap-vue-next'
import {ref} from 'vue'

const fields = ['first_name', 'last_name', 'age']
const items = [
  {age: 40, first_name: 'Dickerson', last_name: 'Macdonald'},
  {age: 21, first_name: 'Larsen', last_name: 'Shaw'},
  {age: 89, first_name: 'Geneva', last_name: 'Wilson'},
]

const striped = ref(false)
const stripedColumns = ref(false)
const bordered = ref(false)
const borderless = ref(false)
const outlined = ref(false)
const small = ref(false)
const hover = ref(false)
const dark = ref(false)
const fixed = ref(false)
const footClone = ref(false)
const variant = ref<ColorVariant | null>(null)
const headVariant = ref<ColorVariant | null>(null)
const footVariant = ref<ColorVariant | null>(null)
const noCollapse = ref(false)

const variants = ['primary', 'secondary', 'info', 'danger', 'warning', 'success', 'light', 'dark']
</script>

<template>
  <div>
    <BTable :items="items" :fields="fields" :tbody-tr-class="rowClass" />
  </div>
</template>

<script setup lang="ts">
import type {TableRowType, TableStrictClassValue} from 'bootstrap-vue-next'

interface Person {
  age: number
  first_name: string
  last_name: string
  status?: string
}

const fields = ['first_name', 'last_name', 'age']
const items = [
  {age: 40, first_name: 'Dickerson', last_name: 'Macdonald', status: 'awesome'},
  {age: 21, first_name: 'Larsen', last_name: 'Shaw'},
  {age: 89, first_name: 'Geneva', last_name: 'Wilson'},
]

const rowClass = (item: Person, type: TableRowType): TableStrictClassValue =>
  type === 'row' && item.status === 'awesome' ? 'table-success' : ''
</script>

<template>
  <div>
    <BTable responsive :items="items" />
  </div>
</template>

<script setup lang="ts">
const items = [
  {
    heading1: 'table cell',
    heading2: 'table cell',
    heading3: 'table cell',
    heading4: 'table cell',
    heading5: 'table cell',
    heading6: 'table cell',
    heading7: 'table cell',
    heading8: 'table cell',
    heading9: 'table cell',
    heading10: 'table cell',
    heading11: 'table cell',
    heading12: 'table cell',
  },
  {
    heading1: 'table cell',
    heading2: 'table cell',
    heading3: 'table cell',
    heading4: 'table cell',
    heading5: 'table cell',
    heading6: 'table cell',
    heading7: 'table cell',
    heading8: 'table cell',
    heading9: 'table cell',
    heading10: 'table cell',
    heading11: 'table cell',
    heading12: 'table cell',
  },
  {
    heading1: 'table cell',
    heading2: 'table cell',
    heading3: 'table cell',
    heading4: 'table cell',
    heading5: 'table cell',
    heading6: 'table cell',
    heading7: 'table cell',
    heading8: 'table cell',
    heading9: 'table cell',
    heading10: 'table cell',
    heading11: 'table cell',
    heading12: 'table cell',
  },
]
</script>

<template>
  <div>
    <BTable stacked :items="items" />
  </div>
</template>

<script setup lang="ts">
const items = [
  {age: 40, first_name: 'Dickerson', last_name: 'Macdonald'},
  {age: 21, first_name: 'Larsen', last_name: 'Shaw'},
  {age: 89, first_name: 'Geneva', last_name: 'Wilson'},
]
</script>

<template>
  <div>
    <BTable :items="items" :fields="fields">
      <template #table-caption>This is a table caption.</template>
    </BTable>
  </div>
</template>

<script setup lang="ts">
const fields = ['first_name', 'last_name', 'age']
const items = [
  {age: 40, first_name: 'Dickerson', last_name: 'Macdonald'},
  {age: 21, first_name: 'Larsen', last_name: 'Shaw'},
  {age: 89, first_name: 'Geneva', last_name: 'Wilson'},
]
</script>

<template>
  <div>
    <BTable :items="items" :fields="fields" caption-top>
      <template #table-caption>This is a table caption at the top.</template>
    </BTable>
  </div>
</template>

<script setup lang="ts">
const fields = ['first_name', 'last_name', 'age']
const items = [
  {age: 40, first_name: 'Dickerson', last_name: 'Macdonald'},
  {age: 21, first_name: 'Larsen', last_name: 'Shaw'},
  {age: 89, first_name: 'Geneva', last_name: 'Wilson'},
]
</script>

<template>
  <div>
    <BButton @click="toggleBusy">Toggle Busy State</BButton>

    <BTable :items="items" :busy="isBusy" class="mt-3" outlined>
      <!-- <template #table-busy>
        <div class="text-center text-danger my-2">
          <BSpinner class="align-middle" />
          <strong>Loading...</strong>
        </div>
      </template> -->
    </BTable>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
const isBusy = ref(false)
const items = [
  {first_name: 'Dickerson', last_name: 'MacDonald', age: 40},
  {first_name: 'Larsen', last_name: 'Shaw', age: 21},
  {first_name: 'Geneva', last_name: 'Wilson', age: 89},
  {first_name: 'Jami', last_name: 'Carney', age: 38},
]

const toggleBusy = () => {
  isBusy.value = !isBusy.value
}
</script>

<template>
  <div>
    <BTable small :fields="fields" :items="items" responsive="sm">
      <!-- A virtual column -->
      <template #cell(index)="data">
        {{ data.index + 1 }}
      </template>

      <!-- A custom formatted column -->
      <template #cell(name)="data">
        <b class="text-info">{{ data.item.name.last.toUpperCase() }}</b
        >, <b>{{ data.item.name.first }}</b>
      </template>

      <!-- A virtual composite column -->
      <template #cell(nameage)="data">
        {{ data.item.name.first }} is {{ data.item.age }} years old
      </template>

      <!-- Optional default data cell scoped slot -->
      <template #cell()="data">
        <i>{{ data.value }}</i>
      </template>
    </BTable>
  </div>
</template>

<script setup lang="ts">
interface Person {
  name: {first: string; last: string}
  sex: string
  age: number
}

const fields = [
  // A virtual column that doesn't exist in items
  'index',
  // A column that needs custom formatting
  {key: 'name', label: 'Full Name'},
  // A regular column
  'age',
  // A regular column
  'sex',
  // A virtual column made up from two fields
  {key: 'nameage', label: 'First name and age'},
]
const items: Person[] = [
  {name: {first: 'John', last: 'Doe'}, sex: 'Male', age: 42},
  {name: {first: 'Jane', last: 'Doe'}, sex: 'Female', age: 36},
  {name: {first: 'Rubin', last: 'Kincade'}, sex: 'Male', age: 73},
  {name: {first: 'Shirley', last: 'Partridge'}, sex: 'Female', age: 62},
]
</script>

<template>
  <div>
    <b-table :items="items">
      <template #cell(html)="data">
        <!-- eslint-disable vue/no-v-html -->
        <span v-html="data.value" />
      </template>
    </b-table>
  </div>
</template>

<script setup lang="ts">
const items = [
  {
    text: 'This is <i>escaped</i> content',
    html: 'This is <i>raw <strong>HTML</strong></i> <span style="color:red">content</span>',
  },
]
</script>

<template>
  <div>
    <BTable :fields="fields" :items="items">
      <template #cell(name)="data">
        <!-- `data.value` is the value after formatted by the Formatter -->
        <a :href="`#${(data.value as any as string).replace(/[^a-z]+/i, '-').toLowerCase()}`">{{
          data.value
        }}</a>
      </template>
    </BTable>
  </div>
</template>

<script setup lang="ts">
import type {TableFieldRaw} from 'bootstrap-vue-next'

interface Name {
  first: string
  last: string
}

interface Person {
  name: Name
  sex: string
  age: number
}

const fullName = (value: unknown) => {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const name = value as any as Name
  return `${name.first} ${name.last}`
}

const fields: TableFieldRaw<Person>[] = [
  {
    // A column that needs custom formatting,
    // calling formatter 'fullName' in this app
    key: 'name',
    label: 'Full Name',
    formatter: fullName,
  },
  // A regular column
  'age',
  {
    // A regular column with custom formatter
    key: 'sex',
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    formatter: (value) => (value as any as string).charAt(0).toUpperCase(),
  },
  {
    // A virtual column with custom formatter
    key: 'birthYear',
    label: 'Calculated Birth Year',
    formatter: (value_, key_, item: Person) => (new Date().getFullYear() - item.age).toString(),
  },
]

const items = [
  {name: {first: 'John', last: 'Doe'}, sex: 'Male', age: 42},
  {name: {first: 'Jane', last: 'Doe'}, sex: 'Female', age: 36},
  {name: {first: 'Rubin', last: 'Kincade'}, sex: 'male', age: 73},
  {name: {first: 'Shirley', last: 'Partridge'}, sex: 'female', age: 62},
]
</script>

<template>
  <div>
    <BTable :fields="fields" :items="items" foot-clone>
      <!-- A custom formatted data column cell -->
      <template #cell(name)="data">
        {{ (data.value as any as Name).first }} {{ (data.value as any as Name).last }}
      </template>

      <!-- A custom formatted header cell for field 'name' -->
      <template #head(name)="data">
        <span class="text-info">{{ data.label!.toUpperCase() }}</span>
      </template>

      <!-- A custom formatted footer cell for field 'name' -->
      <template #foot(name)="data">
        <span class="text-danger">{{ data.label }}</span>
      </template>

      <!-- Default fall-back custom formatted footer cell -->
      <template #foot()="data">
        <i>{{ data.label }}</i>
      </template>
    </BTable>
  </div>
</template>

<script setup lang="ts">
type Name = {first: string; last: string}

const fields = [
  // A column that needs custom formatting
  {key: 'name', label: 'Full Name'},
  // A regular column
  'age',
  // A regular column
  'sex',
]
const items = [
  {name: {first: 'John', last: 'Doe'}, sex: 'Male', age: 42},
  {name: {first: 'Jane', last: 'Doe'}, sex: 'Female', age: 36},
  {name: {first: 'Rubin', last: 'Kincade'}, sex: 'Male', age: 73},
  {name: {first: 'Shirley', last: 'Partridge'}, sex: 'Female', age: 62},
]
</script>

<template>
  <div>
    <BTable :items="items" :fields="fields" responsive="sm">
      <template #thead-top>
        <BTr>
          <BTh colspan="2"><span class="visually-hidden">Name and ID</span></BTh>
          <BTh variant="secondary">Type 1</BTh>
          <BTh variant="primary" colspan="3">Type 2</BTh>
          <BTh variant="danger">Type 3</BTh>
        </BTr>
      </template>
    </BTable>
  </div>
</template>

<script setup lang="ts">
const items = [
  {
    name: 'Stephen Hawking',
    id: 1,
    type1: false,
    type2a: true,
    type2b: false,
    type2c: false,
    type3: false,
  },
  {
    name: 'Johnny Appleseed',
    id: 2,
    type1: false,
    type2a: true,
    type2b: true,
    type2c: false,
    type3: false,
  },
  {
    name: 'George Washington',
    id: 3,
    type1: false,
    type2a: false,
    type2b: false,
    type2c: false,
    type3: true,
  },
  {
    name: 'Albert Einstein',
    id: 4,
    type1: true,
    type2a: false,
    type2b: false,
    type2c: true,
    type3: false,
  },
  {
    name: 'Isaac Newton',
    id: 5,
    type1: true,
    type2a: true,
    type2b: false,
    type2c: true,
    type3: false,
  },
]
const fields = [
  'name',
  {key: 'id', label: 'ID'},
  {key: 'type1', label: 'Type 1'},
  {key: 'type2a', label: 'Type 2A'},
  {key: 'type2b', label: 'Type 2B'},
  {key: 'type2c', label: 'Type 2C'},
  {key: 'type3', label: 'Type 3'},
]
</script>

<template>
  <div>
    <BTable sticky-header :items="items" head-variant="light" />
  </div>
</template>

<script setup lang="ts">
const items = [
  {heading1: 'table cell', heading2: 'table cell', heading3: 'table cell'},
  {heading1: 'table cell', heading2: 'table cell', heading3: 'table cell'},
  {heading1: 'table cell', heading2: 'table cell', heading3: 'table cell'},
  {heading1: 'table cell', heading2: 'table cell', heading3: 'table cell'},
  {heading1: 'table cell', heading2: 'table cell', heading3: 'table cell'},
  {heading1: 'table cell', heading2: 'table cell', heading3: 'table cell'},
  {heading1: 'table cell', heading2: 'table cell', heading3: 'table cell'},
  {heading1: 'table cell', heading2: 'table cell', heading3: 'table cell'},
  {heading1: 'table cell', heading2: 'table cell', heading3: 'table cell'},
  {heading1: 'table cell', heading2: 'table cell', heading3: 'table cell'},
  {heading1: 'table cell', heading2: 'table cell', heading3: 'table cell'},
  {heading1: 'table cell', heading2: 'table cell', heading3: 'table cell'},
]
</script>

<template>
  <div>
    <div class="mb-2">
      <b-form-checkbox v-model="stickyHeader" inline>Sticky header</b-form-checkbox>
      <b-form-checkbox v-model="noCollapse" inline>No border collapse</b-form-checkbox>
    </div>
    <b-table
      :sticky-header="stickyHeader"
      :no-border-collapse="noCollapse"
      responsive
      :items="items"
      :fields="fields"
    >
      <!-- We are using utility class `text-nowrap` to help illustrate horizontal scrolling -->
      <template #head(id)>
        <div class="text-nowrap">Row ID</div>
      </template>
      <template #head()="scope">
        <div class="text-nowrap">Heading {{ scope.label }}</div>
      </template>
    </b-table>
  </div>
</template>

<script setup lang="ts">
import type {TableFieldRaw} from 'bootstrap-vue-next'
import {ref} from 'vue'

const fields: TableFieldRaw[] = [
  {key: 'id', stickyColumn: true, isRowHeader: true, variant: 'primary'},
  'a',
  'b',
  {key: 'c', stickyColumn: true, variant: 'info'},
  'd',
  'e',
  'f',
  'g',
  'h',
  'i',
  'j',
  'k',
  'l',
]
const items = [
  {id: 1, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11},
  {id: 2, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11},
  {id: 3, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11},
  {id: 4, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11},
  {id: 5, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11},
  {id: 6, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11},
  {id: 7, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11},
  {id: 8, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11},
  {id: 9, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11},
  {id: 10, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11},
]

const stickyHeader = ref(true)
const noCollapse = ref(false)
</script>

<template>
  <div>
    <BTable :items="items" :fields="fields" striped responsive="sm">
      <template #cell(show_details)="row">
        <BButton size="sm" class="mr-2" @click="row.toggleDetails">
          {{ row.detailsShowing ? 'Hide' : 'Show' }} Details
        </BButton>

        <!-- As `row.showDetails` is one-way, we call the toggleDetails function on @change -->
        <BFormCheckbox v-model="row.detailsShowing" @change="row.toggleDetails">
          Details via check
        </BFormCheckbox>
      </template>

      <template #row-details="row">
        <BCard>
          <BRow class="mb-2">
            <BCol sm="3" class="text-sm-right"><b>Age:</b></BCol>
            <BCol>{{ row.item.age }}</BCol>
          </BRow>

          <BRow class="mb-2">
            <BCol sm="3" class="text-sm-right"><b>Is Active:</b></BCol>
            <BCol>{{ row.item.isActive }}</BCol>
          </BRow>

          <BButton size="sm" @click="row.toggleDetails">Hide Details</BButton>
        </BCard>
      </template>
    </BTable>
  </div>
</template>

<script setup lang="ts">
const fields = ['first_name', 'last_name', 'show_details']
const items = [
  {isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald'},
  {isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw'},
  {
    isActive: false,
    age: 89,
    first_name: 'Geneva',
    last_name: 'Wilson',
    _showDetails: true,
  },
  {isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney'},
]
</script>

<template>
  <div>
    <BFormGroup label="Selection mode:" label-for="table-select-mode-select" label-cols-md="4">
      <BFormSelect
        id="table-select-mode-select"
        v-model="selectMode"
        :options="modes"
        class="mb-3"
      />
    </BFormGroup>

    <BTable
      ref="selectable-table"
      :items="items"
      :fields="fields"
      :select-mode="selectMode"
      responsive="sm"
      selectable
      @update:selected-items="onSelectedItems"
    >
      <!-- Example scoped slot for select state illustrative purposes -->
      <template #cell(selected)="{rowSelected}">
        <template v-if="rowSelected">
          <span aria-hidden="true">&check;</span>
          <span class="sr-only">Selected</span>
        </template>
        <template v-else>
          <span aria-hidden="true">&nbsp;</span>
          <span class="sr-only">Not selected</span>
        </template>
      </template>
    </BTable>
    <p>
      <BButton size="sm" class="me-2" @click="selectAllRows">Select all</BButton>
      <BButton size="sm" class="me-2" @click="clearSelected">Clear selected</BButton>
      <BButton size="sm" class="me-2" @click="selectThirdRow">Select 3rd row</BButton>
      <BButton size="sm" @click="unselectThirdRow">Unselect 3rd row</BButton>
    </p>
    <p>
      Selected Rows:<br />
      {{ selected }}
    </p>
  </div>
</template>

<script setup lang="ts">
import {ref, useTemplateRef} from 'vue'
import {BTable} from 'bootstrap-vue-next'
import type {ComponentExposed} from 'vue-component-type-helpers'

interface Person {
  first_name: string
  last_name: string
  age: number
  isActive: boolean
}

const selectableTable = useTemplateRef<ComponentExposed<typeof BTable>>('selectable-table')

const modes = ['multi', 'single', 'range']
const fields = ['selected', 'isActive', 'age', 'first_name', 'last_name']
const items: Person[] = [
  {isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald'},
  {isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw'},
  {isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson'},
  {isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney'},
]
const selectMode = ref<'multi' | 'single' | 'range'>('multi')

const selected = ref<Person[]>([])

const onSelectedItems = (selectedItems: readonly Person[]) => {
  selected.value = [...selectedItems]
}

const selectAllRows = () => {
  selectableTable?.value?.selectAllRows()
}
const clearSelected = () => {
  selectableTable?.value?.clearSelected()
}
const selectThirdRow = () => {
  // Rows are indexed from 0, so the third row is index 2
  selectableTable?.value?.selectRow(2)
}
const unselectThirdRow = () => {
  // Rows are indexed from 0, so the third row is index 2
  selectableTable?.value?.unselectRow(2)
}
</script>

<template>
  <BTable :sort-by="[{key: 'first_name', order: 'desc'}]" :items="items" :fields="fields" />
</template>

<script setup lang="ts">
import {type TableFieldRaw, type TableItem} from 'bootstrap-vue-next'

interface SortPerson {
  first_name: string
  last_name: string
  age: number
  isActive: boolean
}

const items: TableItem<SortPerson>[] = [
  {isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald'},
  {isActive: true, age: 45, first_name: 'Zelda', last_name: 'Macdonald'},
  {isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw'},
  {isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson'},
  {isActive: false, age: 89, first_name: 'Gary', last_name: 'Wilson'},
  {isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney'},
]

const fields: Exclude<TableFieldRaw<SortPerson>, string>[] = [
  {key: 'last_name', sortable: true},
  {key: 'first_name', sortable: true},
  {key: 'age', sortable: true},
  {key: 'isActive', sortable: false},
]
</script>

<template>
  <BTable v-model:sort-by="sortBy" :items="items" :fields="fields" />
  <div>sortBy = {{ JSON.stringify(sortBy) }}</div>
  <div>singleSortBy = {{ JSON.stringify(singleSortBy) }}</div>
</template>

<script setup lang="ts">
import {type BTableSortBy, type TableFieldRaw, type TableItem} from 'bootstrap-vue-next'
import {computed, ref} from 'vue'

interface SortPerson {
  first_name: string
  last_name: string
  age: number
  isActive: boolean
}

const items: TableItem<SortPerson>[] = [
  {isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald'},
  {isActive: true, age: 45, first_name: 'Zelda', last_name: 'Macdonald'},
  {isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw'},
  {isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson'},
  {isActive: false, age: 89, first_name: 'Gary', last_name: 'Wilson'},
  {isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney'},
]

const fields: TableFieldRaw<SortPerson>[] = [
  {key: 'last_name', sortable: true},
  {key: 'first_name', sortable: true},
  {key: 'age', sortable: true},
  {key: 'isActive', sortable: false},
]

const sortBy = ref<BTableSortBy[]>([{key: 'first_name', order: 'desc'}])

const singleSortBy = computed(() => sortBy.value.find((sb) => sb.order !== undefined))
</script>