---
title: "CSV DataTable — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Syauqizaidan Khairan Khalaf · Text. A clean, fast CSV data table for Framer"
canonical: "https://framer.elliotli.dev/component/csv-datatable"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/CSV DataTable

# CSV DataTable

Searchable table from a CSV file

[View on Framer](https://framer.com/marketplace/components/csv-datatable/?via=elliot-li)

![CSV DataTable preview image 1](https://framer.elliotli.dev/og/component/csv-datatable/1cf10be64836b276/1600x1200.jpg)

## Summary

A clean, fast CSV data table for Framer

## Description

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.

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-82e8a7lg-QLvidSyerN0lOEqmYa2TR220eHj72k)

## Rank history [How rankings work →](/terms#rankings)

-   All · #9114

## Details

- **Author**: Syauqizaidan Khairan Khalaf
- **Price**: $5.00
- **Published**: 2025-10-09
- **Updated**: 2026-11-05
- **Added**: 2025-10-03
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing