All Projects → shlomiassaf → Ngrid

shlomiassaf / Ngrid

Licence: mit
A angular grid for the enterprise

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to Ngrid

React Spreadsheet Grid
An Excel-like grid component for React with custom cell editors, performant scroll & resizable columns
Stars: ✭ 996 (+534.39%)
Mutual labels:  grid, table
Smart Webcomponents
Web Components & Custom Elements for Professional Web Applications
Stars: ✭ 110 (-29.94%)
Mutual labels:  material, grid
React Bootstrap Table2
Next Generation of react-bootstrap-table
Stars: ✭ 1,090 (+594.27%)
Mutual labels:  grid, table
Puregrid
Lightweight JavaScript Grid/SpreadSheet component written in pure JavaScript
Stars: ✭ 10 (-93.63%)
Mutual labels:  grid, table
Hot Table
Handsontable - Best Data Grid Web Component with Spreadsheet Look and Feel.
Stars: ✭ 114 (-27.39%)
Mutual labels:  grid, table
Vue2 Datatable
The best Datatable for Vue.js 2.x which never sucks. Give us a star 🌟 if you like it! (DEPRECATED. As I, @kenberkeley, the only maintainer, no longer works for OneWay. Bugs may be fixed but new features or breaking changes might not be merged. However, it's still the best in my mind because of its extremely flexible usage of dynamic components)
Stars: ✭ 867 (+452.23%)
Mutual labels:  grid, table
Ax5ui Grid
Javascript UI Component - GRID ( Excel Grid, jqGrid, angularjs grid, jquery grid, SlickGrid, ag-grid gridify)
Stars: ✭ 102 (-35.03%)
Mutual labels:  grid, table
Vue Handsontable Official
Vue Data Grid with Spreadsheet Look & Feel. Official Vue wrapper for Handsontable.
Stars: ✭ 751 (+378.34%)
Mutual labels:  grid, table
Vue Tables 2
Vue.js 2 grid components
Stars: ✭ 1,518 (+866.88%)
Mutual labels:  grid, table
Vue Grid
A flexible grid component for Vue.js
Stars: ✭ 113 (-28.03%)
Mutual labels:  grid, table
Gmdjs
Grid Material Design
Stars: ✭ 24 (-84.71%)
Mutual labels:  material, grid
Bootstrap Table
An extended table to integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation, Vue.js)
Stars: ✭ 11,068 (+6949.68%)
Mutual labels:  material, table
Datagrid
Gem to create tables grids with sortable columns and filters
Stars: ✭ 921 (+486.62%)
Mutual labels:  grid, table
React Base Table
A react table component to display large datasets with high performance and flexibility
Stars: ✭ 966 (+515.29%)
Mutual labels:  grid, table
Jquery Rslitegrid
Input tabular data with your keyboard
Stars: ✭ 5 (-96.82%)
Mutual labels:  grid, table
Angular Generic Table
A generic table for Angular 2+. Generic table uses standard markup for tables ie. table, tr and td elements etc. and has support for expanding rows, global search, filters, sorting, pagination, export to CSV, column clicks, custom column rendering, custom export values.
Stars: ✭ 100 (-36.31%)
Mutual labels:  grid, table
Gridmanager
🌐 表格组件GridManager: 快速、灵活的对Table标签进行实例化,让Table标签充满活力。
Stars: ✭ 622 (+296.18%)
Mutual labels:  grid, table
Sheetjs
📗 SheetJS Community Edition -- Spreadsheet Data Toolkit
Stars: ✭ 28,479 (+18039.49%)
Mutual labels:  grid, table
Reactables
GigaTables is a ReactJS plug-in to help web-developers process table-data in applications and CMS, CRM, ERP or similar systems.
Stars: ✭ 112 (-28.66%)
Mutual labels:  grid, table
Ka Table
Lightweight MIT React Table component for both TS and JS with Sorting, Filtering, Grouping, Virtualization, Editing and many more
Stars: ✭ 117 (-25.48%)
Mutual labels:  grid, table

N-GRID

npm (scoped) npm (scoped) npm (scoped)

GitHub GitHub GitHub GitHub

An angular based grid based on @angular/cdk.

With all the buzzwords you want:

  • Enterprise grade
  • Highly extensible
  • UI Agnostic
  • Feature loaded

For full documentation, walk-through's and examples - visit the official site


Quick Start / Setup

Use the built-in schematics:

ng add @pebula/ngrid
  • @pebula/ngrid include secondary packages / plugins (e.g: @pebula/ngrid/detail-row)
  • Use the schematics wizard to install additional plugins (e.g: @pebula/ngrid-material / @pebula/ngrid-bootstrap)

For how-to's, concepts, recipes and more, visit the documentation site

Versions

nGrid Version Angular Version Documentation Starters
3.x.x (Current) 11.x.x Documentation Starter @ GitHub / StackBlitz / CodeSandbox
2.x.x 9.x.x - 10.x.x Documentation Starter @ GitHub / StackBlitz
1.x.x 6.x.x - 8.x.x Documentation Starter @ GitHub / StackBlitz
  • Documentation site contains live examples including source code.
  • Live code demos (StackBlitz/CodeSandbox) might experience issues with some feature especially when IVY enabled, if you find it hard to use them please run your code locally.

Quick Feature Overview

@pebula/ngrid comes with building blocks and features tied to the core of the grid.

Some of the feature are:

  • Easy to use column and datasource integration
  • Virtual Scrolling (Vertical)
  • Column: Resize / Reorder / Edit / Hide
  • Smart column / cell size management
  • Group headers and logical groups.
  • Rich and powerful theming system (SCSS)

In addition, there are several secondary packages that extend the functionality when opted-in:

  • @pebula/ngrid/target-events - Support for input device events (click, keyboard, selection)
  • @pebula/ngrid/clipboard - Copy cell selection to the clipboard
  • @pebula/ngrid/state - Saving and restoring state from and to the grid
  • @pebula/ngrid/detail-row - Support for master / detail row structure
  • @pebula/ngrid/drag - Support for drag and drop (using @angular/cdk/drag)
  • @pebula/ngrid/sticky - Support for sticky rows / columns
  • @pebula/ngrid/transpose - Support for live transpose (switch between rows & columns)
  • @pebula/ngrid/overlay-panel - A plugin for grid overlay (popups) similar to the overlay tools in @angular/cdk but with cell orientation (set position based on cell location)
  • And more...

To top that, a UI extension that make use of @angular/material components called @pebula/ngrid-material, with things like:

  • Automatic cell tooltip (Only when text is truncated)
  • Selection Column (with mat-checkbox)
  • Sorting Header (with matSort)
  • Pagination (with material pagination tools)
  • Context Menu (using MatMenu)

A similar extension also exists for bootstrap at @pebula/ngrid-bootstrap


If you like this product and want to help, WELCOME

Please see the TODO section at the bottom, help is much appreciated. The documentation is the KEY


Structure

N-Grid is built on top of building block taken from @angular/cdk. The most obvious is the CdkTable but other constructs are used as well (e.g. selection, drag & drop, etc...)

The grid is highly extensible. The design aims to support plugins and extensions, especially for the UI layer.

To support this structure there are several packages, some having secondary packages inside them:

Design goals

  • Developer ergonomics
  • Performance
  • Extensibility (features via plugins)

In other words: Easy to use, fast and with loads of features.

We try to cut down complexity by splitting features into plugins and having a default option at all times so integration is seamless.

Daily, mundane and repetitive routines like setting up a datasource or creating a column definition are packed into factories that make it easy to use.

Templates should be shared and reused, define a template once and use it multiple times.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].