Table

screenshot of Table
react
solid
svelte
vue

Table

Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table

Overview:

TanStack Table is a headless table library that allows developers to have full control over markup and styles. It is compatible with React, Solid, Vue, Svelte, and TypeScript/JavaScript. The library does not ship with components, markup, or styles, making it highly customizable and portable. It can even be used in React Native. For developers looking for a lightweight table with complete control over implementation, TanStack Table is a great choice.

Features:

  • Agnostic core (JS/TS)
  • Framework bindings for React, Vue, and Solid
  • Lightweight (approximately 14kb with tree-shaking)
  • 100% TypeScript (but not required)
  • Headless (customizable with your own UI)
  • Auto out of the box, opt-in controllable state
  • Filters (column and global)
  • Sorting (multi-column, multi-directional)
  • Grouping & Aggregation
  • Pivoting (coming soon!)
  • Row Selection
  • Row Expansion
  • Column Visibility/Ordering/Pinning/Resizing
  • Table Splitting
  • Animatable
  • Virtualizable
  • Server-side/external data model support

Installation:

To install TanStack Table, you can follow these steps:

  1. Open your command-line interface.
  2. Run the following command to install the library:
npm install tanstack-table
  1. Once the installation is complete, you can import the library into your project using the following code:
import { Table } from 'tanstack-table';
  1. You can now use the Table component in your project to build powerful tables and data grids.

Summary:

TanStack Table is a headless table library that provides developers with full control over markup and styles. It is compatible with various frameworks like React, Solid, Vue, Svelte, and TypeScript/JavaScript. The library offers a range of features including filtering, sorting, grouping, row selection, and more. It is lightweight and highly customizable, making it a great choice for developers looking for a versatile table solution. With TanStack Table, developers can build powerful tables and data grids for their applications.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

solid
Solid

SolidJS is a declarative JavaScript library for building user interfaces, offering a reactive programming model for efficient updates. It stands out for its reactivity system that minimizes unnecessary re-renders and its small bundle size, making it a performant choice for developing lightweight and reactive web applications.

svelte
Svelte

Svelte is a modern front-end framework that compiles your code at build time, resulting in smaller and faster applications. It uses a reactive approach to update the DOM, allowing for high performance and a smoother user experience.

vue
Vue

Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.

rollup
Rollup

RollupJS is a popular and efficient JavaScript module bundler that takes the code from multiple modules and packages them into a single optimized file, minimizing the overall size of the application and improving its performance.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.