Start Here
Introduction
Download
Syntax
Core Concepts
Aspect Ratio
Border Radius
Border Size
Border Style
Cursor
Display
Flex
Flex Alignment
Flex Direction
Flex Grow
Flex Position
Flex Size
Flex Width
Font
Gap
Height
Margin
Padding
Spacing
Width
UI Effects
Animations
Single Box
Multi Box
3D Box
Other
Box Shadows
OutSet Shadow
InSet Shadow
Text Shadow
OutSet Shadow
InSet Shadow
UI Widgets
Accordion
Buttons
Calendar
Card
Checks & Radio
Data Tables
DropDown
DropDown Multi Select
Gallery
Pagination
Pop-Up
Progress Bar
Skeleton
Spinners
Suggestion
Tabs
Toasts
Slider
Text Boxes
Text Editor
Tool Tip
Icons
Theme Color Shade
Color Shade
Text Color
Background Color
Border Color
Gradient
Text Gradient
Single Color
Double Color
Triple Color
Background Gradient
Single Color
Double Color
Triple Color
Border Gradient
Single Color
Double Color
Triple Color
Other Pages
Landing Pages
Top Nav 1
Top Nav 2
Side Nav 1
Login 1
Forget Password
Apps
Add Data
Nav First Level
Nav Second Level
Nav Third Level
N
A
V

Data Tables: Organized & Dynamic

Present Your Data with Efficiency and Clarity

Our versatile data table component is designed to display large amounts of data in an easy-to-read, organized format. Perfect for dashboards, reports, or data-driven websites, this table ensures that your information is accessible and user-friendly.

Key Features:

  • Fully Responsive: Tables automatically adjust to different screen sizes, ensuring readability and usability across all devices.
  • Interactive Sorting: Users can easily sort data based on columns, providing an intuitive way to explore large datasets.
  • Customizable Design: Modify colors, fonts, borders, and other styles to match your brand’s look and feel.
  • Pagination Support: Handle large datasets efficiently by breaking them into manageable pages, improving user experience.
  • Search & Filter: Built-in search and filter options allow users to quickly find specific data within the table.

Simple Table

A table is a structured way to organize and display data in rows and columns. It is commonly used for presenting tabular information such as reports, schedules, and pricing details.

ID Name Department Salary
101 Amit Johnson Marketing $50000
102 Bob Smith Sales $55000
103 Charlie Brown IT $60000
104 Jane Smith Marketing $50000
105 John Doe Sales $55000
106 Charlie Munger IT $60000
Source Code 

<table class="FtWt500 Wh100p BrCeCe FtSe10 Sl:FtSe16">
    <thead>
        <tr class="CrBdTe91">
            <th class="Br1 CrBrGy Pg5 TtAnLt">ID</th>
            <th class="Br1 CrBrGy Pg5 TtAnLt">Name</th>
            <th class="Br1 CrBrGy Pg5 TtAnLt">Department</th>
            <th class="Br1 CrBrGy Pg5 TtAnLt">Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="Br1 CrBrGy Pg5">101</td>
            <td class="Br1 CrBrGy Pg5">Amit Johnson</td>
            <td class="Br1 CrBrGy Pg5">Marketing</td>
            <td class="Br1 CrBrGy Pg5">$50000</td>
        </tr>
        <tr>
            <td class="Br1 CrBrGy Pg5">102</td>
            <td class="Br1 CrBrGy Pg5">Bob Smith</td>
            <td class="Br1 CrBrGy Pg5">Sales</td>
            <td class="Br1 CrBrGy Pg5">$55000</td>
        </tr>
        <tr>
            <td class="Br1 CrBrGy Pg5">103</td>
            <td class="Br1 CrBrGy Pg5">Charlie Brown</td>
            <td class="Br1 CrBrGy Pg5">IT</td>
            <td class="Br1 CrBrGy Pg5">$60000</td>
        </tr>
        <tr>
            <td class="Br1 CrBrGy Pg5">104</td>
            <td class="Br1 CrBrGy Pg5">Jane Smith</td>
            <td class="Br1 CrBrGy Pg5">Marketing</td>
            <td class="Br1 CrBrGy Pg5">$50000</td>
        </tr>
        <tr class="HrCrBdTe">
            <td class="Br1 CrBrGy Pg5">105</td>
            <td class="Br1 CrBrGy Pg5">John Doe</td>
            <td class="Br1 CrBrGy Pg5">Sales</td>
            <td class="Br1 CrBrGy Pg5">$55000</td>
        </tr>
        <tr class="HrCrBdTe">
            <td class="Br1 CrBrGy Pg5">106</td>
            <td class="Br1 CrBrGy Pg5">Charlie Munger</td>
            <td class="Br1 CrBrGy Pg5">IT</td>
            <td class="Br1 CrBrGy Pg5">$60000</td>
        </tr>
    </tbody>
</table>

Theme Color Striped Table

A table is a structured way to organize and display data in rows and columns. It is commonly used for presenting tabular information such as reports, schedules, and pricing details.

ID Name Department Salary
101 Amit Johnson Marketing $50000
102 Bob Smith Sales $55000
103 Charlie Brown IT $60000
104 Jane Smith Marketing $50000
105 John Doe Sales $55000
106 Charlie Munger IT $60000
Source Code 

