ToolJet Table 组件服务端排序Server Side Sort实现指南基于 sortApplied 暴露变量与事件驱动的全量数据排序方案【免费下载链接】ToolJetOpen-source foundation of ToolJet AI - the enterprise app generation platform for internal tools, dashboards, business applications, workflows and AI agents. Build visually, from a prompt, or from Claude Code, Codex and Cursor over MCP 项目地址: https://gitcode.com/GitHub_Trending/to/ToolJet本文是一份聚焦 ToolJetTable 组件服务端排序Server Side Sort的完整实战指南。在 ToolJet 中构建数据密集型的内部工具、仪表盘或业务应用时当数据量远超单次查询可加载范围客户端排序只能对已加载到浏览器中的数据进行排序无法覆盖数据库全量记录而服务端排序通过把「排序列 排序方向」回传给查询Query让数据库在服务器端完成 ORDER BY从而实现对全量数据的排序。读完本文你将掌握 Table 组件的服务端排序开关配置、基于sortApplied暴露变量的动态 SQL 写法、「Sort applied」事件驱动查询重跑、以及 Loading State 联动的完整链路并了解其底层源码实现原理。前置概念服务端操作与客户端操作的区别在进入排序实战之前先明确服务端排序在整个 Table 组件服务端操作体系中的位置。服务端操作指在服务器端执行的数据获取、搜索、排序、过滤和分页等任务它们使用服务器资源能够高效处理大型数据集并为用户带来更快的加载体验与之相对的客户端操作则在浏览器中完成需要先把数据全部拉到前端再本地处理大数据量下容易出现性能问题。相关的服务端操作说明可参见 服务端操作概览该体系下 Table 组件共支持四种服务端操作Search服务端搜索Sort服务端排序Filter服务端过滤Pagination服务端分页本文以PostgreSQL数据源ToolJet 内置的sample_data_orders示例表演示服务端排序的实现过程。大多数数据库都支持服务端操作但具体实现方式可能因数据库而异。第一步添加 Table 组件并准备数据在实现排序之前先添加Table组件并为其填充数据从右侧组件库中拖拽一个Table组件到画布上。在底部查询面板Query Panel中选择数据源并创建新查询。本指南使用 ToolJet 的示例数据源Postgres添加如下查询从数据库获取数据SELECT * FROM public.sample_data_orders LIMIT 100将 Table 组件的Data数据属性值设置为{{queries.query_name.data}}用查询返回的数据填充 Table 组件。从源码结构看Table 组件的data属性在 widgets/table.js 中被定义为数组类型type: array元素为对象默认值为[{ id: 1, name: Sarah, email: sarahmail.com }]这与{{queries.query_name.data}}返回数组数据的绑定方式一致。第二步开启 Server Side Sort按照以下步骤在 Table 组件上执行服务端排序操作在Table组件的属性面板中找到排序相关配置将Type切换为Server side即启用服务端排序。该开关对应的属性名为serverSideSort。在 widgets/table.js 中它被定义为一个clientServerSwitch类型的开关提供Client side与Server side两个选项默认值为false即默认客户端排序同时 initSlice.js 在组件初始化时也会将serverSideSort的默认值设为false。输入如下查询这是整个服务端排序的核心SELECT * FROM public.sample_data_orders {{components.table1.sortApplied ? ORDER BY ${components.table1.sortApplied[0].column} ${components.table1.sortApplied[0].direction} : }} LIMIT 100注意请务必将table1替换为你实际使用的Table组件名称。这段 SQL 的精妙之处在于利用 ToolJet 的模板语法{{ }}做了条件渲染当用户在 Table 上应用了排序时暴露变量components.table1.sortApplied非空于是 SQL 中注入ORDER BY 排序列 排序方向子句当用户未应用排序或清除排序时sortApplied为空数组条件判断为假整个子句被替换为空字符串查询退化为普通的全表扫描 LIMIT 100。由于ORDER BY子句在服务器端执行排序作用范围是数据库中的全量记录而不是前端已加载的那 100 条数据——这正是服务端排序与客户端排序的本质区别。sortApplied 暴露变量的数据结构sortApplied是 Table 组件在服务端排序模式下暴露的关键变量。从 TableExposedVariables.jsx 的源码可以看到当表格的排序状态sorting发生变化时组件会构造如下结构并写入暴露变量const sortApplied [ { column: getColumnName(sorting[0].id), // 列的显示名称表头文本 columnKey: getColumnKey(sorting[0].id), // 列的 accessorKey字段键名 direction: sorting[0].desc ? desc : asc // 排序方向 }, ]; setExposedVariables({ sortApplied }); fireEvent(onSort);也就是说sortApplied是一个对象数组每个元素包含三个字段字段含义示例值column被排序列的显示名称表头标题Order IDcolumnKey被排序列的数据字段键名accessorKeyorder_iddirection排序方向asc表示升序desc表示降序asc/desc因此文档示例 SQL 中的components.table1.sortApplied[0].column会取到排序列的列名components.table1.sortApplied[0].direction会取到asc或desc两者拼接后正好构成合法的ORDER BY子句。当排序被清除时组件会把sortApplied重置为空数组[]SQL 中的条件渲染随之关闭ORDER BY。第三步绑定 Sort Applied 事件触发查询为Table组件添加一个事件处理器Event HandlerEvent事件Sort appliedAction动作Run QueryQuery查询选择你创建的查询如getOrders这样每次在 Table 上应用排序时都会自动运行该查询并重新拉取数据。事件与查询的联动机制在源码中同样有迹可循事件onSort在 widgets/table.js 中被注册显示名为Sort applied触发时机见 TableExposedVariables.jsx当排序状态sorting长度大于 0 时写入sortApplied并触发onSort当排序被清除长度变为 0且此前已有排序时也会触发一次onSort确保清除排序后查询同样会重跑以回到未排序状态事件合法性声明位于 eventsSlice.jsonSort被列入 Table 组件可注册的事件清单。同时从 useTable.js 可以看到Table 组件底层基于 TanStack Table 构建当serverSideSort为true时useReactTable会启用manualSorting: serverSideSort。manualSorting是 TanStack Table 的「手动排序」模式开启后框架不再对data做本地排序而只负责维护排序状态、把排序结果通过上述机制暴露出来真正的排序逻辑完全交由用户自己的服务端查询完成——这正是服务端排序在实现层面的关键开关。第四步联动 Loading State 提升交互体验进入 Table 组件属性的Additional Actions附加操作区域点击Loading State旁边的fx图标在输入框中填入{{queries.getOrders.isLoading}}为表格添加加载状态。注意请将getOrders替换为你实际的查询名称。当查询正在执行时queries.getOrders.isLoading为trueTable 组件会显示加载动画避免用户在大数据集排序期间误操作或产生困惑查询完成后isLoading变为false表格恢复可交互状态。这一设置尤其重要因为服务端排序需要对数据库全量数据执行ORDER BY查询耗时通常长于纯客户端排序明确的加载反馈能显著提升用户体验。工作链路总结与源码验证至此ToolJet Table 组件的服务端排序已完整实现。整个机制的运转链路可以概括为用户操作点击 Table 表头对某列应用排序升序/降序切换状态更新Table 底层TanStack Table 的manualSorting模式更新排序状态sorting变量暴露TableExposedVariables.jsx 将排序状态转换为sortApplied含column、columnKey、direction暴露给查询同时触发onSortSort applied事件事件响应事件处理器执行Run Query携带sortApplied信息的查询被重新运行服务端排序SQL 模板中的{{components.table1.sortApplied ? ...}}条件渲染出ORDER BY子句数据库在服务器端完成全量排序结果回填查询返回排序后的数据通过{{queries.query_name.data}}回填 Table 组件的 Data 属性期间 Loading State 通过{{queries.query_name.isLoading}}显示加载状态。当用户在 Table 上对某一列应用排序时查询会在服务器端执行从而实现对整个数据集的排序而不仅限于已加载进 Table 的数据——这保证了排序结果覆盖数据库中的所有记录。当你需要将服务端排序与服务端搜索、过滤、分页组合使用时可以分别参考对应的 Search、Filter、Pagination 指南它们在架构上遵循同一套「暴露变量 动态查询 事件触发」模式可无缝组合进同一条 SQL 查询中。相关源码参考Table 组件属性与事件定义serverSideSort属性第 158-169 行与onSort: Sort applied事件第 365 行排序状态到 sortApplied 的转换逻辑第 162-180 行TanStack Table 手动排序开关第 109 行manualSorting: serverSideSortserverSideSort 默认值初始化第 61 行onSort 事件合法性声明第 425 行Table 组件读取 serverSideSort 属性第 38 行【免费下载链接】ToolJetOpen-source foundation of ToolJet AI - the enterprise app generation platform for internal tools, dashboards, business applications, workflows and AI agents. Build visually, from a prompt, or from Claude Code, Codex and Cursor over MCP 项目地址: https://gitcode.com/GitHub_Trending/to/ToolJet创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
ToolJet Table 组件服务端排序Server Side Sort实现指南基于 sortApplied 暴露变量与事件驱动的全量数据排序方案【免费下载链接】ToolJetOpen-source foundation of ToolJet AI - the enterprise app generation platform for internal tools, dashboards, business applications, workflows and AI agents. Build visually, from a prompt, or from Claude Code, Codex and Cursor over MCP 项目地址: https://gitcode.com/GitHub_Trending/to/ToolJet本文是一份聚焦 ToolJetTable 组件服务端排序Server Side Sort的完整实战指南。在 ToolJet 中构建数据密集型的内部工具、仪表盘或业务应用时当数据量远超单次查询可加载范围客户端排序只能对已加载到浏览器中的数据进行排序无法覆盖数据库全量记录而服务端排序通过把「排序列 排序方向」回传给查询Query让数据库在服务器端完成 ORDER BY从而实现对全量数据的排序。读完本文你将掌握 Table 组件的服务端排序开关配置、基于sortApplied暴露变量的动态 SQL 写法、「Sort applied」事件驱动查询重跑、以及 Loading State 联动的完整链路并了解其底层源码实现原理。前置概念服务端操作与客户端操作的区别在进入排序实战之前先明确服务端排序在整个 Table 组件服务端操作体系中的位置。服务端操作指在服务器端执行的数据获取、搜索、排序、过滤和分页等任务它们使用服务器资源能够高效处理大型数据集并为用户带来更快的加载体验与之相对的客户端操作则在浏览器中完成需要先把数据全部拉到前端再本地处理大数据量下容易出现性能问题。相关的服务端操作说明可参见 服务端操作概览该体系下 Table 组件共支持四种服务端操作Search服务端搜索Sort服务端排序Filter服务端过滤Pagination服务端分页本文以PostgreSQL数据源ToolJet 内置的sample_data_orders示例表演示服务端排序的实现过程。大多数数据库都支持服务端操作但具体实现方式可能因数据库而异。第一步添加 Table 组件并准备数据在实现排序之前先添加Table组件并为其填充数据从右侧组件库中拖拽一个Table组件到画布上。在底部查询面板Query Panel中选择数据源并创建新查询。本指南使用 ToolJet 的示例数据源Postgres添加如下查询从数据库获取数据SELECT * FROM public.sample_data_orders LIMIT 100将 Table 组件的Data数据属性值设置为{{queries.query_name.data}}用查询返回的数据填充 Table 组件。从源码结构看Table 组件的data属性在 widgets/table.js 中被定义为数组类型type: array元素为对象默认值为[{ id: 1, name: Sarah, email: sarahmail.com }]这与{{queries.query_name.data}}返回数组数据的绑定方式一致。第二步开启 Server Side Sort按照以下步骤在 Table 组件上执行服务端排序操作在Table组件的属性面板中找到排序相关配置将Type切换为Server side即启用服务端排序。该开关对应的属性名为serverSideSort。在 widgets/table.js 中它被定义为一个clientServerSwitch类型的开关提供Client side与Server side两个选项默认值为false即默认客户端排序同时 initSlice.js 在组件初始化时也会将serverSideSort的默认值设为false。输入如下查询这是整个服务端排序的核心SELECT * FROM public.sample_data_orders {{components.table1.sortApplied ? ORDER BY ${components.table1.sortApplied[0].column} ${components.table1.sortApplied[0].direction} : }} LIMIT 100注意请务必将table1替换为你实际使用的Table组件名称。这段 SQL 的精妙之处在于利用 ToolJet 的模板语法{{ }}做了条件渲染当用户在 Table 上应用了排序时暴露变量components.table1.sortApplied非空于是 SQL 中注入ORDER BY 排序列 排序方向子句当用户未应用排序或清除排序时sortApplied为空数组条件判断为假整个子句被替换为空字符串查询退化为普通的全表扫描 LIMIT 100。由于ORDER BY子句在服务器端执行排序作用范围是数据库中的全量记录而不是前端已加载的那 100 条数据——这正是服务端排序与客户端排序的本质区别。sortApplied 暴露变量的数据结构sortApplied是 Table 组件在服务端排序模式下暴露的关键变量。从 TableExposedVariables.jsx 的源码可以看到当表格的排序状态sorting发生变化时组件会构造如下结构并写入暴露变量const sortApplied [ { column: getColumnName(sorting[0].id), // 列的显示名称表头文本 columnKey: getColumnKey(sorting[0].id), // 列的 accessorKey字段键名 direction: sorting[0].desc ? desc : asc // 排序方向 }, ]; setExposedVariables({ sortApplied }); fireEvent(onSort);也就是说sortApplied是一个对象数组每个元素包含三个字段字段含义示例值column被排序列的显示名称表头标题Order IDcolumnKey被排序列的数据字段键名accessorKeyorder_iddirection排序方向asc表示升序desc表示降序asc/desc因此文档示例 SQL 中的components.table1.sortApplied[0].column会取到排序列的列名components.table1.sortApplied[0].direction会取到asc或desc两者拼接后正好构成合法的ORDER BY子句。当排序被清除时组件会把sortApplied重置为空数组[]SQL 中的条件渲染随之关闭ORDER BY。第三步绑定 Sort Applied 事件触发查询为Table组件添加一个事件处理器Event HandlerEvent事件Sort appliedAction动作Run QueryQuery查询选择你创建的查询如getOrders这样每次在 Table 上应用排序时都会自动运行该查询并重新拉取数据。事件与查询的联动机制在源码中同样有迹可循事件onSort在 widgets/table.js 中被注册显示名为Sort applied触发时机见 TableExposedVariables.jsx当排序状态sorting长度大于 0 时写入sortApplied并触发onSort当排序被清除长度变为 0且此前已有排序时也会触发一次onSort确保清除排序后查询同样会重跑以回到未排序状态事件合法性声明位于 eventsSlice.jsonSort被列入 Table 组件可注册的事件清单。同时从 useTable.js 可以看到Table 组件底层基于 TanStack Table 构建当serverSideSort为true时useReactTable会启用manualSorting: serverSideSort。manualSorting是 TanStack Table 的「手动排序」模式开启后框架不再对data做本地排序而只负责维护排序状态、把排序结果通过上述机制暴露出来真正的排序逻辑完全交由用户自己的服务端查询完成——这正是服务端排序在实现层面的关键开关。第四步联动 Loading State 提升交互体验进入 Table 组件属性的Additional Actions附加操作区域点击Loading State旁边的fx图标在输入框中填入{{queries.getOrders.isLoading}}为表格添加加载状态。注意请将getOrders替换为你实际的查询名称。当查询正在执行时queries.getOrders.isLoading为trueTable 组件会显示加载动画避免用户在大数据集排序期间误操作或产生困惑查询完成后isLoading变为false表格恢复可交互状态。这一设置尤其重要因为服务端排序需要对数据库全量数据执行ORDER BY查询耗时通常长于纯客户端排序明确的加载反馈能显著提升用户体验。工作链路总结与源码验证至此ToolJet Table 组件的服务端排序已完整实现。整个机制的运转链路可以概括为用户操作点击 Table 表头对某列应用排序升序/降序切换状态更新Table 底层TanStack Table 的manualSorting模式更新排序状态sorting变量暴露TableExposedVariables.jsx 将排序状态转换为sortApplied含column、columnKey、direction暴露给查询同时触发onSortSort applied事件事件响应事件处理器执行Run Query携带sortApplied信息的查询被重新运行服务端排序SQL 模板中的{{components.table1.sortApplied ? ...}}条件渲染出ORDER BY子句数据库在服务器端完成全量排序结果回填查询返回排序后的数据通过{{queries.query_name.data}}回填 Table 组件的 Data 属性期间 Loading State 通过{{queries.query_name.isLoading}}显示加载状态。当用户在 Table 上对某一列应用排序时查询会在服务器端执行从而实现对整个数据集的排序而不仅限于已加载进 Table 的数据——这保证了排序结果覆盖数据库中的所有记录。当你需要将服务端排序与服务端搜索、过滤、分页组合使用时可以分别参考对应的 Search、Filter、Pagination 指南它们在架构上遵循同一套「暴露变量 动态查询 事件触发」模式可无缝组合进同一条 SQL 查询中。相关源码参考Table 组件属性与事件定义serverSideSort属性第 158-169 行与onSort: Sort applied事件第 365 行排序状态到 sortApplied 的转换逻辑第 162-180 行TanStack Table 手动排序开关第 109 行manualSorting: serverSideSortserverSideSort 默认值初始化第 61 行onSort 事件合法性声明第 425 行Table 组件读取 serverSideSort 属性第 38 行【免费下载链接】ToolJetOpen-source foundation of ToolJet AI - the enterprise app generation platform for internal tools, dashboards, business applications, workflows and AI agents. Build visually, from a prompt, or from Claude Code, Codex and Cursor over MCP 项目地址: https://gitcode.com/GitHub_Trending/to/ToolJet创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
)
