内容
# SvGrid
[](https://www.npmjs.com/package/@svgrid/grid)
[](https://www.npmjs.com/package/@svgrid/grid)
[](packages/grid/LICENSE)
[](packages/grid/dist)
[](https://svelte.dev)
> Svelte 5 原生数据网格。**无头优先。渲染就绪。**
为 Svelte 5 运行符构建的现代数据网格，而不是 React 网格封装在 Svelte shim 中。您可以组合的无头引擎，以及可以插入的完整 `<SvGrid />` 渲染组件。MIT 核心，MCP 服务器用于 AI 助手，150+ 个实时演示。
**快速链接：** [网站](https://svgrid.com) · [文档](https://svgrid.com/docs) · [150+ 演示](https://svgrid.com/demos) · [定价](https://svgrid.com/pricing) · [路线图](https://svgrid.com/roadmap) · [博客](https://svgrid.com/blog) · [npm](https://www.npmjs.com/package/@svgrid/grid)
---
## 安装
使用以下命令搭建一个可运行的 Vite + Svelte 5 应用程序，并连接 SvGrid：
```bash
npm create sv-grid@latest
```
或者将其添加到现有应用程序中：
```bash
npm install @svgrid/grid
```
## 30 秒示例
```svelte
<script lang="ts">
import { SvGrid, type ColumnDef } from '@svgrid/grid'
const rows = [
{ firstName: 'Ada', age: 36, status: 'active' },
{ firstName: 'Linus', age: 54, status: 'active' },
{ firstName: 'Grace', age: 85, status: 'inactive' },
]
const columns: ColumnDef<{}, (typeof rows)[number]>[] = [
{ field: 'firstName', header: '名字' },
{ field: 'age', header: '年龄' },
{ field: 'status', header: '状态' },
]
</script>
<SvGrid data={rows} columns={columns} />
```
这是一个真实的、可访问的网格。排序、筛选、虚拟化、单元格选择和内联编辑在您启用相应的属性时都会连接起来。
## 包含的内容
- **行 + 列虚拟化。** 100k × 100 保持流畅；还有一个 1M 行的演示。
- **筛选。** Excel 样式的筛选菜单、内联筛选行、区域感知文本匹配、集合 / 值列表筛选、数字和日期之间的运算符。
- **编辑。** 14 个内置 `editorType`s（文本、数字、日期、日期时间、时间、选择、富选择与类型提示、文本区域、颜色、复选框、列表、芯片、评分、密码）以及用于其他任何内容的 `cellEditor` 代码段插槽。
- **选择。** 单元格范围点击 + 拖动和 Shift + 箭头键、复制 / 粘贴为 TSV、Excel 样式的填充柄、行选择。
- **层次结构。** 行分组与聚合、树数据、主 / 从视图、全宽详细行。
- **布局。** 行 + 列固定、粘性表头 + 第一列、表头拖动排序、列大小调整 API。
- **操作。** 网格查找（Ctrl + F）、撤销 / 重做（Ctrl + Z）、事务 API、乐观更新、服务器端行模型与排序 / 筛选 / 分组下推。
- **A11y。** WAI-ARIA 网格角色、全键盘导航、RTL、高对比度主题。
- **捆绑。** 约 7.5 KB 压缩的核心无头核心，约 42 KB 压缩的全渲染组件（Svelte 保持对等）。
MIT 社区核心没有任何功能限制，没有许可证密钥，没有水印，没有行数限制。
## 两个软件包
| 软件包 | 许可证 | 添加内容 |
|---|---|---|
| [`@svgrid/grid`](packages/grid/) | **MIT** | 完整的数据网格，免费用于商业用途 |
| [`@svgrid/enterprise`](packages/enterprise/) | 商业 | 导出到 Excel / PDF / CSV / TSV / HTML，分页打印，带有拖放设计器和钻取功能的 pivot tables，AI 助手 |
| [`@svgrid/mcp`](packages/mcp/) | 商业 | 用于 Claude / Cursor / Zed 的 MCP 服务器 |
开源项目免费获得企业软件包。参见 [定价](https://svgrid.com/pricing)。
## AI 原生
SvGrid 配备了一个 MCP（模型上下文协议）服务器，以便 Claude、Cursor 和 Zed 提供准确的、版本固定的答案，关于库中的每个属性、方法和事件，以及所有 150+ 个演示源作为上下文。
```json
{
"mcpServers": {
"svgrid": {
"command": "npx",
"args": ["-y", "@svgrid/mcp"]
}
}
}
```
还为检索增强的设置提供了已发布的 `llms.txt` / `llms-full.txt`。
## 谁在背后
SvGrid 由 [jQWidgets](https://www.jqwidgets.com) 构建，团队成员也是 jqwidgets.com 和 [htmlelements.com](https://www.htmlelements.com) 的成员。我们从 2011 年开始为 5,000+ 家公司提供 UI 组件，包括三星、波音、NVIDIA、微软、诺基亚和英特尔。SvGrid 是我们的 Svelte 5 原生努力。
---
## 支持
SvGrid 是开源核心：MIT `@svgrid/grid` 可免费用于任何用途，项目由企业许可证而非捐款资助。
- **发现了错误或有疑问？** 在 [github.com/sv-grid/sv-grid/issues](https://github.com/sv-grid/sv-grid/issues) 上打开一个问题。
- **需要商业或优先支持？** 它包含在 [企业](https://svgrid.com/pricing) 中。开源项目在 [OSI-approved 许可证](https://opensource.org/licenses) 下免费获得企业 OSS 密钥。
---
## 仓库布局
这是一个 **pnpm 工作区** monorepo：
```
packages/grid/ @svgrid/grid - MIT 数据网格
packages/enterprise/ @svgrid/enterprise - 付费功能包
packages/mcp/ @svgrid/mcp - MCP 服务器
packages/create/ create-sv-grid - 脚手架
examples/ - 150+ 个实时演示
website/ - svgrid.com 源代码
docs/ - Markdown 文档
```
### 要求
- Node.js ≥ 18
- pnpm（工作区固定 `pnpm@10.33.2` via `packageManager`；`corepack enable` 将其选中）
### 开发
```bash
pnpm install # 安装工作区依赖
pnpm dev # 在 http://localhost:5174 运行演示库
pnpm build # 构建 packages/grid/dist
pnpm build:example # 构建演示库
pnpm dev:site # 在 http://localhost:5180 运行网站
pnpm build:site # 构建网站（写入 website/dist）
pnpm test:types # 类型检查每个软件包
```
`pnpm dev` 代理到 `pnpm --filter @svgrid/grid-example-gallery dev`。在示例中，库通过工作区链接（`"@svgrid/grid": "workspace:*"`），因此对 `packages/grid/src/**` 的编辑通过 Vite HMR 选取，无需重建。
### 库入口点
```ts
import {
SvGrid,
FlexRender,
// 无头核心 + 行模型工厂
createSvGrid,
createCoreRowModel,
createFilteredRowModel,
createSortedRowModel,
createGroupedRowModel,
createExpandedRowModel,
createPaginatedRowModel,
// 功能
tableFeatures,
rowSortingFeature,
columnFilteringFeature,
columnGroupingFeature,
rowExpandingFeature,
rowPaginationFeature,
rowSelectionFeature,
// 单元格渲染器
renderSnippet,
renderComponent,
} from '@svgrid/grid'
```
### 文档
- [开始使用](docs/getting-started.md) - 结束到结束的演练。
- [为什么无头？](docs/why-headless.md) - 无头核心为您提供了什么以及何时选择它。
- [Tailwind 集成](docs/help/tailwind.md) - 通过 `--sg-*` 令牌重新主题，暗模式连接。
- [帮助索引](docs/help/index.md) - 列、行、单元格、筛选、编辑的主题页面。
- [缺少的功能](docs/help/missing-features.md) - 诚实的差距列表。
### 网站
`website/` 包含公共营销 + 文档站点（Vite + Svelte 5）。通过 [.github/workflows/deploy-website.yml](.github/workflows/deploy-website.yml) 中的每次推送到 `main` 发布到 GitHub Pages。参见 [website/README.md](website/README.md) 获取路由、基准路径配置和一次性页面设置。
## 还未构建的内容
诚实的清单：
- 列跨度（单元格上下文上的 `colSpan`）。在路线图上，工作量大。
- 内置行拖动跨网格。演示涵盖了网格内的情况；跨网格的情况不在引擎中。
- `<SvGrid>` 渲染组件上的可变行高。无头虚拟化器今天就做到了。
- 引擎级公式语言。有一个可用的网格内公式引擎在演示中，但它尚未升级到软件包中。
- 自定义日历系统（Hijri，Buddhist，fiscal year）用于日期编辑器。内置 Gregorian 日期 / 时间 / 日期时间。
带有努力标签的完整公共 [路线图](https://svgrid.com/roadmap) 和 svgrid.com 上的“最近发货”记录。
## 许可证
此仓库在 **混合许可** 下发布。只有 `@svgrid/grid` 是开源的 - 其他所有内容都是商业的。
| 软件包 | 许可证 | LICENSE 文件 |
|---|---|---|
| [packages/grid](packages/grid/) | **MIT** | [LICENSE](packages/grid/LICENSE) |
| [packages/enterprise](packages/enterprise/) | 商业 | [LICENSE](packages/enterprise/LICENSE) |
| [packages/mcp](packages/mcp/) | 商业 | [LICENSE](packages/mcp/LICENSE) |
| [website](website/) | 专有 | [LICENSE](website/LICENSE) |
`@svgrid/grid` （MIT）可免费使用，包括用于商业工作。企业功能包、MCP 服务器和营销 + 文档网站是专有的 - 源代码可见用于评估和付费客户，但可见性并不授予许可证。参见 [SvGrid 定价页面](https://svgrid.com/pricing) 获取企业购买。
## 商标
SvGrid™ 和 sv-grid™ 是 jQWidgets Ltd. 的商标。上述许可证仅适用于源代码；它们不授予 **SvGrid** / **sv-grid** 名称或徽标的任何权利。您可以构建和重新分发 MIT 许可的代码，但您不能以暗示与 jQWidgets Ltd. 认可或关联的方式重用项目的名称或品牌，也不能以令人混淆的相似名称重新分发它。
