Examples with EyeColor org.dominokit.domino.datatable.client.views.model.EyeColor used on opensource projects

Example 1 with EyeColor

use of org.dominokit.domino.datatable.client.views.model.EyeColor in project domino-ui-demo by DominoKit.

the class DataTableViewImpl method advancedPagination.

@SampleMethod
private void advancedPagination() {
    // page size
    AdvancedPaginationPlugin<Contact> advancedPagination = new AdvancedPaginationPlugin<>(10);
    TableConfig<Contact> tableConfig = new TableConfig<>();
    tableConfig.addColumn(ColumnConfig.<Contact>create("id", "#").textAlign("right").asHeader().sortable().setCellRenderer(cell -> TextNode.of(cell.getTableRow().getRecord().getIndex() + 1 + ""))).addColumn(ColumnConfig.<Contact>create("status", "Status").textAlign("center").setCellRenderer(cell -> {
        if (cell.getTableRow().getRecord().isActive()) {
            return Style.of(Icons.ALL.check_circle()).setColor(Color.GREEN_DARKEN_3.getHex()).element();
        } else {
            return Style.of(Icons.ALL.highlight_off()).setColor(Color.RED_DARKEN_3.getHex()).element();
        }
    })).addColumn(ColumnConfig.<Contact>create("firstName", "First name").sortable().setCellRenderer(cell -> TextNode.of(cell.getTableRow().getRecord().getName()))).addColumn(ColumnConfig.<Contact>create("gender", "Gender").setCellRenderer(cell -> ContactUiUtils.getGenderElement(cell.getRecord())).textAlign("center")).addColumn(ColumnConfig.<Contact>create("eyeColor", "Eye color").setCellRenderer(cell -> ContactUiUtils.getEyeColorElement(cell.getRecord())).textAlign("center")).addColumn(ColumnConfig.<Contact>create("balance", "Balance").sortable().setCellRenderer(cellInfo -> ContactUiUtils.getBalanceElement(cellInfo.getRecord()))).addColumn(ColumnConfig.<Contact>create("email", "Email").setCellRenderer(cell -> TextNode.of(cell.getTableRow().getRecord().getEmail()))).addColumn(ColumnConfig.<Contact>create("phone", "Phone").setCellRenderer(cell -> TextNode.of(cell.getTableRow().getRecord().getPhone()))).addColumn(ColumnConfig.<Contact>create("badges", "Badges").setCellRenderer(cell -> {
        if (cell.getTableRow().getRecord().getAge() < 35) {
            return Badge.create("Young").setBackground(ColorScheme.GREEN.color()).element();
        }
        return TextNode.of("");
    }));
    tableConfig.addPlugin(new SortPlugin<>()).addPlugin(new HeaderBarPlugin<Contact>("Demo table", "this a sample table with all features").addActionElement(new HeaderBarPlugin.ClearSearch<>()).addActionElement(new HeaderBarPlugin.SearchTableAction<>())).addPlugin(advancedPagination);
    LocalListDataStore<Contact> localListDataStore = new LocalListDataStore<>();
    localListDataStore.setRecordsSorter(new ContactSorter());
    localListDataStore.setSearchFilter(new ContactSearchFilter());
    localListDataStore.setPagination(advancedPagination.getPagination());
    DataTable<Contact> table = new DataTable<>(tableConfig, localListDataStore);
    element.appendChild(Card.create("ADVANCED PAGINATION", "Advanced pagination plugin allows navigation through pages from a dropdown list").setCollapsible().appendChild(new TableStyleActions(table)).appendChild(table).element());
    contactListParseHandlers.add(contacts -> {
        localListDataStore.setData(subList(contacts, 0, 100));
        table.load();
    });
}

Example 2 with EyeColor

use of org.dominokit.domino.datatable.client.views.model.EyeColor in project domino-ui-demo by DominoKit.

the class DataTableViewImpl method topPanelPlugin.

