强大的无头UI表格库:TanStack Table!Github Star达到了惊人的25K!

在构建现代化 Web 应用时,表格数据网格是常见的 UI 组件,特别是在处理大量数据或需要复杂交互时,选择合适的表格库尤为重要。TanStack Table 是一款功能强大的 Headless UI 表格库,支持 TypeScript/JavaScriptReactVueSolidQwikSvelte 等多种框架。它提供了极高的灵活性和扩展性,适用于各种复杂的数据展示需求。它不仅可以处理简单的表格,还能够通过其高度可扩展的 API 满足复杂的数据网格需求。无论是分页排序过滤,还是多维分组虚拟滚动,它都能灵活应对,同时保持高效的性能表现。

今天,我们将深入介绍 TanStack Table,分析其显著特性、使用方式及适用场景,探讨为什么它是各大前端框架开发者的不二选择。

显著特性

  • 支持React、Vue、Solid 的一流框架绑定
  • ~15kb 或更少(使用 tree-shaking)
  • 100% TypeScript(但不是必需的)
  • 无头(100% 可定制,自带 UI)
  • 自动开箱即用,选择加入可控状态
  • 过滤器(列和全局)
  • 排序(多列、多方向)
  • 分组和聚合
  • 旋转(即将推出!)
  • 行选择
  • 行扩展
  • 列可见性/排序/固定/调整大小
  • 表分割
  • 可动画化
  • 可虚拟化
  • 服务器端/外部数据模型支持

为什么选择 TanStack Table?

  1. 多框架兼容,适用广泛

TanStack Table 支持多种前端框架,不管你是使用 React、Vue,还是新兴的 Solid 和 Svelte,都可以无缝集成。这种跨框架的能力使得它在不同技术栈项目中都非常适用。

  1. 轻量高效,性能优越

与其他捆绑了大量 UI 元素和功能的表格库不同,TanStack Table 保持了核心的轻量化,同时提供丰富的功能模块供按需加载。它的虚拟滚动功能在处理大数据集时尤为出色,确保用户交互的流畅性。

  1. 无 UI 限制,自定义能力强

对于那些需要高度定制化的项目,TanStack TableHeadless架构提供了极大的灵活性。你可以根据项目的具体需求,自由选择和设计表格的外观,而不被库自带的 UI 所限制。

  1. 扩展性强,满足复杂需求

无论是简单的数据展示,还是复杂的数据网格应用,TanStack Table 的插件扩展机制和高度可定制的 API 都能满足你的需求。你可以在不修改核心代码的情况下,快速实现复杂的功能需求。

适用场景

  1. 跨框架项目

TanStack Table 不局限于单一框架,它支持多种前端框架,如 React、Vue、Svelte、Solid 等,非常适合那些跨框架或需要高复用性的项目。

  1. 处理大数据集的应用

TanStack Table 轻量且支持虚拟滚动,在处理大数据集时,它能够仅渲染可视区域的数据,极大提升了性能表现。特别适合电商、管理系统等需要展示大量数据的应用场景。

  1. 需要高度定制表格样式的项目

如果项目对表格的外观有特定要求,TanStack Table 的无 UI 设计让你可以自由定制表格样式。结合你喜欢的 UI 库或自定义组件,打造完全符合需求的表格组件。

  1. 数据网格和复杂交互的场景

TanStack Table 提供了丰富的 API 和插件机制,支持复杂的数据交互逻辑,比如多维分组拖拽排序等功能,非常适合在 SaaS管理系统等需要处理复杂数据的场景中使用。

使用方式

安装

npm install @tanstack/vue-table

使用组件

比如,要实现上述复杂表格效果,需要用到的应用代码如下:

