FancyGrid Samples | Angular React Vue jQuery Grid and Form

Samples

Gallery

Columns
- JSON Data
- Array Data
- Array Data with fields
- Locked Columns
- RightLocked Columns
- Column types
- Hidden checkboxes
- Currency column
- Column header image
- Image and text types
- Filter
- Auto-size columns
- Order column
- Column menu
- Menu with columns only
- Column Header CheckBox
- Column Header Images
- Column Header Styling
- Editable Column Title
- Hide/Show Columns API
Grouping Columns
- Grouped Header
- Header Group Cells Styling
Rows
- Row drag
- Multi rows drag
- Drag from grid to grid
- Drag to custom element
- Edit row
- Rows' Auto Height
- Row Expander
- Row Expander Sub Grid
Grouping Rows
- Basic sample
- Dynamic grouping
Filtering
- Basic sample
- Server filtering and sorting
- Search
- Filter over Form
- Custom Filtering
Paging
- Basic sample
- Bar type - both
- Bar type - tbar
- Page size
- Server paging and sorting
Edit
- Cell
- Row
- Form
- Popup
Sorting
- Basic sample
- Multi-sorting
- Server sorting and paging
Infinite - Beta
- 10,000 rows
Tree Data
- Basic sample
- Folders
Server Samples
- Load JSON file
- Paging and sorting
- CRUD
- RESTful
Grid with chart
- One chart
- Multiple charts
- Sparklines
- HBar
- HBar Stacked
- HBar Stacked Full
Grid Map
- States data
- Dark Theme
- Europe
Form
- Grid with Form
- User data
- FieldSet
- Fields in-line
- Align-s
- Radio Field
- Format Input
- Multi Forms
- Combo MultiSelect
- Tabs
- Login Form
Selection
- Selection
- TrackOver
- Active Navigation Cell
- MultiSelect(CTRL Key)
- CheckBox Selection
- Memory
- Continue Edit
Localization
- German
- i18n
Titles and Footer
- Footer
- Title
- Title Styling
- Title Tools
- SubTitle
- SubTitle Styling
Events and Controllers
- Over function
- Over params
- Handler inside
- Handler in controller
- Events in controller
- Selector in controller
Events and Controllers
- Events
- Cell Button
- Controllers
- Expand Form
Miscellaneous
- Context Menu
- Fit Size
- Resizable
- Responsive
- Summary
- Export
- Validation
Themes
- Blue
- Bootstrap
- Dark
- Default
- Gray
- Extra Gray
- Material

By default sorting, paging and other actions drop selections.
For selModel with type equals to rows it is possible to memory selection.