Data Browser App
Getting Started
Getting Started with Data Browser
This guide will help you get started with the Data Browser App, FlowState's RxDB collection browser and editor for viewing, querying, and managing database collections.
Prerequisites
Before using the Data Browser App, ensure you have:
- Access to a FlowState workspace
- RxDB database initialized (happens automatically with FlowState)
- Optional: RxDB Server running (for REST API mode)
Accessing the App
- Navigate to the FlowState app launcher
- Click on Data Browser (database icon)
- The app opens at
/data-browser
Initial Setup
Step 1: Understand Connection Modes
The Data Browser supports two connection modes, accessible from the navbar toggle:
| Mode | Description | When to Use |
|---|---|---|
| Local | Direct connection to local RxDB database | Default mode, offline capable |
| REST | Connect via RxDB Server REST API | Remote database access, server-side operations |
Step 2: Browse Your First Collection
- Ensure you're in Local mode (default)
- Look at the sidebar on the left - it lists all available collections
- Click on a collection name (e.g.,
tasks,projects,milestones) - The data table loads with all documents from that collection
Step 3: Navigate the Data Table
Once a collection is selected, you'll see:
- Column Headers: Auto-generated from schema, click to sort
- Data Rows: Documents displayed with all their fields
- Pagination: Controls at the bottom for page size and navigation
- Selection: Checkboxes for selecting documents for batch operations
Understanding the Interface
Sidebar
The sidebar on the left displays:
- List of all available RxDB collections
- Highlighted indicator for the currently selected collection
- Loading state while collections are being fetched
Toolbar
The toolbar above the data table provides:
- Add New button: Create a new document
- Filter Bar: Add and manage query filters
- Batch Actions: Appear when documents are selected
Data Table
The main area displays:
- Sortable columns with schema-derived headers
- Click-to-edit cells (except for system fields)
- Expand icon for viewing full content of large fields
- Row selection checkboxes
- Delete button on each row
Pagination
At the bottom:
- Page size selector (10, 25, 50, 100, 250, 500)
- Page navigation (previous/next)
- Current page and total count display
Configuring REST Mode (Optional)
If you need to connect to a remote RxDB Server:
Step 1: Navigate to Server Management
- Click Servers in the navigation bar
- Click Add Server to configure a new connection
Step 2: Configure Server Details
Fill in the required fields:
| Field | Description | Example |
|---|---|---|
| Name | Display name for the server | Production Server |
| URL | RxDB Server endpoint | http://localhost:10102 |
| Token | Authentication token | (from server config) |
| Domain ID | Database domain identifier | (from server config) |
Step 3: Activate the Server
- Click the star icon next to your server to set it as active
- Toggle to REST mode in the navbar
- The Data Browser now queries the remote server
Next Steps
Once you've completed the initial setup:
- Explore Features to learn about all capabilities
- Check out Exploring Data for the complete filtering workflow
- Learn about inline editing and document management
- Review FAQ for answers to common questions
- Read Troubleshooting if you encounter issues