@SampleMethod
private void topPanelPlugin() {
    ContactsTopPanel<Contact> topPanel = new ContactsTopPanel<>();
    TableConfig<Contact> tableConfig = new TableConfig<>();
    tableConfig.setFixed(true).addColumn(ColumnConfig.<Contact>create("id", "#").sortable().styleCell(cellElement -> Style.of(cellElement).setCssProperty("vertical-align", "middle")).textAlign("right").asHeader().setCellRenderer(cell -> TextNode.of(cell.getTableRow().getRecord().getIndex() + 1 + ""))).addColumn(ColumnConfig.<Contact>create("status", "Status").textAlign("center").setCellRenderer(cell -> {
        if (cell.getTableRow().getRecord().isActive()) {
            return Style.of(Icons.ALL.check_circle().element()).setColor(Color.GREEN_DARKEN_3.getHex()).element();
        } else {
            return Style.of(Icons.ALL.highlight_off().element()).setColor(Color.RED_DARKEN_3.getHex()).element();
        }
    })).addColumn(ColumnConfig.<Contact>create("firstName", "First name").sortable().setCellRenderer(cell -> TextNode.of(cell.getTableRow().getRecord().getName())).setWidth("200px")).addColumn(ColumnConfig.<Contact>create("gender", "Gender").setCellRenderer(cell -> ContactUiUtils.getGenderElement(cell.getRecord())).textAlign("center")).addColumn(ColumnConfig.<Contact>create("eyeColor", "Eye color").styleHeader(head -> Style.of(head).setWidth("100px")).setCellRenderer(cell -> ContactUiUtils.getEyeColorElement(cell.getRecord())).textAlign("center")).addColumn(ColumnConfig.<Contact>create("balance", "Balance").sortable().setCellRenderer(cellInfo -> ContactUiUtils.getBalanceElement(cellInfo.getRecord())).setWidth("250px")).addColumn(ColumnConfig.<Contact>create("email", "Email").setWidth("300px").setCellRenderer(cell -> TextNode.of(cell.getTableRow().getRecord().getEmail()))).addColumn(ColumnConfig.<Contact>create("phone", "Phone").setWidth("150px").setCellRenderer(cell -> TextNode.of(cell.getTableRow().getRecord().getPhone()))).addColumn(ColumnConfig.<Contact>create("badges", "Badges").setCellRenderer(cell -> {
        if (cell.getTableRow().getRecord().getAge() < 35) {
            return Badge.create("Young").setBackground(ColorScheme.GREEN.color()).element();
        }
        return TextNode.of("");
    })).addPlugin(new BodyScrollPlugin<>()).addPlugin(new TopPanelPlugin<Contact>() {

        @Override
        public HTMLElement element() {
            return topPanel.element();
        }

        @Override
        public void handleEvent(TableEvent event) {
            if (TableDataUpdatedEvent.DATA_UPDATED.equals(event.getType())) {
                topPanel.update((TableDataUpdatedEvent<Contact>) event);
            }
        }
    }).addPlugin(new HeaderBarPlugin<Contact>("Demo table", "this a sample table with all features").addActionElement(new HeaderBarPlugin.SearchTableAction<>())).addPlugin(new SortPlugin<>());
    LocalListScrollingDataSource<Contact> scrollingDataSource = new LocalListScrollingDataSource<Contact>(10).setSearchFilter(new ContactSearchFilter()).setRecordsSorter(new ContactSorter());
    DataTable<Contact> table = new DataTable<>(tableConfig, scrollingDataSource);
    element.appendChild(Card.create("TOP PANEL PLUGIN", "A simple panel that listens to datatable events and update its content accordingly.").setCollapsible().appendChild(new TableStyleActions(table)).appendChild(table).element());
    contactListParseHandlers.add(contacts -> {
        List<Contact> data = subList(contacts, 0, 100);
        scrollingDataSource.setData(data);
        table.load();
        topPanel.update(data);
    });
}

Example 3 with EyeColor

use of org.dominokit.domino.datatable.client.views.model.EyeColor in project domino-ui-demo by DominoKit.

the class DataTableViewImpl method sortAndSearch.

