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