Membuat Tabel Responsif dengan Bootstrap dan DataTables

Membuat Tabel Responsif dengan Bootstrap dan DataTables

—

by

Webbiz.ID
in

Berikut adalah contoh kode untuk membuat tabel responsif menggunakan Bootstrap dan DataTables. Tabel ini akan memiliki 10 baris dan beberapa kolom.

Responsive Table
Column 1Column 2Column 3Column 4Column 5Column 6Column 7Column 8Column 9Column 10Column 11Column 12Column 13Column 14Column 15
Data 1Data 2Data 3Data 4Data 5Data 6Data 7Data 8Data 9Data 10Data 11Data 12Data 13Data 14Data 15
Data 1Data 2Data 3Data 4Data 5Data 6Data 7Data 8Data 9Data 10Data 11Data 12Data 13Data 14Data 15
Data 1Data 2Data 3Data 4Data 5Data 6Data 7Data 8Data 9Data 10Data 11Data 12Data 13Data 14Data 15
Data 1Data 2Data 3Data 4Data 5Data 6Data 7Data 8Data 9Data 10Data 11Data 12Data 13Data 14Data 15
Data 1Data 2Data 3Data 4Data 5Data 6Data 7Data 8Data 9Data 10Data 11Data 12Data 13Data 14Data 15
Data 1Data 2Data 3Data 4Data 5Data 6Data 7Data 8Data 9Data 10Data 11Data 12Data 13Data 14Data 15
Data 1Data 2Data 3Data 4Data 5Data 6Data 7Data 8Data 9Data 10Data 11Data 12Data 13Data 14Data 15
Data 1Data 2Data 3Data 4Data 5Data 6Data 7Data 8Data 9Data 10Data 11Data 12Data 13Data 14Data 15
Data 1Data 2Data 3Data 4Data 5Data 6Data 7Data 8Data 9Data 10Data 11Data 12Data 13Data 14Data 15
Data 1Data 2Data 3Data 4Data 5Data 6Data 7Data 8Data 9Data 10Data 11Data 12Data 13Data 14Data 15
Data 1Data 2Data 3Data 4Data 5Data 6Data 7Data 8Data 9Data 10Data 11Data 12Data 13Data 14Arman

HTML
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Table</title>
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.dataTables.min.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>

<body>
  <div class="container">
    <table id="myTable" class="table table-striped table-bordered dt-responsive nowrap" style="width:100%">
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
          <th>Column 4</th>
          <th>Column 5</th>
          <th>Column 6</th>
          <th>Column 7</th>
          <th>Column 8</th>
          <th>Column 9</th>
          <th>Column 10</th>
          <th>Column 11</th>
          <th>Column 12</th>
          <th>Column 13</th>
          <th>Column 14</th>
          <th>Column 15</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
          <td>Data 4</td>
          <td>Data 5</td>
          <td>Data 6</td>
          <td>Data 7</td>
          <td>Data 8</td>
          <td>Data 9</td>
          <td>Data 10</td>
          <td>Data 11</td>
          <td>Data 12</td>
          <td>Data 13</td>
          <td>Data 14</td>
          <td>Data 15</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
          <td>Data 4</td>
          <td>Data 5</td>
          <td>Data 6</td>
          <td>Data 7</td>
          <td>Data 8</td>
          <td>Data 9</td>
          <td>Data 10</td>
          <td>Data 11</td>
          <td>Data 12</td>
          <td>Data 13</td>
          <td>Data 14</td>
          <td>Data 15</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
          <td>Data 4</td>
          <td>Data 5</td>
          <td>Data 6</td>
          <td>Data 7</td>
          <td>Data 8</td>
          <td>Data 9</td>
          <td>Data 10</td>
          <td>Data 11</td>
          <td>Data 12</td>
          <td>Data 13</td>
          <td>Data 14</td>
          <td>Data 15</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
          <td>Data 4</td>
          <td>Data 5</td>
          <td>Data 6</td>
          <td>Data 7</td>
          <td>Data 8</td>
          <td>Data 9</td>
          <td>Data 10</td>
          <td>Data 11</td>
          <td>Data 12</td>
          <td>Data 13</td>
          <td>Data 14</td>
          <td>Data 15</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
          <td>Data 4</td>
          <td>Data 5</td>
          <td>Data 6</td>
          <td>Data 7</td>
          <td>Data 8</td>
          <td>Data 9</td>
          <td>Data 10</td>
          <td>Data 11</td>
          <td>Data 12</td>
          <td>Data 13</td>
          <td>Data 14</td>
          <td>Data 15</td>
        </tr>
         <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
          <td>Data 4</td>
          <td>Data 5</td>
          <td>Data 6</td>
          <td>Data 7</td>
          <td>Data 8</td>
          <td>Data 9</td>
          <td>Data 10</td>
          <td>Data 11</td>
          <td>Data 12</td>
          <td>Data 13</td>
          <td>Data 14</td>
          <td>Data 15</td>
        </tr>
         <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
          <td>Data 4</td>
          <td>Data 5</td>
          <td>Data 6</td>
          <td>Data 7</td>
          <td>Data 8</td>
          <td>Data 9</td>
          <td>Data 10</td>
          <td>Data 11</td>
          <td>Data 12</td>
          <td>Data 13</td>
          <td>Data 14</td>
          <td>Data 15</td>
        </tr>
         <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
          <td>Data 4</td>
          <td>Data 5</td>
          <td>Data 6</td>
          <td>Data 7</td>
          <td>Data 8</td>
          <td>Data 9</td>
          <td>Data 10</td>
          <td>Data 11</td>
          <td>Data 12</td>
          <td>Data 13</td>
          <td>Data 14</td>
          <td>Data 15</td>
        </tr>
         <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
          <td>Data 4</td>
          <td>Data 5</td>
          <td>Data 6</td>
          <td>Data 7</td>
          <td>Data 8</td>
          <td>Data 9</td>
          <td>Data 10</td>
          <td>Data 11</td>
          <td>Data 12</td>
          <td>Data 13</td>
          <td>Data 14</td>
          <td>Data 15</td>
        </tr>
         <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
          <td>Data 4</td>
          <td>Data 5</td>
          <td>Data 6</td>
          <td>Data 7</td>
          <td>Data 8</td>
          <td>Data 9</td>
          <td>Data 10</td>
          <td>Data 11</td>
          <td>Data 12</td>
          <td>Data 13</td>
          <td>Data 14</td>
          <td>Data 15</td>
        </tr>
         <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
          <td>Data 4</td>
          <td>Data 5</td>
          <td>Data 6</td>
          <td>Data 7</td>
          <td>Data 8</td>
          <td>Data 9</td>
          <td>Data 10</td>
          <td>Data 11</td>
          <td>Data 12</td>
          <td>Data 13</td>
          <td>Data 14</td>
          <td>Arman</td>
        </tr>
        <!-- Repeat the above row for 10 rows -->
      </tbody>
    </table>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#myTable').DataTable();
    });
  </script>
</body>
</html>
HTML

Pastikan untuk menyertakan framework Bootstrap dan DataTables dengan menggunakan tautan yang disediakan di kode di atas. Anda juga dapat menyesuaikan tampilan tabel sesuai kebutuhan Anda dengan mengedit kelas CSS yang diberikan.

Semoga contoh kode di atas dapat membantu Anda dalam membuat tabel responsif dengan menggunakan Bootstrap dan DataTables.

Artikel Terbaru ⭐