The java documentation of those classes are very important for you when developing the application.

Let’s start here. First the thing what I’m going to show you is about the Cell which is the intersection of any row and column. Before going to TableCell , you can go for the TableColumn which helps to take control over the TableCell with cellFactory. The TableColumn is the column of any table which defines the new column with it’s defined named. Let’s make four columns our Test. I’m running these codes with compatible to JavaFX 2.0 build 45. So it might varies on future or on previous version of javafx.
TableColumn Defination

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

TableColumn albumArt=newTableColumn("Album Art");

albumArt.setCellValueFactory(newPropertyValueFactory("album"));

albumArt.setPrefWidth(200);

TableColumn title=newTableColumn("Title");

title.setCellValueFactory(newPropertyValueFactory("title"));

title.setPrefWidth(120);

TableColumn artist=newTableColumn("Artist");

artist.setCellValueFactory(newPropertyValueFactory("artist"));

artist.setPrefWidth(120);

TableColumn rating=newTableColumn("Rating");

rating.setCellValueFactory(newPropertyValueFactory("rating"));

rating.setPrefWidth(120);

There is nothing hard. It’s all simple Object with setMethods. The PropertyValueFactory might be new for you. We are using the propertyvalueFactory with “album”, “title” , “artist” , “rating” because these properties are going to be implemented in our Object Class (Music.java).

Music.java

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

/**

*

* @author Narayan

*/

publicclassMusic{

//Properties

privateSimpleStringProperty artist=newSimpleStringProperty();

privateObjectProperty albumArt=newSimpleObjectProperty();

privateStringProperty title=newSimpleStringProperty();

privateIntegerProperty rating=newSimpleIntegerProperty();

publicMusic(Stringartist,Album album,Stringtitle,Integerrating){

setArtist(artist);

setAlbum(album);

setTitle(title);

setRating(rating);

}

//For Artist

publicvoidsetArtist(Stringart){

artist.set(art);

}

publicStringgetArtist(){

returnartist.get();

}

publicStringProperty artistProperty(){

returnartist;

}

//For Album

publicvoidsetAlbum(Album alb){

albumArt.set(alb);

}

publicObjectgetAlbum(){

returnalbumArt.get();

}

publicObjectProperty albumProperty(){

returnalbumArt;

}

//For Title

publicvoidsetTitle(Stringtit){

title.set(tit);

}

publicStringgetTitle(){

returntitle.get();

}

publicStringProperty titleProperty(){

returntitle;

}

//For Rating

publicvoidsetRating(intrat){

rating.set(rat);

}

publicIntegergetRating(){

returnrating.get();

}

publicIntegerProperty ratingProperty(){

returnrating;

}

}

In above Music you may see Album Class which is another Class which defines brief of any album. Currently I’m just making these things easier for sample.The Album class is given below.Album.java

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

/**

*

* @author Narayan

*/

publicclassAlbum{

//Attributes

privateStringfilename;

privateStringartist;

privateStringalbum;

publicAlbum(Stringfilename,Stringartist,Stringalbum){

this.filename=filename;

this.artist=artist;

this.album=album;

}

//Accessor Methods

publicStringgetAlbum(){

returnalbum;

}

publicvoidsetAlbum(Stringalbum){

this.album=album;

}

publicStringgetArtist(){

returnartist;

}

publicvoidsetArtist(Stringartist){

this.artist=artist;

}

publicStringgetFilename(){

returnfilename;

}

publicvoidsetFilename(Stringfilename){

this.filename=filename;

}

}

We ‘ll be using Music class as the Generic Class which will be used in the TableView. So to make our TableView Object friendly we need to make the TableView like this:

1

2

TableView&lt;Music&gt;table=newTableView&lt;Music&gt;();

table.setTableMenuButtonVisible(true);

CellFactory

I know you guys might be eager to make your TableCell more customize so to make cell more customizable there is the setCellFactory in Table Column. This function helps to set you own cellFactory. We’ll be customizing only two column’s cell. They are Rating and Album Art. Let’s do these stuffs one by one.

In above cell factory I’m using Music Generic class for TableColumn of Callback Object.Now we are making the TableCell Object overriding updateItem function. Here we’ve used inherited setGraphic function of TableCell class for setting the Graphics of any cell. In this way you can set any graphic for cell. I’ve used ChoiceBox for setting the graphics. The ratingSample is the final variable consisting the possible rating values of any music.

Hi leojim,
It’s not a big deal. We can easily save the rating of Avril disc by setting the value of ObservableList ‘musics’ item. You need to register a new listener of Mouse when the ComboBox of Avril is selected then change the value of ‘musics’ item according to the user’s selection.

Very good example. Does your code provide bidirectional binding? I wanted to use a cell factory to put checkboxes in a column of a tableView. When the checkbox is selected, the property associated with that column should be updated. It looks like your design would work, substituting the choicebox references with checkbox code.

Hi Ryan,
To make the event handling on the checkbox and it’s effect to real beans then you need to EventHandler to the control. Currently in the context of this post. I can add changelistener to the choicebox “value” inside which is declared inside CellFactory .

Inside the listener override method you can edit the value of main ObservableList (variable “musics” in this context) and the effect will be in bi-directional.

Great job. congratulations!
I have a situation and would ask directions, I’m new to JavaFX and must develop a screen similar to an excel spreadsheet. I have a bean that stores the value of the cell and the position (x, y). Each cell is a value entered in the database, and spreadsheet size may vary, eg 16×16, 10×10 etc.
How do I generate a dynamic table for this situation and take the position of each cell to enter the bean x,y atributes, for latter show and edit again?
Would you like help-me with your experience with JavaFX to guide me.
Thank you. Cheers

Hi @Muhammad,
The answer is somehow same to #6 comment 🙂
Make the Cell editable using the editableProperty of Cell which is inherited by TableCell and you can also refer to TableCellEdit of Oracle tutorial for your help to understand how the edit function actually works in normal text data table cell.

I know how to open web browser with URL.
I would like to know how to add a Hyperlink in a table column. Or custom TableCell, so user can click the link and open browser with provided URL.
Or like in your example, if we add another column with Hyperlink, when user click on the link, we will play the song with provided URL.

In the section 2. when you are setting up Album Art cell drawing mechanism, you are creating a new ImageView every time cell is drawn. You should take the ImageView creation out of the updateItem method to avoid extra memory allocation and slowness.