Back
Scrolling
A wide table with horizontal scrolling. The table has many columns, so it scrolls horizontally within the responsive container.
End fixed
The last column (Total) is pinned to the end edge while scrolling horizontally (fixed: 'end').
Start fixed
The first column (Employee) is pinned to the start edge while scrolling horizontally (fixed: 'start').
Both fixed
The first column (Employee) and the last column (Total) are pinned to both edges while scrolling horizontally (fixed: 'start' and fixed: 'end').
Both fixed with AvalynxTable Integration
Same as above, but with AvalynxTable integration (avalynx-table avalynx-table-md class), which stacks the table on mobile breakpoints.
new AvalynxDataTable("avalynx-datatable-scrolling", {
apiUrl: "php/result-scroll.php",
apiMethod: "GET",
apiParams: {
"fixed": "none"
},
listPerPage: [5, 10, 15, 20],
perPage: 5,
sorting: {
"name": "asc"
}
});
new AvalynxDataTable("avalynx-datatable-end-fixed", {
apiUrl: "php/result-scroll.php",
apiMethod: "GET",
apiParams: {
"fixed": "end"
},
listPerPage: [5, 10, 15, 20],
perPage: 5,
sorting: {
"name": "asc"
}
});
new AvalynxDataTable("avalynx-datatable-start-fixed", {
apiUrl: "php/result-scroll.php",
apiMethod: "GET",
apiParams: {
"fixed": "start"
},
listPerPage: [5, 10, 15, 20],
perPage: 5,
sorting: {
"name": "asc"
}
});
new AvalynxDataTable("avalynx-datatable-both-fixed", {
apiUrl: "php/result-scroll.php",
apiMethod: "GET",
apiParams: {
"fixed": "both"
},
listPerPage: [5, 10, 15, 20],
perPage: 5,
sorting: {
"name": "asc"
}
});
new AvalynxDataTable("avalynx-datatable-both-fixed-avalynx-table", {
apiUrl: "php/result-scroll.php",
apiMethod: "GET",
apiParams: {
"fixed": "both"
},
listPerPage: [5, 10, 15, 20],
perPage: 5,
sorting: {
"name": "asc"
},
className: "avalynx-table avalynx-table-md table table-striped table-bordered table-responsive align-middle"
});
AvalynxDataTable on GitHub Avalynx on GitHub