<table class="FtWt500 Wh100p BrCeCe FtSe10 Sl:FtSe16 TeSd">
    <thead>
        <tr class="CrBdTe70Lt">
            <th class="Br1 CrBrGy Pg5 TtAnLt">ID</th>
            <th class="Br1 CrBrGy Pg5 TtAnLt">Name</th>
            <th class="Br1 CrBrGy Pg5 TtAnLt">Department</th>
            <th class="Br1 CrBrGy Pg5 TtAnLt">Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="Br1 CrBrGy Pg5">101</td>
            <td class="Br1 CrBrGy Pg5">Amit Johnson</td>
            <td class="Br1 CrBrGy Pg5">Marketing</td>
            <td class="Br1 CrBrGy Pg5">$50000</td>
        </tr>
        <tr>
            <td class="Br1 CrBrGy Pg5">102</td>
            <td class="Br1 CrBrGy Pg5">Bob Smith</td>
            <td class="Br1 CrBrGy Pg5">Sales</td>
            <td class="Br1 CrBrGy Pg5">$55000</td>
        </tr>
        <tr>
            <td class="Br1 CrBrGy Pg5">103</td>
            <td class="Br1 CrBrGy Pg5">Charlie Brown</td>
            <td class="Br1 CrBrGy Pg5">IT</td>
            <td class="Br1 CrBrGy Pg5">$60000</td>
        </tr>
        <tr>
            <td class="Br1 CrBrGy Pg5">104</td>
            <td class="Br1 CrBrGy Pg5">Jane Smith</td>
            <td class="Br1 CrBrGy Pg5">Marketing</td>
            <td class="Br1 CrBrGy Pg5">$50000</td>
        </tr>
        <tr>
            <td class="Br1 CrBrGy Pg5">105</td>
            <td class="Br1 CrBrGy Pg5">John Doe</td>
            <td class="Br1 CrBrGy Pg5">Sales</td>
            <td class="Br1 CrBrGy Pg5">$55000</td>
        </tr>
        <tr>
            <td class="Br1 CrBrGy Pg5">106</td>
            <td class="Br1 CrBrGy Pg5">Charlie Munger</td>
            <td class="Br1 CrBrGy Pg5">IT</td>
            <td class="Br1 CrBrGy Pg5">$60000</td>
        </tr>
    </tbody>
</table>

Scrollable Simple Striped Table

A scrollable table is a structured way to organize and display data in rows and columns. It is commonly used for presenting tabular information such as reports, schedules, and pricing details.

ID Name Department Salary
101 Amit Johnson Marketing $50000
102 Bob Smith Sales $55000
103 Charlie Brown IT $60000
104 Jane Smith Marketing $50000
105 John Doe Sales $55000
106 Charlie Munger IT $60000
107 Elon Musk CEO $200000
108 Jeff Bezos Founder $150000
109 Mark Zuckerberg Engineer $120000
110 Tim Cook CEO $170000
111 Sundar Pichai CEO $140000
112 Sheryl Sandberg COO $110000
113 Larry Page Co-founder $160000
114 Sergey Brin Co-founder $150000
115 Jack Dorsey CEO $130000
116 Reed Hastings Co-founder $180000
Source Code 

