Skip to content
Brok UI

Loading…

No results

Document Viewers

Pro

Pro viewers for the common document formats — PDF, Word, Excel and CSV.

Open issues Report a bug
Version
v1.2.0
Stability
stable
License
Commercial license
Related
PDF Viewer
DOCX Viewer
Excel Viewer
4 of 4

CSV Viewer — A client-side CSV table viewer with quote-aware parsing, live search filtering, and numeric-aware column sorting.

Preview

employees.csv
rows
Loading…
No rows
previews.components.csv-viewer.default.blade.php Blade 
@php
    $csv = <<<'CSV'
name,email,role,department,salary,start_date
Ada Lovelace,ada@example.com,Engineer,Engineering,142000,2021-03-14
Grace Hopper,grace@example.com,Architect,Engineering,168000,2019-07-22
Alan Turing,alan@example.com,Researcher,Research,155000,2020-11-02
Katherine Johnson,katherine@example.com,Analyst,Research,128000,2022-01-18
Margaret Hamilton,margaret@example.com,Lead Engineer,Engineering,176000,2018-05-09
Dennis Ritchie,dennis@example.com,Engineer,Platform,149000,2021-09-30
Barbara Liskov,barbara@example.com,Principal,Research,191000,2017-02-11
Edsger Dijkstra,edsger@example.com,Engineer,Platform,151000,2020-06-25
CSV;
@endphp

<div class="mx-auto w-full max-w-3xl">
    <x-ui.csv-viewer :csv="$csv" caption="employees.csv" />
</div>

Installation

terminal 
php artisan ui:add pro/csv-viewer

Note

This component ships an Alpine behavior module at resources/js/ui/csv-viewer.js. Import it once from your bundle so it registers on alpine:init:

resources/js/ui/index.js JS 
import './csv-viewer.js';

Use with AI

A brief for your coding agent: install command, usage, props, guidance and the rules. Copy it, or open a prompt about this component in an assistant.

csv-viewer.md 
# Brok UI: CSV Viewer (`csv-viewer`)

A client-side CSV table viewer with quote-aware parsing, live search filtering, and numeric-aware column sorting.

Brok UI is a Laravel Blade component registry. Installed components are plain Blade files the app owns.

## Install

```bash
php artisan ui:add pro/csv-viewer
```

## Usage

```blade
@php
    $csv = <<<'CSV'
name,email,role,department,salary,start_date
Ada Lovelace,[email protected],Engineer,Engineering,142000,2021-03-14
Grace Hopper,[email protected],Architect,Engineering,168000,2019-07-22
Alan Turing,[email protected],Researcher,Research,155000,2020-11-02
Katherine Johnson,[email protected],Analyst,Research,128000,2022-01-18
Margaret Hamilton,[email protected],Lead Engineer,Engineering,176000,2018-05-09
Dennis Ritchie,[email protected],Engineer,Platform,149000,2021-09-30
Barbara Liskov,[email protected],Principal,Research,191000,2017-02-11
Edsger Dijkstra,[email protected],Engineer,Platform,151000,2020-06-25
CSV;
@endphp

<div class="mx-auto w-full max-w-3xl">
    <x-ui.csv-viewer :csv="$csv" caption="employees.csv" />
</div>
```

## Use when

- Use when users need to upload, inspect, edit, annotate, or sign real documents as part of the workflow.
- Previewing CSV data as a searchable, sortable table without a spreadsheet application.
- Rendering a CSV attachment or export directly in the browser from a URL or an inline string.

## Avoid when

- Do not use a heavy document interface when the same task can be completed more simply in structured product UI.
- The source file is a real spreadsheet with multiple sheets or formatting; use excel-viewer instead.
- The data needs to be edited, not just previewed; render an editable table or form instead.

## Anti-patterns

- Heavy document UI when structured fields are simpler

## Rules

- Use the `<brok:csv-viewer>` tag (or `<x-ui.csv-viewer>`) in Blade; do not rewrite the component.
- Prefer the documented props and variants over utility-class overrides; when a utility must win, use the `!` important modifier.
- Use semantic design tokens (`bg-primary`, `text-muted-foreground`), never raw colour utilities.
- Keep the `data-slot` attributes; they are the styling and test hooks.

## Links

- Docs: https://brokui.dev/docs/components/csv-viewer
Ask about CSV Viewer in

Working in Claude Code, Cursor or Codex? Give the agent the whole registry through the MCP server or the Brok UI skill.

API

manifest knowledge + registry-derived coverage

Props

No documented props. Pass normal Blade attributes through the component root.

Slots

  • default —

Data slots

Stable hooks for CSS overrides and browser tests.

No data-slot selectors found in the registry source.

Behavior

  • Parses CSV client-side with quote-aware parsing, so quoted fields containing commas or newlines are handled correctly.
  • The search box filters rows live, and the row count badge updates to reflect the filtered result.
  • Clicking a column header sorts the table, using numeric-aware comparison so numbers sort by value rather than lexically.
  • Installs a JavaScript behavior module when the registry item includes resources/js/ui files.

Guidance

Document workflow

Upload, inspect, edit, annotate, or sign a real document.

Use when

  • Use when users need to upload, inspect, edit, annotate, or sign real documents as part of the workflow.
  • Previewing CSV data as a searchable, sortable table without a spreadsheet application.
  • Rendering a CSV attachment or export directly in the browser from a URL or an inline string.

Avoid when

  • Do not use a heavy document interface when the same task can be completed more simply in structured product UI.
  • The source file is a real spreadsheet with multiple sheets or formatting; use excel-viewer instead.
  • The data needs to be edited, not just previewed; render an editable table or form instead.

Use instead

  • Structured product form
  • Direct data entry

Anti-patterns

  • Heavy document UI when structured fields are simpler
Anatomy
root csv-viewer-empty

Accessibility

WCAG 2.2 AA Keyboard focus-visible RTL-ready Localized labels Dark mode
Keyboard
No component-owned keyboard interaction; native element behavior applies.
Focus
none
  • The search field has a real label (visually hidden) associated with it, so screen readers announce its purpose.
  • Loading and error states surface as readable text inside the frame rather than a silently blank viewer.
  • Semantic HTML and a stable data-slot attribute for styling and scripting hooks.
  • Focus-visible rings use the ring token, so keyboard focus is always visible.
  • Disabled and invalid states are conveyed to assistive tech, not by color alone.
  • Targets WCAG 2.2 AA; verify contrast in light, dark, admin and customer surfaces in the preview.
  • Labels go through __() and layout uses logical properties (ms-*, text-start), so it mirrors under dir="rtl" — flip the preview to RTL to confirm.
  • Dark mode uses the same semantic tokens under the dark class; high contrast follows forced-color system tokens.

Livewire

Safe

Livewire can update this component through forwarded wire:* attributes.

Source

Source available with Pro

This preview shows the real Pro component, while its installable source is delivered only through the authenticated registry. Activate a license, then use the installation command above.

Open the authenticated source endpoint

Ownership & lifecycle

Owner, release state, review evidence and adoption for this item.
Owner
Platform UI (@JoshJML)
Current version
1.2.0
Status
Stable
License
pro
Accessibility reviewed
No review date recorded
Last breaking change
No date recorded
Deprecation
Not deprecated