Hi guys, today I will tell you how to remove the column reorder in JavaFX TableView.

First, lets see how a table view looks like.It has it header columns,columns and rows.In the example I created I also imported some demo data.

Here are 4 columns :

  1. Id
  2. First Name
  3. Last Name
  4. Phone Number

Each one of the columns has a fx:id which serves to identify that specific column.

See the official Oracle Documentation :

https://docs.oracle.com/javase/8/javafx/api/javafx/fxml/doc-files/introduction_to_fxml.html

Our fx:id’s for these columns are

  1. col_id
  2. col_firstname
  3. col_lastname
  4. col_phonenumber
  5. table -> (THIS IS THE FX:ID OF THE TABLE. We will need it later for our column reorder method)

So here is the table-view.fxml file I created :

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>

<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="592.0" prefWidth="686.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="table_controller">
   <children>
      <TableView layoutX="58.0" layoutY="14.0" prefHeight="540.0" prefWidth="571.0" styleClass="table" stylesheets="@../css/table-style.css">
        <columns>
          <TableColumn fx:id="col_id" prefWidth="114.0" text="Id" />
            <TableColumn fx:id="col_firstname" prefWidth="154.0" text="First Name" />
          <TableColumn fx:id="col_lastname" minWidth="0.0" prefWidth="143.0" text="Last Name" />
            <TableColumn fx:id="col_phonenumber" prefWidth="155.0" text="Phone Number" />
        </columns>
      </TableView>
   </children>
</AnchorPane>

 

And here is the css style :

.table{
   -fx-background-color: #b2b9c4;
   -fx-border-color: #525053; 
}
.table:focused{
    -fx-background-color: transparent;
}
.table .column-header-background{
    -fx-background-color: #e6553a;
}
.table .column-header-background .label{
    -fx-background-color: transparent;
    -fx-text-fill: white;
    -fx-font-size: 14px;
}
.table-column {
  -fx-alignment: center;
}
.table .column-header {
    -fx-background-color: transparent;
}
.table-row-cell{
    -fx-background-color: #E4E4E4;
    -fx-background-insets: 0, 0 0 1 0;
    -fx-padding: 0.0em;
    -fx-font-size:13px;
    /*-fx-border-color : red;*/
}
.table-row-cell:odd{
    -fx-background-color: white;
    -fx-background-insets: 0, 0 0 1 0;
    -fx-padding: 0.0em;
}

 

table

Now we want to remove the column reorder. Here is the method do that :

public static <S, T> void columnReorder(TableView table, TableColumn<S, T> ...columns) {
    table.getColumns().addListener(new ListChangeListener() {
          public boolean suspended;

          @Override
          public void onChanged(Change change) {
              change.next();
              if (change.wasReplaced() && !suspended) {
                  this.suspended = true;
                  table.getColumns().setAll(columns);
                  this.suspended = false;
              }
          }
      });
    }

 

  • we create our method.
  • it has 2 parameters, one for the table and the other for the table column.
  • for every column of that table, if we drag it and try to replace it, we change the value of our suspended variable.
  • set all the columns to the original place where they were.

If we would call this method, it would look something like this :

columnReorder(table,col_id,col_firstname,col_lastname,col_phonenumber);

NOTE : The order of the columns when we call the method, should be at the same order on the table view. (In order for the method to function correctly)

Hope this was helpful. Stay tuned for more.

1 COMMENT

  1. I’m not sure exactly why but this website is loading extremely slow for me.
    Is anyone else having this issue or is it a issue on my
    end? I’ll check back later and see if the problem still exists.

LEAVE A REPLY

Please enter your comment!
Please enter your name here