Table Manager Documentation

Introduction

A comprehensive guide to using the Table Manager component for creating dynamic, interactive tables.

Basic Usage

To create a basic table, start with the following HTML structure:


<table data-table>
    <thead>
        <tr>
            <th data-field="id" data-sort="id">ID</th>
            <th data-field="name" data-sort="name">Name</th>
            <th data-field="age" data-sort="age">Age</th>
        </tr>
    </thead>
    <tbody>
        <!-- Data will be rendered here -->
    </tbody>
</table>

Initialize the table and set data:


// Initialize table
const tableId = TableManager.init(document.querySelector('#myTable'), {
    responsive: true,
    pageSize: 10
});

// Set data
TableManager.setData(tableId, [
    {id: 1, name: 'John', age: 30},
    {id: 2, name: 'Jane', age: 25}
]);

Live Demo

Name	Position	Department	Email	Status

Note: If the API returns filter choices and you require stable ordering, return an array of objects like [{value:'',text:'All'},{value:0,text:'Dev'},...] instead of a plain object to avoid key-order ambiguity in some environments.

Table Example

Name	Position	Department	Email	Status

Example Code


  <table data-table="example-table"
         data-source="tableData"
         data-sortable="true"
         data-filterable="true"
         data-page-size="5">
    <thead>
        <tr>
        <th data-field="name" data-sort="true">Name</th>
        <th data-field="position" data-sort="true">Position</th>
        <th data-field="department">Department</th>
        <th data-field="email">Email</th>
        <th data-field="status" data-sort="true">Status</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>


  // Set example data in state
  Now.state.set('tableData', [
    {
      name: 'John Smith',
      position: 'Developer',
      department: 'Engineering',
      email: 'john.smith@example.com',
      status: 'Active'
    },
    {
      name: 'Jane Doe',
      position: 'Analyst',
      department: 'Business Analysis',
      email: 'jane.doe@example.com',
      status: 'On Leave'
    },
    // ... other rows
  ]);

	Code	Product Name	Pricing			Stock		Status
	Code	Product Name	Cost	Price	Margin	Quantity	Reserved	Status
	Total

Static Data Example

An example showing a table with static HTML data including pagination, search and filtering.

ID	Full Name	Position	Department	Email	Status	Salary	Join Date
1	Somchai Jaidee	Developer	Engineering	somchai@example.com	Working	45000	2023-01-15
2	Somying Rakngan	Analyst	Business Analysis	somying@example.com	Working	42000	2023-02-01
3	Wichai Pattan	Project Manager	Project Management	wichai@example.com	Working	55000	2022-11-20
4	Malee Suayngam	Tester	QA	malee@example.com	On Leave	38000	2023-03-10
5	Prasert Deemak	Designer	UI/UX	prasert@example.com	Working	40000	2023-04-05
6	Nitya Rakngan	Sales	Sales Dept.	nitya@example.com	Working	35000	2023-05-12
7	Somsak Kengmak	Marketer	Marketing	somsak@example.com	On Leave	37000	2023-06-18
8	Kanya Suayngam	Accountant	Accounting	kanya@example.com	Working	33000	2023-07-22
9	Surachai Jaidee	HR Officer	Human Resources	surachai@example.com	Working	32000	2023-08-30
10	Arunee Suayngam	Programmer	System Development	arunee@example.com	Probation	28000	2023-09-15

Sample HTML Code


<table class="table border fullwidth"
       data-table="static-employees"
       data-page-size="5"
       data-search-columns="name,email,position,department"
       data-allow-row-modification="false"
       data-show-checkbox="true">
  <thead>
    <tr>
      <th data-field="id" data-sort="id">ID</th>
      <th data-field="name" data-sort="name">Full Name</th>
      <th data-field="position" data-sort="position" data-filter="true" data-type="select" data-show-all="true" data-all-value="" data-label="Position">Position</th>
      <th data-field="department" data-sort="department" data-filter="true" data-type="select" data-show-all="true" data-all-value="" data-label="Department">Department</th>
      <th data-field="email" data-sort="email">Email</th>
      <th data-field="status" data-sort="status" data-filter="true" data-type="select" data-show-all="true" data-all-value="" data-label="Status">Status</th>
      <th data-field="salary" data-sort="salary" data-format="currency">Salary</th>
      <th data-field="join_date" data-sort="join_date">Join Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Somchai Jaidee</td>
      <td>Developer</td>
      <td>Engineering</td>
      <td>somchai@example.com</td>
      <td>Working</td>
      <td>45000</td>
      <td>2023-01-15</td>
    </tr>
    <!-- add more rows -->
  </tbody>
