Documentation

Introduction

The idea/philosophy: This project is made for solving the problem of displaying large datasets in a grid view. Large datasets mean thousands of rows and columns. We use virtual scrolling for both directions (horizontal and vertical) to create a high-performance ui component. The data can be displayed as a grid or as a tree table (hierarchical structure).

The core library is agnostic, it's written in plain typescript. This helps us to create a lot of table components for all common frameworks:

If you think that important framework support is missing, send us a short message. ;-) Of course, you can use the table with plain JS.

Our philosophy is to think in models. A simple table mostly has a simple data structure. An array of arrays or an array of objects. This is not our meaning of a table model. For our library: a table model gives the information on how many rows and how many columns the table has, what the value of a cell is, what the column span of a cell is, what the CSS classes are, and so on. A model is a concrete class of this interface TableModelIf .

A lot of requirements of a table body also exist for the header or footer. Also for a header, it's important to know the CSS classes or to know the 'colspan' value of a header cell and so on. Because of this, we decided to create three sub-models: our table has three areas (header, body, footer), so our table model has three (sub) area models (see: AreaModelIf ). This gives you the most flexibility for designing fancy tables. You can write an implementation of the table model by hand or you can use one of the flexible factory methods. We try to make this table component very flexible and easy to use.

TableModelIf

AreaModelIf (body)

TableModelIf defines columns and serves as a container for 3 AreaModels.
AreaModels define rows and cell content

The table can respond to user inputs: it's possible to define an edit renderer so that the user can change cell values. It's possible to filter table rows, re-order or resize the columns (by drag and drop), and so on. This is all easy to use because it's handled by default. All features of this table can be configured by an option property (see TableOptions ).

We have tons of demo code for helping you by starting with this component.

Have fun and don't worry: If you need help, write a question on Stackoverflow ( #guiexpert-table ). Feedback is welcome! Do not hesitate to contact us ( feedback@gui.expert ).

There are essentially three ways to create a table model:

Utilizing TableFactory.createTableModel() to generate a TableModel , enabling the passing of various parameters such as an array of business objects (T[]) combined with ColumnDef[] , or an array of arrays, and so on.
Developing individual AreaModels for the header, body, and footer, implementing the AreaModelIf interface. These can then be assembled into a TableModel using TableFactory.createTableModel() .
Deriving from an existing model (e.g., AreaModelObjectArrayWithColumndefs<T> ) and overriding methods as necessary.

How to start

Starting Points: the guide getstarted shows you how to start with your favorite framework.

The page showcase gives you a demonstration of some fancy tables and their models.

Everything you need to know about the Table API: Table API .

Our stackblitz: gui-expert-simple-examples .

Styling (Look & Feel)

Dark mode is trendy and gives a stylish look. It’s great for the eyes, especially in the dark. On the other hand, light mode is easy to read and works well for people with vision problems.

Light mode is familiar and accessible to more people. It shows colors accurately, which is essential for things like design and medical stuff. But dark mode looks bold, is easy on the eyes, and can save power on some screens. However, it can mess up colors and isn’t always good for long reading or bright places.

There is no golden way with one style to satisfy all users. Solution: Every app should have a dark, light and system theme as an option.

GUI Expert Table has a small set of CSS classes which defines the colors of the rendered table, which uses CSS variables .

This helps you to create a dark and a light mode matching the corporate style guide of your company.

Your global app CSS should have a set of CSS variables for each theme:

html [data-theme= "light"] {
  --ge-table-bg: #fff;
  --ge-table-body-center-text: #444;
  ...
}
html [data-theme= "dark"] {
  --ge-table-bg: #444;
  --ge-table-body-center-text: #fff;
  ...
}

It's easy to implement a theme switcher with your favorite framework. Here is a simple JS example:

Initialisation of html[data-theme] in an inline script tag:

<script>
const themeSaved = localStorage.getItem("theme");
if (themeSaved) {
  document.documentElement.dataset.theme = themeSaved;
} else {
  const prefersDark = window.matchMedia("(prefers-color-scheme: dark)", ).matches;
  document.documentElement.dataset.theme = prefersDark ? "dark" : "light";
}
window
  .matchMedia("(prefers-color-scheme: dark)")
  .addEventListener("change", (event) => {
    if (!localStorage.getItem("theme")) {
      document.documentElement.dataset.theme = event.matches ? "dark" : "light";
    }
  });
</script>

Switching theme:

document.documentElement.dataset.theme = themeNext;
localStorage.setItem("theme", themeNext);