Theme-Logo
  • 5
    • Notifications
      New
    • Generic placeholder image
      John Doe

      Lorem ipsum dolor sit amet, consectetuer elit.

      30 minutes ago
    • Generic placeholder image
      Joseph William

      Lorem ipsum dolor sit amet, consectetuer elit.

      30 minutes ago
    • Generic placeholder image
      Sara Soudein

      Lorem ipsum dolor sit amet, consectetuer elit.

      30 minutes ago
  • 3
  • User-Profile-Image John Doe
    • Settings
    • Profile
    • My Messages
    • Lock Screen
    • Logout
Generic placeholder image
Josephin Doe
Generic placeholder image
Lary Doe
Generic placeholder image
Alice
Generic placeholder image
Alia
Generic placeholder image
Suzen
Josephin Doe
Generic placeholder image

I'm just looking around. Will you tell me something about yourself?

8:20 a.m.

I'm just looking around. Will you tell me something about yourself?

8:20 a.m.

Generic placeholder image
Navigation
  • Dashboard
    • Default
    • CRM
    • Analytics NEW
  • Layouts HOT
    • Vertical
      • Static Layout
      • Header Fixed
      • Compact
      • Sidebar Fixed
    • Horizontal
      • Static Layout
      • Fixed Layout
      • Static With Icon
      • Fixed With Icon
    • Bottom Menu
    • Box Layout
    • RTL
    • Navigation Light
  • Widgets 100+
    • Statistic
    • Data
    • Chart Widget
UI Elements
  • Components
    • Basic
      • Alert
      • Breadcrumbs
      • Button
      • Box-Shadow
      • Accordion
      • Generic Class
      • Tabs
      • Color
      • Label Badge
      • Progress Bar
      • Pre-Loader
      • List
      • Tooltip & Popover
      • Typography
      • Other
    • Advance
      • Draggable
      • Grid Stack
      • Light Box
      • Modal
      • Notifications
      • PNotify
      • Rating
      • Slider
      • Syntax Highlighter
      • Nestable
      • Toolbar
      • X-Editable
    • Extra
      • Session Timeout
      • Session Idle Timeout
    • Animations
    • Sticky Notes
    • Icons
Forms
  • Forms NEW
    • Form Components
    • Form Add-On
    • Form Advance
    • Form Validation
    • Form Picker
    • Form Select
    • Form Masking
    • Form Wizard
Tables
  • Tables
    • Bootstrap Table
      • Basic Table
      • Sizing Table
      • Border Table
      • Styling Table
    • Data Table
      • Basic
      • Advance
      • Styling
      • API
      • Ajax
      • Server Side
      • Plug-In
      • Data Sources
    • DT Extensions
      • AutoFill
      • Basic Buttons
      • HTML5 Export
      • Col Reorder
      • Fixed Columns
      • Fixed Header
      • Key Table
      • Responsive
      • Row Reorder
      • Scroller
      • Select Table
    • Handson Table
      • Appearance
      • Data Operation
      • Rows & Columns
      • Columns Only
      • Cell Features
      • Cell Types
      • Integrations
      • Rows Only
      • Utilities
    • Editable Table
Charts & Maps
  • Charts NEW
    • Echarts
    • ChartJs
    • List Chart
    • Sparkline Chart
  • Maps
    • Google Maps
    • Vector Maps
    • Google Map Search API
    • Location
Pages
  • Authentication
    • Login
      • With BG Image
      • With Header/Footer
    • Registration
      • With BG Image
      • With Header/Footer
    • Forgot Password
    • Lock Screen
  • User
    • User Profile
    • User Card
    • Timeline
  • Utility
    • Error
    • Coming Soon
    • Sample Page
Business
  • E-Commerce HOT
    • Product
    • Product List
    • Product Edit
    • Product Detail
    • Product Cart
    • Credit Card Form
  • Invoice
    • Invoice
    • Invoice Summary
    • Invoice List
  • Job Portal
    • Job Details
    • Job Find
    • Job Panel View
Applications
  • Chat
  • Email
    • Compose
    • Inbox
    • Read Mail
    • Templates
      • Welcome
      • Reset Password
      • Newsletter
      • App Launch
      • Activation
  • Task
    • Task List
    • Task Board
    • Task Detail
    • Issue List
  • To-Do & Notes
    • To-Do
    • Notes
  • Social
    • Wall
    • Messages
  • Calendar
    • Full Calendar
Extensions
  • Gallery
    • Gallery Grid
    • Masonry Gallery
    • Advance Gallery
  • Search
    • Simple Search
  • WYSIWYG Editor
  • Image Cropper
  • File Upload
  • Change Logs
Other
  • Menu Levels
    • Menu Level 2.1
    • Menu Level 2.2
      • Menu Level 3.1
    • Menu Level 2.3
  • Disabled Menu
  • Landing Page
Support
  • Documentation
  • Submit Issue

Data Operations

Sorting, Paginating & Searching
  • Handson Table
  • Data Operations
Sorting
If you want to sort data in your data source array, you can simply invoke an Array.prototype.sort() function and call the render() function to refresh the table. You don't need any plugin for this. However, this operation alters the structure of the data source, and in many cases you want to leave the data source intact, while displaying its content in a specified order.Here's where column sorting plugin comes in handy. Column sorting plugin works as a proxy between the data source and the Handson table rendering module. It can map indices of displayed rows (called logical indices) to the indices of corresponding rows in data source (called physical indices) and vice versa. This way you can alter the order of rows which are being presented to user, without changing the data source internal structure.
Paginating
Add pages to your table.
  • 1
  • 2
  • 3
  • 4
  • 5
Searching
The search plugin provides an easy interface to search data across Handson table. You should first enable the plugin by setting the search option to search. When enabled, searchPlugin exposes a new method query(queryStr), where queryStr is a string to find within the table. By default, the search is case insensitive. query(queryStr, [callback], [queryMethod]) method does 2 things. First of all, it returns an array of search results. Every element is an objects containing 3 properties:
  1. row – index of the row where the value has been found
  2. col – index of the column where the value has been found
  3. data – the value that has been found
The second thing the query does is set the isSearchResult property for each cell. If a cell is in search results, then its isSearchResult is set to true, otherwise the property is set to false.