jtable-pro

✨ What is jtable-pro?

jtable-pro is a lightweight and flexible JavaScript table component designed for modern web applications.

It provides common data-table functionality without forcing you to use a specific frontend framework.

Whether you're building a simple HTML application, a Laravel admin panel, a Vue application, or a custom JavaScript project, jtable-pro can help you display and manage tabular data efficiently.

Why jtable-pro?

• 🚀 Lightweight and fast
• 🔍 Built-in search and filtering
• ↕️ Column sorting
• 📄 Pagination support
• 📱 Responsive design
• 🎨 Easy to customize
• ⚡ Works with modern JavaScript
• 🧩 Framework-friendly
• 🔌 Easy API integration
• 🛠️ Great for admin panels and dashboards

📦 Installation

Install the package using npm:

npm install jtable-pro

Or with yarn:

yarn add jtable-pro

Or with pnpm:

pnpm add jtable-pro

🚀 Quick Start

Import jtable-pro into your JavaScript application:

import JTable from 'jtable-pro';

Then initialize the table:

const table = new JTable('#users-table', {
    data: [
        {
            id: 1,
            name: 'John Doe',
            email: '[email protected]'
        },
        {
            id: 2,
            name: 'Jane Doe',
            email: '[email protected]'
        }
    ],

    columns: [
        {
            key: 'id',
            label: 'ID'
        },
        {
            key: 'name',
            label: 'Name'
        },
        {
            key: 'email',
            label: 'Email'
        }
    ]
});

HTML:

<div id="users-table"></div>

The exact initialization options may vary depending on the version of jtable-pro you are using. See the API documentation below for the complete configuration.

🎯 Features

🔍 Search

Search through table data quickly.

const table = new JTable('#users-table', {
    searchable: true,
    data: users
});

↕️ Sorting

Enable column sorting:

const table = new JTable('#users-table', {
    sortable: true,
    data: users
});

📄 Pagination

Handle large datasets using pagination:

const table = new JTable('#users-table', {
    pagination: true,
    pageSize: 20,
    data: users
});

🎨 Custom Columns

Define exactly how your columns should appear:

const table = new JTable('#users-table', {
    columns: [
        {
            key: 'name',
            label: 'User Name'
        },
        {
            key: 'email',
            label: 'Email Address'
        },
        {
            key: 'status',
            label: 'Status'
        }
    ],

    data: users
});

🌐 API / Server-Side Data

jtable-pro can be used with APIs and server-side applications.

Example:

const table = new JTable('#users-table', {
    url: '/api/users',

    pagination: true,
    searchable: true,
    sortable: true
});

This makes jtable-pro suitable for applications where table data comes from a backend API.

🇹🇷 Laravel

jtable-pro works well with Laravel applications and Laravel APIs.

Install

npm install jtable-pro

Import it into your JavaScript:

import JTable from 'jtable-pro';

Example Laravel API:

public function index()
{
    return response()->json([
        'data' => User::paginate(20)
    ]);
}

Then use the endpoint:

const table = new JTable('#users-table', {
    url: '/api/users',
    pagination: true,
    searchable: true,
    sortable: true
});

This makes jtable-pro a convenient option for:

• Laravel Admin Panels
• Laravel Dashboards
• CRUD applications
• User management systems
• Product management
• Order management
• Reporting systems

💚 Vue

jtable-pro can also be integrated into Vue applications.

import JTable from 'jtable-pro';

const table = new JTable('#users-table', {
    data: users,
    pagination: true,
    searchable: true
});

⚛️ React

Because jtable-pro is JavaScript-based, it can also be integrated into React applications.

Example:

import { useEffect } from 'react';
import JTable from 'jtable-pro';

function UsersTable() {

    useEffect(() => {
        const table = new JTable('#users-table', {
            data: users,
            pagination: true,
            searchable: true
        });

        return () => {
            // Cleanup if required
        };
    }, []);

    return (
        <div id="users-table"></div>
    );
}

export default UsersTable;

📊 Example Use Cases

jtable-pro is suitable for many types of web applications.

Admin Panels

Users
Products
Orders
Customers
Invoices
Payments

Dashboards

Analytics
Reports
Statistics
Logs
Transactions

Business Applications

Inventory
Employees
Customers
Projects
Tasks
Orders

⚙️ Configuration

Example configuration:

const table = new JTable('#users-table', {
    data: users,

    searchable: true,

    sortable: true,

    pagination: true,

    pageSize: 20,

    columns: [
        {
            key: 'id',
            label: 'ID'
        },
        {
            key: 'name',
            label: 'Name'
        },
        {
            key: 'email',
            label: 'Email'
        }
    ]
});

🧩 Browser Support

jtable-pro is designed for modern browsers that support modern JavaScript.

Recommended browsers:

• Google Chrome
• Mozilla Firefox
• Microsoft Edge
• Safari

📚 Documentation

Full documentation and examples:

Coming soon

🤝 Contributing

Contributions are welcome!

If you find a bug or have an idea for a new feature:

1. Fork the repository
2. Create a new branch
3. Make your changes
4. Commit your changes
5. Open a Pull Request

Example:

git clone https://github.com/YOUR_USERNAME/jtable-pro.git

cd jtable-pro

npm install

npm run dev

🐛 Bug Reports

Found a bug?

Please open an issue on GitHub and include:

• Browser
• Operating system
• jtable-pro version
• Steps to reproduce
• Expected behavior
• Actual behavior

🗺️ Roadmap

Planned improvements may include:

• [ ] Server-side pagination
• [ ] Advanced filtering
• [ ] Column resizing
• [ ] Column visibility
• [ ] Row selection
• [ ] Export to CSV
• [ ] Export to Excel
• [ ] Custom cell rendering
• [ ] Virtual scrolling
• [ ] Better mobile support
• [ ] Vue integration
• [ ] React integration
• [ ] TypeScript support

🤝 Supported by GüncelKod

jtable-pro is proudly supported by GüncelKod.

GüncelKod supports developers and open-source projects by sharing practical content about software development, programming, web technologies, Laravel, JavaScript, and modern development tools.

🙏 Special thanks to GüncelKod for supporting the development and growth of jtable-pro.

⭐ Support the Project

If you find jtable-pro useful, consider giving the project a ⭐ on GitHub.

Your support helps the project grow and motivates further development.

📄 License

This project is licensed under the MIT License.

See the LICENSE file for more information.