Handsontable for Flow

Flow wrapper for Handsontable JS component

Flow wrapper for Handsontable JS component

It is based on Handsontable 7.4.2 with the following major changes.

• You can use properties names instead of cell addresses in your formula, e.g. =[Amount]+[Amount]*[TaxRate]/100.
• New items are added to the context menu for formatting including bold, italic, strike through, underscore and border.

Handsontable License

In order to use this component you need to directly obtain a license for Handsontable JS component.

License & Author

This Add-on is distributed under Apache 2.0

Component Factory Handsontable is written by Vaadin Ltd.

Sponsored development

Major pieces of development of this add-on has been sponsored by multiple customers of Vaadin. Read more about Expert on Demand at: Support and Pricing

Sample code

public class BasicDemoView extends AbstractDemoView {
    private static final String SAMPLE_JSON_DATA =
            " [ \n" +
                    "{\n" +
                    "   \"name\": \"Anne\", \n" +
                    "   \"age\" : 13, \n" +
                    "   \"isMarried\" : false, \n" +
                    "   \"address\": { \n" +
                    "     \"street\": \"#1234, Main Street\", \n" +
                    "     \"zipCode\": \"123456\" \n" +
                    "   }, \n" +
                    "   \"phoneNumber\": \"011-111-1111\"\n" +
                    " }, \n" +
                    "{\n" +
                    "   \"name\": \"John\", \n" +
                    "   \"age\" : 34, \n" +
                    "   \"isMarried\" : false, \n" +
                    "   \"address\": { \n" +
                    "     \"street\": \"#1234, Kurala Street\", \n" +
                    "     \"zipCode\": \"123456\" \n" +
                    "   }, \n" +
                    "   \"phoneNumber\": \"011-222-1111\"\n" +
                    " },\n" +
                    "{\n" +
                    "   \"name\": \"Peter\", \n" +
                    "   \"age\" : 40, \n" +
                    "   \"isMarried\" : false, \n" +
                    "   \"address\": { \n" +
                    "     \"street\": \"#1234, Tor Street\", \n" +
                    "     \"zipCode\": \"123456\" \n" +
                    "   }, \n" +
                    "   \"phoneNumber\": \"011-222-1111\"\n" +
                    " },\n" +
                    "{\n" +
                    "   \"name\": \"Kate\", \n" +
                    "   \"age\" : 45, \n" +
                    "   \"isMarried\" : true, \n" +
                    "   \"address\": { \n" +
                    "     \"street\": \"#1234, Varange Street\", \n" +
                    "     \"zipCode\": \"123456\" \n" +
                    "   }, \n" +
                    "   \"phoneNumber\": \"011-333-1111\"\n" +
                    " }\n" +
                    "]";

    private TextArea textArea;
    private Handsontable handsontable;

    public BasicDemoView() {
        UI.getCurrent().setLocale(Locale.GERMANY);

        add(new H1("Basic usage"));

        textArea = new TextArea("data");
        textArea.setValue(SAMPLE_JSON_DATA);
        textArea.setHeight("500px");
        textArea.setWidth("100%");

        JsonArray data = createJsonObject();
        handsontable = new Handsontable(data);

        Settings settings = new Settings();
        settings.setLicenseKey("non-commercial-and-evaluation");
        settings.setColHeaders(true);
        handsontable.setSettings(settings);
        handsontable.setId("hot1");

        Button setDataButton = new Button("Set data", event -> {
            handsontable.setData(createJsonObject());
        });

        Button retrieveDataButton = new Button("Retrieve data", event -> {
            handsontable.retrieveData(jsonValues -> textArea.setValue(jsonValues.toString()));
        });

        Button retrieveDataAsArrayButton = new Button("Retrieve data as array", event -> {
            handsontable.retrieveDataAsArray(list -> textArea.setValue(list.stream().map(Arrays::toString).collect(Collectors.toList()).toString()));
        });

        Button setCellsMetaButton = new Button("Set cells meta", event -> {
            List<Cell> cells = new ArrayList<>();
            Cell cell;
            cell = new Cell();
            cell.setRow(1);
            cell.setCol(1);
            cell.setBold(true);
            cells.add(cell);

            cell = new Cell();
            cell.setRow(2);
            cell.setCol(1);
            cell.setStrikethrough(true);
            cells.add(cell);

            cell = new Cell();
            cell.setRow(1);
            cell.setCol(2);
            cell.setBorder(true);
            cells.add(cell);

            handsontable.setCellsMeta(cells);
        });

        Button retrieveCellsMetaButton = new Button("Retrieve Cells Meta", event -> {
            handsontable.retrieveCellsMeta(list -> textArea.setValue(list.toString()));
        });

        Button setSettingsButton = new Button("Set settings", event -> {
            Settings newSettings = new Settings();
            newSettings.setLicenseKey("non-commercial-and-evaluation");
            newSettings.setRowHeaders(true);
            newSettings.setColHeaders(new String[]{"1", "2", "3", "4", "5", "6"});
            handsontable.setSettings(newSettings);
        });

        Button changeLanguageToEnglishButton = new Button("English Language", event -> {
            Settings newSettings = new Settings();
            newSettings.setLanguage("en-FI");
            handsontable.setSettings(newSettings);
        });

        Button changeLanguageToGermanButton = new Button("German Language", event -> {
            Settings newSettings = new Settings();
            newSettings.setLanguage("de-DE");
            handsontable.setSettings(newSettings);
        });

        HorizontalLayout buttons = new HorizontalLayout(setDataButton,
                retrieveDataButton, retrieveDataAsArrayButton,
                setCellsMetaButton, retrieveCellsMetaButton, setSettingsButton,
                changeLanguageToEnglishButton, changeLanguageToGermanButton);

        Button receiveSettingsButton = new Button("Receive settings", event -> {
            handsontable.retrieveSettings(receivedSettings -> {
                try (StringWriter writer = new StringWriter()) {
                    ObjectMapper mapper = new ObjectMapper();
                    mapper.setSerializationInclusion(JsonInclude.Include.NON_NULL);
                    mapper.writeValue(writer, receivedSettings);
                    String stringValue = writer.toString();
                    textArea.setValue(stringValue);
                } catch (IOException e) {
                    throw new RuntimeException(e);
                }
            });
        });

        Button setDataAtCellButton = new Button("Set data at cell", event -> {
            handsontable.setDataAtCell(1, 1, "abcd");
        });

        Button retriveDataAtCellButton = new Button("Retrieve data at cell", event -> {
            handsontable.retrieveDataAtCell(2, 2, value -> {
                textArea.setValue("The value at the cell [2, 2] is: " + value);
            });
        });

        HorizontalLayout moreButtons = new HorizontalLayout(receiveSettingsButton, setDataAtCellButton, retriveDataAtCellButton);

        add(handsontable, textArea, buttons, moreButtons);
    }

    private JsonArray createJsonObject() {
        JsonReader reader = Json.createReader(new StringReader(textArea.getValue()));
        JsonArray jsonArray = reader.readArray();
        reader.close();
        return jsonArray;
    }
}

Links

• View on GitHub
• Handsontable JS Component

Compatibility