Data Visualise Pro transforms any CSV or Excel file into a polished, interactive data dashboard with zero configuration required. Simply connect a data file from the properties panel and your records are immediately searchable, sortable, and filterable in both a clean table view and a responsive card grid.
Universal File Support (CSV and XLSX)
Automatic Column Detection
Live Search Across All Columns
Smart Sorting
Category Filter Pills: When you specify a category column, the component extracts every unique value from that column and renders them as a scrollable row of pill buttons. Selecting any pill instantly filters the entire dataset, including the metric summary cards, so the stats always reflect the current view rather than the full dataset.
Metric Summary Cards: Designating a numeric value column unlocks four automatic summary cards displayed above the data: total record count, sum, average, and maximum. These cards recalculate in real time as the user applies searches and category filters, making them genuinely useful for exploratory analysis rather than just decorative.
Table and Grid Views: The toolbar toggle switches between a dense, scrollable table view ideal for comparing many columns at once, and a responsive card grid that surfaces the title, category badge, value, and date fields in a more scannable layout. Both views share the same filtered and sorted data state, so switching between them never resets your context.
Pagination for Large Datasets
One-Click CSV Export
Full Dark Mode
Granular Theming Controls
Branded Toolbar
Smooth State Transitions
To make the dashboard display and filter your data correctly, you need to tell it exactly which columns from your spreadsheet to look at. Here is how to set it up:
1. Open your Spreadsheet Look at the very first row of your CSV or Excel file. These are your column headers (e.g., "Product Name", "Revenue", "Department", "Launch Date").
2. Copy the Exact Column Names In the Framer properties panel, you will see fields for Title Column, Value Column, Category Column, and Date Column. You need to type the exact name of your spreadsheet headers into these boxes.
⚠️ Important: The spelling, capitalization, and spacing must match exactly. If your spreadsheet says "Revenue (USD) ", you must include the spaces and parentheses in Framer.
3. What Each Field Does:
Category Column (For Filtering): This is the most important one for sorting your data. Whatever column name you type here (like "Department" or "Status"), the dashboard will automatically generate clickable filter buttons at the top of the grid for every unique category it finds.
Value Column (For Math & Sorting): Enter the name of a column that contains numbers (like "Sales" or "Cost"). The dashboard will use this to calculate the Total, Average, and Max numbers on the top Metric Cards, and use it as the default sorting option.
Title Column: Enter the name of your main item (like "Employee Name" or "Project Title"). This becomes the bold header for each card in the Grid View.
Date Column: Enter the name of your date column. This will display a clean date readout at the bottom of the Grid View cards.
Sajjadul Kibria
