TableJS

TableJS

An open-source solution for displaying complex grid content in Angular using familiar HTML, CSS, and Javascript concepts

TuGridExamples2

Install TableJS

How to Install

$ npm install --save @transunion-ui/tablejs

Import Module

import { TablejsModule } from '@transunion-ui/tablejs'

Grid Features

Infinite scrolling

TableJS utitlizes a technique to only render items that are within the scroll's viewport. This maximizes browser response time for render hundreds of thousands of rows of data.

Resizable columns

Columns can be resized with ease and minimal code. The developer can determine resizing based on pixels or percentages. Column widths are determined based on CSS classes and not inline code, making alterations simpler and uniform.

Reorderable columns

TableJS supports both single header reordering and nested header reordering.

Nested headers

Bring clarity to your information by organizing your headers data. Assign multiple headers under a parent header. Child headers will resize proportionately when resizing the parent header. Subheaders will be reorderable within the confines of the parent header.

Utilizes standard HTML tables

Table data should be displayed in tables. Many other table and grid solutions rewrite tables with div tags. Take advantage of the browser's natural table rendering by using TableJS.

Expandable Rows

Improve your user's experience. Hide and reveal detailed content with expandable rows.

Linked table resizing

Column resizing and multiple tables can be linked together to improve performance and user experience.

Resize and reorder event handling

The TableJS API provides resize and reorder event triggers for more responsive user interfaces.

Custom filtering

Provide custom functions for filtering grid data in almost any way imaginable.

Cell editing

Update table cell content in real time. The TableJS API allows for custom cell validation functions and regular expressions.

CSS styling

TableJS uses CSS for all styling. This makes integrating your tables into your web pages easy and customizable.

Nested Tables in expandable rows

Tables can be placed inside other tables, and expanded rows can contain tables with their own autonomous TableJS content.

Screen reader compatible

Provide better access to your customers by utitlizing the power of native HTML tables. TableJS provides unparalleled accessibility by screen readers by adhering to standard HTML table practices.

Print fidelity

Because TableJS is built upon HTML tables, the browser's print renderer will display the data as you see it on the screen.