Bootstrap Tables Section - Adminkit
Discover 2 Bootstrap Tables Section available in Adminkit
Requires JavaScript
Section Tables
Component from
Adminkit
Builder
<div class="row removable"> <div class="col-12 col-lg-8 col-xxl-9 d-flex drop-zone"> <div class="card flex-fill draggable"> <div class="card-header"> <h5 class="card-title mb-0">Latest Projects</h5> </div> <table class="table table-hover my-0"> <thead> <tr> <th>Name</th> <th class="d-none d-xl-table-cell">Start Date</th> <th class="d-none d-xl-table-cell">End Date</th> <th>Status</th> <th class="d-none d-md-table-cell">Assignee</th> </tr> </thead> <tbody> <tr> <td>Project Apollo</td> <td class="d-none d-xl-table-cell">01/01/2021</td> <td class="d-none d-xl-table-cell">31/06/2021</td> <td> <span class="badge bg-success">Done</span> </td> <td class="d-none d-md-table-cell">Vanessa Tucker</td> </tr> <tr> <td>Project Fireball</td> <td class="d-none d-xl-table-cell">01/01/2021</td> <td class="d-none d-xl-table-cell">31/06/2021</td> <td> <span class="badge bg-danger">Cancelled</span> </td> <td class="d-none d-md-table-cell">William Harris</td> </tr> <tr> <td>Project Hades</td> <td class="d-none d-xl-table-cell">01/01/2021</td> <td class="d-none d-xl-table-cell">31/06/2021</td> <td> <span class="badge bg-success">Done</span> </td> <td class="d-none d-md-table-cell">Sharon Lessman</td> </tr> <tr> <td>Project Nitro</td> <td class="d-none d-xl-table-cell">01/01/2021</td> <td class="d-none d-xl-table-cell">31/06/2021</td> <td> <span class="badge bg-warning">In progress</span> </td> <td class="d-none d-md-table-cell">Vanessa Tucker</td> </tr> <tr> <td>Project Phoenix</td> <td class="d-none d-xl-table-cell">01/01/2021</td> <td class="d-none d-xl-table-cell">31/06/2021</td> <td> <span class="badge bg-success">Done</span> </td> <td class="d-none d-md-table-cell">William Harris</td> </tr> <tr> <td>Project X</td> <td class="d-none d-xl-table-cell">01/01/2021</td> <td class="d-none d-xl-table-cell">31/06/2021</td> <td> <span class="badge bg-success">Done</span> </td> <td class="d-none d-md-table-cell">Sharon Lessman</td> </tr> <tr> <td>Project Romeo</td> <td class="d-none d-xl-table-cell">01/01/2021</td> <td class="d-none d-xl-table-cell">31/06/2021</td> <td> <span class="badge bg-success">Done</span> </td> <td class="d-none d-md-table-cell">Christina Mason</td> </tr> <tr> <td>Project Wombat</td> <td class="d-none d-xl-table-cell">01/01/2021</td> <td class="d-none d-xl-table-cell">31/06/2021</td> <td> <span class="badge bg-warning">In progress</span> </td> <td class="d-none d-md-table-cell">William Harris</td> </tr> </tbody> </table> </div> </div> <div class="col-12 col-lg-4 col-xxl-3 d-flex drop-zone"> <div class="card flex-fill w-100 draggable"> <div class="card-header"> <h5 class="card-title mb-0">Monthly Sales</h5> </div> <div class="card-body d-flex w-100"> <div class="align-self-center chart chart-lg"> <div class="chartjs-size-monitor"> <div class="chartjs-size-monitor-expand"> <div class=""></div> </div> <div class="chartjs-size-monitor-shrink"> <div class=""></div> </div> </div> <canvas id="chartjs-dashboard-bar" width="528" height="700" style="display: block; height: 350px; width: 264px;" class="chartjs-render-monitor"></canvas> </div> </div> </div> </div> </div>
<script>
// Bar chart new Chart(document.getElementById("chartjs-dashboard-bar"), { type: "bar", data: { labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], datasets: [{ label: "This year", backgroundColor: window.theme.primary, borderColor: window.theme.primary, hoverBackgroundColor: window.theme.primary, hoverBorderColor: window.theme.primary, data: [54, 67, 41, 55, 62, 45, 55, 73, 60, 76, 48, 79], barPercentage: .75, categoryPercentage: .5 }] }, options: { maintainAspectRatio: false, legend: { display: false }, scales: { yAxes: [{ gridLines: { display: false }, stacked: false, ticks: { stepSize: 20 } }], xAxes: [{ stacked: false, gridLines: { color: "transparent" } }] } } });
</script>
Requires JavaScript
Section Tables Dark
Component from
Adminkit
Builder
<div class="row removable"> <div class="col-12 col-lg-8 col-xxl-9 drop-zone d-flex"> <div class="card bg-dark flex-fill draggable"> <div class="card-header bg-transparent"> <h5 class="card-title mb-0">Latest Projects</h5> </div> <table class="table table-hover table-dark table-borderless my-0"> <thead> <tr> <th>Name</th> <th class="d-none d-xl-table-cell">Start Date</th> <th class="d-none d-xl-table-cell">End Date</th> <th>Status</th> <th class="d-none d-md-table-cell">Assignee</th> </tr> </thead> <tbody> <tr> <td>Project Apollo</td> <td class="d-none d-xl-table-cell">01/01/2021</td> <td class="d-none d-xl-table-cell">31/06/2021</td> <td> <span class="badge bg-success">Done</span> </td> <td class="d-none d-md-table-cell">Vanessa Tucker</td> </tr> <tr> <td>Project Fireball</td> <td class="d-none d-xl-table-cell">01/01/2021</td> <td class="d-none d-xl-table-cell">31/06/2021</td> <td> <span class="badge bg-danger">Cancelled</span> </td> <td class="d-none d-md-table-cell">William Harris</td> </tr> <tr> <td>Project Hades</td> <td class="d-none d-xl-table-cell">01/01/2021</td> <td class="d-none d-xl-table-cell">31/06/2021</td> <td> <span class="badge bg-success">Done</span> </td> <td class="d-none d-md-table-cell">Sharon Lessman</td> </tr> <tr> <td>Project Nitro</td> <td class="d-none d-xl-table-cell">01/01/2021</td> <td class="d-none d-xl-table-cell">31/06/2021</td> <td> <span class="badge bg-warning">In progress</span> </td> <td class="d-none d-md-table-cell">Vanessa Tucker</td> </tr> <tr> <td>Project Phoenix</td> <td class="d-none d-xl-table-cell">01/01/2021</td> <td class="d-none d-xl-table-cell">31/06/2021</td> <td> <span class="badge bg-success">Done</span> </td> <td class="d-none d-md-table-cell">William Harris</td> </tr> <tr> <td>Project X</td> <td class="d-none d-xl-table-cell">01/01/2021</td> <td class="d-none d-xl-table-cell">31/06/2021</td> <td> <span class="badge bg-success">Done</span> </td> <td class="d-none d-md-table-cell">Sharon Lessman</td> </tr> <tr> <td>Project Romeo</td> <td class="d-none d-xl-table-cell">01/01/2021</td> <td class="d-none d-xl-table-cell">31/06/2021</td> <td> <span class="badge bg-success">Done</span> </td> <td class="d-none d-md-table-cell">Christina Mason</td> </tr> <tr> <td>Project Wombat</td> <td class="d-none d-xl-table-cell">01/01/2021</td> <td class="d-none d-xl-table-cell">31/06/2021</td> <td> <span class="badge bg-warning">In progress</span> </td> <td class="d-none d-md-table-cell">William Harris</td> </tr> </tbody> </table> </div> </div> <div class="col-12 col-lg-4 col-xxl-3 drop-zone d-flex"> <div class="card bg-dark flex-fill w-100 draggable"> <div class="card-header bg-transparent"> <h5 class="card-title mb-0">Monthly Sales</h5> </div> <div class="card-body d-flex w-100"> <div class="align-self-center chart chart-lg"> <div class="chartjs-size-monitor"> <div class="chartjs-size-monitor-expand"> <div class=""></div> </div> <div class="chartjs-size-monitor-shrink"> <div class=""></div> </div> </div> <canvas id="chartjs-dashboard-bar-dark" width="528" height="700" style="display: block; height: 350px; width: 264px;" class="chartjs-render-monitor"></canvas> </div> </div> </div> </div> </div>
<script>
// Bar chart new Chart(document.getElementById("chartjs-dashboard-bar-dark"), { type: "bar", data: { labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], datasets: [{ label: "This year", backgroundColor: window.theme.primary, borderColor: window.theme.primary, hoverBackgroundColor: window.theme.primary, hoverBorderColor: window.theme.primary, data: [54, 67, 41, 55, 62, 45, 55, 73, 60, 76, 48, 79], barPercentage: .75, categoryPercentage: .5 }] }, options: { maintainAspectRatio: false, legend: { display: false }, scales: { yAxes: [{ gridLines: { display: false }, stacked: false, ticks: { stepSize: 20 } }], xAxes: [{ stacked: false, gridLines: { color: "transparent" } }] } } });
</script>