GwtMaterialDesign / gwt-material-table

A complex table component designed for the material design specifications
https://gwtmaterialdesign.github.io/gmd-table-demo/
Apache License 2.0
26 stars 31 forks source link

Piped sortComparator don't work in (GMD 2.2-SNAPSHOT) #182

Closed HoochSDS closed 3 years ago

HoochSDS commented 5 years ago

Hi, If you use the new Comparator like in issue #178 described it won't work. There is no mouse hover event.

    table.addColumn("Last Name", new TextColumn<Person>() {
      @Override
      public String getValue(Person object) {
        return object.getLastName();
      }
    }.sortComparator((o1, o2) -> o1.getData().getLastName().compareToIgnoreCase(o2.getData().getLastName())));

Table

Using: 2.2-SNAPSHOT\gwt-material-table-2.2-20190607.022155-43.jar

Thank you

HoochSDS commented 3 years ago

Hi, for the Problem above, you have only to make the column sortable.

      @Override
      public boolean sortable() {
        return true;
      }

Here is small overview how to use it. Imagine we have table with three columns (First Name, Role, Password)

This are the definitions in GWTP.

Ui

        <m.table:MaterialDataTable ui:field="searchTable"  height="500" />

View

In the view, you have to make the column sortable --> sortable() true and for proper sort, you have to add a valid sortComparator()

  @Override
  public void setupSearchTable() {
    searchTable.addColumn("First Name", new TextColumn<UserDTO>() {
      @Override
      public Column<UserDTO, String> width(int width) {
        return super.width(200);
      }
      @Override
      public String getValue(UserDTO object) {
        return object.getUsername();
      }
      @Override
      public boolean sortable() {
        return true;
      }
    }.sortComparator((o1, o2) -> o1.getData().getUsername().compareToIgnoreCase(o2.getData().getUsername())));

    searchTable.addColumn("Role", new TextColumn<UserDTO>() {
      @Override
      public Column<UserDTO, String> width(int width) {
        return super.width(100);
      }
      @Override
      public String getValue(UserDTO object) {
        return object.getRole();
      }
    });

    searchTable.addColumn("Password", new TextColumn<UserDTO>() {
      @Override
      public String getValue(UserDTO object) {
        return object.getPassword();
      }
    });
  }

Presenter

  interface MyView extends View, HasUiHandlers<HomeUiHandlers> {
    void setData(List<UserDTO> users);
    void setupSearchTable();
  }

  @Override
  protected void onBind() {
    super.onBind();
    getView().setupSearchTable();
  }

  @Override
  protected void onReveal() {
    super.onReveal();
    getView().setData(generateUser());
  }

  private List<UserDTO> generateUser() {
    List<UserDTO> users = new ArrayList<>();
    UserDTO user = new UserDTO("Christian", "cVSfCNeqeTp6PqEpY6qszwziMFbtwbtgT1KZVclwZRU=", "Admin");
    users.add(user);
    user = new UserDTO("Ben", "ClmvJuAUckrbHlW/T9GWoZZCal84/NbCxkTDXbKNs/Q==", "Admin");
    users.add(user);
    user = new UserDTO("Karl", "vXpAKBVkU75tskFhwYQaYAH367xRYnBCTQCAinIFBBg=", "Admin");
    users.add(user);
    user = new UserDTO("Anna", "vXpAKBVkU7fghz5tskFhwYQaYAH367xRYnBCTQCAinIFBBg=", "Admin");
    users.add(user);
    user = new UserDTO("Kevin", "vXpAKBVkU75tskFhwYQaYAH367sdrxRYnBCTQCAinIFBBg=", "Admin");
    users.add(user);
    user = new UserDTO("Adam", "vXpAKBVkU7545ktskFhwYQaYAH367xRYnBCTQCAinIFBBg=", "Admin");
    users.add(user);
    user = new UserDTO("Mark", "vXpAKBVkU75tskFhwYQaYAdt78H367xRYnBCTQCAinIFBBg=", "Admin");
    users.add(user);

    return users;
  }

And this is the Result. Using GMD Data-Table 2.4.1 Thanks

GMDSort