Getting started — Adapters

The framework adapters are thin views over @tensorgrid/core (the parity-verified TypeScript port of the Polars engine). Pass raw data + a grouping — the adapter does zero math.

1. Install the adapter for your framework (plus @tensorgrid/core):

   React

   npm i @tensorgrid/react @tensorgrid/core

   Vue

   npm i @tensorgrid/vue @tensorgrid/core

   Vanilla JS

   npm i @tensorgrid/vanilla @tensorgrid/core

2. Render a grid:

   React

   import { TensorGrid } from '@tensorgrid/react';
   
   export function App({ data }) {
     return (
       <TensorGrid
         data={data}
         rows={['region', 'country']}
         measures={{ revenue: 'sum', cost: 'sum' }}
         formats={{ revenue: '$0,0', cost: '$0,0' }}
         grandTotal
       />
     );
   }

   Vue

   <script setup>
   import { TensorGrid } from '@tensorgrid/vue';
   defineProps(['data']);
   </script>
   
   <template>
     <TensorGrid
       :data="data"
       :rows="['region', 'country']"
       :measures="{ revenue: 'sum', cost: 'sum' }"
       :formats="{ revenue: '$0,0', cost: '$0,0' }"
       grand-total
     />
   </template>

   Vanilla JS

   import { mountTensorGrid } from '@tensorgrid/vanilla';
   
   mountTensorGrid(document.getElementById('grid'), {
     data,
     rows: ['region', 'country'],
     measures: { revenue: 'sum', cost: 'sum' },
     formats: { revenue: '$0,0', cost: '$0,0' },
     grandTotal: true,
   });

The vanilla adapter has no peer dependencies — it renders the same grid with createElement, so it drops into any page. Here it is live:

Every adapter also ships opt-in built-in chrome (search, export, selection toolbar, density toggle, column visibility, status bar, keyboard nav) and the same interaction surface — see the guides. For every prop and option, see the Adapter API reference.