Membuat Custom JTable

Pasti semua yang udah pengalaman buat aplikasi Destop atau Swing pernah menggunakan JTable. Mmmmm… tau sendirikan bagaimana susahnya ngatur tampilan datanya? Atau mungkin yang baru belajar Java dan coba-coba pake JTable pasti langsung kecewa. Apalagi kalo mereka yang udah terbiasa dengan Visual basic pasti lebih kecewa lagi, karena Table di VB jauh lebih mudah digunakan.

Pada JTable swing kita akan kesulitan mengatur tampilan seperti untuk perataan teksnya (KIRI, TENGAH, KANAN). Atau mungkin kalo kebetulan data berupa currency (uang) yang butuh pemisah ribuan di JTable agak susah kita lakukan😦

jtable.png

Nah pada tulisan saya kali ini akan mencoba menunjukan bagaimana membuat Custome JTable yang dapat kita format datanya (Rata kiri/kanan/tengah) dan format untuk menampilkan data currency.

JTable cell dirender oleh cell renderer yang merupakan class-class yang mengimplementasikan interface TableCellRenderer. Interface ini mendefinisikan sebuah method yang akan mengembalikan referensi komponen yang akan melakukan operasi render/drawing. Nah untuk membuat custome renderer tentunya kita harus mengimplement interface ini atau mengextends class DefaultTableCellRenderer.

Membuat Custom Render
Berikut ini adalah class customer renderer untuk Number :

<br />
public class NumberRenderer extends DefaultTableCellRenderer{<br />
public NumberRenderer() {<br />
super();<br />
setHorizontalAlignment(SwingConstants.RIGHT);<br />
}<br />
public void setValue(Object value) {<br />
if ((value != null) &amp;&amp; (value instanceof Number)) {<br />
Number numberValue = (Number) value;<br />
NumberFormat formatter = NumberFormat.getIntegerInstance();<br />
value = formatter.format(numberValue.intValue());<br />
}<br />
super.setValue(value);<br />
}<br />
}<br />

Selanjutnya kita buat Custome renderer untuk Currency

<br />
public class CurrencyRenderer extends DefaultTableCellRenderer{<br />
public CurrencyRenderer() {<br />
super();<br />
setHorizontalAlignment(SwingConstants.RIGHT);<br />
}<br />
public void setValue(Object value) {<br />
if ((value != null) &amp;&amp; (value instanceof Number)) {<br />
Number numberValue = (Number) value;<br />
NumberFormat formatter = NumberFormat.getNumberInstance();<br />
value = formatter.format(numberValue.doubleValue());<br />
}<br />
super.setValue(value);<br />
}<br />
}<br />

Berikutnya Custome renderer untuk Center dan Right align

<br />
public class CenterRenderer extends DefaultTableCellRenderer{<br />
public CenterRenderer() {<br />
super();<br />
setHorizontalAlignment(SwingConstants.CENTER);<br />
}<br />
}</p>
<p>public class RightRenderer extends DefaultTableCellRenderer{<br />
public RightRenderer() {<br />
super();<br />
setHorizontalAlignment(SwingConstants.RIGHT);<br />
}<br />
}<br />

Nah setelah semua custome renderernya selesai, tugas selanjutnya kita buatkan Custome JTable (extends JTable) yang akan menggunakan class-class Custome renderer di atas.

