BreezeUI
  • English

    • Data Viewer

    An enterprise-level data viewing component based on BrConfigProvider for global theme configuration. It supports multiple view switching, filtering, and exporting, and can seamlessly integrate with BrTable and BrCard.

    Component Features

    • 🔄 Multi-view Switching: Supports fast switching between table, card, JSON, and tree structures.
    • ✨ Data Highlighting: Easily highlight important keywords in your data.
    • 📑 Built-in Pagination: Integrated client-side pagination with search filtering support.
    • 🎨 Theme Customization: Supports global theme customization based on BrConfigProvider.

    Basic Usage & Multi-view Switching

    Supports fast switching between table, card, JSON, and tree structures.

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

const demoData = ref([
  { id: 1, name: 'Alice Smith', email: 'alice@example.com', role: 'Admin', status: 'Active' },
  { id: 2, name: 'Bob Jones', email: 'bob@example.com', role: 'User', status: 'Inactive' },
])

const columns: BrDataViewerColumn[] = [
  { key: 'id', title: 'ID', width: 80 },
  { key: 'name', title: 'Full Name' },
  { key: 'email', title: 'Email Address' },
  { key: 'role', title: 'Role' },
  { key: 'status', title: 'Status' }
]
</script>

<template>
  <BrDataViewer
    :data="demoData"
    :columns="columns"
    height="400px"
  />
</template>

    Card View & Data Highlighting

    Set the default view to card via default-view="card", and combine with highlight-keywords to implement keyword highlighting.

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

const demoData = ref([
  { id: 1, name: 'Alice Smith', email: 'alice@example.com', role: 'Admin', status: 'Active' },
  { id: 2, name: 'Bob Jones', email: 'bob@example.com', role: 'User', status: 'Inactive' },
])

const columns: BrDataViewerColumn[] = [
  { key: 'id', title: 'ID', width: 80 },
  { key: 'name', title: 'Full Name' },
  { key: 'email', title: 'Email Address' },
  { key: 'role', title: 'Role' },
  { key: 'status', title: 'Status' }
]
</script>

<template>
  <BrDataViewer
    :data="demoData"
    :columns="columns"
    default-view="card"
    :allowed-views="['card', 'table']"
    :highlight-keywords="['Active']"
    height="300px"
  />
</template>

    Theme Customization & Global Configuration

    Demonstrates how to globally configure component styles via BrConfigProvider.

    <script setup lang="ts">
import { ref } from 'vue'
import { BrConfigProvider, BrDataViewer, BrDataViewerColumn } from '@breezeui/vue'

const demoData = ref([
  { id: 1, name: 'Alice Smith', email: 'alice@example.com', role: 'Admin', status: 'Active' },
  { id: 2, name: 'Bob Jones', email: 'bob@example.com', role: 'User', status: 'Inactive' },
])

const columns: BrDataViewerColumn[] = [
  { key: 'id', title: 'ID', width: 80 },
  { key: 'name', title: 'Full Name' },
  { key: 'email', title: 'Email Address' },
  { key: 'role', title: 'Role' },
  { key: 'status', title: 'Status' }
]

const customTheme = ref({
  primary: '#10b981', // Emerald 500
  radius: 0.5,
})
</script>

<template>
  <BrConfigProvider :theme="customTheme">
    <BrDataViewer
      :data="demoData"
      :columns="columns"
    />
  </BrConfigProvider>
</template>

    Pagination

    Set :pagination="true" to enable automatic client-side pagination, or pass an object for controlled pagination.

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

const demoData = ref(Array.from({ length: 25 }).map((_, i) => ({
  id: i + 1,
  name: `User ${i + 1}`,
  email: `user${i + 1}@example.com`,
  role: i % 3 === 0 ? 'Admin' : i % 2 === 0 ? 'Editor' : 'User',
  status: i % 4 === 0 ? 'Inactive' : i % 5 === 0 ? 'Pending' : 'Active'
})))

const columns: BrDataViewerColumn[] = [
  { key: 'id', title: 'ID', width: 80 },
  { key: 'name', title: 'Full Name' },
  { key: 'email', title: 'Email Address' },
  { key: 'role', title: 'Role' },
  { key: 'status', title: 'Status' }
]
</script>

<template>
  <div class="space-y-8">
    <div class="space-y-4">
      <h3 class="text-lg font-medium">Built-in Client Pagination</h3>
      <p class="text-sm text-muted-foreground">Set <code>:pagination="true"</code> to enable automatic client-side pagination.</p>
      <BrDataViewer
        :data="demoData"
        :columns="columns"
        :pagination="true"
        height="400px"
      />
    </div>
  </div>
</template>

    API Reference

    BrDataViewer

    PropTypeDefaultDescription
    dataany[][]Bound data source
    columnsBrDataViewerColumn[][]Column configuration
    defaultView'table' | 'json' | 'tree' | 'card''table'Default view type
    allowedViewsDataViewType[]['table', 'json', 'tree', 'card']List of allowed views to switch
    loadingbooleanfalseWhether it is in a loading state
    errorstring | Error | nullnullError message
    emptyTextstring'No data'Empty data prompt
    heightstring | number-Container height
    paginationBrDataViewerPagination | booleanfalsePagination configuration. Set to true to use built-in client pagination, or pass a configuration object to fully control the pagination state.
    highlightKeywordsstring[][]Keywords to highlight

    BrDataViewerColumn

    PropTypeDefaultDescription
    keystring-Column key
    titlestring-Column title
    widthstring | number-Column width
    render(row: any, index: number) => any-Custom render function
    hiddenbooleanfalseWhether to hide this column

    Events

    Event NameParametersDescription
    update:pagination(pagination: BrDataViewerPagination)Triggered when pagination changes
    view-change(view: string)Triggered when view switches