UI组件前端【免费下载链接】ag-gridThe best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.项目地址https://gitcode.com/gh_mirrors/ag/ag-grid点击查看免费下载AG Grid 是一个功能完整、高度可定制的 JavaScript 数据表格库专为企业级应用设计支持 React、Angular、Vue 与原生 JavaScript。本文以本仓库community-modules/styles/README.md为骨架完整讲解 AG Grid 的版本划分、三步快速搭建流程、自定义组件体系与内置主题系统并结合 styles 模块 的 SCSS 源码深入剖析主题背后的 CSS 变量与图标字体实现读完即可独立完成从安装、配置到主题定制的全流程。AG Grid 概览Community 与 Enterprise 双版本AG Grid 以两个版本发布覆盖从基础表格到企业级高级能力的完整需求ag-grid-community免费开源MIT 协议内置 JavaScript 数据表格的全部核心能力包括排序Sorting、过滤Filtering、分页Pagination、单元格编辑Editing、自定义组件Custom Components与主题Theming等。ag-grid-enterprise商业授权版本在社区版基础上叠加高级特性包括 AI Toolkit、集成图表Integrated Charting、公式Formulas、行分组Row Grouping、聚合Aggregation、透视Pivoting、主从表Master/Detail、服务端行模型Server-side Row Model、查找Find与导出Exporting等并附带工程团队的专属支持。功能特性对照表下表汇总了两个版本的功能边界取自仓库 README功能AG Grid CommunityAG Grid EnterpriseMCP Server✅✅ (Advanced)Filtering 过滤✅✅ (Advanced)Sorting 排序✅✅Cell Editing 单元格编辑✅✅CSV Export 导出✅✅Drag Drop 拖拽✅✅Themes and Styling 主题与样式✅✅Selection 选择✅✅Accessibility 无障碍✅✅Infinite Scrolling 无限滚动✅✅Pagination 分页✅✅Server-Side Data 服务端数据✅✅ (Advanced)Custom Components 自定义组件✅✅AI Toolkit❌✅Integrated Charting 集成图表❌✅Formulas 公式❌✅Find 查找❌✅Range Selection 区域选择❌✅Row Grouping and Aggregation 行分组与聚合❌✅Pivoting 透视❌✅Excel Export❌✅PDF Export❌✅Clipboard Operations 剪贴板❌✅Master/Detail 主从表❌✅Tree Data 树形数据❌✅Column Menu 列菜单❌✅Context Menu 右键菜单❌✅Tool Panels 工具面板❌✅Support 官方支持❌✅提示完整的版本对比请参阅官方 Pricing 页面本仓库以源码形式组织两部分实现分别位于 packages/ag-grid-community 与 packages/ag-grid-enterprise。官方示例官方围绕不同业务场景提供了多套可交互示例金融数据示例实时行情更新与迷你走势图 sparkline、库存管理示例商品查看与维护、HR 人事示例层级化员工数据。这些示例展示的正是 AG Grid 在真实企业场景中的典型用法也是快速验证功能组合的最佳入口。快速开始三步搭建 JavaScript Data GridAG Grid 的搭建非常轻量——你只需要提供数据并定义列结构三步即可让表格跑起来。下面以原生 JavaScript 为例React、Angular、Vue 各有对应的框架集成指南仓库内对应包位于 packages/ag-grid-react、packages/ag-grid-angular 与 packages/ag-grid-vue3。第一步安装使用 npm 安装社区版包$ npm install --save ag-grid-community需要企业版能力时替换为ag-grid-enterprise即可。安装包会同时携带运行所需的 JavaScript 与主题 CSS 资源。第二步提供容器并加载库AG Grid 需要一个容器div并会填满父容器的尺寸因此该div必须拥有明确高度html langen head !-- 引入 Data Grid 的全部 JS 与 CSS -- script srchttps://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js/script /head body !-- 你的 Data Grid 容器 -- div idmyGrid styleheight: 500px/div /body /html第三步实例化 Data Grid通过createGrid在容器内创建 Data Grid。所有配置集中在gridOptions对象中// Grid Options包含 Data Grid 的全部配置 const gridOptions {}; // 创建 Data Grid 的 JavaScript 代码 const myGridElement document.querySelector(#myGrid); agGrid.createGrid(myGridElement, gridOptions);第四步定义行数据与列结构最后提供表格的核心输入——rowData要展示的数据与columnDefs要展示的列定义// Grid Options包含 Data Grid 的全部配置 const gridOptions { // Row Data要展示的数据 rowData: [ { make: Tesla, model: Model Y, price: 64950, electric: true }, { make: Ford, model: F-Series, price: 33850, electric: false }, { make: Toyota, model: Corolla, price: 29600, electric: false }, ], // Column Definitions定义要展示的列 columnDefs: [{ field: make }, { field: model }, { field: price }, { field: electric }], };columnDefs中每个对象对应一列field指向rowData中的字段名未显式声明的数据字段也可通过列定义按需接入。createGrid的完整签名与GridOptions的全部类型定义可在 packages/ag-grid-community/src/grid.ts 与 packages/ag-grid-community/src/globalGridOptions.ts 中查看。提示更完整的构建指南可参考官方 JavaScript Data Grid 文档仓库根目录的 README.md 提供了整体导航。种子项目官方还提供了一批种子项目Seed Projects覆盖常见框架与构建工具的预配置组合克隆后即可直接开始开发环境框架Create React App (CRA)ReactViteReactCreate Next AppReactVite - TypeScriptTypeScriptWebpack 5 - TypeScriptTypeScriptWebpack 5 - JavaScriptJavaScriptAngular CLIAngularNuxtVue3ViteVue3这些种子项目与 AG Grid 主仓库分离维护统一放置于ag-grid-seed仓库中可作为日常开发脚手架参考。定制化自定义组件体系AG Grid 在界面与功能上都高度可定制。除了内置能力外你可以通过编写自定义组件Custom Components来接管网格各个位置的行为——例如自定义单元格渲染、单元格编辑与过滤器。这是把 AG Grid 融入自有产品设计语言的核心手段。可自定义的组件类型官方支持的组件类型覆盖了网格几乎所有的可插拔点Cell Component单元格组件自定义单元格内容渲染。Header Component表头组件自定义列头与列组的表头。Edit Component编辑组件自定义单元格编辑交互。Filter Component过滤组件自定义列菜单内的列过滤器。Floating Filter浮动过滤器自定义列菜单内的浮动过滤器。Date Component日期组件自定义日期过滤器中的日期选择组件。Loading Component加载组件服务端行模型下自定义加载行。Overlay Component覆盖层组件自定义加载与无数据覆盖层。Status Bar Component状态栏组件自定义状态栏组件。Tool Panel Component工具面板组件自定义工具面板组件。Tooltip Component提示组件自定义单元格提示组件。Menu Item Component菜单项组件自定义列菜单与右键菜单中的菜单项。在 columnDefs 中接入自定义组件将自定义单元格渲染器与过滤器接入网格只需在gridOptions.columnDefs中直接引用组件类或函数gridOptions { columnDefs: [ { field: country, // 要挂载组件的列 cellRenderer: CountryCellRenderer, // 自定义单元格组件 filter: CountryFilter, // 自定义过滤器组件 }, ], };社区包中components目录packages/ag-grid-community/src/components/维护了组件解析与实例化的底层逻辑框架包React/Angular/Vue则在此基础上实现了各自的声明式组件接入。主题系统四大内置主题AG Grid 内置4 套主题每套均同时提供light浅色与dark深色两种模式Quartz当前默认主题线条现代、支持圆角与 Tab 式面板。Material遵循 Material Design 设计规范。Alpine轻量紧凑风格。Balham经典企业表格风格。在 CSS 层面每套主题对应一组可直接引入的 SCSS/CSS 入口文件位于 community-modules/styles/src/主题完整入口含字体不含字体入口Quartzag-theme-quartz.scssag-theme-quartz-no-font.scssMaterialag-theme-material.scssag-theme-material-no-font.scssAlpineag-theme-alpine.scssag-theme-alpine-no-font.scssBalhamag-theme-balham.scssag-theme-balham-no-font.scss主题入口的结构以 Quartz 为例完整入口 ag-theme-quartz.scss 只有两行——先引入主题专属图标字体再引入无字体版样式use ./agGridQuartzFont; use ./ag-theme-quartz-no-font;而无字体版入口 ag-theme-quartz-no-font.scss 进一步指向主题实现 internal/themes/quartz/use themes/quartz;这套字体 / 无字体分离的设计是为了让不需要图标字体的场景例如完全使用 SVG 图标或自定义图标方案可以省去字体资源的加载。另外所有主题共享的核心样式入口是 ag-grid.scss它引入base模块并输出通用样式与原生输入控件样式use base; include base.general-styles(); include base.native-input-styles();general-styles的组装顺序定义在 internal/base/_index.scss依次输出图标、基础变量、根变量、通用结构、打印结构、reset、控件、网格布局、网格边框、菜单、侧边栏、过滤工具面板、列工具面板、表头、页脚、列拖放、图表、日期时间、高级过滤、行号、行固定、批量编辑、工具栏、计算列、列表头编辑等 20 余个样式片段parts每个片段对应一个独立 SCSS 文件位于 internal/base/parts/。这种按功能拆分的组织方式使得按需裁剪样式成为可能。深入主题实现CSS 变量体系与图标字体AG Grid 主题的底层实现完全建立在CSS 自定义属性--ag-*变量之上——这是整个主题系统的核心机制所有颜色、尺寸、间距、边框、圆角都以变量形式暴露主题只需覆写变量即可整体换肤。基础变量默认值internal/base/_base-variables.scss 定义了所有变量的默认值并通过[class*ag-theme-]选择器挂载到带主题类名的根元素上。部分关键默认值如下节选--ag-foreground-color: #000; /* 前景色 */ --ag-background-color: #fff; /* 背景色 */ --ag-grid-size: 4px; /* 网格基础单位所有间距由此派生 */ --ag-icon-size: 12px; /* 图标尺寸 */ --ag-font-family: Helvetica Neue, sans-serif; --ag-font-size: 14px; --ag-row-height: calc(var(--ag-grid-size) * 6 1px); /* 行高由 grid-size 派生 */ --ag-header-height: var(--ag-row-height); /* 表头高度默认等于行高 */ --ag-border-color: rgba(0, 0, 0, 0.25); --ag-borders: solid 1px; /* 边框风格 */ --ag-invalid-color: red;值得注意的是大量尺寸通过calc()从--ag-grid-size派生例如单元格内边距calc(var(--ag-grid-size) * 3)、列表项高度calc(var(--ag-grid-size) * 5)。这意味着调整一个--ag-grid-size即可等比缩放整个网格的密度这是 AG Grid 主题体系少变量、多派生设计思路的体现。主题级变量覆写每个内置主题再以自己的变量文件覆写上述默认值。以 Quartz 为例internal/themes/quartz/_quartz-variables.scss 定义了--ag-active-color: #2196f3; /* 主题主色 */ --ag-foreground-color: #181d1f; --ag-background-color: #fff; --ag-selected-row-background-color: color-mix(in srgb, transparent, var(--ag-active-color) 8%); --ag-row-hover-color: color-mix(in srgb, transparent, var(--ag-active-color) 12%);其中大量使用 CSScolor-mix()函数基于主色派生出 hover、选中、边框等衍生色保证整体系配色协调。Quartz 的主题细节样式Tab 面板、菜单、图表面板、侧边栏、标准按钮等集中在 internal/themes/quartz/_index.scss同时从源码结构看它还额外提供了.ag-theme-quartz-auto-dark自动深色变体类用于跟随系统深色模式自动切换。图标字体体系图标方面styles 模块内置了一套完整的图标字体。每个图标既有 SVG 源文件位于 icon-fonts/fonts/按agGridAlpine、agGridBalham、agGridClassic、agGridMaterial、agGridQuartz五套字体目录组织也有生成的码表 _icon-font-codes.scss该文件头部明确标注THIS FILE IS GENERATED, DO NOT EDIT IT!共映射 70 余个图标覆盖排序箭头、过滤、分组、菜单、复选框、树节点、CSV/Excel/PDF 导出、图表、查找等常用语义。图标样式的输出逻辑在 internal/ag/_icons.scssicon()mixin 通过--ag-icon-font-family、--ag-icon-size、--ag-icon-font-color等变量控制图标字体的渲染icon-content($name)函数则从码表中取出对应字形同时允许通过--ag-icon-font-code-name变量覆盖单个图标。font-face()mixin 负责按需注入font-face并用一个模块级 map 保证同一字体只注入一次。构建与质量工具链styles 模块的 package.jsonag-grid-community/styles本仓库当前声明版本 36.2.0-beta暴露了完整的样式工程化脚本build:sass使用 Dart SassdevDependency 锁定 sass 1.99.0编译 SCSSbuild:styles编译后执行post-build.js做产物后处理watchSass 编译 产物处理的并行监听模式支持开发期热更新lint:scss/lint:css分别用 SCSS 与 CSS 两套 stylelint 配置stylelint-config-scss.js、stylelint-config-css.js做样式规范检查test:sass编译 test/test.scss 做样式冒烟验证update-icon-fonts重新生成五套图标字体。自定义主题内置主题之外AG Grid 还提供两条自定义主题的路径Theming API在运行时通过 Theming API 传入 CSS 变量覆盖值例如themeQuartz.withParams({ accentColor: #2196f3, fontSize: 16 })风格无需改动任何 SCSS由于主题变量体系完整且全部以 CSS 自定义属性暴露任意--ag-*变量都可作为覆盖入口。从零构建新主题直接以 styles 模块的 SCSS 源码为基底参考 internal/themes/ 下各主题的变量文件 细节样式文件结构用use组合 base 模块与自定义变量产出全新的主题入口文件。_shared.scsscommunity-modules/styles/_shared.scss中提供的ag.text-input等 mixin 是官方主题与公开 API 之间共享的样式工具自定义主题同样可以直接复用例如统一给所有ag-前缀文本输入控件加样式。支持与许可企业支持AG Grid Enterprise 客户可通过官方支持渠道ZenDesk获得由工程团队值守的专属支持。Bug 报告发现缺陷请在仓库 Issues 区提交。问题咨询技术问答类问题建议先在 Stack Overflow 上以ag-grid标签检索避免占用 Issues。贡献AG Grid 由伦敦的协作开发团队维护。许可证方面ag-grid-community使用MIT开源协议ag-grid-enterprise采用商业授权。styles 模块自身的许可证文件位于 community-modules/styles/LICENSE.txt社区包许可证位于 packages/ag-grid-community/LICENSE.txt。结语从一次npm install、一个带高度的容器 div 和一份gridOptions开始AG Grid 就能以极低成本交付一个具备排序、过滤、分页、编辑能力的企业级数据表格而当你需要进一步贴合产品形态时自定义组件体系覆盖了单元格、表头、过滤器、菜单等全部可插拔点主题系统则以内置主题 CSS 变量 图标字体 SCSS 组合的四层结构提供了从换肤到从零造主题的完整自由度。本仓库的 community-modules/styles/ 目录即是这套主题工程的最佳参考实现。赞分享UI组件前端【免费下载链接】ag-gridThe best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.项目地址https://gitcode.com/gh_mirrors/ag/ag-grid点击查看免费下载相关推荐AG Grid JavaScript Data Grid 实战从 30 秒快速上手到自定义组件与主题定制AG Grid JavaScript Data Grid 实战从 30 秒快速上手到自定义组件与主题定制 本篇技术指南围绕 AG Grid 开源仓库当前版本UI组件前端draw.io桌面版Windows安装指南离线画图工具3种安装包怎么选draw.io桌面版Windows安装指南离线画图工具3种安装包怎么选 公司内网笔记本、无网机房或者单纯不想把架构图传到别人服务器上——需要在完全离线的电UI组件前端JavaScript Data Grid | JavaScript 表格——ag-Grid开源项目推荐JavaScript Data Grid | JavaScript 表格——ag Grid开源项目推荐 ag Grid项目的核心功能/场景 一款功能全面、高度UI组件前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考