Directory

← Back

HTML Table

HTML Table integration for Flow

Author

Rating

Popularity

800+

A Vaadin Flow Java integration of the html table element.

Description

This addon provides a low-level api to work with a html table and related elements. It allows you to create a simple table consisting of rows and cells or to use a more structured approach by defining columns, a head, body and foot.

The table cells (and caption) can contain any Vaadin component, allowing to build simple and complex layouts as needed.

Features

  • support of adding table rows, header and data cells as direct children, or
  • structuring the table by using tbody, thead and tfoot
  • can contain Vaadin components to allow simple or complex layouting as required
  • takes care of the correct order of sub elements of the table (e.g. thead before tbody, etc.)
  • support for a table caption element
  • support for column groups and columns
  • table cells can define their col- and rowspan
  • table header cells can get a scope assigned
  • convenient api for easy adding or removing sub elements
  • rows added to the table are automatically transferred to the tbody, when created

Dedicated Testbench elements

If you want to create Testbench tests testing table elements, you can reuse this predefined set of elements: https://vaadin.com/directory/component/html-table-testbench-elements

Sample code

Table table = new Table();

TableRow headerRow = table.addRow();
headerRow.addHeaderCell().setText("Hello");
headerRow.addHeaderCell().setText("World");

TableRow detailsRow = table.addRow();
detailsRow.addDataCell().setText("Hello");
detailsRow.addDataCell().setText("World");
Table table = new Table();

TableRow headerRow = table.addRow();
TableCell cell = headerRow.addHeaderCell();
cell.setText("Hello world, it's me.");
cell.setColSpan(3);
cell.getStyle().set("background-color", "#fdd");

TableRow detailsRow = table.addRow();
detailsRow.addDataCell().setText("Hello");
detailsRow.addDataCell().setText("World");

cell = detailsRow.addDataCell();
cell.setText("It's me.");
cell.setRowSpan(2);
cell.getStyle().set("background-color", "#dfd");

detailsRow = table.addRow();
cell = detailsRow.addDataCell();
cell.setText("Hello");
cell.setColSpan(2);
cell.getStyle().set("background-color", "#ddf");

table.getCaption().setText("Using col- and rowspan");

add(table);
Table table = new Table();

table.getCaption().setText("Some caption"); 

// caption also supports components
table.getCaption().add(new Image(...));
// Table takes care to order the elements on the client side as required by html specifications

Table table = new Table();

TableRow detailsRow = table.getBody().addRow();
detailsRow.addDataCell().setText("Hello");
detailsRow.addDataCell().setText("World");
add(table);

TableHead head = table.getHead(); // will be put before tbody in the client side dom
TableRow headerRow = head.addRow();
headerRow.addHeaderCell().setText("Hello");
headerRow.addHeaderCell().setText("World");

table.getCaption().setText("Using thead and tbody"); // will be put before thead in the client side dom

add(table);
Table table = new Table();

TableHead head = table.getHead();
TableRow headerRow = head.addRow();
headerRow.addHeaderCell().setText("Hello with Style");
headerRow.addHeaderCell().setText("World with Style");
headerRow.addHeaderCell().setText("Hello");
headerRow.addHeaderCell().setText("World");

TableRow detailsRow = table.getBody().addRow();
detailsRow.addDataCell().setText("Hello with Style");
detailsRow.addDataCell().setText("World with Style");
detailsRow.addDataCell().setText("Hello");
detailsRow.addDataCell().setText("World");

TableColumnGroup columnGroup = table.getColumnGroup();
TableColumn column = columnGroup.addColumn();
column.addClassName("some");
column.setSpan(2);

headerRow.streamHeaderCells().forEach(c -> c.setScope(TableHeaderCell.SCOPE_COLUMN));

table.getCaption().setText("Using colgroups, thead and tbody");

add(table);
Table table = new Table();

TableRow headerRow = table.addRow();
headerRow.addHeaderCell().setText("Name");
headerRow.addHeaderCell().setText("Age");

for (int i = 0; i < 10; i++) {
    TextField textField = new TextField();
    textField.setValue("Some user " + i );

    NumberField numberField = new NumberField();
    numberField.setValue((double) (20 + i));

    TableRow detailsRow = table.addRow();
    detailsRow.addDataCell().add(textField);
    detailsRow.addDataCell().add(numberField);
}

add(table);
// The table and its content is modifiable as any other Vaadin component

Table table = new Table();
table.setWidth("500px");