<div class="HtMx50vh OwYAo">
    <table class="FtWt500 Wh100p BrCeCe FtSe10 Sl:FtSe16 TeSd">
    <thead class="PnSy PnTp0 ZIx100">
        <tr class="CrBdTe70Lt">
            <th class="Br1 CrBrGy Pg5 TtAnLt">ID</th>
            <th class="Br1 CrBrGy Pg5 TtAnLt">Name</th>
            <th class="Br1 CrBrGy Pg5 TtAnLt">Department</th>
            <th class="Br1 CrBrGy Pg5 TtAnLt">Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="Br1 CrBrGy Pg5">101</td>
            <td class="Br1 CrBrGy Pg5">Amit Johnson</td>
            <td class="Br1 CrBrGy Pg5">Marketing</td>
            <td class="Br1 CrBrGy Pg5">$50000</td>
        </tr>
        <tr>
            <td class="Br1 CrBrGy Pg5">102</td>
            <td class="Br1 CrBrGy Pg5">Bob Smith</td>
            <td class="Br1 CrBrGy Pg5">Sales</td>
            <td class="Br1 CrBrGy Pg5">$55000</td>
        </tr>
        <tr>
            <td class="Br1 CrBrGy Pg5">103</td>
            <td class="Br1 CrBrGy Pg5">Charlie Brown</td>
            <td class="Br1 CrBrGy Pg5">IT</td>
            <td class="Br1 CrBrGy Pg5">$60000</td>
        </tr>
        <tr>
            <td class="Br1 CrBrGy Pg5">104</td>
            <td class="Br1 CrBrGy Pg5">Jane Smith</td>
            <td class="Br1 CrBrGy Pg5">Marketing</td>
            <td class="Br1 CrBrGy Pg5">$50000</td>
        </tr>
        <tr>
            <td class="Br1 CrBrGy Pg5">105</td>
            <td class="Br1 CrBrGy Pg5">John Doe</td>
            <td class="Br1 CrBrGy Pg5">Sales</td>
            <td class="Br1 CrBrGy Pg5">$55000</td>
        </tr>
        <tr>
            <td class="Br1 CrBrGy Pg5">106</td>
            <td class="Br1 CrBrGy Pg5">Charlie Munger</td>
            <td class="Br1 CrBrGy Pg5">IT</td>
            <td class="Br1 CrBrGy Pg5">$60000</td>
        </tr>
        <tr>
            <td class="Br1 CrBrGy Pg5">107</td>
            <td class="Br1 CrBrGy Pg5">Elon Musk</td>
            <td class="Br1 CrBrGy Pg5">CEO</td>
            <td class="Br1 CrBrGy Pg5">$200000</td>
        </tr>
        <tr>
            <td class="Br1 CrBrGy Pg5">108</td>
            <td class="Br1 CrBrGy Pg5">Jeff Bezos</td>
            <td class="Br1 CrBrGy Pg5">Founder</td>
            <td class="Br1 CrBrGy Pg5">$150000</td>
        </tr>
        <tr>
            <td class="Br1 CrBrGy Pg5">109</td>
            <td class="Br1 CrBrGy Pg5">Mark Zuckerberg</td>
            <td class="Br1 CrBrGy Pg5">Engineer</td>
            <td class="Br1 CrBrGy Pg5">$120000</td>
        </tr>
        <tr>
            <td class="Br1 CrBrGy Pg5">110</td>
            <td class="Br1 CrBrGy Pg5">Tim Cook</td>
            <td class="Br1 CrBrGy Pg5">CEO</td>
            <td class="Br1 CrBrGy Pg5">$170000</td>
        </tr>
        <tr>
            <td class="Br1 CrBrGy Pg5">111</td>
            <td class="Br1 CrBrGy Pg5">Sundar Pichai</td>
            <td class="Br1 CrBrGy Pg5">CEO</td>
            <td class="Br1 CrBrGy Pg5">$140000</td>
        </tr>
        <tr>
            <td class="Br1 CrBrGy Pg5">112</td>
            <td class="Br1 CrBrGy Pg5">Sheryl Sandberg</td>
            <td class="Br1 CrBrGy Pg5">COO</td>
            <td class="Br1 CrBrGy Pg5">$110000</td>
        </tr>
        <tr>
            <td class="Br1 CrBrGy Pg5">113</td>
            <td class="Br1 CrBrGy Pg5">Larry Page</td>
            <td class="Br1 CrBrGy Pg5">Co-founder</td>
            <td class="Br1 CrBrGy Pg5">$160000</td>
        </tr>
        <tr>
            <td class="Br1 CrBrGy Pg5">114</td>
            <td class="Br1 CrBrGy Pg5">Sergey Brin</td>
            <td class="Br1 CrBrGy Pg5">Co-founder</td>
            <td class="Br1 CrBrGy Pg5">$150000</td>
        </tr>
        <tr>
            <td class="Br1 CrBrGy Pg5">115</td>
            <td class="Br1 CrBrGy Pg5">Jack Dorsey</td>
            <td class="Br1 CrBrGy Pg5">CEO</td>
            <td class="Br1 CrBrGy Pg5">$130000</td>
        </tr>
        <tr>
            <td class="Br1 CrBrGy Pg5">116</td>
            <td class="Br1 CrBrGy Pg5">Reed Hastings</td>
            <td class="Br1 CrBrGy Pg5">Co-founder</td>
            <td class="Br1 CrBrGy Pg5">$180000</td>
        </tr>
    </tbody>
</table>
</div>

Without Border Table

A table is a structured way to organize and display data in rows and columns. It is commonly used for presenting tabular information such as reports, schedules, and pricing details.

ID Name Department Salary
101 Amit Johnson Marketing $50000
102 Bob Smith Sales $55000
103 Charlie Brown IT $60000
104 Jane Smith Marketing $50000
105 John Doe Sales $55000
106 Charlie Munger IT $60000
Source Code 

<table class="Wh100p BrCeCe FtSe10 Sl:FtSe16">
    <thead>
        <tr>
            <th class="Pg10 TtAnLt FtWt600">ID</th>
            <th class="Pg10 TtAnLt FtWt600">Name</th>
            <th class="Pg10 TtAnLt FtWt600">Department</th>
            <th class="Pg10 TtAnLt FtWt600">Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="FtWt600 Pg10">101</td>
            <td class="Pg10">Amit Johnson</td>
            <td class="Pg10">Marketing</td>
            <td class="Pg10">$50000</td>
        </tr>
        <tr>
            <td class="FtWt600 Pg10">102</td>
            <td class="Pg10">Bob Smith</td>
            <td class="Pg10">Sales</td>
            <td class="Pg10">$55000</td>
        </tr>
        <tr>
            <td class="FtWt600 Pg10">103</td>
            <td class="Pg10">Charlie Brown</td>
            <td class="Pg10">IT</td>
            <td class="Pg10">$60000</td>
        </tr>
        <tr>
            <td class="FtWt600 Pg10">104</td>
            <td class="Pg10">Jane Smith</td>
            <td class="Pg10">Marketing</td>
            <td class="Pg10">$50000</td>
        </tr>
        <tr>
            <td class="FtWt600 Pg10">105</td>
            <td class="Pg10">John Doe</td>
            <td class="Pg10">Sales</td>
            <td class="Pg10">$55000</td>
        </tr>
        <tr>
            <td class="FtWt600 Pg10">106</td>
            <td class="Pg10">Charlie Munger</td>
            <td class="Pg10">IT</td>
            <td class="Pg10">$60000</td>
        </tr>
    </tbody>
</table>

Data Table

A data table is used to organize and display structured information in a clear and readable format. It allows users to easily analyze and compare data across multiple rows and columns.

Source Code 

<div class="OwXAo OwYHn">
    <table id="myDataTable1" class="Wh100p BrCeCe Br1 CrBrGy90Lt">
    </table>
</div>


