Data Grid

A full-featured client-side data grid in javascript, optimized for IE9+ with features that are familiar to Excel users.

Why Another Data Grid?

Because other solutions are not optimized for the same use cases, or have a different focus. What makes this one different:

• Optimized for IE9+ Compatibility and Performance
• Columns have a "natural width" like normal HTML tables, fitting whatever content you put in them
• Features that are familiar to users of MS Excel
• Advanced formatting and styling
• Not bloated with unnecessary features
• "Viewport" or full-page layout

Example

Try:

• Right-click column headers
• Click and drag to select cells
• Resize columns
• Enter filters. ex: "<5" or "1-4,10-20" or "abc"
• Resize your window

Features

• Data supplied in JSON via in-page object, ajax request, or a function that defines a data provider.
• Uses an actual HTML table for browser speed, combined with a unique algorithm to allow columns to have a "natural width" that doesn't need to be defined manually.
• Very fast
• "Sticky" headers
• Sort by columns
• Resize columns (double click to return to "natural width")
• Filter columns
  • case-insensitive text substring
  • Numerical operators like "<5", "1-5"
  • Filter dropdown to individually select among unique values in the column
• Freeze any number of columns on-the-fly
• Group by any column
• Hide/Show columns on-the-fly
• "Summary" rows show aggregate values for a column - avg, sum, count, etc
  • Automatically updated when the table is filtered
  • When grouped, group headers also show aggregate values
  • Aggregate function can be changed on-the-fly
• Status Bar on the bottom
  • Shows raw value of the cell being hovered over
  • Shows quick stats about selected cells like Excel - Average, Count, Sum
  • Shows tips when hovering over grid controls
  • Can be configured to show custom action buttons (like Download To Excel)
• Advanced Formatting and Styling
  • Use advanced Excel formatting syntax like "0.00_);[Red](0.00)"
  • Custom-written formatting functions can do any formatting you wish
  • Multiple formatters can be chained together
  • Styler functions can customize the colors, styles, or content of cells based on their value
  • "Aggregate" stylers allow for conditional formatting like red-green formatting based on the values in the column
• Advanced Cell Content Functionality
  • Define cell html content using data interpolation. ex: content='<a href="${url}">${name}</a>'
  • Cell content derived from eval. ex: content='${{ ${price} * ${qty} }}'
  • Cell content determined by custom function
• Selectable Rows
• Customizable and Extensible
  • Plugin custom functions to define sorting, filtering, and grouping algorithms on a per-column basis
  • Write custom formatter and styler functions
  • Create custom "Summary" rows that consider only data rows that meet your criteria
  • Internal functions are exposed so they can be over-written with your own logic
• API - Change values in the data using API methods and the grid automatically updates

Non-Features

This grid does not try to do everything. Some features found in other grids are intentionally left out, in order to optimize and focus on the features that makes this grid unique.

• Paging
• Infinite Scrolling
• Partial Rendering (for huge tables in the tens of thousands of rows)

Data Grid Fiddle

This utility gives you a "playground" to experiment with features and functionality of the data grid. Modify the data and configuration, and hit one button to re-render the grid with your changes. It also extracts documentation from the source on-the-fly, as a reference.

Data Grid Fiddle

In-Page Example

Data Grid can also be used in non-viewport mode, where the full table is visible on the page at all times. The table header and footer remain visible while scrolling and all grid features work as expected.

Source

The code for Data Grid is not yet available on github, but will be soon.