extends ../../layouts/LayoutComponent include ../../mixins/home/dashboard-alt/CardRecentPurchaseTable include ../../mixins/e-commerce/Customers block append variables - var badges = [ {content: 'Success', type:'success', icon: 'fas fa-check'}, {content: 'Blocked', type:'secondary', icon: 'fas fa-ban'}, {content: 'Pending', type:'warning', icon: 'fas fa-stream'}, {content: 'Processing', type:'primary', icon: 'fas fa-redo'} ]; - var purchases = [ { customer: 'Sylvia Plath', email: 'john@gmail.com', product: 'Slick - Drag & Drop Bootstrap Generator', status: badges[0], country: 'USA' }, { customer: 'Homer', email: 'sylvia@mail.ru', product: 'Bose SoundSport Wireless Headphones', status: badges[2], country: 'canada' }, { customer: 'Edgar Allan Poe', email: 'edgar@yahoo.com', product: 'All-New Fire HD 8 Kids Edition Tablet', status: badges[1], country: 'UK' }, { customer: 'William Butler Yeats', email: 'william@gmail.com', product: 'Apple iPhone XR (64GB)', status: badges[0], country: 'USA' }, { customer: 'Rabindranath Tagore', email: 'tagore@twitter.com', product: 'ASUS Chromebook C202SA-YS02 11.6"', status: badges[2], country: 'canada' }, { customer: 'Emily Dickinson', email: 'emily@gmail.com', product: 'Mirari OK to Wake! Alarm Clock & Night-Light', status: badges[1], country: 'UK' }, { customer: 'Giovanni Boccaccio', email: 'giovanni@outlook.com', product: 'Summer Infant Contoured Changing Pad', status: badges[2], country: 'USA' }, { customer: 'Oscar Wilde', email: 'oscar@hotmail.com', product: 'Munchkin 6 Piece Fork and Spoon Set', status: badges[0], country: 'USA' }, { customer: 'John Doe', email: 'doe@gmail.com', product: 'Falcon - Responsive Dashboard Template', status: badges[0], country: 'canada' }, { customer: 'Emma Watson', email: 'emma@gmail.com', product: 'Apple iPhone XR (64GB)', status: badges[2], country: 'UK' } ] - var rows = [ { name: 'Anna', email: 'anna@example.com', age: 18, }, { name: 'Homer', email: 'homer@example.com', age: 35, }, { name: 'Oscar', email: 'oscar@example.com', age: 52, }, { name: 'Emily', email: 'emily@example.com', age: 30, }, { name: 'Jara', email: 'jara@example.com', age: 25, }, { name: 'Clark', email: 'clark@example.com', age: 39, }, { name: 'Jennifer', email: 'jennifer@example.com', age: 52, }, { name: 'Tony', email: 'tony@example.com', age: 30, }, { name: 'Tom', email: 'tom@example.com', age: 25, }, { name: 'Michael', email: 'michael@example.com', age: 39, }, { name: 'Antony', email: 'antony@example.com', age: 39, }, { name: 'Raymond', email: 'raymond@example.com', age: 52, }, { name: 'Marie', email: 'marie@example.com', age: 30, }, { name: 'Cohen', email: 'cohen@example.com', age: 25, }, { name: 'Rowen', email: 'rowen@example.com', age: 39, }, ] mixin RecentPurchaseTableItem(config, index) tr.btn-reveal-trigger th.align-middle.white-space-nowrap.name a(href=`${CWD}${paths['customer-details']}`)=config.customer td.align-middle.white-space-nowrap.country=config.country td.align-middle.white-space-nowrap.email=config.email td.align-middle.text-end.fs-9.white-space-nowrap.payment +Badge(config.status) block append content +PageHeader({title:'Advance Tables'}) p.mt-2 #{name} uses List.Js for advance table. List.Js is a Tiny, invisible and simple, yet powerful and incredibly fast vanilla JavaScript library that adds search, sort, filters and flexibility to plain HTML lists, tables, or anything. a(href='https://listjs.com/' target='_blank').btn.btn-link.ps-0.btn-sm Documentation for List.js span.fas.fa-chevron-right.ms-1.fs-11 .alert.alert-success.p-x1(role='alert') p From Falcon code 3.13.0 | we are intruducing advance tables using jQuery Datatables. a(href=`${CWD}${paths['jquery-components']}`) Datatables components span.fas.fa-chevron-right.ms-1.fs-11 +ComponentCard({ title: 'Table Example', anchor: true, bodyClass:'pt-0', }).mb-3 #tableExample(data-list!={ valueNames: ['name', 'email', 'age'], page: 5, pagination: true, }) .table-responsive.scrollbar table.table.table-bordered.table-striped.fs-10.mb-0 thead.bg-200 tr th.text-900.sort(data-sort="name") Name th.text-900.sort(data-sort="email") Email th.text-900.sort(data-sort="age") Age tbody.list each row in rows tr td.name=row.name td.email=row.email td.age=row.age .row.align-items-center.mt-3 .pagination.d-none .col p.mb-0.fs-10 ='\n' span.d-none.d-sm-inline-block(data-list-info) ='\n' span.d-none.d-sm-inline-block — ='\n' a.fw-semi-bold(href='#!' data-list-view="*") | View all span.fas.fa-angle-right.ms-1(data-fa-transform='down-1') a.fw-semi-bold.d-none(href='#!' data-list-view="less") | View Less span.fas.fa-angle-right.ms-1(data-fa-transform='down-1') .col-auto.d-flex button.btn.btn-sm.btn-primary(type='button' data-list-pagination='prev') span Previous button.btn.btn-sm.btn-primary.px-4.ms-2(type='button' data-list-pagination='next') span Next +ComponentCard({ title: 'Pagination with numbering', anchor: true, bodyClass:'pt-0', description:'Add pagination class for enable number pagination. The following structure will enable number pagination with next and previous button.', descriptionClass:'mt-2 mb-0', }).mb-3 #tableExample2(data-list!={ valueNames: ['name', 'email', 'age'], page: 5, pagination: true }) .table-responsive.scrollbar table.table.table-bordered.table-striped.fs-10.mb-0 thead.bg-200 tr th.text-900.sort(data-sort="name") Name th.text-900.sort(data-sort="email") Email th.text-900.sort(data-sort="age") Age tbody.list each row in rows tr td.name=row.name td.email=row.email td.age=row.age .d-flex.justify-content-center.mt-3 button(type='button' title="Previous" data-list-pagination='prev').btn.btn-sm.btn-falcon-default.me-1 span.fas.fa-chevron-left ul.pagination.mb-0 button(type='button' title="Next" data-list-pagination='next').btn.btn-sm.btn-falcon-default.ms-1 span.fas.fa-chevron-right +ComponentCard({ title: 'Search Example', anchor: true, bodyClass:'pt-0', description:'Add search class for enable data searching. The following structure will enable search feature.', descriptionClass:'mt-2 mb-0', }).mb-3 #tableExample3(data-list!={ valueNames: ['name', 'email', 'age'], page: 5, pagination: true }) .row.justify-content-end.g-0 .col-auto.col-sm-5.mb-3 form .input-group input.form-control.form-control-sm.shadow-none.search(type='search' placeholder='Search...' aria-label='search') .input-group-text.bg-transparent span.fa.fa-search.fs-10.text-600 .table-responsive.scrollbar table.table.table-bordered.table-striped.fs-10.mb-0 thead.bg-200 tr th.text-900.sort(data-sort="name") Name th.text-900.sort(data-sort="email") Email th.text-900.sort(data-sort="age") Age tbody.list each row in rows tr td.name=row.name td.email=row.email td.age=row.age .d-flex.justify-content-center.mt-3 button(type='button' title="Previous" data-list-pagination='prev').btn.btn-sm.btn-falcon-default.me-1 span.fas.fa-chevron-left ul.pagination.mb-0 button(type='button' title="Next" data-list-pagination='next').btn.btn-sm.btn-falcon-default.ms-1 span.fas.fa-chevron-right +ComponentCard({ title: 'Filter Example', anchor: true, bodyClass:'pt-0 px-0', }).mb-3 #tableExample4(data-list!={ valueNames: ['name', 'country', 'email', 'payment'], }) .row.justify-content-end.justify-content-end.gx-3.gy-0.px-3 .col-sm-auto select.form-select.form-select-sm.mb-3(data-list-filter='country') option(selected='' value='') Select country option(value='usa') USA option(value='canada') Canada option(value='uk') UK .col-sm-auto select.form-select.form-select-sm.mb-3(data-list-filter='payment') option(selected='' value='') Select payment status option(value='Pending') Pending option(value='Success') Success option(value='Blocked') Blocked .table-responsive.scrollbar table.table.table-sm.table-striped.fs-10.mb-0.overflow-hidden thead.bg-200 tr th.text-900.sort.pe-1.align-middle.white-space-nowrap(data-sort="name") Customer th.text-900.sort.pe-1.align-middle.white-space-nowrap(data-sort="country") Country th.text-900.sort.pe-1.align-middle.white-space-nowrap(data-sort="email") Email th.text-900.sort.align-middle.white-space-nowrap.text-end.pe-4(data-sort="payment") Payment tbody.list#table-purchase-body each purchase, index in purchases +RecentPurchaseTableItem(purchase, index) .p-3 p Use code data-list-filter | attribute with the select fields and assign the value according to the column name. For example +ComponentCardLib select.form-select.form-select-sm.mb-3(data-list-filter="country") .card.mb-3 .card-header +DocCardHeader('Docs') .card-body.bg-body-tertiary p Integrate List in #{name} by following these easy steps: ul li Set unique ID and add code data-list | attribute to the wrapper element and list your column in code valueNames | property. +ComponentCardLib #tableExample(data-list!={ valueNames: ["name", "email", "age"]}) // Your list content will go here li To enable sorting in your column, add code data-sort | attribute and assign column name to the attribute. +ComponentCardLib th.sort(data-sort="name") Customer li Add code list | class to the content wrapper element. +ComponentCardLib tbody.list // Your value will go here li Then wrap your value with column name as a class. For example, if your column name is code name | then the value will be look like this: +ComponentCardLib td.name John Doe li To add pagination code .pagination | class inside your wrapper element li To enable button pagination add code data-list-pagination='prev' | and code data-list-pagination='next' | to the "Prev" and "Next" buttons respectively. li To enable search feature add code search | class in code input | tag. li To see the list info, add code data-list-info | attribute to a DOM element inside your wrapper element. +ComponentCard({ title: 'Ajax Table', anchor: true, bodyClass:'pt-0 px-0', description:'This is an example of Advanced Table using external Data.', descriptionClass:'mt-2 mb-0', }).mb-3 #advanceAjaxTable.table-list&attributes(attributes) .table-responsive.scrollbar.mb-3 table.table.table-sm.table-striped.fs-10.mb-0.overflow-hidden thead.bg-200 tr th.text-900.sort.pe-1.align-middle.white-space-nowrap(data-sort="orderId") Order th.text-900.sort.pe-1.align-middle.white-space-nowrap(data-sort="date").pe-7 Date th.text-900.sort.pe-1.align-middle.white-space-nowrap(data-sort="address" style="min-width: 12.5rem;") Ship To th.text-900.sort.pe-1.align-middle.white-space-nowrap(data-sort="status").text-center Status th.text-900.sort.pe-1.align-middle.white-space-nowrap(data-sort="amount").text-end Amount th.no-sort tbody.list .d-flex.align-items-center.justify-content-center button(type='button' title="Previous" data-list-pagination='prev').btn.btn-sm.btn-falcon-default.me-1 span.fas.fa-chevron-left ul.pagination.mb-0 button(type='button' title="Next" data-list-pagination='next').btn.btn-sm.btn-falcon-default.ms-1 span.fas.fa-chevron-right .card-body h5.mb-3 How to use p If you are using Gulp based workflow, follow these easy steps: ul li Give your table a unique ID. li Use the code advanceAjaxTableInit() | function from code src/js/theme/advance-ajax-table.js | in a new JS file and update the ID. li Import the file on code src/js/theme.js p If you are not using Gulp based workflow: ul li Give your table a unique ID. li Find the code advanceAjaxTableInit() | function from code theme.js, | copy the code, and update the ID in a new function. .card .card-header h5.mb-0 Javascript .card-body.bg-body-tertiary +ComponentCardLib script(src=`vendors/list.js/list.min.js`)