<script setup lang="ts">
import {
FlexRender,
getCoreRowModel,
useVueTable,
createColumnHelper,
} from '@tanstack/vue-table'
import { ref } from 'vue' type Person = {
firstName: string
lastName: string
age: number
visits: number
status: string
progress: number
} const defaultData: Person[] = [
{
firstName: 'tanner',
lastName: 'linsley',
age: 24,
visits: 100,
status: 'In Relationship',
progress: 50,
},
{
firstName: 'tandy',
lastName: 'miller',
age: 40,
visits: 40,
status: 'Single',
progress: 80,
},
{
firstName: 'joe',
lastName: 'dirte',
age: 45,
visits: 20,
status: 'Complicated',
progress: 10,
},
] const columnHelper = createColumnHelper<Person>() const columns = [
columnHelper.group({
header: 'Name',
footer: props => props.column.id,
columns: [
columnHelper.accessor('firstName', {
cell: info => info.getValue(),
footer: props => props.column.id,
}),
columnHelper.accessor(row => row.lastName, {
id: 'lastName',
cell: info => info.getValue(),
header: () => 'Last Name',
footer: props => props.column.id,
}),
],
}),
columnHelper.group({
header: 'Info',
footer: props => props.column.id,
columns: [
columnHelper.accessor('age', {
header: () => 'Age',
footer: props => props.column.id,
}),
columnHelper.group({
header: 'More Info',
columns: [
columnHelper.accessor('visits', {
header: () => 'Visits',
footer: props => props.column.id,
}),
columnHelper.accessor('status', {
header: 'Status',
footer: props => props.column.id,
}),
columnHelper.accessor('progress', {
header: 'Profile Progress',
footer: props => props.column.id,
}),
],
}),
],
}),
] const data = ref(defaultData) const rerender = () => {
data.value = defaultData
} const table = useVueTable({
get data() {
return data.value
},
columns,
getCoreRowModel: getCoreRowModel(),
})
</script> <template>
<div class="p-2">
<table>
<thead>
<tr
v-for="headerGroup in table.getHeaderGroups()"
:key="headerGroup.id"
>
<th
v-for="header in headerGroup.headers"
:key="header.id"
:colSpan="header.colSpan"
>
<FlexRender
v-if="!header.isPlaceholder"
:render="header.column.columnDef.header"
:props="header.getContext()"
/>
</th>
</tr>
</thead>
<tbody>
<tr v-for="row in table.getRowModel().rows" :key="row.id">
<td v-for="cell in row.getVisibleCells()" :key="cell.id">
<FlexRender
:render="cell.column.columnDef.cell"
:props="cell.getContext()"
/>
</td>
</tr>
</tbody>
<tfoot>
<tr
v-for="footerGroup in table.getFooterGroups()"
:key="footerGroup.id"
>
<th
v-for="header in footerGroup.headers"
:key="header.id"
:colSpan="header.colSpan"
>
<FlexRender
v-if="!header.isPlaceholder"
:render="header.column.columnDef.footer"
:props="header.getContext()"
/>
</th>
</tr>
</tfoot>
</table>
<div class="h-4" />
<button @click="rerender" class="border p-2">Rerender</button>
</div>
</template> <style>
html {
font-family: sans-serif;
font-size: 14px;
} table {
border: 1px solid lightgray;
} tbody {
border-bottom: 1px solid lightgray;
} th {
border-bottom: 1px solid lightgray;
border-right: 1px solid lightgray;
padding: 2px 4px;
} tfoot {
color: gray;
} tfoot th {
font-weight: normal;
}
</style>

结语

TanStack Table 作为一款跨框架的强大表格库,凭借其高性能、轻量化和极致的定制能力,成为了现代 Web 开发中的理想选择。无论是在 React、Vue,还是其他前端框架中,它都能灵活应对复杂的数据展示和交互需求。如果你正在寻找一个可以满足从简单到复杂应用场景的表格库,TanStack Table 无疑是你的不二选择。


该框架已经收录到我的全栈前端一站式开发平台 “前端视界” 中(浏览器搜 前端视界 第一个),感兴趣的欢迎浏览使用!