@SampleMethod
private void sortAndSearch() {
    TableConfig<Contact> tableConfig = new TableConfig<>();
    tableConfig.addColumn(ColumnConfig.<Contact>create("id", "#").textAlign("right").asHeader().sortable().setCellRenderer(cell -> TextNode.of(cell.getTableRow().getRecord().getIndex() + 1 + ""))).addColumn(ColumnConfig.<Contact>create("status", "Status").textAlign("center").setCellRenderer(cell -> {
        if (cell.getTableRow().getRecord().isActive()) {
            return Style.of(Icons.ALL.check_circle()).setColor(Color.GREEN_DARKEN_3.getHex()).element();
        } else {
            return Style.of(Icons.ALL.highlight_off()).setColor(Color.RED_DARKEN_3.getHex()).element();
        }
    })).addColumn(ColumnConfig.<Contact>create("firstName", "First name").sortable().setCellRenderer(cell -> TextNode.of(cell.getTableRow().getRecord().getName()))).addColumn(ColumnConfig.<Contact>create("gender", "Gender").setCellRenderer(cell -> ContactUiUtils.getGenderElement(cell.getRecord())).textAlign("center")).addColumn(ColumnConfig.<Contact>create("eyeColor", "Eye color").setCellRenderer(cell -> ContactUiUtils.getEyeColorElement(cell.getRecord())).textAlign("center")).addColumn(ColumnConfig.<Contact>create("balance", "Balance").sortable().setCellRenderer(cellInfo -> ContactUiUtils.getBalanceElement(cellInfo.getRecord()))).addColumn(ColumnConfig.<Contact>create("email", "Email").setCellRenderer(cell -> TextNode.of(cell.getTableRow().getRecord().getEmail()))).addColumn(ColumnConfig.<Contact>create("phone", "Phone").setCellRenderer(cell -> TextNode.of(cell.getTableRow().getRecord().getPhone()))).addColumn(ColumnConfig.<Contact>create("badges", "Badges").setCellRenderer(cell -> {
        if (cell.getTableRow().getRecord().getAge() < 35) {
            return Badge.create("Young").setBackground(ColorScheme.GREEN.color()).element();
        }
        return TextNode.of("");
    }));
    ColumnHeaderFilterPlugin<Contact> contactColumnHeaderFilterPlugin = ColumnHeaderFilterPlugin.<Contact>create();
    tableConfig.addPlugin(new SortPlugin<>()).addPlugin(new HeaderBarPlugin<Contact>("Demo table", "this a sample table with all features").addActionElement(new HeaderBarPlugin.ClearSearch<>()).addActionElement(new HeaderBarPlugin.SearchTableAction<>()).addActionElement(dataTable -> Icons.ALL.filter_menu_outline_mdi().clickable().addClickListener(evt -> contactColumnHeaderFilterPlugin.getFiltersRowElement().toggleDisplay()).element())).addPlugin(contactColumnHeaderFilterPlugin.addHeaderFilter("firstName", TextHeaderFilter.<Contact>create()).addHeaderFilter("email", TextHeaderFilter.<Contact>create()).addHeaderFilter("phone", TextHeaderFilter.<Contact>create()).addHeaderFilter("status", BooleanHeaderFilter.<Contact>create("Active", "Inactive", "Both")).addHeaderFilter("gender", EnumHeaderFilter.<Contact, Gender>create(Gender.values())).addHeaderFilter("balance", DoubleHeaderFilter.<Contact>create()).addHeaderFilter("eyeColor", SelectHeaderFilter.<Contact>create().appendChild(SelectOption.create("blue", "Blue")).appendChild(SelectOption.create("brown", "Brown")).appendChild(SelectOption.create("green", "Green"))));
    LocalListDataStore<Contact> listStore = new LocalListDataStore<>();
    listStore.setRecordsSorter(new ContactSorter());
    listStore.setSearchFilter(new ContactSearchFilter());
    DataTable<Contact> table = new DataTable<>(tableConfig, listStore);
    element.appendChild(Card.create("SORT PLUGIN & SEARCH HEADER ACTION", "Allows the table to fire events useful for datasource to sort and search the data").setCollapsible().appendChild(new TableStyleActions(table)).appendChild(table).element());
    contactListParseHandlers.add(contacts -> {
        listStore.setData(subList(contacts));
        table.load();
    });
}

Example 4 with EyeColor

use of org.dominokit.domino.datatable.client.views.model.EyeColor in project domino-ui-demo by DominoKit.

the class DataTableViewImpl method allInOne.

