Updated: Displaying a jTable inside another jTable // JTable cellRenderer

After some users asking for answers in my past post, I updated the code of the embedded JTable to make it less buggy and more stable.

This is the “new” code:

<span style="color: #3f7f59;">/* We initialize the Objects where we'll store our data */</span>
<span style="color: #3f7f59;">/* First an array Object which will be our main table */
</span> Object[][] data = null;
<span style="color: #3f7f59;">/* We create an Array String to hold the name of the main table columns</span>
<span style="color: #3f7f59;">In this example case we are going to store a contact name,</span>
<span style="color: #3f7f59;">his email address(es) and his phone numer(s)</span>
<span style="color: #3f7f59;">We're also going to store the creation date.*/
</span>
String[] columns = {<span style="color: #2a00ff;">"Name"</span>, <span style="color: #2a00ff;">"E-Mail"</span>,<span style="color: #2a00ff;">"Phone"</span>,<span style="color: #2a00ff;">"Creation Date"</span>};

/* First thing is  to populate our data object with some example values*/
    <span style="color: #7f0055; font-weight: bold;">public</span> void populateData(){
        <span style="color: #3f7f59;">/* Two contacts*/</span>
        data = <span style="color: #7f0055; font-weight: bold;">new</span> <span style="color: #7f0055; font-weight: bold;">Object</span>[3][columns.length];
        data[0][0] = <span style="color: #2a00ff;">"Peter"</span>;
        <span style="color: #7f0055; font-weight: bold;">String</span>[] emails = {<span style="color: #2a00ff;">"peter@yahoo.com"</span>, <span style="color: #2a00ff;">"strange@name.com"</span>};
        data[0][1] = emails;
        <span style="color: #7f0055; font-weight: bold;">String</span>[] phones = {<span style="color: #2a00ff;">"555 35 25 65"</span> , <span style="color: #2a00ff;">"555 35 24 63"</span>};
        data[0][2] = phones;
        data[0][3] = <span style="color: #7f0055; font-weight: bold;">new</span> <span style="color: #7f0055; font-weight: bold;">Date</span>();
        data[1][0] = <span style="color: #2a00ff;">"Jackson"</span>;
        data[1][1] = <span style="color: #2a00ff;">"Jack@hotmail.com"</span>;
        <span style="color: #7f0055; font-weight: bold;">String</span>[] phones2 = {<span style="color: #2a00ff;">"555 35 24 33"</span> , <span style="color: #2a00ff;">"555 11 88 88"</span>, <span style="color: #2a00ff;">"332 55 25 34"</span>};
        data[1][2] = phones2;
        data[1][3] = <span style="color: #7f0055; font-weight: bold;">new</span> <span style="color: #7f0055; font-weight: bold;">Date</span>();
        data[2][0] = <span style="color: #2a00ff;">"Robert"</span>;
        data[2][1] = <span style="color: #2a00ff;">"rob@hotmail.com"</span>;
        data[2][2] = <span style="color: #2a00ff;">"555 28 95 81"</span>;
        data[2][3] = <span style="color: #7f0055; font-weight: bold;">new</span> <span style="color: #7f0055; font-weight: bold;">Date</span>();
        <span style="color: #3f7f59;">/* AS you can see, we've stored two contacts one with two e-mail</span>
<span style="color: #3f7f59;">         accounts and two phone numbers, and another member with three phone</span>
<span style="color: #3f7f59;">         numbers*/</span>
    }
    <span style="color: #3f7f59;">/* Next we create our table models */</span>
    <span style="color: #7f0055; font-weight: bold;">public</span> void createModel(){
        <span style="color: #3f7f59;">/* First we create the main model</span>
<span style="color: #3f7f59;">         We overide the AbstractTableModel necessary methods*/</span>
        AbstractTableModel  modelo = <span style="color: #7f0055; font-weight: bold;">new</span> AbstractTableModel() {
          <span style="color: #7f0055; font-weight: bold;">public</span> <span style="color: #7f0055; font-weight: bold;">String</span> getColumnName(<span style="color: #7f0055; font-weight: bold;">int</span> col) {
                <span style="color: #7f0055; font-weight: bold;">return</span> columns[col].toString();
            }
          <span style="color: #7f0055; font-weight: bold;">public</span> <span style="color: #7f0055; font-weight: bold;">Class</span> getColumnClass(<span style="color: #7f0055; font-weight: bold;">int</span> col) {
              <span style="color: #7f0055; font-weight: bold;">if</span>(getRowCount() &lt;1)<span style="color: #7f0055; font-weight: bold;">return</span> <span style="color: #7f0055; font-weight: bold;">null</span>;
            <span style="color: #7f0055; font-weight: bold;">return</span> data[0][col].getClass();
          }
          <span style="color: #7f0055; font-weight: bold;">public</span> <span style="color: #7f0055; font-weight: bold;">int</span> getRowCount() { <span style="color: #7f0055; font-weight: bold;">return</span> data.length; }
          <span style="color: #7f0055; font-weight: bold;">public</span> <span style="color: #7f0055; font-weight: bold;">int</span> getColumnCount() { <span style="color: #7f0055; font-weight: bold;">return</span> columns.length;}
          <span style="color: #7f0055; font-weight: bold;">public</span> <span style="color: #7f0055; font-weight: bold;">Object</span> getValueAt(<span style="color: #7f0055; font-weight: bold;">int</span> row, <span style="color: #7f0055; font-weight: bold;">int</span> col) {
                <span style="color: #7f0055; font-weight: bold;">return</span> data[row][col];
          }
          <span style="color: #7f0055; font-weight: bold;">public</span> <span style="color: #7f0055; font-weight: bold;">boolean</span> isCellEditable(<span style="color: #7f0055; font-weight: bold;">int</span> row, <span style="color: #7f0055; font-weight: bold;">int</span> col){ <span style="color: #7f0055; font-weight: bold;">return</span> <span style="color: #7f0055; font-weight: bold;">true</span>; }
          <span style="color: #7f0055; font-weight: bold;">public</span> <span style="color: #7f0055; font-weight: bold;">void</span> setValueAt(<span style="color: #7f0055; font-weight: bold;">Object</span> value, <span style="color: #7f0055; font-weight: bold;">int</span> row, <span style="color: #7f0055; font-weight: bold;">int</span> col) {
            data[row][col] =  value;
            fireTableCellUpdated(row, col);
          }};
          <span style="color: #3f7f59;">/* We apply the model to the main jTable */</span>
          jTableData.setModel(modelo);
          <span style="color: #3f7f59;">/* We create a cell Renderer to display the data of the multivalue</span>
<span style="color: #3f7f59;">           fields*/</span>
          TableCellRenderer jTableCellRenderer = <span style="color: #7f0055; font-weight: bold;">new</span> TableCellRenderer() {
              <span style="color: #3f7f59;">/* Magic Happens */</span>
              <span style="color: #7f0055; font-weight: bold;">public</span> <span style="color: #7f0055; font-weight: bold;">Component</span> getTableCellRendererComponent(JTable table,
                      <span style="color: #7f0055; font-weight: bold;">Object</span> value, <span style="color: #7f0055; font-weight: bold;">boolean</span> isSelected, <span style="color: #7f0055; font-weight: bold;">boolean</span> hasFocus,
                      <span style="color: #7f0055; font-weight: bold;">int</span> row, <span style="color: #7f0055; font-weight: bold;">int</span> column) {
                  <span style="color: #3f7f59;">/* If what we're displaying isn't an array of values we</span>
<span style="color: #3f7f59;">                   return the normal renderer*/</span>
                    <span style="color: #7f0055; font-weight: bold;">if</span>(!value.getClass().isArray()){
                       <span style="color: #7f0055; font-weight: bold;">return</span> table.getDefaultRenderer( 
                               value.getClass()).getTableCellRendererComponent(
                               table, value, isSelected, hasFocus,row, column);
                    }
                    <span style="color: #7f0055; font-weight: bold;">else</span>{
                        <span style="color: #7f0055; font-weight: bold;">final</span> <span style="color: #7f0055; font-weight: bold;">Object</span>[] passed = (<span style="color: #7f0055; font-weight: bold;">Object</span>[])value;             
                        <span style="color: #3f7f59;">/* We create the table that will hold the multivalue</span>
<span style="color: #3f7f59;">                         *fields and that will be embedded in the main table */</span>
                        JTable embedded = <span style="color: #7f0055; font-weight: bold;">new</span> JTable(
                            <span style="color: #7f0055; font-weight: bold;">new</span> AbstractTableModel() {
                                <span style="color: #7f0055; font-weight: bold;">public</span> <span style="color: #7f0055; font-weight: bold;">int</span> getColumnCount() {
                                    <span style="color: #7f0055; font-weight: bold;">return</span> 1;
                                }
                                <span style="color: #7f0055; font-weight: bold;">public</span> <span style="color: #7f0055; font-weight: bold;">int</span> getRowCount() {
                                    <span style="color: #7f0055; font-weight: bold;">return</span> passed.length;
                                }
                                <span style="color: #7f0055; font-weight: bold;">public</span> <span style="color: #7f0055; font-weight: bold;">Object</span> getValueAt(<span style="color: #7f0055; font-weight: bold;">int</span> rowIndex, <span style="color: #7f0055; font-weight: bold;">int</span> columnIndex) {
                                    <span style="color: #7f0055; font-weight: bold;">return</span> passed[rowIndex];
                                }
                                <span style="color: #7f0055; font-weight: bold;">public</span> <span style="color: #7f0055; font-weight: bold;">boolean</span> isCellEditable(<span style="color: #7f0055; font-weight: bold;">int</span> row, <span style="color: #7f0055; font-weight: bold;">int</span> col){ <span style="color: #7f0055; font-weight: bold;">return</span> <span style="color: #7f0055; font-weight: bold;">true</span>; }
                        });
                         
                        <span style="color: #7f0055; font-weight: bold;">if</span>(isSelected){
                            embedded.setBackground(jTableData.getSelectionBackground());
                            embedded.setForeground(jTableData.getSelectionForeground());
                        }
                        <span style="color: #7f0055; font-weight: bold;">if</span>(hasFocus){
                            embedded.setRowSelectionInterval(0,1);
                        }
                        <span style="color: #3f7f59;">/* If this is what you plan to enable mouseClick detection,</span>
<span style="color: #3f7f59;">                            in your table, IT WONT WORK. Have a look at TableCellEditor.*/</span>
                        embedded.addMouseListener(<span style="color: #7f0055; font-weight: bold;">new</span> MouseAdapter() {
                            <span style="color: #7f0055; font-weight: bold;">public</span> <span style="color: #7f0055; font-weight: bold;">void</span> mouseClicked(java.awt.event.<span style="color: #7f0055; font-weight: bold;">MouseEvent</span> evt) {
                                <span style="color: #7f0055; font-weight: bold;">System</span>.out.println(<span style="color: #2a00ff;">"PEPE"</span>);
                            }
                        });
                        
                        setPreferredSize(embedded.getPreferredSize());
                         <span style="color: #7f0055; font-weight: bold;">if</span>(getPreferredSize().height != table.getRowHeight(row))
                            {
                                table.setRowHeight(row, getPreferredSize().height);
                            }

                        <span style="color: #7f0055; font-weight: bold;">return</span> embedded;
                    }
              }
          };
          <span style="color: #3f7f59;">/* Finally we apply the new cellRenderer to the whole table */</span>
          TableColumnModel tcm = jTableData.getColumnModel();
          <span style="color: #7f0055; font-weight: bold;">for</span>(<span style="color: #7f0055; font-weight: bold;">int</span> it = 0; it &lt; tcm.getColumnCount(); it++){
              tcm.getColumn(it).setCellRenderer(jTableCellRenderer);
             <span style="color: #3f7f59;">// tcm.getColumn(it).setCellEditor(jTableCellEditor);</span>
          }
          <span style="color: #3f7f59;">/*Note: if we need to edit the values inside the embedded jtable</span>
<span style="color: #3f7f59;">           * we will need to create a TableCellEditor too. */</span>
          
    }

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