</p>
<p>public class CustomeTable extends JTable {</p>
<p>private DefaultTableModel model;<br />
private TableColumnModel tcm;<br />
private TableColumn tc;<br />
public static int CURRENCY = 0;<br />
public static int NUMBER = 1;<br />
public static int RIGHT = 2;<br />
public static int CENTER = 3;<br />
public static int DATE = 4;</p>
<p>/** Creates a new instance of CustomeTable */<br />
public CustomeTable(String title[], Object data[][]) {<br />
model = new DefaultTableModel(data, title);<br />
this.setModel(model);<br />
tcm = this.getColumnModel();</p>
<p>}</p>
<p>/**<br />
* Memformat column tertentu &lt;br&gt;<br />
* @param column nomor column dimulai dari 0<br />
* @param format 0=currency format, 1=number format, 2=rata kanan, 3=rata kiri<br />
*/<br />
@SuppressWarnings(&quot;empty-statement&quot;)<br />
public void setColumnFormat(int column, int format) {<br />
tc = tcm.getColumn(column);<br />
switch (format) {<br />
case 0:<br />
tc.setCellRenderer(new CurrencyRenderer());<br />
break;<br />
case 1:<br />
tc.setCellRenderer(new NumberRenderer());<br />
break;<br />
case 2:<br />
tc.setCellRenderer(new RightRenderer());<br />
break;<br />
case 3:<br />
tc.setCellRenderer(new CenterRenderer());<br />
break;<br />
case 4:<br />
tc.setCellRenderer(new DateRenderer());<br />
break;<br />
}<br />
;</p>
<p>}</p>
<p>/**<br />
* Mengatur lebar column tertentu<br />
* @param column nomor column dimulai dari 0<br />
* @param width lebar column yang diinginkan<br />
*/<br />
public void setColumnWidth(int column, int width) {<br />
tc = tcm.getColumn(column);<br />
tc.setPreferredWidth(width);<br />
}</p>
<p>/**<br />
* Mengaktirfkan Table agar bisa dishortir<br />
*/<br />
public void activateShorter() {<br />
RowSorter&lt;TableModel&gt; sorter = new TableRowSorter&lt;TableModel&gt;(model);<br />
this.setRowSorter(sorter);<br />
}<br />
}</p>
<p>

OK sekarang saatnya kita coba gunakan class CustomerTable ini dalam aplikasi seperti di awal tulisan ini.

</p>
<p>public class Tester extends javax.swing.JFrame {</p>
<p>/** Creates new form Tester */<br />
public Tester() {<br />
initComponents();<br />
Object data[][] = {<br />
{&quot;1&quot;, &quot;Bambang Pamungkas&quot;, &quot;Salatiga&quot;, 2000000000},<br />
{&quot;2&quot;, &quot;Ronaldo&quot;, &quot;Brazil&quot;, 1000000000},<br />
{&quot;3&quot;, &quot;Kaka&quot;, &quot;Brazil&quot;, 230000000},<br />
{&quot;4&quot;, &quot;Slamet&quot;, &quot;Solo&quot;, 2000001}<br />
};<br />
String title[] = {&quot;No.&quot;,&quot;Nama&quot;,&quot;Alamat&quot;,&quot;Pendapatan&quot;};</p>
<p>this.table = new CustomeTable(title, data);</p>
<p>// mengubah lebar column<br />
table.setColumnWidth(0,10);</p>
<p>//rata tengah<br />
table.setColumnFormat(2, CustomeTable.CENTER);</p>
<p>//currency format</p>
<p>table.setColumnFormat(3, CustomeTable.CURRENCY);</p>
<p>// table dapat dishort<br />
table.activateShorter();</p>
<p>this.scroll.setViewportView(table);</p>
<p>}<br />
CustomeTable table;</p>
<p>//code-code program yang lain ....</p>
<p>}</p>
<p>

custome-table.png

Perhatikan perubahan yang terjadi😀 sekarang kita memiliki Table yang lebih baik karena menampilkan format data sesuai dengan yang kita inginkan.

Maaf kalo source codenya berantakan..

happy coding😀

