Customiser une TableView en JavaFX

Comment customiser une TableView en JavaFX ?

Il est possible de customiser le style d'un composant UI avec l'aide des propriétés de CSS.

Pour rappel, le CSS pour JavaFX diffère quelque peu du CSS pour le HTML.

Outre le préfixe "-fx-", certaines propriétés CSS du HTML ne sont pas supportées par le CSS de JavaFX.

Commençons par quelques propriétés générales.

Exemple

.tableView {
-fx-font-size: 8.0pt;
-fx-background-color: linear-gradient(white, #EDEFFF); 
}

Dans cet exemple la taille de la police est fixée à 8 points et la couleur de fond est une couleur créée à partir d'un effet de type <gradient>.

Il est possible de "cacher" le scrolling (horizontal ou vertical) - pratique car sinon les éléments du scrolling apparaîssent en grisé.

Exemple

.table-view *.scroll-bar:horizontal *.increment-button,
.table-view *.scroll-bar:horizontal *.decrement-button {
    -fx-background-color: null;
    -fx-background-radius: 0.0;
    -fx-background-insets: 0.0;
    -fx-padding: 0.0;
}

.table-view *.scroll-bar:horizontal *.increment-arrow, 
.table-view *.scroll-bar:horizontal *.decrement-arrow {
    -fx-background-color: null;
    -fx-background-radius: 0.0;
    -fx-background-insets: 0.0;
    -fx-padding: 0.0;
    -fx-shape: null;
}

Nous pouvons customiser la sélection d'une ligne ou le passage sur une ligne de la TableView.

Exemple

.table-view:row-selection .table-row-cell:filled:hover {
    -fx-background-color: #FFE3C1;
    -fx-background-insets: 0.0, 0.0 0.0 0.0 0.0;
    -fx-text-fill: -fx-text-inner-color;
}

.table-view:focused .table-row-cell:filled:selected {
    -fx-background-color: #BCD4E5;
    -fx-background-insets: 0.0, 0.0 0.0 0.0 0.0;
    -fx-text-fill: -fx-selection-bar-text;
    -fx-table-cell-border-color: #E0F2FF;
}

Les titres des colonnes de notre TableView peuvent être aussi customisés.

Exemple

.table-view .column-header {
-fx-font-weight: bold;
  -fx-background-color: #FFF5EF;
}

.table-view .column-header .text {
  -fx-underline: true;
}

A noter dans cet exemple que le texte du titre de chaque colonne sera souligné.

Les colonnes peuvent être customisées.

Exemple

.table-cell {
    -fx-alignment: BASELINE_CENTER;
 }

Dans cet exemple le contenu de chaque colonne est centré.