Theme-Logo
  • 5
    • Notifications
    • 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
Alia10 min ago
Generic placeholder image
Suzen15 min ago
Josephin Doe
Generic placeholder image

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

8:20 a.m.

Ohh! very nice

8:22 a.m.

Generic placeholder image

can you come with me?

8:20 a.m.

Navigation
  • Dashboard
    • Default
    • CRM
    • Analytics NEW
  • Page layouts NEW
    • Vertical
      • Static Layout
      • Header Fixed
      • Compact
      • Sidebar Fixed
    • Horizontal
      • Static Layout
      • Fixed layout
      • Static With Icon
      • Fixed With Icon
    • Bottom Menu
  • Navigation
  • Widget 100+
    • Statistic
    • Data
    • Chart Widget
UI Element
  • Basic
    • Alert
    • Breadcrumbs
    • Button
    • Box-Shadow
    • Accordion
    • Generic Class
    • Tabs
    • Color
    • Label Badge
    • Progress Bar
    • List
    • Tooltip And Popover
    • Typography
    • Other
  • Advance
    • Draggable
    • Modal
    • Notifications
    • Rating
    • Range Slider
    • Slider
    • Syntax Highlighter
    • Tour
    • Tree View
    • Nestable
    • Toolbar
    • X-Editable
  • Extra
    • Session Timeout
    • Session Idle Timeout
    • Offline
  • Animations
  • Icons
    • Font Awesome
    • Themify
    • Simple Line Icon
Forms
  • Form
    • Components
    • Add-On
    • Advance
    • Validation
  • Form Picker NEW
  • Form Select
  • Form Masking
  • Form Wizard
Tables
  • Bootstrap Table
    • Basic Table
    • Sizing Table
    • Border Table
    • Styling Table
  • Data Table
    • Basic Initialization
    • Advance Initialization
    • Styling
    • API
    • Ajax
    • Server Side
    • Plug-In
    • Data Sources
  • DT Extensions
    • AutoFill
    • Button
      • Basic Button
      • Data Export
    • Col Reorder
    • Fixed Columns
    • Fixed Header
    • Key Table
    • Responsive
    • Row Reorder
    • Scroller
    • Select Table
  • FooTable
  • Handson Table
    • Appearance
    • Data Operation
    • Rows Columns
    • Columns Only
    • Cell Features
    • Cell Types
    • Integrations
    • Rows Only
    • Utilities
  • Editable Table
Chart And Maps
  • Charts
    • Google Chart
    • ChartJs
    • List Chart
    • Float Chart
    • Knob chart
    • Morris Chart
    • Nvd3 Chart
    • Peity Chart
    • Radial Chart
    • Rickshaw Chart
    • Sparkline Chart
    • C3 Chart
  • Maps
    • Google Maps
    • Vector Maps
    • Google Map Search API
    • Location
Pages
  • Authentication
    • Login
    • Registration
    • Forgot Password
    • Lock Screen
  • Maintenance
    • Error
    • Comming Soon
    • Offline UI
  • Email
    • Compose Email
    • Inbox
    • Read Mail
App
  • To-Do
Extension
  • Editor
    • CK-Editor
    • WYSIWYG Editor
  • Event Calendar
    • Full Calendar
    • CLNDER NEW
  • IC Image Cropper
  • File Upload
  • Change Loges 1.0
Other
  • Menu Levels
    • Menu Level 2.1
    • Menu Level 2.2
      • Menu Level 3.1
    • Menu Level 2.3
  • D Disabled Menu
  • Sample Page
Rows And Columns
lorem ipsum dolor sit amet, consectetur adipisicing elit
  • Handson Table
  • Rows And Columns
Scrolling
To make the grid scrollable, set constant width and height to the container holding Handson table and set the overflow property to hidden in the container's stylesheet. Then, if the table contains enough rows or columns, you can scroll through it. Note, that Handson table renders only the visible part of the table plus a fixed amount of rows and columns. You can experiment with the viewportColumnRenderingOffset and viewportRowRenderingOffset config options, which define this behavior, to improve the performance of your app.
Fixing
Specify two fixed rows with fixedRowsTop: 2 and two fixed columns with fixedColumnsLeft: 2 option. Note: You'll need horizontal scrollbars, so just set a container width and overflow: hidden in CSS. If you're looking for an option to manually fix columns, see the Freezing section of this documentation.
Resizing
To enable these features, use settings manualColumnResize: true and manualRowResize: true The draggable resize handle appears:
  1. In the right part of the column header,
  2. In the bottom part of the row header.
Double click on the resize handle automatically adjusts size of the row or column. For the selected rows or columns works simultaneously resize.
Moving
To enable these features, use settings manualColumnMove: true and manualRowMove: true The draggable move handle appears:
  1. In the right part of the column header,
  2. In the top part of the row header.