/* We initialize the Objects where we'll store our data */

/* First an array Object which will be our main table */

Object[][] data = null;

/* We create an Array String to hold the name of the main table columns

In this example case we are going to store a contact name,

his email address(es) and his phone numer(s)

We're also going to store the creation date.*/

String[] columns = {"Name", "E-Mail","Phone","Creation Date"};

/* First thing is to populate our data object with some example values*/

public void populateData(){

/* Two contacts*/

data = new Object[3][columns.length];

data[0][0] = "Peter";

String[] emails = {"peter@yahoo.com", "strange@name.com"};

data[0][1] = emails;

String[] phones = {"555 35 25 65" , "555 35 24 63"};

data[0][2] = phones;

data[0][3] = new Date();

data[1][0] = "Jackson";

data[1][1] = "Jack@hotmail.com";

String[] phones2 = {"555 35 24 33" , "555 11 88 88", "332 55 25 34"};

data[1][2] = phones2;

data[1][3] = new Date();

data[2][0] = "Robert";

data[2][1] = "rob@hotmail.com";

data[2][2] = "555 28 95 81";

data[2][3] = new Date();

/* AS you can see, we've stored two contacts one with two e-mail

accounts and two phone numbers, and another member with three phone

numbers*/

}

/* Next we create our table models */

