Features

ZingGrid has more than 35 features to help you visualize your data faster than ever

Here are just a few of the features you can start using in under 5 minutes

Hide Overlay

20 Years of Euro Foreign Exchange Reference Rates

Source: European Central Bank's Euro foreign exchange reference rates via Awesome JSON Datasets
Aggregate Row Batch Editing Title Captions Column Types Custom Headers Draggable Columns Filtering Frozen Columns Gridlines Paging Search Sorting

ZingGrid is Built with Accessibility in Mind

Data tables often are the least accessible part of a site. With ZingGrid, you won't have to think twice about it. Build interactive data grids that follow the three biggest accessibility standards in the #a11y community.

Learn More

Features Overview for ZingGrid

ZingGrid works in all major browsers

  • CHROME

    Chrome Logo

  • FIREFOX

    Firefox Logo

  • SAFARI

    Safari Logo

  • EDGE

    Edge Logo

  • IE

    Internet Explorer Logo

  • OPERA

    Opera Logo

  • ANDROID

    Android Logo

  • IOS

    iOS Logo

Manipulate and format your grid's data with ZingGrid

  • Aggregation Grid Illustration

    Aggregation

    ZingGrid has default behaviors for calculating the average, count, min, max, and sum values for a given row or column. These aggregation values can be displayed as a single column or row of the grid, respectively.

    Learn about Aggregation
  • Data Grid Illustration

    Static & Dynamic Data

    ZingGrid is very flexible when it comes to inputting data into the grid. Add static data on render, and update it on demand.

    Learn about Data
  • Inline Data Grid Illustration

    Remote & Inline Data

    Add data inline, locally, or connect via API. Serve data partially via pagination or sequentially via infinite scroll, all out-of-the-box.

    Learn about Inline Data
  • Integration Grid Illustration

    Easy Integration

    ZingGrid elements are native Web Components; easily integrate into your development stack!

    Learn about Integration
  • Performance Grid Illustration

    Performance

    ZingGrid was built with performance in mind. Several key features can help you render data more quickly, from infinite scrolling to server-rendering the grid.

    Learn about Performance
  • Rich API Grid Illustration

    Rich API

    ZingGrid supports a rich API that leverages what web developers already know - the native DOM API. Treat ZingGrid elements like standard HTML elements; apply CSS, bind events, and add event listeners.

    Learn about our API
  • Server Features Grid Illustration

    Server Features

    ZingGrid has built-in parameters to connect & query server REST endpoints. Connect to your data, then filter it via pagination, built-in search, or column filtering.

    Learn about Server Features
  • SSR Grid Illustration

    Server-Side Rendering

    Skip a browser execution step by server-rendering or pre-rendering your grid, then hydrating it on the client.

    Learn about SSR
  • CRUD Grid Illustration

    Built-In CRUD Functionality

    Add CRUD functionality with built-in REST and Firebase support, or customize the grid (with tools) to fit your setup.

    Learn about CRUD

