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 1 Column 2 Column 3 Column 4 Column 5 Column 6 Column 7 Column 8 Column 9 Column 10 Column 11 Column 12 Column 13 Column 14 Column 15
Data 1 Data 2 Data 3 Data 4 Data 5 Data 6 Data 7 Data 8 Data 9 Data 10 Data 11 Data 12 Data 13 Data 14 Data 15
Data 1 Data 2 Data 3 Data 4 Data 5 Data 6 Data 7 Data 8 Data 9 Data 10 Data 11 Data 12 Data 13 Data 14 Data 15
Data 1 Data 2 Data 3 Data 4 Data 5 Data 6 Data 7 Data 8 Data 9 Data 10 Data 11 Data 12 Data 13 Data 14 Data 15
Data 1 Data 2 Data 3 Data 4 Data 5 Data 6 Data 7 Data 8 Data 9 Data 10 Data 11 Data 12 Data 13 Data 14 Data 15
Data 1 Data 2 Data 3 Data 4 Data 5 Data 6 Data 7 Data 8 Data 9 Data 10 Data 11 Data 12 Data 13 Data 14 Data 15
Data 1 Data 2 Data 3 Data 4 Data 5 Data 6 Data 7 Data 8 Data 9 Data 10 Data 11 Data 12 Data 13 Data 14 Data 15
Data 1 Data 2 Data 3 Data 4 Data 5 Data 6 Data 7 Data 8 Data 9 Data 10 Data 11 Data 12 Data 13 Data 14 Data 15
Data 1 Data 2 Data 3 Data 4 Data 5 Data 6 Data 7 Data 8 Data 9 Data 10 Data 11 Data 12 Data 13 Data 14 Data 15
Data 1 Data 2 Data 3 Data 4 Data 5 Data 6 Data 7 Data 8 Data 9 Data 10 Data 11 Data 12 Data 13 Data 14 Data 15
Data 1 Data 2 Data 3 Data 4 Data 5 Data 6 Data 7 Data 8 Data 9 Data 10 Data 11 Data 12 Data 13 Data 14 Data 15
Data 1 Data 2 Data 3 Data 4 Data 5 Data 6 Data 7 Data 8 Data 9 Data 10 Data 11 Data 12 Data 13 Data 14 Arman

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Artikel Terbaru ⭐