jff-table

Canvas-based table for fast rendering of big datasets.

Usage no npm install needed!

<script type="module">
  import jffTable from 'https://cdn.skypack.dev/jff-table';
</script>

README

CanvasTable

Example

Simple example with 1000 rows and 1000 columns.

index.js

import Canvas from './Canvas.js';
import TableView from './TableView.js';
import DataModel from './DataModel.js';

const columns = new Array(1000).fill(null).map((e, i) => ({ visible: true, width: 70 }))
let index = 0
const cells = new Array(1000).fill(null)
    .map(c => new Array(1000).fill(null).map((e, i) => ({ value: index++ })))

const input = document.getElementById('input')
const canvas = new Canvas('canvas', 'auto')
const tableView = new TableView(canvas.rootview.frame, DataModel.spreadsheet(columns, cells))

canvas.rootview.addSubview(tableView)

index.html

<html>
    <head>
        <script src="./index.js" type="module"></script>
    </head>
    <body>
        <canvas id="canvas" tabIndex="0" style="display:block;height:400px;width:600px"></canvas>
    </body>
</html>

Demo

A demo with a few million cells