Table

A component for displaying data in rows and columns, supporting sorting, selection, and pagination.

Component Features

📋 Column Configuration: Configurable columns with title, key, width, fixed, sortable props.
✅ Row Selection: Supports single and multiple row selection via checkbox column.
↕️ Sorting: Supports single and multiple column sorting.
🎨 Custom Rendering: Supports custom cell rendering via scoped slots.
📌 Fixed Columns: Supports fixed left and right columns.
🎨 Styling: Supports row, cell, and column-level custom styling.
📄 Pagination: Supports external pagination integration.
🎨 Theme Customization: Based on BrConfigProvider for global theming and TailwindCSS local overrides.

Basic Usage

The most basic usage of the table.

<script setup lang="ts">
import { ref } from 'vue'
import { BrTable } from '@breezeui/vue'

const columns = [
  { title: 'ID', key: 'id', width: 80 },
  { title: 'Name', key: 'name', width: 150 },
  { title: 'Age', key: 'age', width: 80 },
  { title: 'Email', key: 'email', width: 200 },
]

const data = ref([
  { id: 1, name: 'Alice', age: 24, email: 'alice@example.com' },
  { id: 2, name: 'Bob', age: 28, email: 'bob@example.com' },
  { id: 3, name: 'Charlie', age: 32, email: 'charlie@example.com' },
  { id: 4, name: 'David', age: 21, email: 'david@example.com' },
])
</script>

<template>
  <BrTable :columns="columns" :data="data" row-key="id" />
</template>

Selection

Add row-selection property to enable multiple selection.

<script setup lang="ts">
import { ref } from 'vue'
import { BrTable } from '@breezeui/vue'

const columns = [
  { title: 'ID', key: 'id', width: 80 },
  { title: 'Name', key: 'name', width: 150 },
  { title: 'Status', key: 'status', width: 120 },
]

const data = ref([
  { id: 1, name: 'Alice', status: 'Active' },
  { id: 2, name: 'Bob', status: 'Inactive' },
])

const selection = ref([])

const handleSelectionChange = (keys: any[], rows: any[]) => {
  selection.value = keys
}
</script>

<template>
  <div class="space-y-4">
    <div class="text-sm text-muted-foreground">
      Selected Keys: {{ selection }}
    </div>
    <BrTable 
      :columns="columns" 
      :data="data" 
      row-selection 
      row-key="id"
      @update:selection="handleSelectionChange"
    />
  </div>
</template>

Sorting

Set sortable: true in the column configuration to enable sorting.

<script setup lang="ts">
import { ref } from 'vue'
import { BrTable } from '@breezeui/vue'

const columns = [
  { title: 'ID', key: 'id', width: 80, sortable: true },
  { title: 'Name', key: 'name', width: 150, sortable: true },
  { title: 'Age', key: 'age', width: 80, sortable: true },
  { title: 'Score', key: 'score', width: 100, sortable: true },
]

const data = ref([
  { id: 1, name: 'Alice', age: 24, score: 85 },
  { id: 2, name: 'Bob', age: 28, score: 92 },
  { id: 3, name: 'Charlie', age: 21, score: 78 },
  { id: 4, name: 'David', age: 32, score: 95 },
  { id: 5, name: 'Eve', age: 24, score: 88 },
])

const sortState = ref({ key: '', order: '' })

const handleSort = (sort: any) => {
  sortState.value = sort
}
</script>

<template>
  <div class="space-y-4">
    <div class="text-sm text-muted-foreground">
      Current Sort: {{ sortState.key ? `${sortState.key} (${sortState.order})` : 'None' }}
    </div>
    <BrTable 
      :columns="columns" 
      :data="data" 
      row-key="id"
      @sort="handleSort"
    />
  </div>
</template>

Advanced Usage

A comprehensive example including pagination, sorting, loading state, striped rows, borders, and custom column rendering.

<script setup lang="ts">
import { ref } from 'vue'
import { BrTable, BrButton } from '@breezeui/vue'