TableRow headerRow = table.addRow();
headerRow.addHeaderCell().setText("Hello");
headerRow.addHeaderCell().setText("World");

TableRow detailsRow = table.addRow();
detailsRow.addDataCell().setText("Hello");
detailsRow.addDataCell().setText("World");

add(table, new Button("Change cell content", event -> {
    table.getRow(1)
            .flatMap(row -> row.getCell(1))
            .ifPresent(cell -> cell.setText("You :)"));
}));
// Needs the html-table-testbench-elements
// @see https://vaadin.com/directory/component/html-table-testbench-elements

public class SimpleTableViewIT extends TestBenchTestCase {

    // ... test setup and init

    @Test
    public void componentWorks() {
        TableElement table = getTable();

        Assert.assertFalse("caption" + " must not be present", table.getOptionalCaption().isPresent());
        Assert.assertFalse("colgroup" + " must not be present", table.getOptionalColumn().isPresent());
        Assert.assertFalse("thead" + " must not be present", table.getOptionalHead().isPresent());
        Assert.assertFalse("tbody" + " must not be present", table.getOptionalBody().isPresent());
        Assert.assertFalse("tfoot" + " must not be present", table.getOptionalFoot().isPresent());

        List<TableRowElement> rows = table.getRows();
        Assert.assertEquals(2, rows.size());

        TableRowElement row = rows.get(0);
        List<TableHeaderCellElement> headerCells = row.getHeaderCells();
        List<TableDataCellElement> dataCells = row.getDataCells();
        Assert.assertEquals(2, headerCells.size());
        Assert.assertEquals(0, dataCells.size());

        Assert.assertEquals("Hello", headerCells.get(0).getText());
        Assert.assertEquals("World", headerCells.get(1).getText());

        row = rows.get(1);
        headerCells = row.getHeaderCells();
        dataCells = row.getDataCells();
        Assert.assertEquals(0, headerCells.size());
        Assert.assertEquals(2, dataCells.size());

        Assert.assertEquals("Hello", dataCells.get(0).getText());
        Assert.assertEquals("World", dataCells.get(1).getText());
    }
}
// to create multiple bodies you may either call addBody() multiple times

Table table = new Table();

TableBody firstBody = table.addBody();
TableBody secondBody = table.addBody();
TableBody thirdBody = table.addBody();

// or you create the TableBody instances yourself and add them all at once

Table table = new Table();

TableBody firstBody = new TableBody();
TableBody secondBody = new TableBody();
TableBody thirdBody = new TableBody();

table.addBodies(firstBody, secondBody, thirdBody);

// any previously added table rows will be transfered to the first body element

Table table = new Table();
table.addRow(); 
// and so on...

TableBody firstBody = new TableBody();
TableBody secondBody = new TableBody();
TableBody thirdBody = new TableBody();

table.addBodies(firstBody, secondBody, thirdBody);

// the first body now has all rows of the table
table.getBody(0).getRows();

// The "single body" api works as before, so you still may call this

Table table = new Table();
TableBody body = table.getBody(); // automatically creates the body element for you
                                                              // and transfers existing table rows into it


Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Integrated support for multiple tbody elements (may not be supported on older browsers).

Released
2022-07-07
Maturity
STABLE
License
Apache License 2.0

Compatibility

Framework
Vaadin 14+
Browser
N/A

HTML Table - Vaadin Add-on Directory

HTML Table integration for Flow HTML Table - Vaadin Add-on Directory
A Vaadin Flow Java integration of the html table element. # Description This addon provides a low-level api to work with a **html table** and related elements. It allows you to create a simple table consisting of rows and cells or to use a more structured approach by defining columns, a head, body and foot. The table cells (and caption) can contain any **Vaadin component**, allowing to build simple and complex **layouts** as needed. # Features * support of adding table rows, header and data cells as direct children, or * structuring the table by using tbody, thead and tfoot * can contain Vaadin components to allow simple or complex layouting as required * takes care of the correct order of sub elements of the table (e.g. thead before tbody, etc.) * support for a table caption element * support for column groups and columns * table cells can define their col- and rowspan * table header cells can get a scope assigned * convenient api for easy adding or removing sub elements * rows added to the table are automatically transferred to the tbody, when created ## Dedicated Testbench elements If you want to create Testbench tests testing table elements, you can reuse this predefined set of elements: https://vaadin.com/directory/component/html-table-testbench-elements
Online