@SampleMethod
private void allInOne() {
    ContactsTopPanel<Contact> topPanel = new ContactsTopPanel<>();
    ScrollingPaginationPlugin<Contact> scrollingPaginationPlugin = new ScrollingPaginationPlugin<>(10, 5);
    TableConfig<Contact> tableConfig = new TableConfig<>();
    tableConfig.addColumn(ColumnConfig.<Contact>create("id", "#").sortable().styleCell(cellElement -> Style.of(cellElement).setCssProperty("vertical-align", "middle")).textAlign("right").asHeader().setCellRenderer(cell -> TextNode.of(cell.getTableRow().getRecord().getIndex() + 1 + "")).setWidth("70px")).addColumn(ColumnConfig.<Contact>create("status", "Status").setWidth("80px").textAlign("center").setCellRenderer(cell -> {
        if (cell.getTableRow().getRecord().isActive()) {
            return Style.of(Icons.ALL.check_circle().element()).setColor(Color.GREEN_DARKEN_3.getHex()).element();
        } else {
            return Style.of(Icons.ALL.highlight_off().element()).setColor(Color.RED_DARKEN_3.getHex()).element();
        }
    })).addColumn(ColumnConfig.<Contact>create("firstName", "First name").sortable().setCellRenderer(cell -> TextNode.of(cell.getTableRow().getRecord().getName())).setWidth("200px")).addColumn(ColumnConfig.<Contact>create("gender", "Gender").setWidth("100px").setCellRenderer(cell -> ContactUiUtils.getGenderElement(cell.getRecord())).textAlign("center")).addColumn(ColumnConfig.<Contact>create("eyeColor", "Eye color").styleHeader(head -> Style.of(head).setWidth("100px")).setCellRenderer(cell -> ContactUiUtils.getEyeColorElement(cell.getRecord())).textAlign("center").maxWidth("120px")).addColumn(ColumnConfig.<Contact>create("balance", "Balance").sortable().setCellRenderer(cellInfo -> ContactUiUtils.getBalanceElement(cellInfo.getRecord())).setWidth("200px")).addColumn(ColumnConfig.<Contact>create("email", "Email").setWidth("250px").setCellRenderer(cell -> TextNode.of(cell.getTableRow().getRecord().getEmail()))).addColumn(ColumnConfig.<Contact>create("phone", "Phone").setWidth("200px").setCellRenderer(cell -> TextNode.of(cell.getTableRow().getRecord().getPhone()))).addColumn(ColumnConfig.<Contact>create("badges", "Badges").setCellRenderer(cell -> {
        if (cell.getTableRow().getRecord().getAge() < 35) {
            return Badge.create("Young").setBackground(ColorScheme.GREEN.color()).element();
        }
        return TextNode.of("");
    })).addPlugin(scrollingPaginationPlugin).addPlugin(new TopPanelPlugin<Contact>() {

        @Override
        public HTMLElement element() {
            return topPanel.element();
        }

        @Override
        public void handleEvent(TableEvent event) {
            if (TableDataUpdatedEvent.DATA_UPDATED.equals(event.getType())) {
                topPanel.update((TableDataUpdatedEvent<Contact>) event);
            }
        }
    }).addPlugin(new HeaderBarPlugin<Contact>("Demo table", "this a sample table with all features").addActionElement(dataTable -> {
        Icon selectInactiveIcon = Icons.ALL.highlight_off().clickable().setTooltip("Select Inactive").addClickListener(evt -> dataTable.getRows().forEach(item -> {
            if (!item.getRecord().isActive()) {
                item.select();
            } else {
                item.deselect();
            }
        }));
        return a().add(selectInactiveIcon).element();
    }).addActionElement(dataTable -> {
        Icon selectInactiveIcon = Icons.ALL.check_circle().clickable().setTooltip("Select Active").addClickListener(evt -> dataTable.getRows().forEach(tableRow -> {
            if (tableRow.getRecord().isActive()) {
                tableRow.select();
            } else {
                tableRow.deselect();
            }
        }));
        return a().add(selectInactiveIcon).element();
    }).addActionElement(new HeaderBarPlugin.ClearSearch<>()).addActionElement(new HeaderBarPlugin.SearchTableAction<>()).addActionElement(new HeaderBarPlugin.ShowHideColumnsAction<>())).addPlugin(new RecordDetailsPlugin<>(cell -> new ContactDetails(cell).element())).addPlugin(new SelectionPlugin<>(ColorScheme.BLUE)).addPlugin(new RowMarkerPlugin<>(cellInfo -> ContactUiUtils.getBalanceColor(cellInfo.getRecord()))).addPlugin(new SortPlugin<>()).addPlugin(ColumnHeaderFilterPlugin.<Contact>create().addHeaderFilter("firstName", TextHeaderFilter.<Contact>create()).addHeaderFilter("email", TextHeaderFilter.<Contact>create()).addHeaderFilter("phone", TextHeaderFilter.<Contact>create()).addHeaderFilter("status", BooleanHeaderFilter.<Contact>create("Active", "Inactive", "Both")).addHeaderFilter("gender", EnumHeaderFilter.<Contact, Gender>create(Gender.values())).addHeaderFilter("balance", DoubleHeaderFilter.<Contact>create()).addHeaderFilter("eyeColor", SelectHeaderFilter.<Contact>create().appendChild(SelectOption.create("blue", "Blue")).appendChild(SelectOption.create("brown", "Brown")).appendChild(SelectOption.create("green", "Green")))).addPlugin(new GroupingPlugin<>(tableRow -> tableRow.getRecord().getGender().toString(), cellInfo -> {
        DominoElement.of(cellInfo.getElement()).style().setCssProperty("border-bottom", "1px solid #afafaf").setPadding(px.of(5)).addCss(ColorScheme.INDIGO.lighten_5().getBackground());
        return TextNode.of(cellInfo.getRecord().getGender().getLabel());
    }));
    LocalListDataStore<Contact> localListDataSource = new LocalListDataStore<Contact>().setSearchFilter(new ContactSearchFilter()).setRecordsSorter(new ContactSorter()).setPagination(scrollingPaginationPlugin.getPagination());
    DataTable<Contact> table = new DataTable<>(tableConfig, localListDataSource);
    element.appendChild(Card.create("ALL IN ONE", "Try all plugins and feature works together.").setCollapsible().appendChild(new TableStyleActions(table)).appendChild(table).element());
    contactListParseHandlers.add(contacts -> {
        List<Contact> data = subList(contacts, 0, 100);
        localListDataSource.setData(data);
        table.load();
        topPanel.update(data);
    });
}

