第四章：高级组件

4.1 数据表格

概述

Shadcn的数据表格组件提供了强大的数据展示和交互能力，支持排序、分页、筛选等高级功能。基于React Table库构建，同时深度集成了Tailwind CSS的样式系统。

核心特性

  1. 开箱即用的功能：

    • 客户端/服务端分页
    • 多列排序
    • 行选择功能
    • 列可见性控制

  2. 样式定制：

    import { DataTable } from 'shadcn/data-table'

<DataTable 
  className="bg-white rounded-lg shadow"
  headerClassName="font-semibold text-gray-700"
  rowClassName="hover:bg-gray-50 transition-colors"
/>

基础使用示例

import { useDataTable } from 'shadcn/data-table'

const columns = [
  {
    accessorKey: 'id',
    header: 'ID',
  },
  {
    accessorKey: 'name',
    header: 'Name',
    cell: ({ row }) => <span className="font-medium">{row.name}</span>
  }
]

function UserTable({ data }) {
  const table = useDataTable({
    columns,
    data,
    defaultPageSize: 10
  })

  return (
    <DataTable 
      table={table}
      pagination
      sorting
    />
  )
}

高级功能实现

  1. 服务端数据处理：

    const table = useDataTable({
  columns,
  data: [],
  rowCount: totalRecords,
  manualPagination: true,
  onPaginationChange: (pagination) => {
    fetchData(pagination.pageIndex, pagination.pageSize)
  }
})

  2. 自定义筛选器：

    <DataTable
  table={table}
  filters={
    <div className="flex gap-2">
      <Input
        placeholder="Search..."
        value={globalFilter}
        onChange={(e) => setGlobalFilter(e.target.value)}
      />
      <Select
        options={statusOptions}
        onChange={(value) => setStatusFilter(value)}
      />
    </div>
  }
/>

性能优化建议

  1. 使用memo优化自定义单元格组件
  2. 对于大型数据集启用虚拟滚动：
    <DataTable
  virtualized
  rowHeight={48}
  overscan={10}
/>
  3. 在服务端场景下实现去抖请求

常见问题解决方案

  1. 列宽自适应问题：

    columns: [
  {
    size: 120, // 固定宽度
    minSize: 80,
    maxSize: 200
  }
]

  2. 复杂表头处理：

    {
  header: 'Performance',
  columns: [
    { accessorKey: 'score' },
    { accessorKey: 'progress' }
  ]
}

扩展阅读

  • 与图表库集成实现可视化表格
  • 实现Excel导出功能
  • 拖拽列排序的实现方案
Last Updated::