SlickGrid Examples

This repo has significantly expanded the set of Examples from the mleibman repo

• SlickGrid icons

• (most comprehensive) Using a filtered data view to drive the grid
• Interactive grouping and aggregates
• (must see) Realtime Trading - High Frequency Update
• Web Component with PubSub Service instead of SlickEvent
• Infinite Scroll with DataView

• Basic use with minimal configuration
• Basic use within a shadow DOM tree
• Adding some formatting
• Handling events and context menu
• Highlighting and flashing cells
• Adding some formatting

• Making it editable
• Writing compound editors
• Implementing Undo
• Using a CompositeEditor to implement detached item edit form
• CompositeEditor (enhanced) implements detached modal to: Create / Edit / Mass-Update / Mass-Selection
• Optimizing DataView Updates

• Using pre-compiled micro-templates to render cells
• Spreadsheet: cell range selection, copy’n’paste and Excel-style formula editor
• Spreadsheet using a DataView: cell range selection
• Spreadsheet: features of the previous example plus Excel compatible copy and paste
• Spreadsheet: features of the previous example but using a DataView
• No vertical scrolling
• Filling the whole window
• Colspan
• Column grouping
• Grid auto-resize on browser resize
• Grid column size to content

• Implementing a totals row via a data provider
• Footer totals row
• (most comprehensive) Using a filtered data view to drive the grid
• Optimizing DataView for 500’000 rows
• Optimizing DataView for updates
• AJAX-loading data with search
• AJAX-loading data, second example
• Sorting by an index, getItem method
• Using fixed header row for quick filters
• Multi-column sorting
• Multi-column sorting using tristate numbered buttons
• Using dataItemColumnValueExtractor option to specify a custom column value extractor

• Interactive grouping and aggregates.
• Adding tree functionality (expand/collapse) to the grid
• Adding tree functionality with tree sorting
• Adding grouping using column dragging and dropping
• Adding Header Grouping and Draggable Column Grouping & Dropping
• Checkbox row selection with grouping and checkbox to select rows in group
• Row Group with dedicated Grouping Column

• Explicit initialization
• Row selection & reordering
• Row reordering (simple example without delete)
• Using background post-rendering to add graphs
• Background post-rendering with async cleanup
• Auto scroll when dragging
• Grid with Hidden Columns
• Frozen Grid with Hidden Columns
• CSP Header (Content Security Policy)
• Custom Formatter using native HTML

• Putting multiple grids on a page
• With Bootstrap 3 header
• SlickGrid inside jQueryUI Accordion
• Dynamically created SlickGrid inside jQueryUI tabs
• Dynamically created SlickGrid with DataView and filtering, inside jQueryUI tabs
• jQueryUI Autocomplete editor
• Select2 javascript drop-down editor
• Select2 Multiselect javascript drop-down editor
• Multi-select javascript drop-down editor

• Control: Grid Menu (hamburger menu)
• Plugin: Checkbox row selectors with CheckboxSelectColumn plugin
• Plugin: Checkbox row selectors with grouping levels
• Plugin: Checkbox row selectors with 'select all' checkbox in header
• Plugin: Column header buttons
• Plugin: Column header menu
• Plugin: Auto tooltips
• Plugin: Row Detail Panel
• Plugin: Context Menu & Cell Menu
• Plugin: Grid State
• 3 Plugins combo: RowDetail / RowMoveManager / RowMove
• Move Rows between 2 grids
• Initialising header column sorting using an external function
• Plugin: Custom Tooltip

• Frozen Columns (based on example4-model)
• Frozen Columns and Rows
• Frozen Columns and Rows on spreadsheet
• Frozen Columns with auto height
• Frozen Columns with tabs
• Frozen Columns with Reordering
• Frozen Rows (based on example4-model)
• Frozen Columns and Header Row Grouping Columns