Cara Resize Table Columns HTML menggunakan Fitur Drag and Slide

Cara Resize Table Columns HTML menggunakan Fitur Drag and Slide

Cara Resize Table Columns HTML menggunakan Fitur Drag and Slide
Cara Resize Table Columns HTML menggunakan Fitur Drag and Slide


Hallo sobat ruangcoder, artikel kali ini membahas tutorial cara membuat resizable atau resize table / datatable columns html atau bootstrap menggunakan fitur drag and slide, dimana size table border atau tr dan td ini dapat kita pecil sesuai hati kita, ya namanya juga resize , berhubung banyak sekali yang minta di youtube , dan untuk tutorial nya ini satu - satu ya , hari ini saya hanya sempat membuat tutorial yang resize nya, untuk membuat tutorial seperti pindah row table , menambah row table bahkan sampai edit , delete dengan cepat, di next artikel selanjutnya, kita memfokuskan untuk artikel resize dulu, jadi jangan di pusing - pusingin satu artikel banyak tutorial, mending di bikin per -artikel kan jadi lebih enak dibaca dan sesuai dengan isi artikelnya.

Update : Cara Live Add, Edit, Delete Datatables Records menggunakan PHP Ajax

Hari ini Sobat akan belajar membuat tabel dengan fitur Kolom Slide untuk Mengubah Ukuran . Pada dasarnya, ada tabel dengan 8 kolom dan beberapa baris. Ada juga item header dan garis pemisah tipis di setiap suatu kolom . Sobat dapat mengubah ukuran kolom hanya dengan menahan klik dan seret ke kiri atau kanan. Tabel ini sepenuhnya fleksibel yang dapat sobat seret dan geser untuk mengubah ukuran, lalu horizontal, gulir bilah akan muncul secara otomatis nantinya.

Jadi, Hari ini admin akan berbagi tutorial Kolom Tabel Resizable Dengan Fitur Drag dan Slide. Dimana kita menggunakan HTML untuk membuat tata letak, CSS untuk style atau gaya nya, dan JavaScript untuk suatu fungsinya. oke tanpa banyak basa - basi langsung cekidot aja.

Resizable Table Columns With Drag and Slide Source Code :

Pertama admin telah membuat tabel menggunakan tag <table> HTML , dan membuat bagian <thead> & <tbody> di dalamnya. Di dalam tag <thead> admin telah meletakkan semua heading yang ada di bagian nav atas. Di sana admin telah menggunakan atribut HTML Data- * untuk menyimpan dan meneruskan data khusus. Di dalam setiap heading saya telah menempatkan span menyeret dan geser item.

Sekarang menggunakan CSS admin telah menempatkan semua elemen di tempat yang tepat, seperti yang Sobat lihat di gambar atas. Di sana admin telah menggunakan perintah display : grid ; untuk membuat tata letak yang fleksibel, dan menggunakan perintah CSS kotak lainnya . Di sana admin memiliki posisi untuk judul tabel, itu akan memperbaiki dan menempelkan header tabel pada scroll ke bawah. Admin telah menggunakan nilai fr dalam perintah grid.

JavaScript menangani di sini fitur tarik dan ubah ukuran kolom . Di sana admin telah mengambil tabel menggunakan dokumen JS . perintah querySelector dan disimpan dalam conts Setelah itu, admin menggunakan Matematika . perintah Math.max untuk mengubah ukuran dan memberi nilai lebar baru ke kolom. Dan menggunakan lebih banyak perintah seperti .addEventListener dan if{ } else { } pernyataan dll.

Disini admin tidak bisa menjelaskan semuanya secara tertulis. Untuk membuat program ini, Sobat harus membuat 3 file. File pertama untuk HTML , kedua untuk CSS , dan file ketiga untuk JavaScript . Ikuti langkah-langkah untuk membuat program ini tanpa kesalahan.

Pertama Buat file HTML bernama index.html dan masukkan kode-kode ini di bawah ini.


<!DOCTYPE html>
<!-- Code By RuangCoder -->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Resizable Table Columns | RuangCoder.com</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
<table>
  <thead>
    <tr>
      <th data-type="numeric">ID <span class="resize-handle"></span></th>
      <th data-type="text-short">First name <span class="resize-handle"></span></th>
      <th data-type="text-short">Last name <span class="resize-handle"></span></th>
      <th data-type="text-short">Email <span class="resize-handle"></span></th>
      <th data-type="text-long">Street <span class="resize-handle"></span></th>
      <th data-type="text-short">Country <span class="resize-handle"></span></th>
      <th data-type="text-long">Pincode <span class="resize-handle"></span></th>
      <th data-type="text-short">IBAN <span class="resize-handle"></span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>000001</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000002</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000003</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000004</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000005</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000006</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000007</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000008</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000009</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000010</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000011</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000012</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000013</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000014</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000015</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000016</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000017</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    <tr>
      <td>000018</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000019</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000020</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000021</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000022</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000023</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000024</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000025</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000026</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000027</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000028</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000029</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000030</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000031</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000032</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000033</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000034</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000035</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000036</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000037</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000038</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000039</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000040</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000041</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000042</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000043</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000044</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000045</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000046</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000047</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000048</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000049</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000050</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000051</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000052</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000053</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000054</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000055</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000056</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000057</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000058</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000059</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000060</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000061</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000062</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000063</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000064</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000065</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000066</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000067</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000068</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000069</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000070</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000071</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000072</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000073</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000074</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000075</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000076</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000077</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000078</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000079</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000080</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000081</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000082</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000083</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000084</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000085</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000086</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000087</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000088</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000089</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000090</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000091</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000092</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000093</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000094</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000095</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000096</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000097</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000098</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000099</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
    <tr>
      <td>000100</td>
      <td>John</td>
      <td>Doe</td>
      <td>usermail@gmail.com</td>
      <td>New York</td>
      <td>United State</td>
      <td>21520</td>
      <td>XYZ123</td>
    </tr>
  </tbody>
