Custom Table with Search
Add the
Then, add
data-table
attribute to the parent container of the table and the search input container.
Then, add
data-table-search
to the search input element to enable search functionality.
| Product | SKU | Category | Stock | Price | Orders | Rating | Status | Published | Actions |
|---|---|---|---|---|---|---|---|---|---|
Wireless Earbudsby: My Furniture |
WB-10245 | Electronics |
56 |
$59.99 | 124 | (87) | Published | 18 Apr, 2025 12:24 PM | |
Smart LED Desk Lampby: BrightLite |
SL-89012 | Home & Office |
32 |
$39.49 | 78 | (54) | Pending | 22 Apr, 2025 09:45 AM | |
Men's Running Shoesby: ActiveWear Co. |
RS-20450 | Fashion |
120 |
$89.00 | 231 | (142) | Published | 24 Apr, 2025 03:10 PM | |
Fitness Tracker Watchby: FitPulse |
FT-67123 | Fitness |
78 |
$49.95 | 198 | (89) | Published | 23 Apr, 2025 10:12 AM | |
Gaming Mouse RGBby: HyperClick |
GM-72109 | Gaming |
120 |
$29.99 | 243 | (102) | Published | 19 Apr, 2025 05:56 PM |
Custom table with checkbox select
Add the attribute
data-table
to the parent container of the table, and use
data-table-select-all
on the checkbox input in the table header to enable select all functionality.
| Product | SKU | Category | Stock | Price | Orders | Rating | Status | Published | Actions | |
|---|---|---|---|---|---|---|---|---|---|---|
Wireless Earbudsby: My Furniture |
WB-10245 | Electronics |
56 |
$59.99 | 124 | (87) | Published | 18 Apr, 2025 12:24 PM | ||
Smart LED Desk Lampby: BrightLite |
SL-89012 | Home & Office |
32 |
$39.49 | 78 | (54) | Pending | 22 Apr, 2025 09:45 AM | ||
Men's Running Shoesby: ActiveWear Co. |
RS-20450 | Fashion |
120 |
$89.00 | 231 | (142) | Published | 24 Apr, 2025 03:10 PM | ||
Fitness Tracker Watchby: FitPulse |
FT-67123 | Fitness |
78 |
$49.95 | 198 | (89) | Published | 23 Apr, 2025 10:12 AM | ||
Gaming Mouse RGBby: HyperClick |
GM-72109 | Gaming |
120 |
$29.99 | 243 | (102) | Published | 19 Apr, 2025 05:56 PM |
Custom table with delete buttons
Add the attribute
For single row deletion, add
For multiple row deletion, add
data-table
to the parent container of the table.
For single row deletion, add
data-table-delete-row
to the delete button inside the row.
For multiple row deletion, add
data-table-select-all
to the header checkbox and
data-table-delete-selected
to the bulk delete button.
| Product | SKU | Category | Stock | Price | Orders | Rating | Status | Published | Actions | |
|---|---|---|---|---|---|---|---|---|---|---|
Wireless Earbudsby: My Furniture |
WB-10245 | Electronics |
56 |
$59.99 | 124 | (87) | Published | 18 Apr, 2025 12:24 PM | ||
Smart LED Desk Lampby: BrightLite |
SL-89012 | Home & Office |
32 |
$39.49 | 78 | (54) | Pending | 22 Apr, 2025 09:45 AM | ||
Men's Running Shoesby: ActiveWear Co. |
RS-20450 | Fashion |
120 |
$89.00 | 231 | (142) | Published | 24 Apr, 2025 03:10 PM | ||
Fitness Tracker Watchby: FitPulse |
FT-67123 | Fitness |
78 |
$49.95 | 198 | (89) | Published | 23 Apr, 2025 10:12 AM | ||
Gaming Mouse RGBby: HyperClick |
GM-72109 | Gaming |
120 |
$29.99 | 243 | (102) | Published | 19 Apr, 2025 05:56 PM |
Custom table with pagination
Add the
To set the number of rows per page, add
To enable pagination, add the
To set rows per page dynamically, add the
data-table
attribute to the container of the table.
To set the number of rows per page, add
data-table-rows-per-page="5"
(default 10) on the same container.
To enable pagination, add the
data-table-pagination
attribute to the pagination element.
To set rows per page dynamically, add the
data-table-set-rows-per-page
attribute to a
<select>
element with numeric options.
| Product | SKU | Category | Stock | Price | Orders | Rating | Status | Published | Actions | |
|---|---|---|---|---|---|---|---|---|---|---|
Wireless Earbudsby: My Furniture |
WB-10245 | Electronics |
56 |
$59.99 | 124 | (87) | Published | 18 Apr, 2025 12:24 PM | ||
Smart LED Desk Lampby: BrightLite |
SL-89012 | Home & Office |
32 |
$39.49 | 78 | (54) | Pending | 22 Apr, 2025 09:45 AM | ||
Men's Running Shoesby: ActiveWear Co. |
RS-20450 | Fashion |
120 |
$89.00 | 231 | (142) | Published | 24 Apr, 2025 03:10 PM | ||
Fitness Tracker Watchby: FitPulse |
FT-67123 | Fitness |
78 |
$49.95 | 198 | (89) | Published | 23 Apr, 2025 10:12 AM | ||
Gaming Mouse RGBby: HyperClick |
GM-72109 | Gaming |
120 |
$29.99 | 243 | (102) | Published | 19 Apr, 2025 05:56 PM | ||
Modern Lounge Chairby: UrbanLiving |
FC-31220 | Furniture |
24 |
$199.00 | 38 | (27) | Out of Stock | 18 Apr, 2025 11:30 AM | ||
Plush Toy Bearby: Softies |
TY-00788 | Toys |
150 |
$15.99 | 305 | (120) | Published | 17 Apr, 2025 04:21 PM | ||
55" Ultra HD Smart TVby: ViewMaster |
TV-5588 | Electronics |
64 |
$499.00 | 142 | (88) | Published | 25 Apr, 2025 10:10 AM | ||
Apple iMac 24" M3by: Apple |
IMAC-M3-24 | Computers |
18 |
$1,399.00 | 29 | (16) | Pending | 24 Apr, 202502:14 PM | ||
Smart Watch Pro X2by: FitTech |
SWPX2-GL | Wearables |
85 |
$149.50 | 197 | (16) | Published | 23 Apr, 202508:00 AM |
Custom table with pagination info
Add the
To set the number of rows per page, add
To enable pagination, add the
To show pagination info, add the
By default, it displays:
data-table
attribute to the container of the table.
To set the number of rows per page, add
data-table-rows-per-page="5"
to the same container (default is 10).
To enable pagination, add the
data-table-pagination
attribute to the pagination element.
To show pagination info, add the
data-table-pagination-info
attribute to the info element.
By default, it displays:
Showing 1 to ... entries
. You can customize it by setting
data-table-pagination-info="products"
to show:
Showing 1 to ... products
.
| Product | SKU | Category | Stock | Price | Orders | Rating | Status | Published | Actions | |
|---|---|---|---|---|---|---|---|---|---|---|
Wireless Earbudsby: My Furniture |
WB-10245 | Electronics |
56 |
$59.99 | 124 | (87) | Published | 18 Apr, 2025 12:24 PM | ||
Smart LED Desk Lampby: BrightLite |
SL-89012 | Home & Office |
32 |
$39.49 | 78 | (54) | Pending | 22 Apr, 2025 09:45 AM | ||
Men's Running Shoesby: ActiveWear Co. |
RS-20450 | Fashion |
120 |
$89.00 | 231 | (142) | Published | 24 Apr, 2025 03:10 PM | ||
Fitness Tracker Watchby: FitPulse |
FT-67123 | Fitness |
78 |
$49.95 | 198 | (89) | Published | 23 Apr, 2025 10:12 AM | ||
Gaming Mouse RGBby: HyperClick |
GM-72109 | Gaming |
120 |
$29.99 | 243 | (102) | Published | 19 Apr, 2025 05:56 PM | ||
Modern Lounge Chairby: UrbanLiving |
FC-31220 | Furniture |
24 |
$199.00 | 38 | (27) | Out of Stock | 18 Apr, 2025 11:30 AM | ||
Plush Toy Bearby: Softies |
TY-00788 | Toys |
150 |
$15.99 | 305 | (120) | Published | 17 Apr, 2025 04:21 PM | ||
55" Ultra HD Smart TVby: ViewMaster |
TV-5588 | Electronics |
64 |
$499.00 | 142 | (88) | Published | 25 Apr, 2025 10:10 AM | ||
Apple iMac 24" M3by: Apple |
IMAC-M3-24 | Computers |
18 |
$1,399.00 | 29 | (16) | Pending | 24 Apr, 202502:14 PM | ||
Smart Watch Pro X2by: FitTech |
SWPX2-GL | Wearables |
85 |
$149.50 | 197 | (16) | Published | 23 Apr, 202508:00 AM |
Custom table with filters
Add the
To enable filtering, add the
Also, add
data-table
attribute to the container of the table.
To enable filtering, add the
data-table-filter="filter-name"
attribute to a
<select>
element with options that match the values in the target column.
Also, add
data-column="filter-name"
to the corresponding column header to link the filter to that column.
Filter By:
| Product | SKU | Category | Stock | Price | Orders | Rating | Status | Published | Actions | |
|---|---|---|---|---|---|---|---|---|---|---|
Wireless Earbudsby: My Furniture |
WB-10245 | Electronics |
56 |
$59.99 | 124 | (87) | Published | 18 Apr, 2025 12:24 PM | ||
Smart LED Desk Lampby: BrightLite |
SL-89012 | Home & Office |
32 |
$39.49 | 78 | (54) | Pending | 22 Apr, 2025 09:45 AM | ||
Men's Running Shoesby: ActiveWear Co. |
RS-20450 | Fashion |
120 |
$89.00 | 231 | (142) | Published | 24 Apr, 2025 03:10 PM | ||
Fitness Tracker Watchby: FitPulse |
FT-67123 | Fitness |
78 |
$49.95 | 198 | (89) | Published | 23 Apr, 2025 10:12 AM | ||
Gaming Mouse RGBby: HyperClick |
GM-72109 | Gaming |
120 |
$29.99 | 243 | (102) | Published | 19 Apr, 2025 05:56 PM | ||
Modern Lounge Chairby: UrbanLiving |
FC-31220 | Furniture |
24 |
$199.00 | 38 | (27) | Out of Stock | 18 Apr, 2025 11:30 AM | ||
Plush Toy Bearby: Softies |
TY-00788 | Toys |
150 |
$15.99 | 305 | (120) | Published | 17 Apr, 2025 04:21 PM | ||
55" Ultra HD Smart TVby: ViewMaster |
TV-5588 | Electronics |
64 |
$499.00 | 142 | (88) | Published | 25 Apr, 2025 10:10 AM | ||
Apple iMac 24" M3by: Apple |
IMAC-M3-24 | Computers |
18 |
$1,399.00 | 29 | (16) | Pending | 24 Apr, 202502:14 PM | ||
Smart Watch Pro X2by: FitTech |
SWPX2-GL | Wearables |
85 |
$149.50 | 197 | (16) | Published | 23 Apr, 202508:00 AM |
Custom table with range filters
Add the
To enable filtering, add the
Also, add
data-table
attribute to the container of the table.
To enable filtering, add the
data-table-range-filter="filter-name"
attribute to a
<select>
element with options that match the values in the target column.
Also, add
data-column="filter-name"
to the corresponding column header to link the filter to that column.
Filter By:
| Product | SKU | Category | Stock | Price | Orders | Rating | Status | Published | Actions | |
|---|---|---|---|---|---|---|---|---|---|---|
Wireless Earbudsby: My Furniture |
WB-10245 | Electronics |
56 |
$59.99 | 124 | (87) | Published | 18 Apr, 2025 12:24 PM | ||
Smart LED Desk Lampby: BrightLite |
SL-89012 | Home & Office |
32 |
$39.49 | 78 | (54) | Pending | 22 Apr, 2025 09:45 AM | ||
Men's Running Shoesby: ActiveWear Co. |
RS-20450 | Fashion |
120 |
$89.00 | 231 | (142) | Published | 24 Apr, 2025 03:10 PM | ||
Fitness Tracker Watchby: FitPulse |
FT-67123 | Fitness |
78 |
$49.95 | 198 | (89) | Published | 23 Apr, 2025 10:12 AM | ||
Gaming Mouse RGBby: HyperClick |
GM-72109 | Gaming |
120 |
$29.99 | 243 | (102) | Published | 19 Apr, 2025 05:56 PM | ||
Modern Lounge Chairby: UrbanLiving |
FC-31220 | Furniture |
24 |
$199.00 | 38 | (27) | Out of Stock | 18 Apr, 2025 11:30 AM | ||
Plush Toy Bearby: Softies |
TY-00788 | Toys |
150 |
$15.99 | 305 | (120) | Published | 17 Apr, 2025 04:21 PM | ||
55" Ultra HD Smart TVby: ViewMaster |
TV-5588 | Electronics |
64 |
$499.00 | 142 | (88) | Published | 25 Apr, 2025 10:10 AM | ||
Apple iMac 24" M3by: Apple |
IMAC-M3-24 | Computers |
18 |
$1,399.00 | 29 | (16) | Pending | 24 Apr, 202502:14 PM | ||
Smart Watch Pro X2by: FitTech |
SWPX2-GL | Wearables |
85 |
$149.50 | 197 | (16) | Published | 23 Apr, 202508:00 AM |
Custom table with sort
Add the
To enable sorting, add
data-table
attribute to the container of the table.
To enable sorting, add
data-table-sort
on header of column.
Filter By:
| Product | SKU | Category | Stock | Price | Orders | Rating | Status | Published | Actions | |
|---|---|---|---|---|---|---|---|---|---|---|
Wireless Earbudsby: My Furniture |
WB-10245 | Electronics |
56 |
$59.99 | 124 | (87) | Published | 18 Apr, 2025 12:24 PM | ||
Smart LED Desk Lampby: BrightLite |
SL-89012 | Home & Office |
32 |
$39.49 | 78 | (54) | Pending | 22 Apr, 2025 09:45 AM | ||
Men's Running Shoesby: ActiveWear Co. |
RS-20450 | Fashion |
120 |
$89.00 | 231 | (142) | Published | 24 Apr, 2025 03:10 PM | ||
Fitness Tracker Watchby: FitPulse |
FT-67123 | Fitness |
78 |
$49.95 | 198 | (89) | Published | 23 Apr, 2025 10:12 AM | ||
Gaming Mouse RGBby: HyperClick |
GM-72109 | Gaming |
120 |
$29.99 | 243 | (102) | Published | 19 Apr, 2025 05:56 PM | ||
Modern Lounge Chairby: UrbanLiving |
FC-31220 | Furniture |
24 |
$199.00 | 38 | (27) | Out of Stock | 18 Apr, 2025 11:30 AM | ||
Plush Toy Bearby: Softies |
TY-00788 | Toys |
150 |
$15.99 | 305 | (120) | Published | 17 Apr, 2025 04:21 PM | ||
55" Ultra HD Smart TVby: ViewMaster |
TV-5588 | Electronics |
64 |
$499.00 | 142 | (88) | Published | 25 Apr, 2025 10:10 AM | ||
Apple iMac 24" M3by: Apple |
IMAC-M3-24 | Computers |
18 |
$1,399.00 | 29 | (16) | Pending | 24 Apr, 202502:14 PM | ||
Smart Watch Pro X2by: FitTech |
SWPX2-GL | Wearables |
85 |
$149.50 | 197 | (16) | Published | 23 Apr, 202508:00 AM |
Custom table with sort (for complex cell)
Add the
To enable sorting, add
Also, add
data-table
attribute to the container of the table.
To enable sorting, add
data-table-sort="sort-name"
to the header cell of the column.
Also, add
data-sort="sort-name"
to the element inside each corresponding table cell that should be used for sorting.
Filter By:
| Product | SKU | Category | Stock | Price | Orders | Rating | Status | Published | Actions | |
|---|---|---|---|---|---|---|---|---|---|---|
Wireless Earbudsby: My Furniture |
WB-10245 | Electronics |
56 |
$59.99 | 124 | (87) | Published | 18 Apr, 2025 12:24 PM | ||
Smart LED Desk Lampby: BrightLite |
SL-89012 | Home & Office |
32 |
$39.49 | 78 | (54) | Pending | 22 Apr, 2025 09:45 AM | ||
Men's Running Shoesby: ActiveWear Co. |
RS-20450 | Fashion |
120 |
$89.00 | 231 | (142) | Published | 24 Apr, 2025 03:10 PM | ||
Fitness Tracker Watchby: FitPulse |
FT-67123 | Fitness |
78 |
$49.95 | 198 | (89) | Published | 23 Apr, 2025 10:12 AM | ||
Gaming Mouse RGBby: HyperClick |
GM-72109 | Gaming |
120 |
$29.99 | 243 | (102) | Published | 19 Apr, 2025 05:56 PM | ||
Modern Lounge Chairby: UrbanLiving |
FC-31220 | Furniture |
24 |
$199.00 | 38 | (27) | Out of Stock | 18 Apr, 2025 11:30 AM | ||
Plush Toy Bearby: Softies |
TY-00788 | Toys |
150 |
$15.99 | 305 | (120) | Published | 17 Apr, 2025 04:21 PM | ||
55" Ultra HD Smart TVby: ViewMaster |
TV-5588 | Electronics |
64 |
$499.00 | 142 | (88) | Published | 25 Apr, 2025 10:10 AM | ||
Apple iMac 24" M3by: Apple |
IMAC-M3-24 | Computers |
18 |
$1,399.00 | 29 | (16) | Pending | 24 Apr, 202502:14 PM | ||
Smart Watch Pro X2by: FitTech |
SWPX2-GL | Wearables |
85 |
$149.50 | 197 | (16) | Published | 23 Apr, 202508:00 AM |
Complete Custom Table
Filter By:
| Product | SKU | Category | Stock | Price | Orders | Rating | Status | Published | Actions | |
|---|---|---|---|---|---|---|---|---|---|---|
Wireless Earbudsby: My Furniture |
WB-10245 | Electronics |
56 |
$59.99 | 124 | (87) | Published | 18 Apr, 2025 12:24 PM | ||
Smart LED Desk Lampby: BrightLite |
SL-89012 | Home & Office |
32 |
$39.49 | 78 | (54) | Pending | 22 Apr, 2025 09:45 AM | ||
Men's Running Shoesby: ActiveWear Co. |
RS-20450 | Fashion |
120 |
$89.00 | 231 | (142) | Published | 24 Apr, 2025 03:10 PM | ||
Fitness Tracker Watchby: FitPulse |
FT-67123 | Fitness |
78 |
$49.95 | 198 | (89) | Published | 23 Apr, 2025 10:12 AM | ||
Gaming Mouse RGBby: HyperClick |
GM-72109 | Gaming |
120 |
$29.99 | 243 | (102) | Published | 19 Apr, 2025 05:56 PM | ||
Modern Lounge Chairby: UrbanLiving |
FC-31220 | Furniture |
24 |
$199.00 | 38 | (27) | Out of Stock | 18 Apr, 2025 11:30 AM | ||
Plush Toy Bearby: Softies |
TY-00788 | Toys |
150 |
$15.99 | 305 | (120) | Published | 17 Apr, 2025 04:21 PM | ||
55" Ultra HD Smart TVby: ViewMaster |
TV-5588 | Electronics |
64 |
$499.00 | 142 | (88) | Published | 25 Apr, 2025 10:10 AM | ||
Apple iMac 24" M3by: Apple |
IMAC-M3-24 | Computers |
18 |
$1,399.00 | 29 | (16) | Pending | 24 Apr, 202502:14 PM | ||
Smart Watch Pro X2by: FitTech |
SWPX2-GL | Wearables |
85 |
$149.50 | 197 | (16) | Published | 23 Apr, 202508:00 AM |