前端UI组件【免费下载链接】table Headless UI for building powerful tables datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table项目地址https://gitcode.com/gh_mirrors/ta/table点击查看免费下载导读AppTableComponent是 TanStack Table 家族中 octane-table 框架的根级组件类型它定义了table.AppTable的完整 TypeScript 调用签名。该接口属于 packages/octane-table/src/types.ts 中AppOctaneTable扩展 API 的核心组成通过可选selector参数将提供表格上下文与状态切片订阅两种能力统一到一个组件接口中。阅读本文后你将掌握AppTableComponent的两个重载签名、其与Subscribe的协作方式、底层TableContext.Provider的实现机制并能直接写出带/不带 selector 的两种AppTable用法。接口定义与类型参数声明位置与定位AppTableComponent定义于 packages/octane-table/src/types.ts#L722-L728其官方描述为Component type for AppTable — root wrapper with optional Subscribe.即AppTable 的组件类型——带可选 Subscribe 的根包装器。在 octane-table 的组件层级中它是整个表格渲染树的根节点所有AppCell、AppHeader、AppFooter及其他tableComponents都嵌套在table.AppTable内部由它向上层提供表格实例上下文。类型参数 TFeaturesexport interface AppTableComponentTFeatures extends TableFeatures { (props: AppTablePropsWithoutSelector): OctaneNode TSelected( props: AppTablePropsWithSelectorTFeatures, TSelected, ): OctaneNode }接口只有一个类型参数TFeatures它必须继承自TableFeatures——即通过createTableHook({ features })注册的功能集如排序、分页、列过滤、行选择等。TFeatures被传递给第二个重载中的AppTablePropsWithSelectorTFeatures, TSelected用于约束selector函数入参的类型为TableStateTFeatures。两种调用签名解析签名一无 selector普通渲染AppTableComponent(props): unknownprops类型为AppTablePropsWithoutSelector。该接口定义于 types.ts#L587-L591/** Props for AppTable component — without selector. */ export interface AppTablePropsWithoutSelector { children: OctaneNode selector?: never }关键点children为OctaneNodeoctane 的可渲染节点即直接传入可渲染内容selector被显式标记为never从类型层面禁止传入 selector确保两种用法在编译期即可区分。签名二带 selector状态订阅渲染AppTableComponentTSelected(props): unknownprops类型为AppTablePropsWithSelectorTFeatures, TSelected定义于 types.ts#L593-L600/** Props for AppTable component — with selector. */ export interface AppTablePropsWithSelector TFeatures extends TableFeatures, TSelected, { children: (state: TSelected) OctaneNode selector: (state: TableStateTFeatures) TSelected }关键点selector接收完整表格状态TableStateTFeatures返回你关心的切片TSelectedchildren变为函数形式接收selector选出的状态切片TSelected作为参数并返回渲染节点类型参数TSelected可在调用处显式指定也可由 selector 返回值推断。返回值与重载选择两个签名的返回值均为unknown在更精确的底层声明中为OctaneNode。TypeScript 编译器会根据props中是否存在selector属性自动选择匹配的重载传了selector走签名二children 为渲染函数未传则走签名一children 为普通节点。源码实现AppTable 如何工作组件工厂中的实际构造AppTable组件本体由createTableHook返回的useAppTable内部创建实现位于 packages/octane-table/src/createTableHook.tsrx#L320-L340const AppTable useMemo(() { function AppTableImplTAppTableSelected( props: | AppTablePropsWithoutSelector | AppTablePropsWithSelectorTFeatures, TAppTableSelected, ) { const { children, selector: appTableSelector } props as any const currentTable tableRef.current const TableSubscribe currentTable.Subscribe as any const body appTableSelector ? TableSubscribe selector{appTableSelector} {(state: TAppTableSelected) children(state)} /TableSubscribe : children return TableContext.Provider value{currentTable}{body}/TableContext.Provider } return AppTableImpl as AppTableComponentTFeatures }, [])从实现可以提炼出三条核心原理组件稳定性AppTable通过useMemo(..., [])只创建一次不从闭包读取 table 引用而是通过tableRef每帧刷新的 ref获取当前 table 实例。源码注释明确说明这样设计是为了避免 octane 在每次状态更新时重挂载整个子树——例如工具栏中的受控输入框若因组件重建会每次按键丢失焦点。Subscribe 即 selector 的执行器传入appTableSelector时内部渲染TableSubscribe selector{appTableSelector}将 children 包装为接收选中状态的渲染函数未传时 children 直接作为 body 渲染。上下文提供者最终统一通过TableContext.Provider value{currentTable}向下提供当前表格实例这与 docs/framework/octane/guide/table-context.md 中table.AppTable提供当前 table 实例的描述完全一致。AppOctaneTable 中的声明与文档示例在AppOctaneTable类型types.ts#L733-L759中AppTable属性声明附带了两段官方用法示例// Without selector — children is a renderable table.AppTable table…/table /table.AppTable // With selector — children receives selected state table.AppTable selector{(s) s.pagination} {(pagination) div{pagination.pageIndex as unknown as string}/div} /table.AppTable实战示例最小用法无 selector参照 examples/octane/basic-use-app-table/src/main.tsrx先通过createTableHook创建带预绑定组件的自定义 hookconst { useAppTable, createAppColumnHelper, useCellContext, useHeaderContext, } createTableHook({ features: {}, debugTable: true, cellComponents: { CellValue }, headerComponents: { HeaderValue }, }) const columnHelper createAppColumnHelperPerson() const table useAppTable( { debugTable: true, columns, data }, (state) state, // 默认 selector )渲染时用table.AppTable作为根包装器children直接传入表格标记table.AppTable div classNamedemo-root table thead for (const headerGroup of table.getHeaderGroups(); key headerGroup.id) { tr for (const header of headerGroup.headers; key header.id) { table.AppHeader header{header} {(appHeader) th {header.isPlaceholder ? null : appHeader.FlexRender /} appHeader.HeaderValue / /th} /table.AppHeader } /tr } /thead tbody for (const row of table.getRowModel().rows; key row.id) { tr for (const cell of row.getAllCells(); key cell.id) { table.AppCell cell{cell} {(appCell) tdappCell.CellValue //td} /table.AppCell } /tr } /tbody tfoot for (const footerGroup of table.getFooterGroups(); key footerGroup.id) { tr for (const header of footerGroup.headers; key header.id) { table.AppFooter header{header} {(appFooter) thappFooter.FlexRender //th} /table.AppFooter } /tr } /tfoot /table /div /table.AppTable注意这里的for循环与{}函数块语法是 octaneTSX 响应式运行时的编译期模板语法与 React 的.map()语义对应。进阶用法带 selector 订阅状态切片当需要响应式订阅局部状态而非整棵表格状态时传入selector。参考 docs/framework/octane/guide/composable-tables.md#L288-L342 中组合表格示例的写法const table useAppTable( { columns, data, debugTable: true }, (state) state, )table.AppTable selector{(state) ({ pagination: state.pagination, sorting: state.sorting, columnFilters: state.columnFilters, })} {({ sorting, columnFilters }) ( div classNametable-container table.TableToolbar titleUsers Table onRefresh{refreshData} / table thead {table.getHeaderGroups().map((headerGroup) ( tr key{headerGroup.id} {headerGroup.headers.map((h) ( table.AppHeader header{h} key{h.id} {(header) ( th onClick{header.column.getToggleSortingHandler()} header.FlexRender / header.SortIndicator / header.ColumnFilter / /th )} /table.AppHeader ))} /tr ))} /thead tbody {table.getRowModel().rows.map((row) ( tr key{row.id} {row.getAllCells().map((c) ( table.AppCell cell{c} key{c.id} {(cell) tdcell.FlexRender //td} /table.AppCell ))} /tr ))} /tbody /table table.PaginationControls / table.RowCount / /div )} /table.AppTableselector 只挑选实际用到的切片如pagination、sorting、columnFilters渲染函数从参数中解构使用。table.TableToolbar、table.PaginationControls、table.RowCount属于注册在createTableHook中的tableComponents它们通过useTableContext()读取table.AppTable提供的实例而SortIndicator、ColumnFilter等headerComponents则通过useHeaderContext()读取头部上下文。关联类型与组件族AppTableComponent并非孤立存在它与同族组件共享带/不带 selector 双签名的设计模式均定义于 types.ts组件类型Props无 selectorProps带 selector提供上下文AppTableComponentAppTablePropsWithoutSelectorL587-L591AppTablePropsWithSelectorL593-L600TableContext.Provider表格实例AppCellComponentAppCellPropsWithoutSelectorL602-L615AppCellPropsWithSelectorL617-L632CellContext.Provider单元格实例AppHeaderComponentAppHeaderPropsWithoutSelectorL634-L647AppHeaderPropsWithSelectorL649-L664HeaderContext.Provider表头实例三者在AppOctaneTable类型types.ts#L733-L805中共同构成扩展后的表格实例 API。此外配套的AppFooter复用AppHeaderComponent类型因为它同样以Header为入参。上下文隔离的进阶选项当需要嵌套表格或隔离不同表格的上下文时可通过createTableHook的tableContext、cellContext、headerContext选项types.ts#L565-L584传入自定义的 octane Context替换默认的模块级共享 Context。AppTable实现中的TableContext.Provider正是基于该选项指定的 context 完成注入的。小结AppTableComponentTFeatures是 octane-table 表格树的根组件类型通过双调用签名同时支持普通渲染与状态订阅渲染两种模式无 selector 时children为OctaneNodeselector在类型上被禁止never有 selector 时children变为(state: TSelected) OctaneNode的渲染函数内部由TableSubscribe完成状态切片订阅底层统一经由TableContext.Provider提供表格实例组件本身通过useMemo保持稳定引用避免整棵子树被重挂载实际使用中table.AppTable应与AppHeader/AppCell/AppFooter配合结合createTableHook注册的组件族构建完整、可复用、细粒度响应式的表格渲染树。赞分享前端UI组件【免费下载链接】table Headless UI for building powerful tables datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table项目地址https://gitcode.com/gh_mirrors/ta/table点击查看免费下载相关推荐Preact Table AppCellComponent 接口详解单元格上下文包装器与 Subscribe 订阅机制Preact Table AppCellComponent 接口详解单元格上下文包装器与 Subscribe 订阅机制 导读 AppCellComponent前端UI组件TanStack Table Octane 中的 AppHeaderComponent头/脚渲染组件类型与 Subscribe 选配机制解析TanStack Table Octane 中的 AppHeaderComponent头/脚渲染组件类型与 Subscribe 选配机制解析 导读 AppHe前端UI组件基于 TanStack Table Preact 适配器的 API 参考指南useTable、createTableHook 与 Subscribe 细粒度订阅机制深度解析基于 TanStack Table Preact 适配器的 API 参考指南useTable、createTableHook 与 Subscribe 细粒度订前端UI组件上一篇URLFinder 使用教程下一篇终极指南如何使用Safe-and-Stable-Ckpt2Safetensors转换工具提升Stable Diffusion模型安全性创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考