Examples

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

SlickGrid Extras

• SlickGrid icons

ES6 / ESM

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

Basic Use

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

Editing

• 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

Layout

• 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 (autoHeight)
• Filling the whole window
• Colspan
• Column grouping
• Grid auto-resize on browser resize
• Grid column size to content
• Pivoting (read only)

Data-Centric

• 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 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

Grouping

• 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 + Draggable Column Grouping & Dropping
• Checkbox row selection with grouping and checkbox to select rows in group
• Row Group with dedicated Grouping Column

Other Features

• 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

Bootstrap, Dynamic Grids and Third Party component editors

• 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

Plugins / Controls

• 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 / RowSelection
• Move Rows between 2 grids
• Initialising header column sorting using an external function
• Plugin: Custom Tooltip

Frozen Columns and Rows

• 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