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
MJ Jung
