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.
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.
Pricing & feature comparison tables
Data logs, changelogs, or metrics snapshots
Team directories or product catalogs
CSV exports turned into embedded previews
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.
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)
Add CSV Data Table to your canvas.
In CSV File, upload a .csv or paste a hosted file URL.
(Optional) Toggle Dark Mode and tune colors/typography.
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.
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.
Syauqizaidan Khairan Khalaf