public void createModel(){

/* First we create the main model

We overide the AbstractTableModel necessary methods*/

AbstractTableModel modelo = new AbstractTableModel() {

public String getColumnName(int col) {

return columns[col].toString();

}

public Class getColumnClass(int col) {

if(getRowCount() <1)return null;

return data[0][col].getClass();

}

public int getRowCount() { return data.length; }

public int getColumnCount() { return columns.length;}

public Object getValueAt(int row, int col) {

return data[row][col];

}

public boolean isCellEditable(int row, int col){ return true; }

public void setValueAt(Object value, int row, int col) {

data[row][col] = value;

fireTableCellUpdated(row, col);

}};

/* We apply the model to the main jTable */

jTableData.setModel(modelo);

/* We create a cell Renderer to display the data of the multivalue

fields*/

TableCellRenderer jTableCellRenderer = new TableCellRenderer() {

/* Magic Happens */

public Component getTableCellRendererComponent(JTable table,

Object value, boolean isSelected, boolean hasFocus,

int row, int column) {

/* If what we're displaying isn't an array of values we

return the normal renderer*/

if(!value.getClass().isArray()){

return table.getDefaultRenderer(

value.getClass()).getTableCellRendererComponent(

table, value, isSelected, hasFocus,row, column);

}

else{

final Object[] passed = (Object[])value;

/* We create the table that will hold the multivalue

*fields and that will be embedded in the main table */

JTable embedded = new JTable(

new AbstractTableModel() {

public int getColumnCount() {

return 1;

}

public int getRowCount() {

return passed.length;

}

public Object getValueAt(int rowIndex, int columnIndex) {

return passed[rowIndex];

}

});

if(isSelected){

embedded.setBackground(jTableData.getSelectionBackground());

embedded.setForeground(jTableData.getSelectionForeground());

}

if(hasFocus){

embedded.setRowSelectionInterval(0,1);

}

/* If this is what you plan to enable mouseClick detection,

in your table, IT WONT WORK. Have a look at TableCellEditor.*/

embedded.addMouseListener(new MouseAdapter() {

public void mouseClicked(java.awt.event.MouseEvent evt) {

System.out.println("PEPE");

}

});

setPreferredSize(embedded.getPreferredSize());

if(getPreferredSize().height != table.getRowHeight(row))

{

table.setRowHeight(row, getPreferredSize().height);

}

return embedded;

}

};

/* Finally we apply the new cellRenderer to the whole table */

TableColumnModel tcm = jTableData.getColumnModel();

for(int it = 0; it < tcm.getColumnCount(); it++){

tcm.getColumn(it).setCellRenderer(jTableCellRenderer);

// tcm.getColumn(it).setCellEditor(jTableCellEditor);

}

/*Note: if we need to edit the values inside the embedded jtable

* we will need to create a TableCellEditor too. */

}

In the above image you can see the result.

5 thoughts on “Updated: Displaying a jTable inside another jTable // JTable cellRenderer”

Reply ↓

Chris 2007-08-08 at 21:28

Hey Marc — two things. First, you’ve got some rogue HTML leaking into your second dotted-line-box in the code.

Second, you CAN get events to the inner JTable. I keep the JTables around, and if the embedded.MouseListener sees it’s been clicked on a cell with a JTable, it does a ‘dispatchEvent’ on the sub-table handing it the event.

Now, if I could just get highlighting/selection to work properly…
Reply ↓

Marc Nuri 2007-08-16 at 09:27

Hi Chris, first of all thanks for your response.

What you say its true, you can make your upper table dispatch events to your subsequent jTables. But although you can achieve what you want (partly) its NOT a recommended way of doing things.

TableCellRenderer doesn’t build a component for each cell in your JTable, that would be very memmory consuming. So if you want to dispatch events to the inner JTables, you must do as you say “keep them around”. The correct/elegant/performance way of doing this is implementing your own TableCellEditor.

Further reference can be found in this link:

Sun Bug Database 4136681
Reply ↓

Harish Sohane 2007-12-27 at 11:45

kool…

but i am facing one proble ..

if i put JTable inside JTable cell….it’s not showing whole table i mean it’s not showing inside table’s column how to do that….plz help me if possible….
Reply ↓

Cocu 2012-10-30 at 06:53

hey, i implemented this code and noticed that when you populate the data object, the height of the row is determinated by the last String[] and not by the larger one… how do you fix this?

besides that, i was having trouble trying to read that data from a list and asiging it to the String[] or to the Data[][]… any ideas?
Reply ↓

terry 2013-07-08 at 19:45

Can you share your source code as zip file