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

Table Example

ชื่อ	ตำแหน่ง	แผนก	อีเมล	สถานะ

ตัวอย่างโค้ด


  <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">ชื่อ</th>
        <th data-field="position" data-sort="true">ตำแหน่ง</th>
        <th data-field="department">แผนก</th>
        <th data-field="email">อีเมล</th>
        <th data-field="status" data-sort="true">สถานะ</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>


  // กำหนดข้อมูลใน state
  Now.state.set('tableData', [
    {
      name: 'สมชาย ใจดี',
      position: 'โปรแกรมเมอร์',
      department: 'พัฒนาระบบ',
      email: 'somchai@example.com',
      status: 'ทำงาน'
    },
    {
      name: 'สมหญิง รักงาน',
      position: 'นักวิเคราะห์',
      department: 'วิเคราะห์ระบบ',
      email: 'somying@example.com',
      status: 'ลาพัก'
    },
    // ... ข้อมูลอื่นๆ
  ]);

	Code	Product Name	Pricing			Stock		Actions
	Code	Product Name	Cost	Price	Margin	Quantity	Reserved	Actions
	Total:

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 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:sort	{tableId, field, direction}	Fired when sorting changes
table:filter	{tableId, filters}	Fired when filters change
table:selection	{tableId, selected}	Fired when row selection changes

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:selection', ({tableId, selected}) => {
    console.log('Selected:', selected);
});
                