const columns = [
  { title: 'ID', key: 'id', width: 80, sortable: true },
  { title: 'Name', key: 'name', width: 150 },
  { title: 'Age', key: 'age', width: 80, sortable: true },
  { title: 'Status', key: 'status', width: 120 },
  { title: 'Action', key: 'action', width: 150 },
]

const data = ref(Array.from({ length: 15 }).map((_, i) => ({
  id: i + 1,
  name: `User ${i + 1}`,
  age: 20 + (i % 15),
  status: i % 2 === 0 ? 'Active' : 'Inactive',
})))

const pagination = ref({
  pageSize: 5,
})

const loading = ref(false)

const handleSort = (sort: any) => {
  console.log('Sort changed:', sort)
}
</script>

<template>
  <div class="space-y-4">
    <BrButton size="sm" variant="outline" @click="loading = !loading">
      Toggle Loading
    </BrButton>

    <BrTable 
      :columns="columns" 
      :data="data" 
      :pagination="pagination"
      :loading="loading"
      stripe
      border
      row-key="id"
      @sort="handleSort"
    >
      <template #cell-status="{ row }">
        <span 
          class="px-2 py-1 rounded-full text-xs font-medium"
          :class="row.status === 'Active' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'"
        >
          {{ row.status }}
        </span>
      </template>
      
      <template #cell-action="{ row }">
        <div class="flex space-x-2">
          <BrButton size="xs" variant="outline">Edit</BrButton>
          <BrButton size="xs" variant="destructive">Delete</BrButton>
        </div>
      </template>
    </BrTable>
  </div>
</template>

API

Table Props

Property	Description	Type	Default
data	Data to display	`any[]`	`[]`
columns	Configuration of table columns	`BrTableColumn[]`	`[]`
rowKey	Key of row data, used for optimizing rendering	`string \| ((row: any) => string \| number)`	`'id'`
stripe	Whether to display striped rows	`boolean`	`false`
border	Whether to display vertical borders	`boolean`	`false`
hover	Whether to highlight row on hover	`boolean`	`true`
loading	Whether to show loading state	`boolean`	`false`
loadingText	Text to show in loading state	`string`	`'Loading...'`
emptyText	Text to show when data is empty	`string`	`'No Data'`
rowSelection	Whether to show selection column	`boolean`	`false`
maxHeight	Maximum height of the table	`string \| number`	`-`
stickyHeader	Whether to fix the table header	`boolean`	`false`
pagination	Pagination configuration, `false` to hide	`BrTablePagination \| false`	`false`

Table Events

Event Name	Description	Parameters
update:selection	Triggers when selection changes	`(selectedRowKeys: (string\|number)[], selectedRows: any[])`
update:pagination	Triggers when pagination changes	`(pagination: BrTablePagination)`
sort	Triggers when sorting changes	`(sort: BrTableSort)`
row-click	Triggers when a row is clicked	`(row: any, index: number, event: MouseEvent)`

Table Slots

Slot Name	Description	Parameters
cell-[key]	Custom rendering for a specific column	`{ row, column, index }`

Column Configuration (BrTableColumn)

Property	Description	Type	Default
key	Unique identifier of the column	`string`	`-`
title	Column title	`string`	`-`
width	Column width	`string \| number`	`-`
minWidth	Minimum column width	`string \| number`	`-`
maxWidth	Maximum column width	`string \| number`	`-`
align	Alignment	`'left' \| 'center' \| 'right'`	`'left'`
fixed	Whether column is fixed	`'left' \| 'right' \| boolean`	`-`
sortable	Whether column is sortable, `custom` for custom sort	`boolean \| 'custom'`	`false`
render	Custom render function	`(row: any, index: number) => any`	`-`

#Table

#Component Features

#Basic Usage

#Selection

#Sorting

#Advanced Usage

#API

#Table Props

#Table Events

#Table Slots

#Column Configuration (BrTableColumn)