Generic UI Grid

Generic UI Grid is one of the best free angular grid library. It offers many built-in features that work out of the box: editing, sorting, pagination, theming, summaries, column configuration, and many more. Performance is the main focus point, grid is able to present huge sets of data. It greatly integrates with the best javascript framework there is Angular. All of that makes this library a great free to use Angular data table component. Generic UI Grid has been released under the terms of the MIT License.

Flexible

Generic UI grid offers a lot of highly flexible and practical functions. You can specify different columns, sizes, themes, rows and many more. Read more about column configuration in the column guide.

Fast & Scalable

The grid is a library which was built to handle big sets of data. It has features like virtual scroll (also called infinite scroll), which immensely improve grid component performance. All of that makes the grid work fast and smooth with sets that consist of hundred of thousand elements. To see it yourself visit specially created example big data.

Cell Editing

Cell editing is a great feature which allows users to modify their data in an easy and simple way. Just click on one of the cells in the table and it will go into edit mode. Than insert new value and that's it, grid updates automatically. Check all possibilities of Grid Cell editing.

Easy to use

Developer experience is one of our main concerns. We put a lot of effort into making a grid as accessible as possible. To find more try our full documentation and easy to read guide on how to use the data grid.

Themes

The grid includes four sets of themes: Fabric, Material, Light, Dark. They all have their own special styles, carefully picked to imitate modern trends. On top of that, grid themes are easy to use, just select the design of your choice with the themes attribute.

Paging

Generic UI has a built in pagination function. It can be configured via the paging input and includes features like:

  • previous and next buttons
  • paging at the top or at the bottom
  • page length
  • starting page

Grid for Angular

Supports Angular versions >=6

Angular Guide

Grid for React

Coming soon

React Guide

Generic UI is a lightweight data management tool that displays statistic figures in a tabular format. It was developed with ease of implementation and usage in mind. The data can be viewed in grid form. Using built-in functions, the data contained in the grid can easily be tracked and managed. Generic UI includes many user-friendly features like sorting, paging, data binding and theming. Additionally, the grid supports a variety of helpful elements such as buttons, checkboxes, inputs, chips and dropdown menus.

Themes

Images displays grid in different themes selections.

The grid includes four sets of themes: Fabric, Material, Light, Dark. They all have their own special styles, carefully picked to imitate modern trends. On top of that, grid themes are easy to use, just select the design of your choice with the themes attribute.

Themes guide

Performance

Image presents gear and grid which suggests great performance

The grid was built to handle big sets of data. It contains features like virtual scrolling, which immensely improve browser performance.

Performance guide

Editing

Image presents cell editing in the data table component.

The cell editing allows users to modify data directly from the grid itself.

Cell Editing guide

Grid Examples

Example showing the use of Github API with Generic UI. See Example
Example presenting Generic UI with a large source database - up to 1 000 000 entries. See Example
A simple use of Generic UI on the example of most the popular DC superheroes. See Example
Example of Generic UI used as a list of countries and their details. See Example
Example of dynamic Generic UI column changes with a usage of reactive forms. See Example
Example of the grid with exported data presented on the chart. See Example

Feel free to contact us with any questions or issues, as FAQ will be published in the near future. We will really appreciate it you letting us know how do you use this angular grid library. If you find any bug, let us know about it through Report an issue.