TablixJS jQuery Wrapper Demo
Basic Table with jQuery Wrapper
Example: Basic table initialization using the jQuery wrapper with sample employee data.
$('#basicTable').tablixJS({
data: sampleData,
columns: [
{ name: 'id', title: 'ID' },
{ name: 'name', title: 'Employee Name' },
{ name: 'department', title: 'Department' },
{ name: 'email', title: 'Email' },
{ name: 'salary', title: 'Salary', renderer: (value) => `$${value.toLocaleString()}` }
]
});
Advanced Table with Pagination, Sorting, Filtering & Selection
Features: This table includes pagination, sorting, filtering, search, and multi-row selection.
No rows selected
$('#advancedTable').tablixJS({
data: largerSampleData,
columns: tableColumns,
pagination: {
enabled: true,
pageSize: 5,
showPageNumbers: true,
showPageSizes: true,
pageSizeOptions: [5, 10, 15, 20]
},
sorting: { enabled: true },
filtering: { enabled: true },
search: { enabled: true, placeholder: 'Search employees...' },
selection: {
enabled: true,
mode: 'multi',
dataIdKey: 'id'
}
});
Pagination Controls
Example: Programmatic pagination control using jQuery wrapper methods.
jQuery Event Handling
Events: The wrapper forwards TablixJS events as jQuery events with 'tablixjs:' prefix.
Event log will appear here...
Multiple Tables
Multiple Instances: The wrapper supports multiple table instances on the same page.