NexaDom

Pendahuluan

NexaDom adalah library JavaScript yang kuat untuk menangani rendering data dinamis, pemfilteran, dan paginasi dalam aplikasi web. Library ini menyediakan cara yang efisien untuk mengelola dan menampilkan dataset besar dengan fitur seperti virtual scrolling, lazy loading, dan data chunking.

Instalasi

import NexaDom from './NexaDom.js';

Penggunaan Dasar

const options = {
    elementById: 'myList',
    search: 'searchInput',
    pagination: 'paginationContainer',
    order: 10
};

const nexaDom = new NexaDom(options);

Opsi Konfigurasi

Metode

nexaDom.setData([
    { id: 1, name: "Item 1" },
    { id: 2, name: "Item 2" }
]);

const item = nexaDom.getData(1);

nexaDom.filterKey('category', 'books');

nexaDom.sort('ASC', 'name');

nexaDom.addData(newItems, true);

nexaDom.destroy();

Filter

NexaDom supports template filters using the pipe syntax:

{set.property|filter1|filter2}

Built-in Filters

• date - Formats dates
• currency - Formats numbers as currency
• uppercase - Converts text to uppercase
• lowercase - Converts text to lowercase

Paginasi

NexaDom provides built-in pagination with the following features:

• Automatic page calculation
• First/Previous/Next/Last navigation
• Page number display
• Virtual scrolling for large datasets

Penanganan Data

Virtual Scrolling

For large datasets, NexaDom automatically implements virtual scrolling to improve performance.

Lazy Loading

Images and heavy content are loaded only when they enter the viewport.

Data Chunking

Large datasets are automatically split into manageable chunks for better performance.

Event

Event Handling Example

document.addEventListener('dataReloaded', (event) => {
    console.log('Data reloaded:', event.detail);
});

Contoh

Basic List with Pagination

<div id="myList">
    <script type="text/template" data-template="list">
        <div class="item">
            <h3>{set.title}</h3>
            <p>{set.description}</p>
        </div>
    </script>
</div>

<div id="pagination"></div>

<script>
const nexaDom = new NexaDom({
    elementById: 'myList',
    pagination: 'pagination',
    order: 10
});

nexaDom.setData([
    { title: 'Item 1', description: 'Description 1' },
    { title: 'Item 2', description: 'Description 2' }
]);
</script>

Searchable List with Filters

<input type="text" id="search" placeholder="Search...">
<select id="categoryFilter">
    <option value="all">All Categories</option>
    <option value="books">Books</option>
    <option value="electronics">Electronics</option>
</select>

<div id="productList">
    <script type="text/template" data-template="list">
        <div class="product">
            <h3>{set.name}</h3>
            <p>Category: {set.category}</p>
        </div>
    </script>
</div>

<script>
const nexaDom = new NexaDom({
    elementById: 'productList',
    search: 'search',
    filter: 'categoryFilter',
    filterBy: 'category',
    searchableFields: ['name', 'category']
});
</script>