DDTable Library build with TypeScript 🚀

Now with Datagrid, Treegrid & Advanced Filters

The Ultimate Data Grid for Developers, Agencies, and Enterprises

High-performance, lightweight, and stunningly beautiful. Built to handle millions of records with ease—from personal side projects to global corporate applications.

🚀 Zero Dependencies & Highly Compatible: Works seamlessly with Native HTML/JS, React, Next.js (App & Pages Router), Vite, Vue, and Angular. Built with TypeScript for maximum reliability.

🔗 Official Links

• Official Website: https://ddtable.my.id
• Documentation: https://ddtable.my.id/docs
• Live Demo: https://ddtable.my.id/demo
• Pricing & Licensing: https://ddtable.my.id/#pricing

✨ Features

• 🏎️ High Performance: Virtual Scrolling for 100,000+ records with 60fps.
• ♾️ Infinite Scroll: Seamlessly load millions of rows as you scroll.
• 🔍 Advanced Filtering: Built-in Excel-like filtering with multiple match modes.
• ↕️ Smart Sorting: Multi-type sorting (String, Number, Date).
• 📄 Pagination: Client-side and Server-side pagination support.
• 📊 Analytical Tools: Row Grouping, Tree View, and Aggregations.
• 📥 Export Engine: Export data to CSV, Excel (XLSX), Word (DOCX), and PDF.
• 🎨 Rich Aesthetics: Modern UI with Glassmorphism, Dark Mode, and Custom Themes.
• 📱 Responsive: Fully responsive and touch-friendly.
• 🔐 Commercial Grade: Secure obfuscation and licensing engine.

📦 Installation

npm install @ddcode_/ddtable

Or via CDN:

<link rel="stylesheet" href="https://unpkg.com/@ddcode_/ddtable/dist/ddtable.css">
<script src="https://unpkg.com/@ddcode_/ddtable/dist/ddtable.js"></script>

🚀 Quick Start

import DDTable from '@ddcode_/ddtable';
import '@ddcode_/ddtable/dist/ddtable.css';

const container = document.getElementById('my-grid');
const config = {
    columns: [
        { field: 'id', title: 'ID', width: '80px', sortable: true },
        { field: 'name', title: 'Product Name', sortable: true, filterable: true },
        { field: 'price', title: 'Price', align: 'right', formatter: (v) => `$${v}` }
    ],
    data: [
        { id: 1, name: 'Laptop', price: 1200 },
        { id: 2, name: 'Mouse', price: 25 },
    ],
    pagination: true,
    pageSize: 10
};

const grid = new DDTable(container, config);

🛠️ Configuration API

DDTableConfig

| Property | Type | Default | Description | | :--- | :--- | :--- | :--- | | columns | DDTableColumn[] | [] | Required. Column definitions. | | data | any[] | [] | Required. Data source array. | | pagination | boolean | false | Enable/disable pagination. | | pageSize | number | 10 | Initial records per page. | | serverSide | boolean | false | Enable server-side processing. | | height | string | 'auto' | Grid container height (e.g., '500px'). | | primaryColor | string | '#3b82f6' | Primary theme color. | | licenseKey | string | undefined | Commercial license key. | | shape | 'grid' \| 'tree' | 'grid' | Display mode. | | selectable | boolean | false | Enable row selection. | | allowGrouping | boolean | false | Enable drag-and-drop row grouping. |

DDTableColumn

| Property | Type | Description | | :--- | :--- | :--- | | field | string | Data key identifier. | | title | string | Column display header. | | width | string | Fixed width (e.g., '150px'). | | sortable | boolean | Enable sorting for this column. | | filterable | boolean | Enable filtering for this column. | | frozen | boolean | Freeze column to the left. | | formatter | function | Custom cell renderer: (val, row) => string. | | align | 'left' \| 'center' \| 'right' | Horizontal cell alignment. |

🕹️ Methods

Access grid features programmatically:

const grid = new DDTable(el, config);

grid.exportCSV();    // Download CSV
grid.exportExcel();  // Download Excel
grid.reload();       // Refresh grid state
grid.setTheme('#ff0000'); // Change primary color dynamically

📝 License

Commercial License. This software requires a valid license key for production use. For more information, please visit ddtable.my.id/#pricing.

© 2026 DDTable Team. All rights reserved.