let data = [
    { id: 101, name: 'Amit Johnson', department: 'Marketing', salary: 50000, age: 29, address: '123 Main St, Delhi', email: 'amit.johnson@example.com', phone: '9876543210', joinDate: '2020-06-15', status: 'Active' },
    { id: 102, name: 'Priya Sharma', department: 'Finance', salary: 65000, age: 34, address: '456 Park Ave, Mumbai', email: 'priya.sharma@example.com', phone: '9812345678', joinDate: '2018-03-10', status: 'Active' },
    { id: 103, name: 'Rohan Mehta', department: 'HR', salary: 55000, age: 31, address: '789 Green Rd, Bangalore', email: 'rohan.mehta@example.com', phone: '9123456789', joinDate: '2019-08-25', status: 'Inactive' },
    { id: 104, name: 'Sara Kapoor', department: 'IT', salary: 75000, age: 27, address: '234 Whitefield, Hyderabad', email: 'sara.kapoor@example.com', phone: '9988776655', joinDate: '2021-11-05', status: 'Active' },
    { id: 105, name: 'Vikram Singh', department: 'Sales', salary: 60000, age: 30, address: '567 Connaught Pl, Delhi', email: 'vikram.singh@example.com', phone: '9865321470', joinDate: '2017-09-17', status: 'Active' },
    { id: 106, name: 'Neha Verma', department: 'Operations', salary: 70000, age: 33, address: '890 Cyber City, Gurgaon', email: 'neha.verma@example.com', phone: '9543216789', joinDate: '2016-12-01', status: 'Inactive' },
    { id: 107, name: 'Aditya Rao', department: 'Admin', salary: 48000, age: 28, address: '901 MG Road, Pune', email: 'aditya.rao@example.com', phone: '9988012345', joinDate: '2022-01-15', status: 'Active' },
    { id: 108, name: 'Kiran Das', department: 'Support', salary: 52000, age: 26, address: '123 Salt Lake, Kolkata', email: 'kiran.das@example.com', phone: '9876547890', joinDate: '2020-05-30', status: 'Inactive' },
    { id: 109, name: 'Manish Tiwari', department: 'Legal', salary: 80000, age: 40, address: '567 Marine Drive, Mumbai', email: 'manish.tiwari@example.com', phone: '9811122334', joinDate: '2015-07-20', status: 'Active' },
    { id: 110, name: 'Pooja Nair', department: 'Engineering', salary: 90000, age: 35, address: '789 Indiranagar, Bangalore', email: 'pooja.nair@example.com', phone: '9900112233', joinDate: '2014-04-10', status: 'Active' },
    { id: 111, name: 'Rahul Gupta', department: 'Marketing', salary: 58000, age: 32, address: '12 Andheri, Mumbai', email: 'rahul.gupta@example.com', phone: '9876541230', joinDate: '2019-02-14', status: 'Active' },
    { id: 112, name: 'Ananya Bose', department: 'Finance', salary: 72000, age: 29, address: '34 BBD Bagh, Kolkata', email: 'ananya.bose@example.com', phone: '9785612345', joinDate: '2020-10-22', status: 'Active' },
    { id: 113, name: 'Sameer Khan', department: 'HR', salary: 62000, age: 38, address: '56 Hinjewadi, Pune', email: 'sameer.khan@example.com', phone: '9877896541', joinDate: '2016-05-05', status: 'Inactive' },
    { id: 114, name: 'Divya Iyer', department: 'IT', salary: 85000, age: 30, address: '78 MG Road, Bangalore', email: 'divya.iyer@example.com', phone: '9867543120', joinDate: '2017-08-19', status: 'Active' },
    { id: 115, name: 'Ravi Patel', department: 'Sales', salary: 55500, age: 33, address: '90 Ring Road, Ahmedabad', email: 'ravi.patel@example.com', phone: '9780012345', joinDate: '2018-07-30', status: 'Inactive' },
    { id: 116, name: 'Meera Reddy', department: 'Operations', salary: 67000, age: 31, address: '11 Hitech City, Hyderabad', email: 'meera.reddy@example.com', phone: '9654321789', joinDate: '2021-09-25', status: 'Active' },
    { id: 117, name: 'Sandeep Yadav', department: 'Admin', salary: 50000, age: 27, address: '33 Civil Lines, Lucknow', email: 'sandeep.yadav@example.com', phone: '9812765430', joinDate: '2019-12-10', status: 'Active' },
    { id: 118, name: 'Neelam Choudhary', department: 'Support', salary: 48500, age: 26, address: '45 Sector 18, Noida', email: 'neelam.choudhary@example.com', phone: '9923456789', joinDate: '2022-04-15', status: 'Inactive' },
    { id: 119, name: 'Arjun Malhotra', department: 'Legal', salary: 78000, age: 36, address: '67 Churchgate, Mumbai', email: 'arjun.malhotra@example.com', phone: '9876512345', joinDate: '2015-06-20', status: 'Active' },
    { id: 120, name: 'Shweta Singh', department: 'Engineering', salary: 95000, age: 34, address: '89 Rajajinagar, Bangalore', email: 'shweta.singh@example.com', phone: '9845632147', joinDate: '2013-03-05', status: 'Active' },
];

let tableObj = {
    tableId: "myDataTable",
    heading: [
        { label: 'ID', type: 'number', searchBox: true, sortButton: true, },
        { label: 'Name', type: 'string', searchBox: true, sortButton: true, },
        { label: 'Department', type: 'string', searchBox: true, sortButton: true, },
        { label: 'Salary', type: 'number', searchBox: true, },
        { label: 'Age', type: 'number', searchBox: true, sortButton: true, },
        { label: 'Address', type: 'string', searchBox: true, },
        { label: 'Email', type: 'string', searchBox: true, sortButton: true, },
        { label: 'Phone', type: 'string', searchBox: true, sortButton: true, },
        { label: 'Join Date', type: 'date', searchBox: true, sortButton: true, },
        { label: 'Status', type: 'string', searchBox: true, sortButton: true, },
    ],
    headerBackground: '#f5f5f5',
    headerColor: '#000000',
    headerContainerMinWidth: '30vw',
    data: data,
}