Make your data come alive with interactivity

  • Batch Editing

    ZingGrid supports batch editing, which is enabled by applying the batch-edit attribute to your <zing-grid> instance. After that, you can make multiple edits, deletions, and insertions to your grid.

    Learn about Batch Editing
    Batch Editing Grid Illustration

  • Context Menu

    ZingGrid has a default context menu that lets you insert, edit, and remove data records. Simply enable it by adding the corresponding attribute to your <zing-grid> instance.

    Learn about Context Menus
    Context Menu Grid Illustration

  • Dialog Modal

    ZingGrid's modal dialog feature is pre-built with properties such as centering, masking the background, and clicking away to cancel. It is fully customizable and extensible with events.

    Learn about Dialogs
    Dialog Grid Illustration

  • Dragging

    Quickly rearrange or hide columns via mouse or touch dragging.

    Learn about Dragging
    Dragging Grid Illustration

  • Drilldown

    Leverage ZingGrid's robust API of methods and events to segment grid data into a drilldown hierarchy.

    Learn about Drilldowns
    Drilldown Grid Illustration

  • Editing

    Enable via attribute, then double-click any cell to activate the editor. Enable the row/record controls to edit all record properties at once.

    Learn about Editing
    Editing Grid Illustration

  • Expandable Content

    Slot your own markup templating directly into <zg-column> instances to set up your content for toggling. Then use CSS and/or JavaScript to execute it.

    Learn about Content
    Expandable Content Grid Illustration

  • Exporting Data

    ZingGrid has a default set of export features through getData() as well as other customizable export features through our API.

    Learn about Exporting
    Exporting Data Grid Illustration

  • Filtering

    Easily add per-column data filtering.

    Learn about Filtering
    Filtering Grid Illustration

  • Frozen Columns

    Fix columns to the left or right side of the grid.

    Learn about Frozen Columns
    Frozen Columns Grid Illustration

  • Frozen Rows

    Fix rows to the top or bottom of the grid.

    Learn about Frozen Rows
    Frozen Rows Grid Illustration

  • Paging

    Use paging options to load and render a subset of data to improve performance. Choose from traditional server-side pagination, cursor-based pagination, or infinite scrolling. Use the built-in UI controls or customize to your needs.

    Learn about Paging
    Paging Grid Illustration

  • Row Grouping

    Group rows by specifying which column indices to group by.

    Learn about Row Grouping
    Row Grouping Grid Illustration

  • Search

    Enable grid search with one attribute; add column exclusions just as easily.

    Learn about Searching
    Search Grid Illustration

  • Selection

    ZingGrid offers multiple ways to make selections on your grid. Select by cell, row, or multiple categories.

    Learn about Selections
    Selection Grid Illustration

  • Sorting

    Enable column sorting with one attribute; add per-column exclusions just as easily.

    Learn about Sorting
    Sorting Grid Illustration

  • Status

    Customize the appearance of the built-in status box, or use it for your own alerts.

    Learn about Statuses
    Status Grid Illustration

  • Virtual Scrolling

    In ZingGrid, virtual scrolling is called infinite scrolling, and is a flexible performance feature. Enable with Firebase in one line, or connect with any remote API (may need slight configuration).

    Learn about Scrolling
    Virtual Scrolling Grid Illustration

Customize the look & feel of your grids & tables

  • Buttons Grid Illustration

    Buttons

    The <zg-button> element is used both for core, internal buttons as well as offering a styled and flexible component for custom use. Depending on how it is used, ZingGrid interprets how to render the button accordingly.

    Learn about Buttons
  • Captioning Grid Illustration

    Captioning

    ZingGrid has fully styleable and flexible captioning that can be applied with attributes or slotted content.

    Learn about Captions
  • Column Headers Grid Illustration

    Column Headers

    ZingGrid has default behaviors for displaying and formatting column headers, as well as custom functionality.

    Learn about Column Headers
  • Column Types Grid Illustration

    Column Types

    ZingGrid provides default column types which enhance the functionality of your grid. Automatically render the data set according to presets, such as localized phone-number formatting, images and icons, and currency formatting. You can also use a custom renderer method to format to your needs.

    Learn about Column Types
  • Conditional Formatting Grid Illustration

    Conditional Formatting

    Use built-in conditionality or add your own to style and customize your grid's appearance.

    Learn about Formatting
  • Custom Column Grid Illustration

    Custom Columns

    Define your own column and cell rendering and display options with a simple templating syntax.

    Learn about Custom Columns
  • Gridlines Grid Illustration

    Gridlines

    Quickly control the appearance of gridlines as horizontal, vertical, or both via attribute.

    Learn about Gridlines
  • Layouts Grid Illustration

    Layouts

    ZingGrid automatically resizes your columns and changes from row to card layout in smaller device widths. To override and always serve a layout, simply set the layout attribute value to the desired layout.

    Learn about Layouts
  • Loading Screen Grid Illustration

    Loading Screen

    Use the built-in loading screen or define your own.

    Learn about Loading
  • Media Types Grid Illustration

    Media Types

    ZingGrid has built-in column types for iframes, images, and video, which renders the appropriate media markup from the data source.

    Learn about Media Types
  • Mobile Grid Illustration

    Mobile

    ZingGrid is responsive and mobile-ready by design!

    Learn about Mobile
  • Nested Content Grid Illustration

    Nested Content

    Add nested markup (or even other grid instances) via slotted content and custom rendering to help users to digest data.

    Learn about Nested Content
  • Source Grid Illustration

    Source

    Need to attribute your data to a source? ZingGrid has a basic, built-in source (citation) element that wraps the source text in <cite role="any">.

    Learn about Source
  • Viewports Grid Illustration

    Viewports

    The viewport attribute automatically changes its value based on the current width of the grid according to internal breakpoints. Customize and add your own breakpoints when needed.

    Learn about Viewports
  • Zebra Striping Grid Illustration

    Zebra Striping

    Alternate the background color of rows and cards with one attribute, or create your own complex styling rules via a simple configuration process.

    Learn about Zebra Striping