强大的无头UI表格库:TanStack Table!Github Star达到了惊人的25K!的更多相关文章

  1. 前端笔记之Vue(四)UI组件库&Vuex&虚拟服务器初识

    一.日历组件 new Date()的月份是从0开始的. 下面表达式是:2018年6月1日 new Date(2018, 5, 1); 下面表达式是:2018年5月1日 new Date(2018, 4 ...

  2. 造个自己的Vue的UI组件库类似Element

    前言 随着前端的三大框架的出现,组件化的思想越来越流行,出现许多组件库.它能够帮助开发者节省时间提高效率, 如React的Ant-design,Vue的iView,Element等,它们的功能已经很完 ...

  3. Android主流UI开源库整理(转载)

    http://www.jianshu.com/p/47a4a7b99364 标题隐含了两个层面的意思,一个是主流,另一个是UI.主流既通用,一些常规的按钮.Switch.进度条等控件都是通用控件,因此 ...

  4. UI标签库的话题:JEECG智能开发平台 BaseTag(样式表和JS标签的引入)

    UI标签库专题一:JEECG智能开发平台 BaseTag(样式表和JS引入标签) 1.BaseTag(样式表和JS引入标签) 1.1. 演示样例 <t:base type="jquer ...

  5. 16款优秀的Vue UI组件库推荐

    16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基 ...

  6. [转载]前端——实用UI组件库

    https://www.cnblogs.com/xuepei/p/7920888.html Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件 官网:https:/ ...

  7. 用python解析word文件(段落篇(paragraph) 表格篇(table) 样式篇(style))

    首先需要安装相应的支持库: 直接在命令行执行pip install python-docx 示例代码如下: import docxfrom docx import Document #导入库 path ...

  8. 【转】前端——实用UI组件库

    Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件 官网:https://valor-software.com/ngx-bootstrap/#/ github: h ...

  9. 前端——实用UI组件库

    Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件 官网:https://valor-software.com/ngx-bootstrap/#/ github: h ...

  10. Android(常用)主流UI开源库整理

    这几天刚做完一个项目..有点空余时间,就想着吧这一两年做的项目中的UI界面用到的一些库整理一下.后来想了一下,既然要整理,就把网上常用的 AndroidUI界面的主流开源库 一起整理一下,方便查看. ...

随机推荐

  1. 华为显卡已经支持pytorch计算框架

    相关链接: https://support.huawei.com/enterprise/zh/doc/EDOC1100079287/a21c08de https://www.zhihu.com/que ...

  2. 如何将python的pip源设置为阿里云

    为python的pip源设置为阿里云,pip源的设置操作: pip config set global.index-url https://mirrors.cloud.aliyuncs.com/pyp ...

  3. Java基础之数值类型之间的转换

    经常需要将一种数值类型转换为另一种数值类型.下图 给出了数值类型之间的合法 转换. 在图中有 6 个实心箭头,表示无信息丢失的转换:有 3 个虚箭头, 表示可能有精度 损失的转换. 例如,123 45 ...

  4. 【CDQ分治】三元环

    三元环 HDU - 7439 思路 考虑 \(3\) 个点的有向图,要么成环,要么有一个点入度为 \(2\) ,假设第 个点的入度为 \(d_i\),答案为 \(C_n^3-\sum\limits_{ ...

  5. RabbitMQ相关总结

    //connection //channel //broke //exchange:fanout. dirct. topic(*:一个单词.#:多个单词). header //queue //bind ...

  6. MFC 静态拆分视图窗口

    今天学习了MFC中拆分窗口,现将方法记录下. 想要在窗口视图中拆分成左右两个视图窗口,首先要注意的是拆分后要加载到左右的视图要符合动态创建的类, 也就是要在自己创建的视图类中添加动态创建机制宏. 类内 ...

  7. MySQL数据库基本操作包括MySQL过程、MySQL声明

    MySQL数据库 操纵数据库 查看数据库 show databases; 创建数据库 create database <database_name>; 删除数据库 drop databas ...

  8. C#/.NET/.NET Core定时任务调度的方法或者组件[转载]

    原文由Rector首发于 码友网 之 <C#/.NET/.NET Core应用程序编程中实现定时任务调度的方法或者组件有哪些,Timer,FluentScheduler,TaskSchedule ...

  9. 【Python】之pip安装第三方库失败

    一直报错:Could not fetch URL https://pypi.org/simple/pygame/: There was a problem confirming the ssl cer ...

  10. Java并发之volatile关键字内存可见性问题

    Java并发之volatile关键字内存可见性问题 线程之间数据共享案例 我们先来看一个场景: Main函数启动后,调用一个线程向list中添加数据.List的size为5的时候,设置变量flag为t ...