PreviewFeatures
Built with TanStack Table for robust functionality
Column sorting with visual indicators
Filtering and search across columns
Row selection with checkboxes
Pagination with customizable page sizes
Responsive design with horizontal scrolling
Shadcn/ui Data Table - Figma Component
Powerful table and datagrids built using TanStack Table. This Figma component is part of our comprehensive design system that brings the popular shadcn/ui library into your design workflow.
Every Data Table variant includes all the necessary states, properties, and styling options you need to create consistent, production-ready designs. The component seamlessly integrates with your existing Figma files and maintains full compatibility with the shadcn/ui React implementation.
Your questions, answered
Browse all 58 components
Accordion
Alert Dialog
Alert
Aspect Ratio
Avatar
Badge
Breadcrumb
Button Group
Button
Calendar
Card
Carousel
Chart
Checkbox
Collapsible
Combobox
Command
Context Menu
Data Table
Date Picker
Dialog
Drawer
Dropdown Menu
Empty
Field
Form
Hover Card
Input Group
Input OTP
Input
Item
Kbd
Label
Menubar
Native Select
Navigation Menu
Pagination
Popover
Progress
Radio Group
Resizable
Scroll Area
Select
Separator
Sheet
Sidebar
Skeleton
Slider
Sonner
Spinner
Switch
Table
Tabs
Textarea
Toast
Toggle Group
Toggle
Tooltip
Data tables in Figma
The shadcn/ui figma Data Table includes sorting, filtering, and pagination. Design admin panels, dashboards, and data-heavy interfaces in Figma with TanStack Table features. This shadcn figma component handles complex data displays.
Sorting and filtering design
Design sortable columns in Figma with the shadcn/ui figma Data Table—sort indicators, column headers, and filter controls. Prototype interactive tables where users can sort and filter data to find what they need quickly.
Selection and bulk actions
This shadcn figma Data Table includes checkbox columns for row selection and bulk actions. Design tables in Figma where users can select multiple rows and perform actions like delete, export, or batch edit.
Responsive table design
Design responsive data tables in Figma with the shadcn/ui figma component. Prototype how tables adapt from full desktop views to mobile card layouts, ensuring data remains accessible on any screen size.