DataTable CSV+Sheets

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