Data Display
数据表格
一个可排序、可筛选的数据表格,包含分页、行选择和搜索功能。
作者:mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度intermediate
英文提示词
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.
中文提示词
创建一个包含 10 行示例数据的数据表格组件。包含列排序(升/降指示器)、表格上方搜索输入、下拉筛选、行选择复选框和底部分页。使用 shadcn/ui Table、Checkbox、Input 和 Select 组件以及 Tailwind CSS。样式使用简洁边框、悬停状态和交替行背景。

概述
一个适用于管理后台和仪表盘的完整数据表格模式。包含排序、筛选、选择和分页。
功能特性
- 可排序的列标题
- 全局搜索输入
- 列筛选器
- 行选择复选框
- 分页控制
- 悬停和交替行样式
使用方法
将提示词复制到 v0 或 Cursor 中。替换示例数据和列为你自己的数据集。
自定义选项
修改提示词以:
- 添加批量操作工具栏
- 包含可编辑单元格
- 添加可展开行详情
- 导出 CSV 按钮