Infinity Table

Demo

const table = document.getElementById('myTable');

function generateElements(amount) {
  return new Array(amount).fill(0).map((v, i) => {
    return {
      id: i,
      description: 'Some description'
    };
  });
}

function onRenderTr(tr, element, stack) {
  const tdId = tr.insertCell(-1);
  tdId.innerHTML = `${element.id}`;
  const tdDescription = tr.insertCell(-1);
  tdDescription.innerHTML = `${element.description}`;
  return true;
}

let infinityCanvas = new ICanvas(container, {
  elements: generateElements(500),
  onRenderTr: onRenderTr,
  rowHeight: 60,
});

Description

This component has as objective the practicality and economy of resources when using a table with many items, reducing the amount of resources created, through the dynamic assembly of the lines.

Features

• easy to use
• no external dependencies
• supports all major browsers and IE11+
• customizable and extendable

Install

npm install infinity-table

import ITable from 'infinity-table';

<script src="https://unpkg.com/infinity-table"></script>

Usage

Before, it is necessary to follow the following rules:

• The th/td must have a minimum width so that their contents do not scale the line if the window is resized.
• The tr must have a fixed and non-adjustable height, so be aware of its contents.

Then we need to define a container for our component and a table with a header.

<div style='width: 100%; height: 90vh;'>
  <table id='myTable'>
    <thead>
      <tr>
        <th width='100px'></th>
        <th>Description</th>
      </tr>
    </thead>
  </table>
</div>

Then we take our table, and pass it to the component's constructor:

const table = document.getElementById('myTable');

function generateElements(amount) {
  return new Array(amount).fill(0).map((v, i) => {
    return {
      id: i,
      description: 'Some description'
    };
  });
}

function onRenderTr(tr, element, stack) {
  const tdId = tr.insertCell(-1);
  tdId.innerHTML = `${element.id}`;
  const tdDescription = tr.insertCell(-1);
  tdDescription.innerHTML = `${element.description}`;
  return true;
}

let infinityCanvas = new ICanvas(container, {
  elements: generateElements(500),
  onRenderTr: onRenderTr,
  rowHeight: 60,
});