Every grid feature you need. None behind a paywall.

FreeGrid renders 100,000 rows without breaking a sweat, and ships sorting, filters, pinning, column customization and summary rows under the MIT license. Use it from plain JavaScript, React or Vue.

npm i @freegridjs/coreTry the demos Read the docs

What ships in v0.1

This table is a FreeGrid too. Click a row to open its demo.

Start in a few lines

Install the package, give the grid a container with a height, pass columns and rows.

import { createGrid } from '@freegridjs/core';
import '@freegridjs/core/styles.css';

const grid = createGrid(document.getElementById('grid'), {
  columns: [
    { field: 'name', header: 'Name', pinned: 'left' },
    { field: 'country', header: 'Country', filter: 'set' },
    { field: 'total', header: 'Total', type: 'number', format: '#,##0' },
  ],
  data: rows,
  rowSelection: 'multiple',
  summary: { rows: [{ label: 'Total', columns: { total: 'sum' } }] },
});

import { FreeGrid } from '@freegridjs/react';
import '@freegridjs/core/styles.css';

export function Customers({ rows }) {
  return (
    <FreeGrid
      columns={columns}
      data={rows}
      rowSelection="multiple"
      onCellClick={e => console.log(e.row)}
      style={{ height: 480 }}
    />
  );
}

<script setup>
import { FreeGrid } from '@freegridjs/vue';
import '@freegridjs/core/styles.css';
defineProps(['rows']);
</script>

<template>
  <FreeGrid :columns="columns" :data="rows" row-selection="multiple"
            :height="480" @cell-click="e => console.log(e.row)" />
</template>

Coming next

Each release adds a group of features. Everything stays free.