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.

ID	Full Name	Email Address	Role	Status
1	Alice Smith	alice@example.com	Admin	Active
2	Bob Jones	bob@example.com	User	Inactive

Example

Card View & Data Highlighting

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

Item 1

ID1

Full NameAlice Smith

Email Addressalice@example.com

RoleAdmin

StatusActive

Item 2

ID2

Full NameBob Jones

Email Addressbob@example.com

RoleUser

StatusInactive

Example

Theme Customization & Global Configuration

Demonstrates how to globally configure component styles via BrConfigProvider.

ID	Full Name	Email Address	Role	Status
1	Alice Smith	alice@example.com	Admin	Active
2	Bob Jones	bob@example.com	User	Inactive

Example

Pagination

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

Built-in Client Pagination

Set :pagination="true" to enable automatic client-side pagination.

ID	Full Name	Email Address	Role	Status
1	User 1	user1@example.com	Admin	Inactive
2	User 2	user2@example.com	User	Active
3	User 3	user3@example.com	Editor	Active
4	User 4	user4@example.com	Admin	Active
5	User 5	user5@example.com	Editor	Inactive
6	User 6	user6@example.com	User	Pending
7	User 7	user7@example.com	Admin	Active
8	User 8	user8@example.com	User	Active
9	User 9	user9@example.com	Editor	Inactive
10	User 10	user10@example.com	Admin	Active

Example

API Reference

BrDataViewer

Prop	Type	Default	Description
data	any[]	[]	Bound data source
columns	BrDataViewerColumn[]	[]	Column configuration
defaultView	'table' | 'json' | 'tree' | 'card'	'table'	Default view type
allowedViews	DataViewType[]	['table', 'json', 'tree', 'card']	List of allowed views to switch
loading	boolean	false	Whether it is in a loading state
error	string | Error | null	null	Error message
emptyText	string	'No data'	Empty data prompt
height	string | number	-	Container height
pagination	BrDataViewerPagination | boolean	false	Pagination configuration. Set to true to use built-in client pagination, or pass a configuration object to fully control the pagination state.
highlightKeywords	string[]	[]	Keywords to highlight

BrDataViewerColumn

Prop	Type	Default	Description
key	string	-	Column key
title	string	-	Column title
width	string | number	-	Column width
render	(row: any, index: number) => any	-	Custom render function
hidden	boolean	false	Whether to hide this column

Events

Event Name	Parameters	Description
update:pagination	(pagination: BrDataViewerPagination)	Triggered when pagination changes
view-change	(view: string)	Triggered when view switches