Example 5 with EyeColor

use of org.dominokit.domino.datatable.client.views.model.EyeColor in project domino-ui-demo by DominoKit.

the class DataTableViewImpl method simplePagination.

@SampleMethod
private void simplePagination() {
    // page size
    SimplePaginationPlugin<Contact> simplePaginationPlugin = new SimplePaginationPlugin<>(10);
    TableConfig<Contact> tableConfig = new TableConfig<>();
    tableConfig.addColumn(ColumnConfig.<Contact>create("id", "#").textAlign("right").asHeader().sortable().setCellRenderer(cell -> TextNode.of(cell.getTableRow().getRecord().getIndex() + 1 + ""))).addColumn(ColumnConfig.<Contact>create("status", "Status").textAlign("center").setCellRenderer(cell -> {
        if (cell.getTableRow().getRecord().isActive()) {
            return Style.of(Icons.ALL.check_circle()).setColor(Color.GREEN_DARKEN_3.getHex()).element();
        } else {
            return Style.of(Icons.ALL.highlight_off()).setColor(Color.RED_DARKEN_3.getHex()).element();
        }
    })).addColumn(ColumnConfig.<Contact>create("firstName", "First name").sortable().setCellRenderer(cell -> TextNode.of(cell.getTableRow().getRecord().getName()))).addColumn(ColumnConfig.<Contact>create("gender", "Gender").setCellRenderer(cell -> ContactUiUtils.getGenderElement(cell.getRecord())).textAlign("center")).addColumn(ColumnConfig.<Contact>create("eyeColor", "Eye color").setCellRenderer(cell -> ContactUiUtils.getEyeColorElement(cell.getRecord())).textAlign("center")).addColumn(ColumnConfig.<Contact>create("balance", "Balance").sortable().setCellRenderer(cellInfo -> ContactUiUtils.getBalanceElement(cellInfo.getRecord()))).addColumn(ColumnConfig.<Contact>create("email", "Email").setCellRenderer(cell -> TextNode.of(cell.getTableRow().getRecord().getEmail()))).addColumn(ColumnConfig.<Contact>create("phone", "Phone").setCellRenderer(cell -> TextNode.of(cell.getTableRow().getRecord().getPhone()))).addColumn(ColumnConfig.<Contact>create("badges", "Badges").setCellRenderer(cell -> {
        if (cell.getTableRow().getRecord().getAge() < 35) {
            return Badge.create("Young").setBackground(ColorScheme.GREEN.color()).element();
        }
        return TextNode.of("");
    }));
    tableConfig.addPlugin(new SortPlugin<>()).addPlugin(new HeaderBarPlugin<Contact>("Demo table", "this a sample table with all features").addActionElement(new HeaderBarPlugin.ClearSearch<>()).addActionElement(new HeaderBarPlugin.SearchTableAction<>())).addPlugin(simplePaginationPlugin);
    LocalListDataStore<Contact> localListDataStore = new LocalListDataStore<>();
    localListDataStore.setRecordsSorter(new ContactSorter());
    localListDataStore.setSearchFilter(new ContactSearchFilter());
    localListDataStore.setPagination(simplePaginationPlugin.getSimplePagination());
    DataTable<Contact> table = new DataTable<>(tableConfig, localListDataStore);
    element.appendChild(Card.create("SIMPLE PAGINATION", "Simple pagination plugin allows the table to fire pagination events helpful for the datasource").setCollapsible().appendChild(new TableStyleActions(table)).appendChild(table).element());
    contactListParseHandlers.add(contacts -> {
        localListDataStore.setData(subList(contacts, 0, 100));
        table.load();
    });
}