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

Basic Table Sizes

lorem ipsum dolor sit amet, consectetur adipisicing elit
  • Bootstrap Table
  • Basic Initialization
Zero Configuration
DataTables has most features enabled by default, so all you need to do to use it with your own ables is to call the construction function: $().DataTable();.
Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2028/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2028/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 66 2026/01/12 $86,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 2029/03/29 $433,060
Airi Satou Accountant Tokyo 33 2025/11/28 $162,700
Brielle Williamson Integration Specialist New York 61 2029/12/02 $372,000
Herrod Chandler Sales Assistant San Francisco 59 2029/08/06 $137,500
Rhona Davidson Integration Specialist Tokyo 55 2027/10/14 $327,900
Colleen Hurst Javascript Developer San Francisco 39 2026/09/15 $205,500
Sonya Frost Software Engineer Edinburgh 23 2025/12/13 $103,600
Jena Gaines Office Manager London 30 2025/12/19 $90,560
Quinn Flynn Support Lead Edinburgh 22 2025/03/03 $342,000
Charde Marshall Regional Director San Francisco 36 2025/10/16 $470,600
Haley Kennedy Senior Marketing Designer London 43 2029/12/18 $313,500
Tatyana Fitzpatrick Regional Director London 19 2027/03/17 $385,750
Michael Silva Marketing Designer London 66 2029/11/27 $198,500
Paul Byrd Chief Financial Officer (CFO) New York 64 2027/06/09 $725,000
Gloria Little Systems Administrator New York 59 2026/04/10 $237,500
Bradley Greer Software Engineer London 41 2029/10/13 $132,000
Dai Rios Personnel Lead Edinburgh 35 2029/09/26 $217,500
Name Position Office Age Start date Salary
Default Ordering
Lets say you want to sort the fourth column (3) descending and the first column (0) ascending: your order: would look like this: order: [[ 3, 'desc' ], [ 0, 'asc' ]]
Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2028/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2028/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 66 2026/01/12 $86,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 2029/03/29 $433,060
Airi Satou Accountant Tokyo 33 2025/11/28 $162,700
Brielle Williamson Integration Specialist New York 61 2029/12/02 $372,000
Herrod Chandler Sales Assistant San Francisco 59 2029/08/06 $137,500
Rhona Davidson Integration Specialist Tokyo 55 2027/10/14 $327,900
Colleen Hurst Javascript Developer San Francisco 39 2026/09/15 $205,500
Sonya Frost Software Engineer Edinburgh 23 2025/12/13 $103,600
Jena Gaines Office Manager London 30 2025/12/19 $90,560
Quinn Flynn Support Lead Edinburgh 22 2025/03/03 $342,000
Charde Marshall Regional Director San Francisco 36 2025/10/16 $470,600
Haley Kennedy Senior Marketing Designer London 43 2029/12/18 $313,500
Tatyana Fitzpatrick Regional Director London 19 2027/03/17 $385,750
Michael Silva Marketing Designer London 66 2029/11/27 $198,500
Paul Byrd Chief Financial Officer (CFO) New York 64 2027/06/09 $725,000
Gloria Little Systems Administrator New York 59 2026/04/10 $237,500
Bradley Greer Software Engineer London 41 2029/10/13 $132,000
Dai Rios Personnel Lead Edinburgh 35 2029/09/26 $217,500
Name Position Office Age Start date Salary
Multi-Column Ordering
DataTables allows ordering by multiple columns at the same time, which can be activated in a number of different ways
Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2028/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2028/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 66 2026/01/12 $86,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 2029/03/29 $433,060
Airi Satou Accountant Tokyo 33 2025/11/28 $162,700
Brielle Williamson Integration Specialist New York 61 2029/12/02 $372,000
Herrod Chandler Sales Assistant San Francisco 59 2029/08/06 $137,500
Rhona Davidson Integration Specialist Tokyo 55 2027/10/14 $327,900
Colleen Hurst Javascript Developer San Francisco 39 2026/09/15 $205,500
Sonya Frost Software Engineer Edinburgh 23 2025/12/13 $103,600
Jena Gaines Office Manager London 30 2025/12/19 $90,560
Quinn Flynn Support Lead Edinburgh 22 2025/03/03 $342,000
Charde Marshall Regional Director San Francisco 36 2025/10/16 $470,600
Haley Kennedy Senior Marketing Designer London 43 2029/12/18 $313,500
Tatyana Fitzpatrick Regional Director London 19 2027/03/17 $385,750
Michael Silva Marketing Designer London 66 2029/11/27 $198,500
Paul Byrd Chief Financial Officer (CFO) New York 64 2027/06/09 $725,000
Gloria Little Systems Administrator New York 59 2026/04/10 $237,500
Bradley Greer Software Engineer London 41 2029/10/13 $132,000
Dai Rios Personnel Lead Edinburgh 35 2029/09/26 $217,500
Name Position Office Age Start date Salary
Complex Headers
When using tables to display data, you will often wish to display column information in groups. DataTables fully supports colspan and rowspan in the table's header, assigning the required order listeners to the TH element suitable for that column.
Name HR Information Contact
Position Salary Office Extn. E-mail
Tiger Nixon System Architect Edinburgh 61 2028/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2028/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 66 2026/01/12 $86,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 2029/03/29 $433,060
Airi Satou Accountant Tokyo 33 2025/11/28 $162,700
Brielle Williamson Integration Specialist New York 61 2029/12/02 $372,000
Herrod Chandler Sales Assistant San Francisco 59 2029/08/06 $137,500
Rhona Davidson Integration Specialist Tokyo 55 2027/10/14 $327,900
Colleen Hurst Javascript Developer San Francisco 39 2026/09/15 $205,500
Sonya Frost Software Engineer Edinburgh 23 2025/12/13 $103,600
Jena Gaines Office Manager London 30 2025/12/19 $90,560
Quinn Flynn Support Lead Edinburgh 22 2025/03/03 $342,000
Charde Marshall Regional Director San Francisco 36 2025/10/16 $470,600
Haley Kennedy Senior Marketing Designer London 43 2029/12/18 $313,500
Tatyana Fitzpatrick Regional Director London 19 2027/03/17 $385,750
Michael Silva Marketing Designer London 66 2029/11/27 $198,500
Paul Byrd Chief Financial Officer (CFO) New York 64 2027/06/09 $725,000
Gloria Little Systems Administrator New York 59 2026/04/10 $237,500
Bradley Greer Software Engineer London 41 2029/10/13 $132,000
Dai Rios Personnel Lead Edinburgh 35 2029/09/26 $217,500
Name Position Salary Office Extn. E-mail
DOM Positioning
When customizing DataTables for your own usage, you might find that the default position of the feature elements (filter input etc) is not quite to your liking. To address this issue DataTables takes inspiration from the CSS 3 Advanced Layout Module and provides the dom initialization parameter which can be set to indicate where you wish particular features to appear in the DOM. You can also specify div wrapping containers (with an id and / or class) to provide complete layout flexibility.
Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2028/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2028/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 66 2026/01/12 $86,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 2029/03/29 $433,060
Airi Satou Accountant Tokyo 33 2025/11/28 $162,700
Brielle Williamson Integration Specialist New York 61 2029/12/02 $372,000
Herrod Chandler Sales Assistant San Francisco 59 2029/08/06 $137,500
Rhona Davidson Integration Specialist Tokyo 55 2027/10/14 $327,900
Colleen Hurst Javascript Developer San Francisco 39 2026/09/15 $205,500
Sonya Frost Software Engineer Edinburgh 23 2025/12/13 $103,600
Jena Gaines Office Manager London 30 2025/12/19 $90,560
Quinn Flynn Support Lead Edinburgh 22 2025/03/03 $342,000
Charde Marshall Regional Director San Francisco 36 2025/10/16 $470,600
Haley Kennedy Senior Marketing Designer London 43 2029/12/18 $313,500
Tatyana Fitzpatrick Regional Director London 19 2027/03/17 $385,750
Michael Silva Marketing Designer London 66 2029/11/27 $198,500
Paul Byrd Chief Financial Officer (CFO) New York 64 2027/06/09 $725,000
Gloria Little Systems Administrator New York 59 2026/04/10 $237,500
Bradley Greer Software Engineer London 41 2029/10/13 $132,000
Dai Rios Personnel Lead Edinburgh 35 2029/09/26 $217,500
Name Position Salary Office Extn. E-mail
Alternative Pagination
The default page control presented by DataTables (forward and backward buttons with up to 7 page numbers in-between) is fine for most situations, but there are cases where you may wish to customise the options presented to the end user. This is done through DataTables' extensible pagination mechanism, the pagingType option.
Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2028/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2028/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 66 2026/01/12 $86,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 2029/03/29 $433,060
Airi Satou Accountant Tokyo 33 2025/11/28 $162,700
Brielle Williamson Integration Specialist New York 61 2029/12/02 $372,000
Herrod Chandler Sales Assistant San Francisco 59 2029/08/06 $137,500
Rhona Davidson Integration Specialist Tokyo 55 2027/10/14 $327,900
Colleen Hurst Javascript Developer San Francisco 39 2026/09/15 $205,500
Sonya Frost Software Engineer Edinburgh 23 2025/12/13 $103,600
Jena Gaines Office Manager London 30 2025/12/19 $90,560
Quinn Flynn Support Lead Edinburgh 22 2025/03/03 $342,000
Charde Marshall Regional Director San Francisco 36 2025/10/16 $470,600
Haley Kennedy Senior Marketing Designer London 43 2029/12/18 $313,500
Tatyana Fitzpatrick Regional Director London 19 2027/03/17 $385,750
Michael Silva Marketing Designer London 66 2029/11/27 $198,500
Paul Byrd Chief Financial Officer (CFO) New York 64 2027/06/09 $725,000
Gloria Little Systems Administrator New York 59 2026/04/10 $237,500
Bradley Greer Software Engineer London 41 2029/10/13 $132,000
Dai Rios Personnel Lead Edinburgh 35 2029/09/26 $217,500
Name Position Office Age Start date Salary
Scroll - Vertical
This example shows the DataTables table body scrolling in the vertical direction. This can generally be seen as an alternative method to pagination for displaying a large table in a fairly small vertical area, and as such pagination has been disabled here (note that this is not mandatory, it will work just fine with pagination enabled as well!).
Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2028/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2028/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 66 2026/01/12 $86,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 2029/03/29 $433,060
Airi Satou Accountant Tokyo 33 2025/11/28 $162,700
Brielle Williamson Integration Specialist New York 61 2029/12/02 $372,000
Herrod Chandler Sales Assistant San Francisco 59 2029/08/06 $137,500
Rhona Davidson Integration Specialist Tokyo 55 2027/10/14 $327,900
Colleen Hurst Javascript Developer San Francisco 39 2026/09/15 $205,500
Sonya Frost Software Engineer Edinburgh 23 2025/12/13 $103,600
Jena Gaines Office Manager London 30 2025/12/19 $90,560
Quinn Flynn Support Lead Edinburgh 22 2025/03/03 $342,000
Charde Marshall Regional Director San Francisco 36 2025/10/16 $470,600
Haley Kennedy Senior Marketing Designer London 43 2029/12/18 $313,500
Tatyana Fitzpatrick Regional Director London 19 2027/03/17 $385,750
Michael Silva Marketing Designer London 66 2029/11/27 $198,500
Paul Byrd Chief Financial Officer (CFO) New York 64 2027/06/09 $725,000
Gloria Little Systems Administrator New York 59 2026/04/10 $237,500
Bradley Greer Software Engineer London 41 2029/10/13 $132,000
Dai Rios Personnel Lead Edinburgh 35 2029/09/26 $217,500
Name Position Office Age Start date Salary
Scroll - Vertical, Dynamic Height
This example shows a vertically scrolling DataTable that makes use of the CSS3 (vh) unit in order to dynamically resize the viewport based on the browser window height. The (vh) unit is effectively a percentage of the browser window height. So the (50vh) used in this example is 50% of the window height. The viewport size will update dynamically as the window is resized.
Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2028/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2028/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 66 2026/01/12 $86,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 2029/03/29 $433,060
Airi Satou Accountant Tokyo 33 2025/11/28 $162,700
Brielle Williamson Integration Specialist New York 61 2029/12/02 $372,000
Herrod Chandler Sales Assistant San Francisco 59 2029/08/06 $137,500
Rhona Davidson Integration Specialist Tokyo 55 2027/10/14 $327,900
Colleen Hurst Javascript Developer San Francisco 39 2026/09/15 $205,500
Sonya Frost Software Engineer Edinburgh 23 2025/12/13 $103,600
Jena Gaines Office Manager London 30 2025/12/19 $90,560
Quinn Flynn Support Lead Edinburgh 22 2025/03/03 $342,000
Charde Marshall Regional Director San Francisco 36 2025/10/16 $470,600
Haley Kennedy Senior Marketing Designer London 43 2029/12/18 $313,500
Tatyana Fitzpatrick Regional Director London 19 2027/03/17 $385,750
Michael Silva Marketing Designer London 66 2029/11/27 $198,500
Paul Byrd Chief Financial Officer (CFO) New York 64 2027/06/09 $725,000
Gloria Little Systems Administrator New York 59 2026/04/10 $237,500
Bradley Greer Software Engineer London 41 2029/10/13 $132,000
Dai Rios Personnel Lead Edinburgh 35 2029/09/26 $217,500
Name Position Office Age Start date Salary
Language - Comma Decimal Place
A dot (.) is used to mark the decimal place in Javascript, however, many parts of the world use a comma (,) and other characters such as the Unicode decimal separator (⎖) or a dash (-) are often used to show the decimal place in a displayed number.
Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2028/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2028/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 66 2026/01/12 $86,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 2029/03/29 $433,060
Airi Satou Accountant Tokyo 33 2025/11/28 $162,700
Brielle Williamson Integration Specialist New York 61 2029/12/02 $372,000
Herrod Chandler Sales Assistant San Francisco 59 2029/08/06 $137,500
Rhona Davidson Integration Specialist Tokyo 55 2027/10/14 $327,900
Colleen Hurst Javascript Developer San Francisco 39 2026/09/15 $205,500
Sonya Frost Software Engineer Edinburgh 23 2025/12/13 $103,600
Jena Gaines Office Manager London 30 2025/12/19 $90,560
Quinn Flynn Support Lead Edinburgh 22 2025/03/03 $342,000
Charde Marshall Regional Director San Francisco 36 2025/10/16 $470,600
Haley Kennedy Senior Marketing Designer London 43 2029/12/18 $313,500
Tatyana Fitzpatrick Regional Director London 19 2027/03/17 $385,750
Michael Silva Marketing Designer London 66 2029/11/27 $198,500
Paul Byrd Chief Financial Officer (CFO) New York 64 2027/06/09 $725,000
Gloria Little Systems Administrator New York 59 2026/04/10 $237,500
Bradley Greer Software Engineer London 41 2029/10/13 $132,000
Dai Rios Personnel Lead Edinburgh 35 2029/09/26 $217,500
Name Position Office Age Start date Salary