shadcn-svelte Table 组件详解从基础响应式表格到 Data Table 实战【免费下载链接】shadcn-svelteshadcn/ui, but for Svelte. ✨项目地址: https://gitcode.com/GitHub_Trending/sh/shadcn-svelteshadcn-svelte 是 shadcn/ui 在 Svelte 生态的官方移植版本其 Table 组件是一套基于原生 HTMLtable语义、开箱即用的响应式表格组件。本文以仓库内 docs/content/components/table.md 为核心结合组件源码与示例系统讲解其安装方式、9 个组成部件、样式原理以及如何搭配 tanstack/table 构建带排序、筛选与分页的完整 Data Table让你读完即可在真实项目中落地使用。组件概览Table 组件解决什么问题Table 组件docs/content/components/table.md中描述为 A responsive table component的核心价值在于它不重新发明表格逻辑而是基于标准的table语义标签通过一套预先打磨好的 Tailwind 样式和 Svelte 5 runes 语法封装让开发者获得一个开箱即用、样式统一、可响应式滚动的表格基础层。从源码结构看docs/src/lib/registry/ui/table/index.ts该组件由 9 个独立 Svelte 部件构成全部通过命名空间导出方式对外提供导出名底层元素对应源文件Table.Roottable外包一层滚动容器 divtable.svelteTable.Headertheadtable-header.svelteTable.Bodytbodytable-body.svelteTable.Footertfoottable-footer.svelteTable.Rowtrtable-row.svelteTable.Headthtable-head.svelteTable.Celltdtable-cell.svelteTable.Captioncaptiontable-caption.svelteTable.Row同前——从 index.ts 可以看到每个部件既有短名如Root、Head也有带前缀的长名如TableRoot、TableHead两种命名均可使用Table.Root这种命名空间写法是官方示例中的首选。安装方式CLI 一键添加与手动复制原文档提供了两种安装路径官方强烈推荐使用 CLI 方式它会自动处理依赖解析与文件写入。方式一shadcn-svelte CLI推荐在项目根目录直接执行npx shadcn-sveltelatest add table该命令会从注册表拉取 Table 组件及其依赖自动写入到项目的$lib/components/ui/table目录并同步更新项目的 CSS 变量与依赖清单。这一交互流程的底层逻辑对应仓库 packages/cli/src/commands/add 目录中的命令实现。方式二手动复制如果你的项目需要定制或暂时无法使用 CLI也可以手动操作从 docs/src/lib/registry/ui/table 目录复制全部 9 个.svelte文件与index.ts到项目中的$lib/components/ui/table/目录确保项目中已安装 bits-ui确认项目的全局 CSS 中已包含下文中描述的.cn-table-*样式规则可通过 CLI 的init自动注入或手动从 docs/src/lib/registry/styles 下的风格文件同步。注意组件源码内部统一使用$lib别名导入cn与WithElementRef类型手动复制时需保证项目的 tsconfig/svelte.config 已配置该别名仓库根目录的 svelte.config.js 与 tsconfig.json 中有现成配置可参考。基础用法发票列表示例逐步拆解第一步引入组件在.svelte文件的script中引入整个命名空间script langts import * as Table from $lib/components/ui/table/index.js; /script第二步组织表格结构Table.Root Table.CaptionA list of your recent invoices./Table.Caption Table.Header Table.Row Table.Head classw-[100px]Invoice/Table.Head Table.HeadStatus/Table.Head Table.HeadMethod/Table.Head Table.Head classtext-endAmount/Table.Head /Table.Row /Table.Header Table.Body Table.Row Table.Cell classfont-mediumINV001/Table.Cell Table.CellPaid/Table.Cell Table.CellCredit Card/Table.Cell Table.Cell classtext-end$250.00/Table.Cell /Table.Row /Table.Body /Table.Root第三步结合数据渲染真实列表仓库中的官方示例 table-demo.svelte 演示了如何用{#each}循环渲染真实业务数据并额外展示了Table.Footer汇总行的写法script langts import * as Table from $lib/registry/ui/table/index.js; const invoices [ { invoice: INV001, paymentStatus: Paid, totalAmount: $250.00, paymentMethod: Credit Card }, // ... 更多行 ]; /script Table.Root Table.CaptionA list of your recent invoices./Table.Caption Table.Header Table.Row Table.Head classw-[100px]Invoice/Table.Head Table.HeadStatus/Table.Head Table.HeadMethod/Table.Head Table.Head classtext-endAmount/Table.Head /Table.Row /Table.Header Table.Body {#each invoices as invoice (invoice)} Table.Row Table.Cell classfont-medium{invoice.invoice}/Table.Cell Table.Cell{invoice.paymentStatus}/Table.Cell Table.Cell{invoice.paymentMethod}/Table.Cell Table.Cell classtext-end{invoice.totalAmount}/Table.Cell /Table.Row {/each} /Table.Body Table.Footer Table.Row Table.Cell colspan{3}Total/Table.Cell Table.Cell classtext-end$2,500.00/Table.Cell /Table.Row /Table.Footer /Table.Root关键点每个部件都接收class属性并透传给底层原生元素因此可以用 Tailwind 任意值做列宽、对齐等微调例如classw-[100px]固定列宽、classtext-end右对齐、classfont-medium加粗Table.Cell上可直接使用colspan等原生td属性{#each}的 key 参数示例中的(invoice)有助于 Svelte 高效复用与更新 DOM。响应式原理从源码看 Table 的样式设计Table 组件之所以响应式关键在于Table.Root的源码结构。查看 table.sveltediv>.cn-table-container { apply relative w-full overflow-x-auto; } .cn-table { apply w-full caption-bottom text-sm; } .cn-table-header { apply [_tr]:border-b; } .cn-table-body { apply [_tr:last-child]:border-0; } .cn-table-footer { apply border-t bg-muted/50 font-medium [tr]:last:border-b-0; } .cn-table-row { apply border-b transition-colors hover:bg-muted/50>script langts import { cn, type WithElementRef } from $lib/utils.js; import type { HTMLThAttributes } from svelte/elements; let { ref $bindable(null), class: className, children, ...restProps }: WithElementRefHTMLThAttributes $props(); /script th bind:this{ref} contenteditable="false">【免费下载链接】shadcn-svelteshadcn/ui, but for Svelte. ✨项目地址: https://gitcode.com/GitHub_Trending/sh/shadcn-svelte创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考