Data Table
Feature-rich React DataTable component for Framer with search, sorting, filtering, pagination, row selection and responsive design.
Made with Workshop
Build your own component with AI
Feature-rich React DataTable component for Framer with search, sorting, filtering, pagination, row selection and responsive design.
Made with Workshop
Build your own component with AI
This is a comprehensive Data Table component built specifically for Framer that recreates the functionality of popular data table libraries like shadcn's DataTable. The component is designed to handle tabular data with extensive customization and interaction capabilities.
Core Features
Data Management
Accepts array of objects as data input with customizable column definitions
Automatic column detection from data structure when columns aren't explicitly defined
Global search functionality across all visible columns
Individual column filtering with clear options
Multi-column sorting with visual indicators
User Interface
Fully responsive design that adapts to container width
Compact view automatically activates on smaller screens
Customizable styling including colors, fonts, borders, and spacing
Striped rows and hover effects for improved readability
Sticky header option for long tables
Advanced Functionality
Row selection with individual checkboxes and select-all option
Pagination with configurable items per page
Export capabilities supporting CSV, JSON, and Excel formats
Column visibility controls allowing users to show/hide columns
Resizable columns with drag handles
Row action menus with customizable action buttons
Customization Options
Comprehensive Framer property controls for all visual aspects
Font controls for both header and body text
Color theming for backgrounds, borders, text, and interactive elements
Toggle controls for enabling/disabling individual features
Configurable empty state messaging
