CSV DataTable

Drop in a CSV and get an instant, styled data table with all the essentials. CSV Data Table parses a hosted CSV file, adds global search, click-to-sort headers, page controls, multi-row select, and a columns menu to toggle visibility—no code required. It ships with polished defaults, subtle hover states, and complete color & typography controls for both Light and Dark modes.

Built for marketing tables, logs, feature matrices, price lists, and quick data previews inside Framer projects.

Key Features

• CSV → Table in seconds: Point to a CSV file URL and it renders automatically.

• Search (global): Filters across all visible columns and rows.

• Column sorting: Click any header to sort asc/desc; numeric values sort numerically.

• Pagination: Smooth client-side paging with a configurable page size.

• Row selection: Select single or multiple rows; “Select All” per page supported.

• Column visibility: Inline dropdown to show/hide columns on the fly (never hides all).

• Dark/Light themes: Duplicate control sets for dark mode with thoughtful contrast.

• No global CSS: Encapsulated inline styles—zero leakage to other components.

Perfect For

• Pricing & feature comparison tables

• Data logs, changelogs, or metrics snapshots

• Team directories or product catalogs

• CSV exports turned into embedded previews

How It Works (under the hood)

• The component fetches your CSV from the csvFile URL and splits into headers (row 1) + rows (remaining lines).

• Search lowers both sides and checks cell substrings.

• Sort attempts numeric sort first (if both cells parse as numbers), otherwise localeCompare.

• Pagination slices the sorted, filtered array and keeps selection scoped to global row indices (so “Select All” applies only to the current page).

• Column visibility is stored in a Set; at least one column always remains visible.

Props & Controls

Data

• CSV File (File control or external URL)A .csv file with the first line as headers.

Behavior

• Rows Per Page (default 10)

• Show Search (default On)

• Dark Mode (default Off)

Styling — Light Mode

• Background (container)

• Border (table & inputs)

• Hover Color (rows, header bg)

• Input Background (search)

• Accent Color (checkbox accent, selected row tint)

• Text Color (muted/body text)

• Header Font (caps/weight recommended)

• Body Font

• Border Radius (container & table)

Styling — Dark Mode

• Background, Border, Hover Color, Input Background, Accent Color, Text Color(mirrors the light controls with dark-optimized defaults)

Quick Start

1. Add CSV Data Table to your canvas.

2. In CSV File, upload a .csv or paste a hosted file URL.

3. (Optional) Toggle Dark Mode and tune colors/typography.

4. Set Rows Per Page and Show Search as needed.

Tip: Use the Columns button in the top-right to quickly hide/show columns for different page contexts.

CSV Format Notes (Important)

This component uses a lightweight parser (split by line breaks and commas). For best results:

• Use simple CSV without quoted commas inside cells (e.g., avoid "New York, USA" as a single cell).

• Ensure the first row is headers.

• Avoid empty trailing lines.

• Host the CSV with proper CORS (e.g., on Framer, GitHub raw, S3, or a CDN) so the browser can fetch it.

If you need robust parsing (quoted fields, escapes), consider pre-processing your CSV or hosting a cleaned version.