Basic Datatable
Create a modal view using Bootstrap by adding a <div class="modal"> container. Use .modal-dialog and .modal-content to structure the modal, and trigger it with buttons or links using data-bs-toggle="modal".
| Name | Position | Office | Age | Start date | Salary |
|---|---|---|---|---|---|
| Tiger Nixon | System Architect | Edinburgh | 61 | 2011-04-25 | $320,800 |
| Garrett Winters | Accountant | Tokyo | 63 | 2011-07-25 | $170,750 |
| Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009-01-12 | $86,000 |
| Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012-03-29 | $433,060 |
| Airi Satou | Accountant | Tokyo | 33 | 2008-11-28 | $162,700 |
| Brielle Williamson | Integration Specialist | New York | 61 | 2012-12-02 | $372,000 |
| Herrod Chandler | Sales Assistant | San Francisco | 59 | 2012-08-06 | $137,500 |
| Rhona Davidson | Integration Specialist | Tokyo | 55 | 2010-10-14 | $327,900 |
| Colleen Hurst | Javascript Developer | San Francisco | 39 | 2009-09-15 | $205,500 |
| Sonya Frost | Software Engineer | Edinburgh | 23 | 2008-12-13 | $103,600 |
| Jena Gaines | Office Manager | London | 30 | 2008-12-19 | $90,560 |
| Quinn Flynn | Support Lead | Edinburgh | 22 | 2013-03-03 | $342,000 |
| Charde Marshall | Regional Director | San Francisco | 36 | 2008-10-16 | $470,600 |
| Haley Kennedy | Senior Marketing Designer | London | 43 | 2012-12-18 | $313,500 |
| Tatyana Fitzpatrick | Regional Director | London | 19 | 2010-03-17 | $385,750 |
| Michael Silva | Marketing Designer | London | 66 | 2012-11-27 | $198,500 |
| Paul Byrd | Chief Financial Officer (CFO) | New York | 64 | 2010-06-09 | $725,000 |
| Gloria Little | Systems Administrator | New York | 59 | 2009-04-10 | $237,500 |
| Bradley Greer | Software Engineer | London | 41 | 2012-10-13 | $132,000 |
Vertical Scroll Datatable
Create a modal view using Bootstrap by adding a <div class="modal"> container. Use .modal-dialog and .modal-content to structure the modal, and trigger it with buttons or links using data-bs-toggle="modal".
| ID | Name | Category | Price |
|---|---|---|---|
| 1 | Apple | Fruit | $1.00 |
| 2 | Banana | Fruit | $0.50 |
| 3 | Carrot | Vegetable | $0.30 |
| 4 | Dairy Milk | Dairy | $1.50 |
| 5 | Eggs | Protein | $2.00 |
| 6 | Fish | Protein | $5.00 |
| 7 | Bread | Bakery | $1.20 |
| 8 | Rice | Grain | $0.80 |
| 9 | Cheese | Dairy | $3.00 |
| 10 | Orange | Fruit | $1.20 |
| ID | Name | Category | Price |
Horizontal Scroll Datatable
Create a modal view using Bootstrap by adding a <div class="modal"> container. Use .modal-dialog and .modal-content to structure the modal, and trigger it with buttons or links using data-bs-toggle="modal".
| Student ID | Name | Class | Attendance Status | Date | Grade | Time In | Time Out | Phone Number | Guardian Name | Notes | |
|---|---|---|---|---|---|---|---|---|---|---|---|
| 101 | Alice | Math 101 | Present | 2023-10-01 | A | 08:30 AM | 03:00 PM | (555) 123-4567 | alice@example.com | Mary | On time |
| 102 | Bob | Math 101 | Absent | 2023-10-01 | B | N/A | N/A | (555) 234-5678 | bob@example.com | John | Illness |
| 103 | Charlie | Biology 202 | Present | 2023-10-01 | A- | 08:30 AM | 03:00 PM | (555) 345-6789 | charlie@example.com | Sarah | Participated actively |
| 104 | Dana | History 101 | Late | 2023-10-01 | B+ | 08:40 AM | 03:00 PM | (555) 456-7890 | dana@example.com | Michael | 10 minutes late |
| 105 | Edward | Chemistry 303 | Present | 2023-10-01 | A | 08:30 AM | 03:00 PM | (555) 567-8901 | edward@example.com | Linda | Completed assignment |
| 106 | Fiona | History 101 | Absent | 2023-10-01 | B | N/A | N/A | (555) 678-9012 | fiona@example.com | Robert | Family emergency |
| 107 | George | Math 101 | Present | 2023-10-01 | B+ | 08:30 AM | 03:00 PM | (555) 789-0123 | george@example.com | Anna | Participated in group work |
| 108 | Hannah | Biology 202 | Present | 2023-10-01 | A- | 08:30 AM | 03:00 PM | (555) 890-1234 | hannah@example.com | Paul | Asked questions |
| 109 | Ian | Chemistry 303 | Absent | 2023-10-01 | B- | N/A | N/A | (555) 901-2345 | ian@example.com | Grace | On vacation |
| 110 | Jack | History 101 | Present | 2023-10-01 | A | 08:30 AM | 03:00 PM | (555) 012-3456 | jack@example.com | Lisa | Great participation |
| 111 | Kelly | Math 101 | Present | 2023-10-01 | A+ | 08:30 AM | 03:00 PM | (555) 123-4568 | kelly@example.com | David | Outstanding work |
| 112 | Michael | Biology 202 | Present | 2023-10-01 | B+ | 08:30 AM | 03:00 PM | (555) 234-5679 | michael@example.com | Rachel | Active in discussions |
| 113 | Linda | Chemistry 303 | Absent | 2023-10-01 | C | N/A | N/A | (555) 345-6780 | linda@example.com | Tom | Missed class for competition |
| 114 | Oliver | History 101 | Present | 2023-10-01 | B | 08:30 AM | 03:00 PM | (555) 456-7891 | oliver@example.com | Susan | Excellent engagement |
Alternative Pagination Datatable
Create a modal view using Bootstrap by adding a <div class="modal"> container. Use .modal-dialog and .modal-content to structure the modal, and trigger it with buttons or links using data-bs-toggle="modal".
| Employee ID | Name | Department | Salary |
|---|---|---|---|
| 101 | John Doe | Marketing | $50,000 |
| 102 | Jane Smith | Finance | $60,000 |
| 103 | Mike Johnson | IT | $70,000 |
| 104 | Emily Davis | HR | $55,000 |
| 105 | Robert Brown | Sales | $65,000 |
| 106 | Linda Wilson | Marketing | $52,000 |
| 107 | David Martinez | IT | $75,000 |
| 108 | Sarah Garcia | Finance | $68,000 |
| 109 | James Rodriguez | HR | $58,000 |
| 110 | Mary Wilson | Sales | $63,000 |
| 111 | Alice Taylor | Marketing | $54,000 |
| 112 | Tom Harris | Finance | $62,000 |
| 113 | Susan Clark | IT | $72,000 |
| 114 | Brian Lee | HR | $57,000 |
| 115 | Jennifer Walker | Sales | $66,000 |
| 116 | Michael Hall | Marketing | $51,000 |
| 117 | Laura Young | Finance | $69,000 |
| 118 | Kevin Hernandez | IT | $74,000 |
| 119 | Rachel King | HR | $59,000 |
| 120 | Daniel Wright | Sales | $67,000 |
| 121 | Steve Johnson | Marketing | $53,000 |
| 122 | Barbara Lewis | Finance | $61,000 |
| 123 | Mark Robinson | IT | $78,000 |
| 124 | Patricia Clark | HR | $56,000 |
| 125 | George Hall | Sales | $64,000 |
| 126 | Emma Allen | Marketing | $55,000 |
| 127 | David Taylor | Finance | $63,000 |
| 128 | Olivia Martin | IT | $76,000 |
| 129 | James Lee | HR | $58,000 |
| 130 | Maria Scott | Sales | $69,000 |
Buttons Datatables
Create a modal view using Bootstrap by adding a <div class="modal"> container. Use .modal-dialog and .modal-content to structure the modal, and trigger it with buttons or links using data-bs-toggle="modal".
| Customer ID | Name | Phone | |
|---|---|---|---|
| 301 | Laura | laura@example.com | (123) 456-7890 |
| 302 | Tom | tom@example.com | (234) 567-8901 |
| 303 | Lisa | lisa@example.com | (345) 678-9012 |
| 304 | Mark | mark@example.com | (456) 789-0123 |
| 305 | Sara | sara@example.com | (567) 890-1234 |
| 306 | Kevin | kevin@example.com | (678) 901-2345 |
| 307 | Olivia | olivia@example.com | (789) 012-3456 |
| 308 | David | david@example.com | (890) 123-4567 |
| 309 | Anna | anna@example.com | (901) 234-5678 |
| 310 | Brian | brian@example.com | (012) 345-6789 |