You can make any cell clickable by writing it in one of the formats below. This works the same way for both CSV input and Google Sheets.
| Cell content | What you see in the table | When to use |
| ------------ | ------------------------- | ----------- |
| `[Visit](https://acme.com)` | `Visit` (clickable) | Recommended. Shows a short label, hides the URL. Works in any column. |
| `https://acme.com` | `https://acme.com` (clickable) | When you want the URL itself to be visible. |
| `Visit \| https://acme.com` | `Visit` (clickable) | Only inside a link column (see below). |
Email and phone links are also supported
- `tel:+1-555-1234`
Turn on Auto-Detect Links in the property panel if you want any URL, email, or phone number that appears inside a normal text cell to become clickable automatically. Off by default.
If an entire column should always be a link, set that column's style to `link` in Column Styles. For example, to make the third column a link column
```
none,none,link,pill
```
Inside a link column you can use the `Label | URL` form to show a friendly label.
If your sheet uses the `=HYPERLINK("url", "label")` formula, the link will not work in the table. Google's public sheet export only returns the label and removes the URL, so the component cannot read it.
To fix this, replace the formula with the markdown form directly in the cell
| Before (does not work) | After (works) |
| ---------------------- | ------------- |
| `=HYPERLINK("https://acme.com", "Visit")` | `[Visit](https://acme.com)` |
After updating the sheet, click the Refresh button on the table.
Use these properties to style links
- Link Color β color of the clickable text
- Underline Links β show or hide the underline
- Open Links in New Tab β open in a new browser tab when clicked
Connect Google Sheets or paste CSV data to create dynamic tables. Includes search, filter, sort, pagination, and customizable status badges. Perfect for dashboards
Data source options: CSV input or Google Sheets.
Search and filter capabilities.
Column sorting on click.
Pagination support for managing large datasets.
Manual refresh option for Google Sheets data.
Customizable styles for headers and data cells.
Badge color rules for visual representation of status values.
To use the Dynamic Data Table in your Framer project, follow these steps
Open your Framer project.
Navigate to the Marketplace section.
Search for Dynamic Data Table and click on it.
Click the Install button to add the component to your project.
Drag and drop the Dynamic Data Table component onto your canvas.
To customize and integrate the Dynamic Data Table into your project, follow these steps
Select the Dynamic Data Table component on your canvas.
In the properties panel, choose your data source:- For CSV, enter your data in the provided text area.- For Google Sheets, paste the public URL of your sheet and specify the sheet tab name.
Define the column headers that match your data.
Customize the appearance using the available style options such as background color, text color, and border settings.
Enable or disable features like sorting, searching, filtering, and pagination based on your requirements.
Preview your project to see the Dynamic Data Table in action.
dataSource: "csv" | "googleSheets" (default: "csv") - Select data input method
manualData: string (default: sample CSV data) - Manually input data in CSV format
googleSheetUrl: string (default: "") - Public Google Sheets URL
sheetName: string (default: "Sheet1") - Sheet tab name to load
skipFirstRow: boolean (default: true) - Skip the first row (exclude header)
headers: string[] (default: ["Name", "Email", "Role", "Status"]) - Table header array
columnStyles: string (default: "none,none,dot,pill") - Badge style per column (none/dot/pill)
badgeColorRules: array (default: predefined rules) - Keyword-based badge color rules
showTitle: boolean (default: false) - Toggle table title visibility
tableTitle: string (default: "Data Table") - Table title text
titleSize: number (default: 20) - Title font size
style: "minimal" | "striped" | "bordered" | "modern" (default: "modern") - Table style preset
backgroundColor: string (default: "#0f0f14") - Table background color
headerColor: string (default: "#1a1a24") - Header background color
headerTextColor: string (default: "#ffffff") - Header text color
textColor: string (default: "#ffffff") - Body text color
accentColor: string (default: "#6366f1") - Accent color (buttons, links, etc.)
rowHoverColor: string (default: "#6366f120") - Row background color on hover
borderRadius: number (default: 12) - Table corner radius
borderColor: string (default: "#2a2a3a") - Border color
showBorder: boolean (default: false) - Toggle border visibility
showHeader: boolean (default: true) - Toggle header row visibility
searchBackground: string (default: "#1a1a24") - Search bar background color
searchBorderColor: string (default: "#2a2a3a") - Search bar border color
filterButtonColor: string (default: "#2a2a3a") - Filter button background color
filterButtonTextColor: string (default: "#ffffff") - Filter button text color
enableHover: boolean (default: true) - Enable row hover effect
enableAnimation: boolean (default: true) - Enable animation effects
enableSearch: boolean (default: true) - Enable search feature
enableFilter: boolean (default: true) - Enable filter feature
filterColumn: string (default: "") - Column name to apply filtering to
enableSort: boolean (default: true) - Enable sorting feature
enablePagination: boolean (default: true) - Enable pagination
rowsPerPage: number (default: 10) - Number of rows per page
showRefreshButton: boolean (default: true) - Toggle refresh button visibility
showScrollbar: boolean (default: true) - Toggle scrollbar visibility
scrollbarColor: string (default: "#6366f1") - Scrollbar color
You can make any cell clickable by writing it in one of the formats below. This works the same way for both CSV input and Google Sheets.
| Cell content | What you see in the table | When to use |
| ------------ | ------------------------- | ----------- |
| `[Visit](https://acme.com)` | `Visit` (clickable) | Recommended. Shows a short label, hides the URL. Works in any column. |
| `https://acme.com` | `https://acme.com` (clickable) | When you want the URL itself to be visible. |
| `Visit \| https://acme.com` | `Visit` (clickable) | Only inside a link column (see below). |
Email and phone links are also supported
- `tel:+1-555-1234`
Turn on Auto-Detect Links in the property panel if you want any URL, email, or phone number that appears inside a normal text cell to become clickable automatically. Off by default.
If an entire column should always be a link, set that column's style to `link` in Column Styles. For example, to make the third column a link column
```
none,none,link,pill
```
Inside a link column you can use the `Label | URL` form to show a friendly label.
If your sheet uses the `=HYPERLINK("url", "label")` formula, the link will not work in the table. Google's public sheet export only returns the label and removes the URL, so the component cannot read it.
To fix this, replace the formula with the markdown form directly in the cell
| Before (does not work) | After (works) |
| ---------------------- | ------------- |
| `=HYPERLINK("https://acme.com", "Visit")` | `[Visit](https://acme.com)` |
After updating the sheet, click the Refresh button on the table.
Use these properties to style links
- Link Color β color of the clickable text
- Underline Links β show or hide the underline
- Open Links in New Tab β open in a new browser tab when clicked
Connect Google Sheets or paste CSV data to create dynamic tables. Includes search, filter, sort, pagination, and customizable status badges. Perfect for dashboards
Data source options: CSV input or Google Sheets.
Search and filter capabilities.
Column sorting on click.
Pagination support for managing large datasets.
Manual refresh option for Google Sheets data.
Customizable styles for headers and data cells.
Badge color rules for visual representation of status values.
To use the Dynamic Data Table in your Framer project, follow these steps
Open your Framer project.
Navigate to the Marketplace section.
Search for Dynamic Data Table and click on it.
Click the Install button to add the component to your project.
Drag and drop the Dynamic Data Table component onto your canvas.
To customize and integrate the Dynamic Data Table into your project, follow these steps
Select the Dynamic Data Table component on your canvas.
In the properties panel, choose your data source:- For CSV, enter your data in the provided text area.- For Google Sheets, paste the public URL of your sheet and specify the sheet tab name.
Define the column headers that match your data.
Customize the appearance using the available style options such as background color, text color, and border settings.
Enable or disable features like sorting, searching, filtering, and pagination based on your requirements.
Preview your project to see the Dynamic Data Table in action.
dataSource: "csv" | "googleSheets" (default: "csv") - Select data input method
manualData: string (default: sample CSV data) - Manually input data in CSV format
googleSheetUrl: string (default: "") - Public Google Sheets URL
sheetName: string (default: "Sheet1") - Sheet tab name to load
skipFirstRow: boolean (default: true) - Skip the first row (exclude header)
headers: string[] (default: ["Name", "Email", "Role", "Status"]) - Table header array
columnStyles: string (default: "none,none,dot,pill") - Badge style per column (none/dot/pill)
badgeColorRules: array (default: predefined rules) - Keyword-based badge color rules
showTitle: boolean (default: false) - Toggle table title visibility
tableTitle: string (default: "Data Table") - Table title text
titleSize: number (default: 20) - Title font size
style: "minimal" | "striped" | "bordered" | "modern" (default: "modern") - Table style preset
backgroundColor: string (default: "#0f0f14") - Table background color
headerColor: string (default: "#1a1a24") - Header background color
headerTextColor: string (default: "#ffffff") - Header text color
textColor: string (default: "#ffffff") - Body text color
accentColor: string (default: "#6366f1") - Accent color (buttons, links, etc.)
rowHoverColor: string (default: "#6366f120") - Row background color on hover
borderRadius: number (default: 12) - Table corner radius
borderColor: string (default: "#2a2a3a") - Border color
showBorder: boolean (default: false) - Toggle border visibility
showHeader: boolean (default: true) - Toggle header row visibility
searchBackground: string (default: "#1a1a24") - Search bar background color
searchBorderColor: string (default: "#2a2a3a") - Search bar border color
filterButtonColor: string (default: "#2a2a3a") - Filter button background color
filterButtonTextColor: string (default: "#ffffff") - Filter button text color
enableHover: boolean (default: true) - Enable row hover effect
enableAnimation: boolean (default: true) - Enable animation effects
enableSearch: boolean (default: true) - Enable search feature
enableFilter: boolean (default: true) - Enable filter feature
filterColumn: string (default: "") - Column name to apply filtering to
enableSort: boolean (default: true) - Enable sorting feature
enablePagination: boolean (default: true) - Enable pagination
rowsPerPage: number (default: 10) - Number of rows per page
showRefreshButton: boolean (default: true) - Toggle refresh button visibility
showScrollbar: boolean (default: true) - Toggle scrollbar visibility
scrollbarColor: string (default: "#6366f1") - Scrollbar color