document.addEventListener('DOMContentLoaded', () => {
    CT.CeTe(tableObj); // create table
})

User Defined Data Table

A data table is used to organize and display structured information in a clear and readable format. It allows users to easily analyze and compare data across multiple rows and columns.

ID
Name
Department
Salary
Age
Address
Email
Phone
Join Date
Status
101 Amit Johnson Marketing $50000 29 123 Main St, Delhi amit.johnson@example.com 9876543210 2020-06-15 Active
102 Priya Sharma Finance $65000 34 456 Park Ave, Mumbai priya.sharma@example.com 9812345678 2018-03-10 Active
103 Rohan Mehta HR $55000 31 789 Green Rd, Bangalore rohan.mehta@example.com 9123456789 2019-08-25 Inactive
104 Sara Kapoor IT $75000 27 234 Whitefield, Hyderabad sara.kapoor@example.com 9988776655 2021-11-05 Active
105 Vikram Singh Sales $60000 30 567 Connaught Pl, Delhi vikram.singh@example.com 9865321470 2017-09-17 Active
106 Neha Verma Operations $70000 33 890 Cyber City, Gurgaon neha.verma@example.com 9543216789 2016-12-01 Inactive
107 Aditya Rao Admin $48000 28 901 MG Road, Pune aditya.rao@example.com 9988012345 2022-01-15 Active
108 Kiran Das Support $52000 26 123 Salt Lake, Kolkata kiran.das@example.com 9876547890 2020-05-30 Inactive
109 Manish Tiwari Legal $80000 40 567 Marine Drive, Mumbai manish.tiwari@example.com 9811122334 2015-07-20 Active
110 Pooja Nair Engineering $90000 35 789 Indiranagar, Bangalore pooja.nair@example.com 9900112233 2014-04-10 Active
111 Rahul Gupta Marketing $58000 32 12 Andheri, Mumbai rahul.gupta@example.com 9876541230 2019-02-14 Active
112 Ananya Bose Finance $72000 29 34 BBD Bagh, Kolkata ananya.bose@example.com 9785612345 2020-10-22 Active
113 Sameer Khan HR $62000 38 56 Hinjewadi, Pune sameer.khan@example.com 9877896541 2016-05-05 Inactive
114 Divya Iyer IT $85000 30 78 MG Road, Bangalore divya.iyer@example.com 9867543120 2017-08-19 Active
115 Ravi Patel Sales $55,500 33 90 Ring Road, Ahmedabad ravi.patel@example.com 9780012345 2018-07-30 Inactive
116 Meera Reddy Operations $67000 31 11 Hitech City, Hyderabad meera.reddy@example.com 9654321789 2021-09-25 Active
117 Sandeep Yadav Admin $50000 27 33 Civil Lines, Lucknow sandeep.yadav@example.com 9812765430 2019-12-10 Active
118 Neelam Choudhary Support $48,500 26 45 Sector 18, Noida neelam.choudhary@example.com 9923456789 2022-04-15 Inactive
119 Arjun Malhotra Legal $78000 36 67 Churchgate, Mumbai arjun.malhotra@example.com 9876512345 2015-06-20 Active
120 Shweta Singh Engineering $95000 34 89 Rajajinagar, Bangalore shweta.singh@example.com 9845632147 2013-03-05 Active
Source Code 

