Powerful headless UI table library: TanStack Table! Github Star reached a whopping 25K!
When building modern Web applications, thetabularrespond in singingdata gridare common UI components, especially when dealing with thelarge amount of dataor needcomplex interactionWhen choosing the right form library is especially important.TanStack Table It is a powerfulHeadless UI Forms library with support forTypeScript/JavaScript、React、Vue、Solid、Qwik respond in singingSvelte and many other frameworks. It provides a high degree of flexibility and extensibility for a variety of complex data presentation needs. It can not only handle simple tables , but also through its highly scalable API to meet the needs of complex data grid . Whethertab window (in a web browser etc)、arrange in order、filtrationormultidimensional grouping、Virtual scrollingIt has the flexibility to cope with all of them, while maintaining efficient performance.
Today, we're going to dive intoTanStack TableThe first part of the book analyzes its salient features, usage and scenarios, and explores why it is the obvious choice for developers of major front-end frameworks.
Remarkable features
- First-class framework bindings supporting React, Vue, Solid
- ~15kb or less (using tree-shaking)
- 100% TypeScript (but not required)
- Headless (100% customizable, comes with UI)
- Automatic out-of-the-box, opt-in controlled states
- Filters (column and global)
- Sorting (multi-column, multi-directional)
- Grouping and aggregation
- Spin (coming soon!)
- line selection
- row expansion
- Column visibility/sorting/fixing/resizing
- table partitioning
- animatable
- virtualizable
- Server-side/external data model support
Why TanStack Table?
- Multi-framework compatible and widely applicable
TanStack Table Support for multiple front-end frameworks allows for seamless integration, whether you're using React, Vue, or the emerging Solid and Svelte. This cross-framework capability makes it great for projects across different technology stacks.
- Lightweight and efficient with superior performance
Unlike other form libraries that bundle a lot of UI elements and features, theTanStack Table Maintained the corelightweightingIt also provides a rich set of function modules forLoad on Demand. Its virtual scrolling feature is particularly good when dealing with large data sets, ensuring smooth user interaction.
- No UI limitations, high customizability
For projects that require a high degree of customizationTanStack Table (used form a nominal expression)Headless ArchitectureProvides great flexibility. You can freely choose and design the appearance of the form according to the specific needs of your project without being limited by the UI that comes with the library.
- Scalable to meet complex requirements
Whether it's a simple data presentation or a complex data grid application, theTanStack Table s plug-in extension mechanism and highly customizable API can meet your needs. You can quickly realize complex functional requirements without modifying the core code.
Applicable Scenarios
- Cross-framework projects
TanStack Table Not limited to a single framework, it supports a variety of front-end frameworks, such as React, Vue, Svelte, Solid, etc., which is ideal for projects that are cross-framework or require high reusability.
- Applications dealing with large data sets
TanStack Table Lightweight and supports virtual scrolling, when dealing with large data sets, it is able to render only the data in the visible area, which greatly improves performance. It is especially suitable for e-commerce, management systems and other application scenarios that require the display of large amounts of data.
- Projects that require highly customizable form styles
If the project has specific requirements for the appearance of the form.TanStack Table The UI-free design gives you the freedom to customize your forms. Combine it with your favorite UI libraries or custom components to create a form component that fits your needs perfectly.
- Scenarios for data grids and complex interactions
TanStack Table Provides a rich API and plug-in mechanism to support complex data interaction logic, such asmultidimensional grouping、drag-and-drop sortingand other features that are ideal for use inSaaS、management systemand other scenarios where complex data needs to be processed.
Usage
mounting
npm install @tanstack/vue-table
Using Components
For example, to realize the above complex table effect, the application code to be used is as follows:
<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 = [
({
header: 'Name',
footer: props => ,
columns: [
('firstName', {
cell: info => (),
footer: props => ,
}),
(row => , {
id: 'lastName',
cell: info => (),
header: () => 'Last Name',
footer: props => ,
}),
],
}),
({
header: 'Info',
footer: props => ,
columns: [
('age', {
header: () => 'Age',
footer: props => ,
}),
({
header: 'More Info',
columns: [
('visits', {
header: () => 'Visits',
footer: props => ,
}),
('status', {
header: 'Status',
footer: props => ,
}),
('progress', {
header: 'Profile Progress',
footer: props => ,
}),
],
}),
],
}),
]
const data = ref(defaultData)
const rerender = () => {
= defaultData
}
const table = useVueTable({
get data() {
return
},
columns,
getCoreRowModel: getCoreRowModel(),
})
</script>
<template>
<div class="p-2">
<table>
<thead>
<tr
v-for="headerGroup in ()"
:key=""
>
<th
v-for="header in "
:key=""
:colSpan=""
>
<FlexRender
v-if="!"
:render=""
:props="()"
/>
</th>
</tr>
</thead>
<tbody>
<tr v-for="row in ().rows" :key="">
<td v-for="cell in ()" :key="">
<FlexRender
:render=""
:props="()"
/>
</td>
</tr>
</tbody>
<tfoot>
<tr
v-for="footerGroup in ()"
:key=""
>
<th
v-for="header in "
:key=""
:colSpan=""
>
<FlexRender
v-if="!"
:render=""
:props="()"
/>
</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>
concluding remarks
TanStack Table As a cross-framework powerful form library, with its high performance, lightweight and extreme customization capabilities, it has become an ideal choice for modern web development. Whether in React, Vue, or other front-end frameworks, it is flexible enough to handle complex data presentation and interaction needs. If you're looking for a form library that can handle simple to complex application scenarios, theTanStack Table Undoubtedly, it's the right choice for you.
The framework has been included in my full-stack front-end one-stop development platform "front-end vision" (browser search front-end vision first), interested welcome to browse and use!