</table>

Qualifications of Static Data Example

Client-side Pagination: Pagination performed on the client
Client-side Search: Searching performed on the client
Client-side Filtering: Filtering performed on the client
Client-side Sorting: Sorting performed on the client
No API Required: No need for API EndPoint
Fast Initial Load: Fast loading because the data is in HTML

The advantages of using Static Data:

Suitable for data that does not change frequently
No need for server-side processing
Works even without an internet connection
Suitable for a small amount of data (less than 1000 records)

Key Features

Sorting

Add data-sort="field" to make columns sortable. Click column headers to sort.

Filtering

Enable filtering with the filterable: true option. Filter inputs will appear below headers.

Pagination

Set pageSize to enable pagination. Configure available page sizes with pageSizes.

Selection

Enable row selection with selectable: true. Use multiSelect: true for multiple selection.

Responsive

Tables automatically become responsive on mobile devices when responsive: true is set.

Export

Export data to CSV or JSON formats using the export methods.

API Example - Server-side Pagination & Filtering

An example of using a table with a PHP REST API supporting server-side pagination, search and filtering.

Employee Table from API

This table loads employee data from a PHP REST API with server-side pagination, search and filtering.

ID	Full Name	Position	Department	Email	Status	Salary	Join Date

API Example Features

Server-side Pagination: Pagination performed on the server to reduce client load
Server-side Search: Server-side search supports large datasets
Server-side Filtering: Filtering performed on the server
Server-side Sorting: Sorting performed on the server
Real-time Updates: Real-time update information from API
Performance: Better performance when there is a lot of information

Watch full samples:

For more complete and more detailed examples, please see thatAPI Example (Full Page)

API Reference

Configuration Options

Option	Type	Default	Description
responsive	boolean	true	Enable responsive mode for mobile devices
pageSize	number	10	Number of rows per page
selectable	boolean	false	Enable row selection
multiSelect	boolean	false	Allow multiple row selection
sortable	boolean	true	Enable column sorting

Methods

Method	Parameters	Description
init(element, options)	element: HTMLElement, options: Object	Initialize table and return table ID
setData(tableId, data)	tableId: string, data: Array	Set or update table data
exportData(tableId, format)	tableId: string, format: 'csv'\|'json'	Export table data to specified format
destroy(tableId)	tableId: string	Clean up table resources

Events

Event	Data	Description
table:render	{tableId, data}	Fired after table render completes
table:render	{tableId, data, totalRecords, filteredRecords}	Fired after a table render completes (client or server)
table:fieldChange	{tableId, field, value, rowData}	Fired when a field is changed (before/after server commit depending on config)
table:selectionChange	{tableId, selectedRows}	Fired when row selection changes
table:rowAction	{tableId, action, ids}	Fired when an action is performed on selected rows (via action button)

Examples

Custom Formatting

                  <th data-field="status" data-formatter="statusFormatter">Status</th>

function statusFormatter(value) {
    return `<span class="badge ${value}">${value}</span>`;
}
                

Custom Sorting

                  <th data-field="date" data-sorter="dateSorter">Date</th>

function dateSorter(a, b) {
    return new Date(a) - new Date(b);
}
                

Row Selection

                  
TableManager.init(table, {
    selectable: true,
    multiSelect: true
});

EventManager.on('table:selectionChange', ({tableId, selectedRows}) => {
  exampleLog('Selected rows for', tableId, selectedRows);
});

                