33 Responses to Membuat Custom JTable

  1. astawan says:

    kalau saya bukannya kecewa, tapi kecewa banget.. beda banget dengan datagrid punya vb.
    he.. he.., tapi ya namanya juga barang beda, tentu beda juga design nya. jadi butuh kerja keras.
    dan menurut saya, kesulitan ini harusnya menjadi PR nya Sun, begitu juga dengan binding data.

  2. Hendro Steven says:

    yap betul sekali.. tapi kita juga harus terima kasih ke SUN udah buatin barang gratis ini walaupun belum sempurna🙂 kabar baiknya adalah bahwa release Java selanjutnya Swing dan Binding akan menjadi salah satu perhatian dari SUN
    🙂

  3. agianto says:

    setelah saya kunjungin situs ini saya tertarik dengan pembahsan2 terutama pemrograman java.

    Ingin saya tanyakan, saya kan senang dgn pemrograman java, tp saya susah memahaminya, ada dak tips & trik untuk menguasai java dgn cepat. katanya gampang pake NETBEANS.
    atas jawabanya thank’s

  4. Hendro Steven says:

    Halo Agianto😀
    Betul sekali! belajar Java menyenangkan dan kalo sudah dikuasai akan terasa produktifitas kita meningkat🙂
    Tapi tentunya namanya belajar gak mungkin langsung bisa. Kita harus investasi waktu😀
    Untuk menguasai Java yang pertama ya kamu harus pelajari sintaks bahasanya misalnya loop, kondisi, tipe data, dan lain-lainnya. Setelah itu pelajari tentang konsep OOP(Object Oriented Programming). Nah OOP ini nih yang agak sulit🙂 apalagi kalo anda sudah terbiasa dengan bahasa pemrograman struktural atau event-driven seperti Visual Basic. Java tanpa OOP tidak apa-apanya😀
    Setelah menguasai dasar Java+OOP baru anda terserah mau pilih Java yang Enterprise atau yang Mobile.
    Netbeans adalah salah satu IDE untuk Java yang memang gampang penggunaannya. Selain Netbeans ada juga Eclipse yang cukup populer. Saran saya kalo anda baru belajar Java, khususnya OOP sebaiknya pakai editor standard saja. Bahkan jika perlu pake Notepad dan compile pake console/dos promt.

  5. FARA says:

    Pak Hendro saya mau tanya mengenai java,semisalkan program diatas menggunakan database access dan pada saat saya tekan enter pada cell pertama (no(anggap ini primary key)) dan saya ketik 2 pada cell pertama kemudian cell kedua (nama) tampil(fungsi untuk mencari records),dan kemudian cursor focus di cell ke tiga untuk mengisi data lagi itu source code nya bagaimana ya pak,cuma saya mau buat aplikasi desktop seperti contoh di bawah ini :

    ================================
    product id Descp Price qty total
    ================================
    123 Kopi 200 2 400
    ================================

    tolong dong pak saya lagi belajar java,nyari-nyari kagak dapet-dapet….?
    tolong dong kirimi contoh source code nya,tolong ya kirimi via email…please…

  6. Reza MD says:

    Mo tanya donk.
    Saya develop applikasi dengan jtable yang berfungsi menampilkan data dari DB.
    Gmn ya caranya setiap kali ada perubahan data pada DB, jtable akan selalu menampilkan data terbaru dari DB(jika data pada db berubah).
    Sy dah buat tablemodel yang custom, tetapi cuma bisa sebaliknya, yaitu jika data pada jtable berubah maka data pada DB berubah.
    thnks…

  7. Hendro Steven says:

    Hallo Reza🙂
    mmm.. sepengetahuan saya tidak ada cara mengupdate isi dari sebuah table selain kita baca lagi datanya dari database kemudian update tablenya. Mungkin supaya isi dari table tetap up to date ya.. aplikasi harus sering-sering baca lagi data dari table misalnya kita kasih waktu setiap 10 detik. Untuk kebutuhan ini bisa baca di http://www.ibm.com/developerworks/web/library/j-schedule.html
    Tapi mungkin aplikasi akan sangat lambat karena harus sering membaca table, apalagi kalau recordnya buaaanyak😦

    semoga membantu..

  8. ulo says:

    Bagaimana menyimpan data dari JTable ke database. saya menggunakan Netbeans.

    Thank’s
    ulo

  9. Kusno says:

    Mas, saya ada 2 pertanyaan :
    1. Bagaimana cara men-validasi cell jTable agar yang diisi hanya berupa numerik aja?

    2. Misalnya cell value kita berupa currency (85,000). Bagaimana kalau user enter di cell itu formatnya berubah jadi 85000

    Thanks

  10. Rosevelt says:

    Mas Hendro saya ada pertanyaan :
    Setalah data ditampilkan di JTable, bagaimana caranya user bisa memilih dengan cara double click mouse atau meng-enter di row yang terpilih, kemudian isi row tersebut pindah ke JText yang tersedia.

    Thanks

  11. Ghe says:

    sama kaya “Rosevelt” mas, gimana ya caranya?
    punya saya jtextfield nya di class yg berbeda.

  12. ayif says:

    mas boleh minta contoh untuk nge display data dari database ke objek table…
    dan contoh untuk melihat pemasukan data yang kita masukan via text field kedalam database dan d disply kedalam objek table

  13. marina says:

    mas hendro saya ada pertanyaan nhe ttg JTable..
    yang di atas khan datanya permanen tuch, klo buat Jtable data dari user n pake array gimana caranya??
    bingung nhe biz baru nyoba belajar java nhe!!
    thanx a lot b4..

  14. Hendro Steven says:

    halo marina,
    contoh di atas kan udah pake array🙂
    tapi memang datanya masih statik belum dinamik.
    Yang dinamik misalnya dibaca dari database atau yang diinput oleh user. Nah caranya baca aja data dari tabel (liat tutorial saya tentang database) trus kalo dari input juga tinggal baca aja yang diinput user. Trus datanya dikonversi jadi array dan kalo udah jadi array tinggal ditampilin aja datanya di table seperti di atas.

  15. Rendra says:

    HEBAT!!!

    Tapi aku ngga pake buat new class lagi. Repot. Langsung aja pake DefaultTableCellRenderer nya di instantiate. Dari dulu aku cari2 ini fitur. Ketemu di sini. Bule2 kok jarang ngebahas ini ya.

    Boleh kenalan ngga nih?

    Senang menambah teman yang jago Java. Saya di rendrabasuki@gmail.com

    Salam Kenal
    Rendra

  16. Hendro Steven says:

    Hallo Rendra.. salam kenal juga🙂

  17. Taufan says:

    wah keren juga.. xo bsa saya diberi tau bagaimana menyimpan data dari jtable langsung ke database.. yang saya gunakan di sini mysql..

  18. Hendro Steven says:

    halo Taufan, pelajari Beans Binding😉

  19. Fitriadi says:

    Mungkin cara diatas terlalu sulit yang baru belajar java.Cara simpelnya dapat dilihat disini Lihat Cara Simpel Disini

  20. Adit says:

    Untuk DateRenderer nya mana mas ?????

  21. hida2000 says:

    Salam kenal mas Hendro, kenapa kq class Currency dgn class Number sama???Trus dah saya coba class Currency, kq td kyk contoh diatas y???

  22. hida2000 says:

    Udah bisa kq mas Hendro

  23. pituin3rut says:

    coba baca java swing second edition untuk manipulasi jtable, termasuk menampilkan tanggal atau sekedar menampilkan icon pada cell renderer.

  24. fny says:

    mas, klo saya mau buat kolom yg ada di pojok kanan kolom itu ada kek button, yg akan buka jinternalframe baru. tapi 1 kotak itu, isinya bukan jbutton doanx. karna nanti akan mengambil nilai dari jinternalframe yg baru itu, lalu nilainya muncul di kotak. ada contoh pemakaiannya ga mas? atau klo harus googling, kira2 keywordnya apa ya? karna saya uda cari2 masi belum ketemu. thx.

  25. Hendro Steven says:

    bingung pertanyaanya😦

  26. fny says:

    bingung ya mas. hehe.. gmn ya. hmm..jd di JTable yg saya buat, saya mau 1 kolom itu, isi valuenya bukan diketik biasa tp ketika diklik ke kolom itu akan buka JInternalFrame baru ambil value dari JInternalFrame itu.

  27. parah says:

    parah dah nnya kga adajawaban,, parah

  28. Hendro Steven says:

    pertanyaannya apa??

  29. Hendro Steven says:

    cari event onClick dijTablenya trus dievent itu manggil InternalFramenya🙂

  30. asriel says:

    mas bisa dikirim ke email saya gagh source code nya????trimakasih.

    dieazriel@gmail.com

  31. asriel says:

    mas bisa tolong dikirim ke email gagh source code projectnya??trimakasih…semoga sukses selalu.

  32. asriel says:

    mas bisa dikirim ke email saya gagh projectnya???agy butuh banget mas buat belajar…trimakasih.
    dieazriel@yahoo.com

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: