Getting Started

Infinite Table is a UI component for data virtualization - helps you display huge datasets of tabular data.

@infinite-table/infinite-vue is Infinite Table for Vue 3: the same DataGrid, built from the same source and with the same focus on performance, with Vue components and composables.

Installation#

Infinite Table is available on the public npm registry - install it by running the following command:

Terminal

npm i @infinite-table/infinite-vue

Meet the Code#

This is an example to get you started with Infinite Table with minimal setup. Click edit to change the code and see the grid update.

loading demo…

Don't forget to import the CSS to see the component in action!

import '@infinite-table/infinite-vue/index.css';

COPY

Using the Components#

In the code snippet above, you notice we're using 2 components:

DataSource - this needs to be a parent (or ancestor, at any level) of the InfiniteTable component - it controls which data the table is rendering
InfiniteTable - the actual virtualized table component - needs to be inside a DataSource (can be at any level of nesting).

Both components are named exports of the @infinite-table/infinite-vue package.

TypeScript Types#

Our TypeScript types are published as part of the package, as named exports from the root of the package.

There are 2 components that you can use and import:

InfiniteTable
DataSource

Each of those has types provided for all the props it exposes, with the pattern of <COMPONENT_NAME>Prop<PROP_NAME>, so here are a few examples to clarify the rule:

import {
  InfiniteTablePropColumns, // or accessible as InfiniteTableProps['columns']
  // corresponding to the `columns` prop
  DataSourcePropGroupBy, // or accessible as DataSourceProps['groupBy']
  // corresponding to the `groupBy` prop
} from '@infinite-table/infinite-vue';

COPY

Learn about our TypeScript typings

Read more about how to use our TypeScript types.

Built for Vue#

Infinite Table for Vue is fully declarative and fully typed, and it's configured through props - the same props as the React version:

bind props in the template, as you do with any Vue component - :columns="columns", :rowHeight="40".
the on*Change callbacks are props as well, not emitted events - bind them with :onSortInfoChange="onSortInfoChange" (not with @sort-info-change).
for controlled props, bind a ref and update it in the corresponding callback - for example :sortInfo="sortInfo" together with :onSortInfoChange. The uncontrolled version of a prop (defaultSortInfo) needs no callback.
column render functions and custom components return VNodes - use h() from vue.

Licensing#

@infinite-table/infinite-vue is published under the same license as the React package.

More on Licensing

Read more about our licensing model and how you can use Infinite Table.

About the Docs#

We're grateful for the work done by the team behind reactjs.org and the new React documentation found at beta.reactjs.org - we've built our documentation on their excellent work 🙏 and we're grateful for that.

The documentation is versioned, and we will publish a new version of the documentation when there are any significant changes in the corresponding @infinite-table/infinite-vue version.