Skip to main content

momah-table

A lightweight, dependency-free JavaScript component for rendering dynamic HTML tables with pagination, search, and filtering.

UI Preview​

StatePreview
Default Tablealt text
Filtered Viewalt text

Quick Start (3 Steps)​

1. Include Files​

<link rel="stylesheet" href="~/assets/css/momahTable.css"/>
<script src="/assets/js/momahTable.js"></script>

<!-- incase need pagination include style -->
<link rel="stylesheet" href="/assets/css/pagination.css" />

2. Create HTML Containers​

<div id="tableActions"></div>   <!-- Search/Filter container (optional) -->
<div id="tableContainer"></div> <!-- Table container -->
<div id="pagination"></div>     <!-- Pagination container (optional) -->

3. Render the Table​

const data = [
    { id: 1, name: 'John Doe', email: 'john@example.com' },
    { id: 2, name: 'Jane Smith', email: 'jane@example.com' }
];

const columns = [
    { header: 'ID', field: 'id' },
    { header: 'Name', field: 'name' },
    { header: 'Email', field: 'email' }
];

MomahTable.render('#tableContainer', columns, data);

Basic Usage​

Simple Table (No Options)​

MomahTable.render('#tableContainer', columns, data);

Table with Pagination​

MomahTable.render('#tableContainer', columns, data, {
    pagination: {
        containerSelector: '#pagination',
        currentPage: 1,
        totalPages: 5,
        onPageChange: (page) => loadData(page)
    }
});
MomahTable.render('#tableContainer', columns, data, {
    search: {
        containerSelector: '#tableActions',
        inputId: 'searchInput',
        placeholder: 'Search...'
    }
});

Table with Filter Button​

MomahTable.render('#tableContainer', columns, data, {
    filter: {
        containerSelector: '#tableActions',
        label: 'Filter',
        targetModalId: 'filterModal'
    }
});

Table with Column Picker​

MomahTable.render('#tableContainer', columns, data, {
    columnPicker: {
        containerSelector: '#tableActions'
    }
});

Column Configuration​

PropertyTypeDescription
headerStringColumn header text
fieldStringData property to display
renderFunctionCustom cell content (returns HTML)
widthStringColumn width (e.g., '100px', '20%')
classNameStringCSS class for header
tdClassNameStringCSS class for cells
hideBooleanSet true to hide column (won't show in picker)

Using render for Custom Content​

{
    header: 'Actions',
    render: (record) => `
        <button onclick="edit(${record.id})">Edit</button>
        <button onclick="delete(${record.id})">Delete</button>
    `
}

Advanced Options​

Full Example with All Features​

const options = {
    search: {
        containerSelector: '#tableActions',
        inputId: 'searchInput',
        placeholder: 'Search by name...'
    },
    filter: {
        containerSelector: '#tableActions',
        label: 'Filter',
        targetModalId: 'filterModal',
        isIcon: false  // Set true for icon-only button
    },
    columnPicker: {
        containerSelector: '#tableActions'
    },
    pagination: {
        containerSelector: '#pagination',
        currentPage: 1,
        totalPages: 10,
        onPageChange: (page) => loadData(page)
    }
};

MomahTable.render('#tableContainer', columns, data, options);

Search Options​

PropertyRequiredDefaultDescription
containerSelectorYes-Container element selector
inputIdNotxtFullNameInput element ID
placeholderNo-Input placeholder text

Filter Options​

PropertyRequiredDefaultDescription
containerSelectorYes-Container element selector
labelNoتصفية البحثButton text
targetModalIdNo-Bootstrap modal ID to open
onClickNo-Custom click handler
isIconNofalseShow icon-only button
iconNo-Custom SVG HTML

Column Picker Options​

PropertyRequiredDefaultDescription
containerSelectorYes-Container element selector

Pagination Options​

PropertyRequiredDefaultDescription
containerSelectorYes-Container element selector
currentPageYes-Current page number
totalPagesYes-Total number of pages
onPageChangeYes-Function called when page changes

Handling Search/Filter Events​

When the user searches or filters, MomahTable will call one of these functions (in order):

  1. window.performSearch()
  2. window.LoadData()
  3. filterOptions.onFilter

Define one of these in your page:

function performSearch() {
    const value = document.getElementById('searchInput').value;
    console.log('Search value:', value);
    // Fetch new data and re-render table
}

function LoadData() {
    // Your data loading logic
}

Common Patterns​

Pattern 1: Table Only​

MomahTable.render('#tableContainer', columns, data);
MomahTable.render('#tableContainer', columns, data, {
    search: { containerSelector: '#tableActions' }
});

Pattern 3: Table with Pagination​

MomahTable.render('#tableContainer', columns, data, {
    pagination: {
        containerSelector: '#pagination',
        currentPage: 1,
        totalPages: 5,
        onPageChange: (page) => loadData(page)
    }
});

Pattern 4: Table with Search + Filter + Pagination​

MomahTable.render('#tableContainer', columns, data, {
    search: { containerSelector: '#tableActions' },
    filter: {
        containerSelector: '#tableActions',
        label: 'Filter',
        targetModalId: 'filterModal'
    },
    columnPicker: { containerSelector: '#tableActions' },
    pagination: {
        containerSelector: '#pagination',
        currentPage: 1,
        totalPages: 5,
        onPageChange: (page) => loadData(page)
    }
});

Hiding Columns​

Columns can be hidden in two ways:

Method 1: Using hide property​

const columns = [
    { header: 'ID', field: 'id' },
    { header: 'Secret', field: 'secret', hide: true }, // Hidden
    { header: 'Name', field: 'name' }
];

Method 2: Using show property​

const columns = [
    { header: 'ID', field: 'id' },
    { header: 'Secret', field: 'secret', show: false }, // Hidden
    { header: 'Name', field: 'name' }
];

Notes​

  • The render function returns HTML content for cells
  • Hidden columns (with hide: true) won't appear in the Column Picker
  • Search input automatically triggers Enter key to search
  • Clear button (X) in search input clears and triggers search
  • Pagination shows ellipsis (...) for large page counts