Neumorphism UI

Data Table

用于需要排序、筛选、分页或行选择的数据集合。简单静态行使用 Table。

预览

工作区项目管理

通过同一表格状态搜索与筛选项目、排序、跨页选择行及调整每页数量。

正在加载预览。

安装

首次使用此 Registry？请先完成 基础配置与共享样式安装 。

npx shadcn@latest add @neumorphism-ui/data-table

先安装一次共享 base，然后使用 CLI 添加组件及其依赖。

工作区项目管理

npx shadcn@latest add @neumorphism-ui/data-table @neumorphism-ui/checkbox @neumorphism-ui/input @neumorphism-ui/select @neumorphism-ui/button
Registry JSON

用法

定义数据与列，创建包含所需功能的 TanStack 表格并传给 DataTable。将搜索、列标题和分页连接到同一个表格实例。

"use client";

import { columnVisibilityFeature, rowSelectionFeature, rowSortingFeature, tableFeatures, useTable } from "@tanstack/react-table";
import { DataTable } from "@/components/ui/data-table";

const features = tableFeatures({ columnVisibilityFeature, rowSelectionFeature, rowSortingFeature });
const data = [{ name: "Atlas", seats: 12 }, { name: "Beacon", seats: 4 }];
const columns = [
  { accessorKey: "name", header: "Project", enableSorting: false },
  { accessorKey: "seats", header: "Seats", enableSorting: false },
];

export default function Example() {
  const table = useTable({ features, data, columns });
  return <DataTable table={table} caption="Workspace projects" />;
}

API 参考

调用方的TanStack Table管理数据和状态，组件负责渲染。示例用稳定行ID在筛选和翻页后保留选择，数据均为示意。

组件属性类型默认值说明
DataTabletableReactTable<TFeatures, TData>—包含行模型和状态的TanStack Table实例。
DataTablecaption / emptyMessage / childrenstring / ReactNode—表格标题、空结果文本及搜索筛选工具。
DataTablePaginationlabels / pageSizesPaginationLabels / number[]—本地化分页文本并设置每页行数。

无障碍

  • 01

    提供表格标题、aria-sort及键盘可聚焦的滚动区域。

  • 02

    区分当前页选择和总选择数量，服务端分页需由调用方管理选择状态。