CSV DataTable

A clean, fast CSV data table for Framer

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 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. 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.

A clean, fast CSV data table for Framer