Directory

← Back

Handsontable for Flow

Flow wrapper for Handsontable JS component

Author

Rating

Popularity

<100

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.

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;
    }
}

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

Update license to Apache 2.0

Released
2020-12-10
Maturity
STABLE
License
Apache License 2.0

Compatibility

Framework
Vaadin 14
Vaadin 14+ in 3.1.1
Vaadin 13 in 2.0.1
Vaadin 12 in 2.0.1
Vaadin 11 in 2.0.1
Vaadin 10 in 2.0.1
Browser
N/A

Handsontable for Flow - Vaadin Add-on Directory

Flow wrapper for Handsontable JS component Handsontable for Flow - Vaadin Add-on Directory
# 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](https://handsontable.com). ## 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](https://vaadin.com/support) and [Pricing](https://vaadin.com/pricing)
Online