</table>

<script  src="function.js"></script>

</body>
</html>

Sekarang buat file CSS bernama style.css dan masukkan kode-kode ini di sini.

/* Code By RuangCoder */
* {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
}

body {
  font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

table {
  min-width: 100vw;
  width: auto;
  -webkit-box-flex: 1;
          flex: 1;
  display: grid;
  border-collapse: collapse;
  grid-template-columns: 
    minmax(150px, 1fr)
    minmax(150px, 1.67fr)
    minmax(150px, 1.67fr)
    minmax(150px, 1.67fr)
    minmax(150px, 3.33fr)
    minmax(150px, 1.67fr)
    minmax(150px, 3.33fr)
    minmax(150px, 1.67fr);
}

thead,
tbody,
tr {
  display: contents;
}

th,
td {
  padding: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: #5cb85c;
  text-align: left;
  font-weight: normal;
  font-size: 1.1rem;
  color: white;
  position: relative;
}

th:last-child {
  border: 0;
}

.resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  background: black;
  opacity: 0;
  width: 3px;
  cursor: col-resize;
}

.resize-handle:hover,
.header--being-resized .resize-handle {
  opacity: 0.5;
}

th:hover .resize-handle {
  opacity: 0.3;
}

td {
  padding-top: 10px;
  padding-bottom: 10px;
  color: #808080;
}

tr:nth-child(even) td {
  background: #f8f6ff;
}

Langkah terakhir, buat file JavaScript bernama function.js dan masukkan kodenya.

// Code By RuangCoder
const min = 150;
// The max (fr) values for grid-template-columns
const columnTypeToRatioMap = {
  numeric: 1,
  'text-short': 1.67,
  'text-long': 3.33 };


const table = document.querySelector('table');

                                          
const columns = [];
let headerBeingResized;

// The next three functions are mouse event callbacks

// Where the magic happens. I.e. when they're actually resizing
const onMouseMove = e => requestAnimationFrame(() => {
  console.log('onMouseMove');

  // Calculate the desired width
  horizontalScrollOffset = document.documentElement.scrollLeft;
  const width = horizontalScrollOffset + e.clientX - headerBeingResized.offsetLeft;

  // Update the column object with the new size value
  const column = columns.find(({ header }) => header === headerBeingResized);
  column.size = Math.max(min, width) + 'px'; // Enforce our minimum

  // For the other headers which don't have a set width, fix it to their computed width
  columns.forEach(column => {
    if (column.size.startsWith('minmax')) {// isn't fixed yet (it would be a pixel value otherwise)
      column.size = parseInt(column.header.clientWidth, 10) + 'px';
    }
  });

  /* 
        Update the column sizes
        Reminder: grid-template-columns sets the width for all columns in one value
      */
  table.style.gridTemplateColumns = columns.
  map(({ header, size }) => size).
  join(' ');
});

// Clean up event listeners, classes, etc.
const onMouseUp = () => {
  console.log('onMouseUp');

  window.removeEventListener('mousemove', onMouseMove);
  window.removeEventListener('mouseup', onMouseUp);
  headerBeingResized.classList.remove('header--being-resized');
  headerBeingResized = null;
};

// Get ready, they're about to resize
const initResize = ({ target }) => {
  console.log('initResize');

  headerBeingResized = target.parentNode;
  window.addEventListener('mousemove', onMouseMove);
  window.addEventListener('mouseup', onMouseUp);
  headerBeingResized.classList.add('header--being-resized');
};

// Let's populate that columns array and add listeners to the resize handles
document.querySelectorAll('th').forEach(header => {
  const max = columnTypeToRatioMap[header.dataset.type] + 'fr';
  columns.push({
    header,
    // The initial size value for grid-template-columns:
    size: `minmax(${min}px, ${max})` });

  header.querySelector('.resize-handle').addEventListener('mousedown', initResize);
});

Itu dia. Sekarang Sobat telah berhasil membuat Kolom Tabel Resizable dengan Fitur Seret dan Geser , Seret untuk Mengubah Ukuran Program Lebar . Jika Sobat memiliki keraguan atau komentar di bawah. Terima kasih telah mengunjungi

Anda mungkin menyukai postingan ini