JavaFX TableView

application.css

.root{
    -bg-gradient: linear-gradient(from 25px 25px to 500px 300px, #a1ffce, #faffd1);
    -hlight-gradient: linear-gradient(to bottom, #1dbbdd44, #93f9b944);

    -primary: #81c48355;
    -secondary: #375FCB;
    -tertiary: #fcc200;
    -tertiary-armed: #FDDD71;
}

.background-pane{
   -fx-background-color: -bg-gradient;
   -fx-padding: 10px 15px;
   -fx-background-radius: 10px;
}

.shadow-pane{
   -fx-background-color: transparent;
   -fx-padding: 10px;
}

.content-pane{
   -fx-background-color: #ffffff22;
   -fx-background-radius: 10px;
   -fx-spacing: 35px;
   -fx-padding: 25px;
   -fx-alignment: center;
}

.transparent{
   -fx-background-color: transparent;
}

.highlight-rectangle{
   -fx-background-color: derive(-primary, 50%);
   -fx-background-radius: 5px;
}

.label{
    -fx-text-fill: #686868ff;
}

.transparent-background{
   -fx-background-color: transparent;
}

.transparent-background > .viewport{
   -fx-background-color: transparent;
}

.drag-allowed{
    -fx-background-color: linear-gradient(from 25px 25px to 500px 300px, #0052D4, #4364F7);
    -fx-background-radius: 10px;
}

.title-text{
    -fx-text-fill: #375FCB ;
    -fx-font-weight: bold;
    -fx-font-size: 14;
}

.app-text{
    -fx-text-fill: #375FCB;
    -fx-font-style: italic;
    -fx-font-size: 14;
}

.error-label{
    -fx-text-fill: #375FCB ;
    -fx-font-weight: bold;
    -fx-font-size: 14;
    -fx-background-color: linear-gradient(to right, #0f0c2977, #302b6377, #24243e77);
    -fx-background-radius: 10px;
    -fx-padding: 10px;
    -fx-alignment: center;

    -width: 350;
    -fx-min-width: -width;
    -fx-max-width: -width;
}

.button{
    -height: 20;
    -width: 20;
    -fill: white;

    -fx-background-color: -fill;
    -fx-min-height: -height;
    -fx-min-width: -width;
    -fx-max-height: -height;
    -fx-max-width: -width;
}

.button:hover {
    -fill: -tertiary;
}

.button:armed {
-fill: -tertiary-armed;
}

.exit-button {
    -height: 16;
    -width: 16;
    -fill: -secondary;
    -fx-shape: "M247.244,169.59l83.938-83.938c5.332-5.327,7.994-11.798,7.994-19.414c0-7.614-2.669-14.084-7.994-19.414L292.355,7.993 C287.026,2.665,280.556,0,272.944,0c-7.617,0-14.085,2.665-19.417,7.993L169.59,91.931L85.651,7.993 C80.325,2.665,73.854,0,66.237,0c-7.611,0-14.083,2.665-19.414,7.993L7.994,46.824C2.667,52.15,0,58.624,0,66.238 c0,7.616,2.664,14.084,7.994,19.414l83.937,83.938L7.994,253.528C2.667,258.859,0,265.327,0,272.945 c0,7.61,2.664,14.082,7.994,19.41l38.83,38.828c5.33,5.332,11.803,7.994,19.414,7.994c7.616,0,14.084-2.669,19.414-7.994 l83.939-83.938l83.944,83.938c5.328,5.332,11.793,7.994,19.417,7.994c7.611,0,14.082-2.669,19.411-7.994l38.82-38.828 c5.332-5.324,7.994-11.8,7.994-19.41c0-7.618-2.662-14.086-7.994-19.417L247.244,169.59z";
}

.exit-button:hover{
    -fill: red;
}

.background-pane{
   -fx-background-color: -bg-gradient;
   -fx-padding: 10px 15px;
   -fx-background-radius: 10px;
}

.shadow-pane{
   -fx-background-color: transparent;
   -fx-padding: 10px;
}

.content-pane{
   -fx-background-color: #ffffff22;
   -fx-background-radius: 10px;
   -fx-spacing: 35px;
   -fx-padding: 25px;
   -fx-alignment: center;
}

.label{
    -fx-text-fill: #686868ff;
}

.transparent-background{
   -fx-background-color: transparent;
}

.transparent-background > .viewport{
   -fx-background-color: transparent;
}

.drag-allowed{
    -fx-background-color: linear-gradient(from 25px 25px to 500px 300px, #0052D4, #4364F7);
    -fx-background-radius: 10px;
}

.title-text{
    -fx-text-fill: #375FCB ;
    -fx-font-weight: bold;
    -fx-font-size: 14;
}

.app-text{
    -fx-text-fill: #375FCB;
    -fx-font-style: italic;
    -fx-font-size: 14;
}

.error-label{
    -fx-text-fill: #375FCB ;
    -fx-font-weight: bold;
    -fx-font-size: 14;
    -fx-background-color: linear-gradient(to right, #0f0c2977, #302b6377, #24243e77);
    -fx-background-radius: 10px;
    -fx-padding: 10px;
    -fx-alignment: center;

    -width: 350;
    -fx-min-width: -width;
    -fx-max-width: -width;

}

.button{
    -height: 12px;
    -width: 12px;
    -fill: white;

    -fx-background-color: -fill;
    -fx-min-height: -height;
    -fx-min-width: -width;
    -fx-max-height: -height;
    -fx-max-width: -width;
}

.button:hover {
    -fill: -tertiary;
}

.button:armed {
    -fill: -tertiary-armed;
}

.exit-button {
    -fill: -secondary;
    -fx-shape: "M247.244,169.59l83.938-83.938c5.332-5.327,7.994-11.798,7.994-19.414c0-7.614-2.669-14.084-7.994-19.414L292.355,7.993 C287.026,2.665,280.556,0,272.944,0c-7.617,0-14.085,2.665-19.417,7.993L169.59,91.931L85.651,7.993 C80.325,2.665,73.854,0,66.237,0c-7.611,0-14.083,2.665-19.414,7.993L7.994,46.824C2.667,52.15,0,58.624,0,66.238 c0,7.616,2.664,14.084,7.994,19.414l83.937,83.938L7.994,253.528C2.667,258.859,0,265.327,0,272.945 c0,7.61,2.664,14.082,7.994,19.41l38.83,38.828c5.33,5.332,11.803,7.994,19.414,7.994c7.616,0,14.084-2.669,19.414-7.994 l83.939-83.938l83.944,83.938c5.328,5.332,11.793,7.994,19.417,7.994c7.611,0,14.082-2.669,19.411-7.994l38.82-38.828 c5.332-5.324,7.994-11.8,7.994-19.41c0-7.618-2.662-14.086-7.994-19.417L247.244,169.59z";
}

.exit-button:hover{
    -fill: red;
}

/* TABLES */

.table-view,
.table-view .column-header,
.table-view .column-header-background .filler,
.table-view .corner {
    -fx-background-color: transparent;
}

.table-view .column-header-background{
    -fx-background-color: -hlight-gradient;
    -fx-background-radius: 7px 7px 0px 0px;
    -fx-background-insets: 0 11px 0 0;
    -fx-padding: 0 0 5px 0;
}

.table-view .table-cell{
    -fx-border-color: transparent;
    -fx-padding: 2 0 2 10px;
}

.table-row-cell:hover {
    -fx-background-color: #93f9b911;
    -fx-text-background-color: -tertiary;
}

.table-row-cell:odd{
    -fx-background-color: #93f9b911;
    -fx-background-insets: 0, 0 0 1 0;
    -fx-padding: 0.0em;
}

.table-row-cell:even{
    -fx-background-color: #1dbbdd11;
    -fx-background-insets: 0, 0 0 1 0;
    -fx-padding: 0.0em;
}

.table-row-cell: highlighted {
    -fx-background-color: -primary;
    -fx-background-radius: 5px;
    -fx-background-insets: 2px;
}

.table-row-cell: selected {
    -fx-background-color: -tertiary;
    -fx-text-background-color: white;
    -fx-background-radius: 5px;
    -fx-background-insets: 2px;
}

.table-view .virtual-flow .scroll-bar:vertical,
.table-view .virtual-flow .scroll-bar:vertical .track,
.table-view .virtual-flow .scroll-bar:vertical .track-background,
.table-view .virtual-flow .scroll-bar:horizontal,
.table-view .virtual-flow .scroll-bar:horizontal .track,
.table-view .virtual-flow .scroll-bar:horizontal .track-background {
    -fx-background-color: transparent;
}

.table-view .virtual-flow .scroll-bar:vertical .thumb{
    -fx-background-color:  -hlight-gradient;
}

.table-view .virtual-flow .scroll-bar:horizontal .thumb {
    -fx-background-color:  linear-gradient(to right, #1dbbdd44, #93f9b944);
}

.table-view .virtual-flow .scroll-bar .increment-button,
.table-view .virtual-flow .scroll-bar .decrement-button {
    -fx-opacity: 0;
    -fx-padding: 2;
}

StyledTableView.java

package com.edencoding;

import javafx.animation.PauseTransition;
import javafx.application.Application;
import javafx.application.Platform;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.effect.DropShadow;
import javafx.scene.image.Image;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
import javafx.stage.StageStyle;
import javafx.util.Duration;

public class StyledTableView extends Application {

    private double xOffset;
    private double yOffset;

    @Override
    public void start(Stage primaryStage) throws Exception {
        Parent root = FXMLLoader.load(getClass().getResource("/fxml/MainView.fxml"));

        root.setOnMousePressed(event -> {
            xOffset = event.getSceneX();
            yOffset = event.getSceneY();
            event.consume();
        });
        root.setOnMouseDragged(event -> {
            primaryStage.setX(event.getScreenX() - xOffset);
            primaryStage.setY(event.getScreenY() - yOffset);
            event.consume();
        });

        Scene scene = new Scene(root);
        scene.getRoot().setEffect(new DropShadow(10, Color.rgb(100, 100, 100)));
        scene.setFill(Color.TRANSPARENT);

        primaryStage.setScene(scene);
        primaryStage.initStyle(StageStyle.TRANSPARENT);

        primaryStage.getIcons().add(new Image(getClass().getResourceAsStream("/img/EdenCodingIcon.png")));

        primaryStage.setScene(scene);
        primaryStage.show();
    }
    
    public static void main(String[] args) {
        launch(args);
    }
}

TableViewController.java

package com.edencoding.controllers;

import com.edencoding.models.ToastContainer;
import javafx.application.Application;
import javafx.application.Platform;
import javafx.beans.property.IntegerProperty;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;
import javafx.beans.value.ChangeListener;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.css.PseudoClass;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableRow;
import javafx.scene.control.TableView;
import javafx.scene.input.DragEvent;
import javafx.scene.input.Dragboard;
import javafx.scene.input.TransferMode;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

import java.net.URL;
import java.util.ArrayList;
import java.util.List;
import java.util.ResourceBundle;

public class MainViewController implements Initializable {

    public TableView<Order> exampleTable;
    public TableColumn<Order, Integer> orderIdColumn;
    public TableColumn<Order, String> stateColumn;
    public TableColumn<Order, String> cityColumn;

    @Override
    public void initialize(URL location, ResourceBundle resources) {
        orderIdColumn.setCellValueFactory(cellData -> cellData.getValue().idProperty().asObject());
        stateColumn.setCellValueFactory(cellData -> cellData.getValue().stateProperty());
        cityColumn.setCellValueFactory(cellData -> cellData.getValue().cityProperty());

        List<Order> orders = new ArrayList<>();
        orders.add(new Order(1, "New York", "New York")); //8,323,340
        orders.add(new Order(2, "Colorado", "Denver"));
        orders.add(new Order(3, "Missouri", "Kansas City"));
        orders.add(new Order(4, "Nebraska", "Custer"));
        orders.add(new Order(5, "Iowa", "Black Hawk"));
        orders.add(new Order(6, "Nevada", "Las Vegas"));
        orders.add(new Order(7, "California", "San Diego")); //1.54m
        orders.add(new Order(8, "Illinois", "Chicago")); //2.2m
        orders.add(new Order(9, "Massachusetts", "Boston")); //4.3m
        orders.add(new Order(10, "Vermont", "Montpellier"));
        orders.add(new Order(11, "Revelstoke", "Alberta"));
        orders.add(new Order(12, "Winnipeg", "Manitoba"));
        orders.add(new Order(13, "Terrace", "British Colombia"));

        ObservableList<Order> ol = FXCollections.observableArrayList(orders);
        exampleTable.setItems(ol);

        PseudoClass higlighted = PseudoClass.getPseudoClass("highlighted");
        exampleTable.setRowFactory(tableView -> {
            TableRow<Order> row = new TableRow<>();
            row.itemProperty().addListener((obs, oldOrder, newOrder) ->
                    row.pseudoClassStateChanged(higlighted,
                            newOrder.getCity().equals("New York") ||
                                    newOrder.getCity().equals("Boston")));
            return row;
        });

    }

    @FXML
    private void handleExitButtonClicked(ActionEvent event) {
        Platform.exit();
        event.consume();
    }

    public static class Order {
        IntegerProperty id;
        StringProperty state;
        StringProperty city;

        public Order(Integer id, String state, String city) {
            this.id = new SimpleIntegerProperty(id);
            this.state = new SimpleStringProperty(state);
            this.city = new SimpleStringProperty(city);
        }

        public int getId() {
            return id.get();
        }

        public void setId(int id) {
            this.id.set(id);
        }

        public IntegerProperty idProperty() {
            return id;
        }

        public String getState() {
            return state.get();
        }

        public void setState(String state) {
            this.state.set(state);
        }

        public StringProperty stateProperty() {
            return state;
        }

        public String getCity() {
            return city.get();
        }

        public void setCity(String city) {
            this.city.set(city);
        }

        public StringProperty cityProperty() {
            return city;
        }
    }
}

TableViewExamle.fxml

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

<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.layout.*?>

<BorderPane prefHeight="400.0" prefWidth="500.0" styleClass="shadow-pane" stylesheets="@../css/application.css" xmlns="http://javafx.com/javafx/10.0.2-internal" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.edencoding.controllers.MainViewController">
    <center>
        <VBox id="dragTarget" spacing="10" styleClass="background-pane">
            <HBox alignment="CENTER">
                <padding>
                    <Insets right="5" top="2" />
                </padding>
                <HBox>
                    <ImageView>
                        <Image url="@../img/EdenCodingHeader_Small.png" />
                    </ImageView>
                </HBox>
                <HBox id="right-icons" alignment="CENTER_RIGHT" spacing="10" HBox.hgrow="ALWAYS">
                    <Button onAction="#handleExitButtonClicked" styleClass="exit-button" />
                </HBox>
            </HBox>
            <VBox>
                <TableView fx:id="exampleTable">
                    <columns>
                        <TableColumn fx:id="orderIdColumn" editable="false" text="OrderId" />
                        <TableColumn editable="false" text="Location">
                            <columns>
                                <TableColumn fx:id="stateColumn" text="State" />
                                <TableColumn fx:id="cityColumn" text="City" />
                            </columns>
                        </TableColumn>
                    </columns>
                    <columnResizePolicy>
                        <TableView fx:constant="CONSTRAINED_RESIZE_POLICY" />
                    </columnResizePolicy>
                </TableView>
            </VBox>
        </VBox>
    </center>
</BorderPane>