Examples

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

Basic Use

• Basic use with configuration
• 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
• Optimizing DataView Updates

Layout

• Using pre-compiled micro-templates to render cells
• Spreadsheet: cell range selection, copy'n'paste and Excel-style formula editor
• 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

Styles

Below is an alternative theme, credit goes to the Vue-Slimgrid project. This is mainly to show that you can change SlickGrid styles pretty easily

• Grid Menu & Column Picker
• Context & Cell Menu
• Editable Grid
• Grid with DataView

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
• 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 grouping using column dragging and 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

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