<div class="HtMx80vh OwAo">
    <table id="myDataTable2" class="Wh100p BrCeCe Br1 CrBrGy90Lt">

        <thead class="PnSy PnTp0 ZIx100 WeSeNoWp">
            <tr class="Br1 CrBrGy80Lt CrBdWe VlAnTp">
                <th class="WhMn100" data-label="ID">
                    <div class="Pg10 TtAnLt FtWt600 DyFx FxDnCn FxJyCtFxEd Ht100p">
                        <div class="DyFx FxJyCtSeBn Pg5 FxAnIsCr">
                            <span class="headerTitle">ID</span>
                            <svg class="sortButton CrurPr MnLt5 MnRt5" xmlns="http://www.w3.org/2000/svg"
                                viewBox="0 0 320 512" height="15" width="15">
                                <path
                                    d="M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41zm255-105L177 64c-9.4-9.4-24.6-9.4-33.9 0L24 183c-15.1 15.1-4.4 41 17 41h238c21.4 0 32.1-25.9 17-41z">
                                </path>
                            </svg>
                        </div>
                        <input class="inputBox TtBx WeSeNoWp" type="number" placeholder="Search by ID">
                    </div>
                </th>
                <th class="WhMn100" data-label="Name">
                    <div class="Pg10 TtAnLt FtWt600 DyFx FxDnCn FxJyCtFxEd">
                        <div class="DyFx FxJyCtSeBn Pg5 FxAnIsCr">
                            <span class="headerTitle">Name</span>
                            <svg class="sortButton CrurPr MnLt5 MnRt5" xmlns="http://www.w3.org/2000/svg"
                                viewBox="0 0 320 512" height="15" width="15">
                                <path
                                    d="M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41zm255-105L177 64c-9.4-9.4-24.6-9.4-33.9 0L24 183c-15.1 15.1-4.4 41 17 41h238c21.4 0 32.1-25.9 17-41z">
                                </path>
                            </svg>
                        </div>
                        <input class="inputBox TtBx" type="text" placeholder="Search by Name">
                    </div>
                </th>
                <th class="WhMn100" data-label="Department">
                    <div class="Pg10 TtAnLt FtWt600 DyFx FxDnCn FxJyCtFxEd">
                        <div class="DyFx FxJyCtSeBn Pg5 FxAnIsCr">
                            <span class="headerTitle">Department</span>
                            <svg class="sortButton CrurPr MnLt5 MnRt5" xmlns="http://www.w3.org/2000/svg"
                                viewBox="0 0 320 512" height="15" width="15">
                                <path
                                    d="M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41zm255-105L177 64c-9.4-9.4-24.6-9.4-33.9 0L24 183c-15.1 15.1-4.4 41 17 41h238c21.4 0 32.1-25.9 17-41z">
                                </path>
                            </svg>
                            <span><i class="filterButton CT-ArrowDownTwoSolid FtSe15 CrurPr MnLt5 MnRt5"></i></span>
                        </div>
                        <input class="inputBox TtBx" type="text" placeholder="Search by Department">
                    </div>
                </th>
                <th class="WhMn100" data-label="Salary">
                    <div class="Pg10 TtAnLt FtWt600 DyFx FxDnCn FxJyCtFxEd">
                        <div class="DyFx FxJyCtSeBn Pg5 FxAnIsCr">
                            <span class="headerTitle">Salary</span>
                            <span><i class="filterButton CT-ArrowDownTwoSolid FtSe15 CrurPr MnLt5 MnRt5"></i></span>
                        </div>
                        <input class="inputBox TtBx" type="number" placeholder="Search by Salary">
                    </div>
                </th>
                <th class="WhMn100" data-label="Age">
                    <div class="Pg10 TtAnLt FtWt600 DyFx FxDnCn FxJyCtFxEd">
                        <div class="DyFx FxJyCtSeBn Pg5 FxAnIsCr">
                            <span class="headerTitle">Age</span>
                            <svg class="sortButton CrurPr MnLt5 MnRt5" xmlns="http://www.w3.org/2000/svg"
                                viewBox="0 0 320 512" height="15" width="15">
                                <path
                                    d="M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41zm255-105L177 64c-9.4-9.4-24.6-9.4-33.9 0L24 183c-15.1 15.1-4.4 41 17 41h238c21.4 0 32.1-25.9 17-41z">
                                </path>
                            </svg>
                        </div>
                        <input class="inputBox TtBx" type="number" placeholder="Search by Age">
                    </div>
                </th>
                <th class="WhMn100" data-label="Address">
                    <div class="Pg10 TtAnLt FtWt600 DyFx FxDnCn FxJyCtFxEd">
                        <div class="DyFx FxJyCtSeBn Pg5 FxAnIsCr">
                            <span class="headerTitle">Address</span>
                        </div>
                        <input class="inputBox TtBx" type="text" placeholder="Search by Address">
                    </div>
                </th>
                <th class="WhMn100" data-label="Email">
                    <div class="Pg10 TtAnLt FtWt600 DyFx FxDnCn FxJyCtFxEd">
                        <div class="DyFx FxJyCtSeBn Pg5 FxAnIsCr">
                            <span class="headerTitle">Email</span>
                            <svg class="sortButton CrurPr MnLt5 MnRt5" xmlns="http://www.w3.org/2000/svg"
                                viewBox="0 0 320 512" height="15" width="15">
                                <path
                                    d="M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41zm255-105L177 64c-9.4-9.4-24.6-9.4-33.9 0L24 183c-15.1 15.1-4.4 41 17 41h238c21.4 0 32.1-25.9 17-41z">
                                </path>
                            </svg>
                        </div>
                        <input class="inputBox TtBx" type="text" placeholder="Search by Email">
                    </div>
                </th>
                <th class="WhMn100" data-label="Phone">
                    <div class="Pg10 TtAnLt FtWt600 DyFx FxDnCn FxJyCtFxEd">
                        <div class="DyFx FxJyCtSeBn Pg5 FxAnIsCr">
                            <span>Phone</span>
                            <svg class="sortButton CrurPr MnLt5 MnRt5" xmlns="http://www.w3.org/2000/svg"
                                viewBox="0 0 320 512" height="15" width="15">
                                <path
                                    d="M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41zm255-105L177 64c-9.4-9.4-24.6-9.4-33.9 0L24 183c-15.1 15.1-4.4 41 17 41h238c21.4 0 32.1-25.9 17-41z">
                                </path>
                            </svg>
                        </div>
                        <input class="inputBox TtBx" type="text" placeholder="Search by Phone">
                    </div>
                </th>
                <th class="WhMn100" data-label="Join Date">
                    <div class="Pg10 TtAnLt FtWt600 DyFx FxDnCn FxJyCtFxEd">
                        <div class="DyFx FxJyCtSeBn Pg5 FxAnIsCr">
                            <span class="headerTitle">Join Date</span>
                            <svg class="sortButton CrurPr MnLt5 MnRt5" xmlns="http://www.w3.org/2000/svg"
                                viewBox="0 0 320 512" height="15" width="15">
                                <path
                                    d="M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41zm255-105L177 64c-9.4-9.4-24.6-9.4-33.9 0L24 183c-15.1 15.1-4.4 41 17 41h238c21.4 0 32.1-25.9 17-41z">
                                </path>
                            </svg>
                        </div>
                        <input class="inputBox TtBx" type="date" placeholder="Search by Join Date">
                    </div>
                </th>
                <th class="WhMn100" data-label="Status">
                    <div class="Pg10 TtAnLt FtWt600 DyFx FxDnCn FxJyCtFxEd">
                        <div class="DyFx FxJyCtSeBn Pg5 FxAnIsCr">
                            <span class="headerTitle">Status</span>
                            <svg class="sortButton CrurPr MnLt5 MnRt5" xmlns="http://www.w3.org/2000/svg"
                                viewBox="0 0 320 512" height="15" width="15">
                                <path
                                    d="M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41zm255-105L177 64c-9.4-9.4-24.6-9.4-33.9 0L24 183c-15.1 15.1-4.4 41 17 41h238c21.4 0 32.1-25.9 17-41z">
                                </path>
                            </svg>
                        </div>
                        <input class="inputBox TtBx" type="text" placeholder="Search by Status">
                    </div>
                </th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td class="Pg10">101</td>
                <td class="Pg10">Amit Johnson</td>
                <td class="Pg10">Marketing</td>
                <td class="Pg10">$50000</td>
                <td class="Pg10">29</td>
                <td class="Pg10">123 Main St, Delhi</td>
                <td class="Pg10">amit.johnson@example.com</td>
                <td class="Pg10">9876543210</td>
                <td class="Pg10">2020-06-15</td>
                <td class="Pg10">Active</td>
            </tr>
            <tr>
                <td class="Pg10">102</td>
                <td class="Pg10">Priya Sharma</td>
                <td class="Pg10">Finance</td>
                <td class="Pg10">$65000</td>
                <td class="Pg10">34</td>
                <td class="Pg10">456 Park Ave, Mumbai</td>
                <td class="Pg10">priya.sharma@example.com</td>
                <td class="Pg10">9812345678</td>
                <td class="Pg10">2018-03-10</td>
                <td class="Pg10">Active</td>
            </tr>
            <tr>
                <td class="Pg10">103</td>
                <td class="Pg10">Rohan Mehta</td>
                <td class="Pg10">HR</td>
                <td class="Pg10">$55000</td>
                <td class="Pg10">31</td>
                <td class="Pg10">789 Green Rd, Bangalore</td>
                <td class="Pg10">rohan.mehta@example.com</td>
                <td class="Pg10">9123456789</td>
                <td class="Pg10">2019-08-25</td>
                <td class="Pg10">Inactive</td>
            </tr>
            <tr>
                <td class="Pg10">104</td>
                <td class="Pg10">Sara Kapoor</td>
                <td class="Pg10">IT</td>
                <td class="Pg10">$75000</td>
                <td class="Pg10">27</td>
                <td class="Pg10">234 Whitefield, Hyderabad</td>
                <td class="Pg10">sara.kapoor@example.com</td>
                <td class="Pg10">9988776655</td>
                <td class="Pg10">2021-11-05</td>
                <td class="Pg10">Active</td>
            </tr>
            <tr>
                <td class="Pg10">105</td>
                <td class="Pg10">Vikram Singh</td>
                <td class="Pg10">Sales</td>
                <td class="Pg10">$60000</td>
                <td class="Pg10">30</td>
                <td class="Pg10">567 Connaught Pl, Delhi</td>
                <td class="Pg10">vikram.singh@example.com</td>
                <td class="Pg10">9865321470</td>
                <td class="Pg10">2017-09-17</td>
                <td class="Pg10">Active</td>
            </tr>
            <tr>
                <td class="Pg10">106</td>
                <td class="Pg10">Neha Verma</td>
                <td class="Pg10">Operations</td>
                <td class="Pg10">$70000</td>
                <td class="Pg10">33</td>
                <td class="Pg10">890 Cyber City, Gurgaon</td>
                <td class="Pg10">neha.verma@example.com</td>
                <td class="Pg10">9543216789</td>
                <td class="Pg10">2016-12-01</td>
                <td class="Pg10">Inactive</td>
            </tr>
            <tr>
                <td class="Pg10">107</td>
                <td class="Pg10">Aditya Rao</td>
                <td class="Pg10">Admin</td>
                <td class="Pg10">$48000</td>
                <td class="Pg10">28</td>
                <td class="Pg10">901 MG Road, Pune</td>
                <td class="Pg10">aditya.rao@example.com</td>
                <td class="Pg10">9988012345</td>
                <td class="Pg10">2022-01-15</td>
                <td class="Pg10">Active</td>
            </tr>
            <tr>
                <td class="Pg10">108</td>
                <td class="Pg10">Kiran Das</td>
                <td class="Pg10">Support</td>
                <td class="Pg10">$52000</td>
                <td class="Pg10">26</td>
                <td class="Pg10">123 Salt Lake, Kolkata</td>
                <td class="Pg10">kiran.das@example.com</td>
                <td class="Pg10">9876547890</td>
                <td class="Pg10">2020-05-30</td>
                <td class="Pg10">Inactive</td>
            </tr>
            <tr>
                <td class="Pg10">109</td>
                <td class="Pg10">Manish Tiwari</td>
                <td class="Pg10">Legal</td>
                <td class="Pg10">$80000</td>
                <td class="Pg10">40</td>
                <td class="Pg10">567 Marine Drive, Mumbai</td>
                <td class="Pg10">manish.tiwari@example.com</td>
                <td class="Pg10">9811122334</td>
                <td class="Pg10">2015-07-20</td>
                <td class="Pg10">Active</td>
            </tr>
            <tr>
                <td class="Pg10">110</td>
                <td class="Pg10">Pooja Nair</td>
                <td class="Pg10">Engineering</td>
                <td class="Pg10">$90000</td>
                <td class="Pg10">35</td>
                <td class="Pg10">789 Indiranagar, Bangalore</td>
                <td class="Pg10">pooja.nair@example.com</td>
                <td class="Pg10">9900112233</td>
                <td class="Pg10">2014-04-10</td>
                <td class="Pg10">Active</td>
            </tr>
            <tr>
                <td class="Pg10">111</td>
                <td class="Pg10">Rahul Gupta</td>
                <td class="Pg10">Marketing</td>
                <td class="Pg10">$58000</td>
                <td class="Pg10">32</td>
                <td class="Pg10">12 Andheri, Mumbai</td>
                <td class="Pg10">rahul.gupta@example.com</td>
                <td class="Pg10">9876541230</td>
                <td class="Pg10">2019-02-14</td>
                <td class="Pg10">Active</td>
            </tr>
            <tr>
                <td class="Pg10">112</td>
                <td class="Pg10">Ananya Bose</td>
                <td class="Pg10">Finance</td>
                <td class="Pg10">$72000</td>
                <td class="Pg10">29</td>
                <td class="Pg10">34 BBD Bagh, Kolkata</td>
                <td class="Pg10">ananya.bose@example.com</td>
                <td class="Pg10">9785612345</td>
                <td class="Pg10">2020-10-22</td>
                <td class="Pg10">Active</td>
            </tr>
            <tr>
                <td class="Pg10">113</td>
                <td class="Pg10">Sameer Khan</td>
                <td class="Pg10">HR</td>
                <td class="Pg10">$62000</td>
                <td class="Pg10">38</td>
                <td class="Pg10">56 Hinjewadi, Pune</td>
                <td class="Pg10">sameer.khan@example.com</td>
                <td class="Pg10">9877896541</td>
                <td class="Pg10">2016-05-05</td>
                <td class="Pg10">Inactive</td>
            </tr>
            <tr>
                <td class="Pg10">114</td>
                <td class="Pg10">Divya Iyer</td>
                <td class="Pg10">IT</td>
                <td class="Pg10">$85000</td>
                <td class="Pg10">30</td>
                <td class="Pg10">78 MG Road, Bangalore</td>
                <td class="Pg10">divya.iyer@example.com</td>
                <td class="Pg10">9867543120</td>
                <td class="Pg10">2017-08-19</td>
                <td class="Pg10">Active</td>
            </tr>
            <tr>
                <td class="Pg10">115</td>
                <td class="Pg10">Ravi Patel</td>
                <td class="Pg10">Sales</td>
                <td class="Pg10">$55,500</td>
                <td class="Pg10">33</td>
                <td class="Pg10">90 Ring Road, Ahmedabad</td>
                <td class="Pg10">ravi.patel@example.com</td>
                <td class="Pg10">9780012345</td>
                <td class="Pg10">2018-07-30</td>
                <td class="Pg10">Inactive</td>
            </tr>
            <tr>
                <td class="Pg10">116</td>
                <td class="Pg10">Meera Reddy</td>
                <td class="Pg10">Operations</td>
                <td class="Pg10">$67000</td>
                <td class="Pg10">31</td>
                <td class="Pg10">11 Hitech City, Hyderabad</td>
                <td class="Pg10">meera.reddy@example.com</td>
                <td class="Pg10">9654321789</td>
                <td class="Pg10">2021-09-25</td>
                <td class="Pg10">Active</td>
            </tr>
            <tr>
                <td class="Pg10">117</td>
                <td class="Pg10">Sandeep Yadav</td>
                <td class="Pg10">Admin</td>
                <td class="Pg10">$50000</td>
                <td class="Pg10">27</td>
                <td class="Pg10">33 Civil Lines, Lucknow</td>
                <td class="Pg10">sandeep.yadav@example.com</td>
                <td class="Pg10">9812765430</td>
                <td class="Pg10">2019-12-10</td>
                <td class="Pg10">Active</td>
            </tr>
            <tr>
                <td class="Pg10">118</td>
                <td class="Pg10">Neelam Choudhary</td>
                <td class="Pg10">Support</td>
                <td class="Pg10">$48,500</td>
                <td class="Pg10">26</td>
                <td class="Pg10">45 Sector 18, Noida</td>
                <td class="Pg10">neelam.choudhary@example.com</td>
                <td class="Pg10">9923456789</td>
                <td class="Pg10">2022-04-15</td>
                <td class="Pg10">Inactive</td>
            </tr>
            <tr>
                <td class="Pg10">119</td>
                <td class="Pg10">Arjun Malhotra</td>
                <td class="Pg10">Legal</td>
                <td class="Pg10">$78000</td>
                <td class="Pg10">36</td>
                <td class="Pg10">67 Churchgate, Mumbai</td>
                <td class="Pg10">arjun.malhotra@example.com</td>
                <td class="Pg10">9876512345</td>
                <td class="Pg10">2015-06-20</td>
                <td class="Pg10">Active</td>
            </tr>
            <tr>
                <td class="Pg10">120</td>
                <td class="Pg10">Shweta Singh</td>
                <td class="Pg10">Engineering</td>
                <td class="Pg10">$95000</td>
                <td class="Pg10">34</td>
                <td class="Pg10">89 Rajajinagar, Bangalore</td>
                <td class="Pg10">shweta.singh@example.com</td>
                <td class="Pg10">9845632147</td>
                <td class="Pg10">2013-03-05</td>
                <td class="Pg10">Active</td>
            </tr>
        </tbody>

    </table>
</div>


let tableObj2 = {
    tableId: "myDataTable2",
}

document.addEventListener('DOMContentLoaded', () => {
    CT.ItTe(tableObj2); // init table
})
Web Tool
Celebrate Tech © 2008 - 2024
Welcome Amit
  Logout
  Change Password
  Change Email

Loading...