DataTable CSV+Sheets

Live Data Table for CSV & Google Sheets

Version 2.0.0 released after 5 months!! Hyperlinks in Cells 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. Three ways to make a cell clickable | 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 - ` mailto:hello@acme.com` - `tel:+1-555-1234` Auto-Detect Links (optional) 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. Link Column (whole column is a link) 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. Important note for Google Sheets users 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. Link appearance 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 1. Introduction Connect Google Sheets or paste CSV data to create dynamic tables. Includes search, filter, sort, pagination, and customizable status badges. Perfect for dashboards 2. Features 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. 3. Installation & Setup 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. 4. How to Use 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. 5. Property Controls Reference 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

Live Data Table for CSV & Google Sheets