Data Display
Data Table
A sortable, filterable data table with pagination, row selection, and search.
by mcpSkills
Framework
nextjs
UI Library
shadcntailwind
Difficultyintermediate
English Prompt
Create a data table component with 10 rows of sample data. Include column sorting (asc/desc indicators), a search input above the table, dropdown filters, row selection checkboxes, and pagination at the bottom. Use shadcn/ui Table, Checkbox, Input, and Select components and Tailwind CSS. Style with clean borders, hover states, and alternating row backgrounds.
Chinese Prompt
创建一个包含 10 行示例数据的数据表格组件。包含列排序（升/降指示器）、表格上方搜索输入、下拉筛选、行选择复选框和底部分页。使用 shadcn/ui Table、Checkbox、Input 和 Select 组件以及 Tailwind CSS。样式使用简洁边框、悬停状态和交替行背景。
Overview
A complete data table pattern for admin panels and dashboards. Includes sorting, filtering, selection, and pagination.
Features
- Sortable column headers
- Global search input
- Column filters
- Row selection checkboxes
- Pagination controls
- Hover and alternating row styles
Usage
Copy the prompt into v0 or Cursor. Replace the sample data and columns with your dataset.
Customization
Modify the prompt to:
- Add bulk action toolbar
- Include editable cells
- Add expandable row details
- Export to CSV button