@hexxag0nal/custom-material-table

This is mainly for private use, thus the documentation will be scarce. But anyone is allowed to use it under the given license.

CustomMaterialTable

A customizable table based on the Angular Material Table

How to use

The following definition leads to the table seen in Figure 1

this.tableDef = {
  ariaLabel: "test table",
  columns: [{
    defName: "name",
    headerCellText: "Name",
    actions: {
      defName: "actions",
      headerCellText: "",
      alternativeCellContent: [{
        icon: "content_paste",
        tooltip: "Copy this QuickLink to your clipboard",
        onClick: quickLink => this.copyQuickLinkToClipboard(quickLink),
      }, {
        icon: "info",
        tooltip: "See this QuickLink's details",
        onClick: quickLink => {
          this.quickLinkForShowDetails = quickLink;
          this.$dialogPage.set("showQuickLink");
        },
      }, {
        icon: "delete_forever",
        tooltip: "Revoke and delete this QuickLink",
        onClick: this.onDeleteQuickLink.bind(this),
      }],
    }
  },
  ],
};

It is also possible to make a column editable, which means that every cell in that column will be editable. It is possible to provide a callback that gets passed the new value after the editing is finished. In order to achieve this, simply set editable to true and provide a callback via onValueEdited in the column definition

this.tableDef = {
  ariaLabel: "test table",
  columns: [{
    defName: "name",
    headerCellText: "Name",
    editable: true,
    onValueEdited: newValue => console.log("My new value:", newValue),
    actions: {
      defName: "actions",
      headerCellText: "",
      alternativeCellContent: [{
        icon: "content_paste",
        tooltip: "Copy this QuickLink to your clipboard",
        onClick: quickLink => this.copyQuickLinkToClipboard(quickLink),
      }, {
        icon: "info",
        tooltip: "See this QuickLink's details",
        onClick: quickLink => {
          this.quickLinkForShowDetails = quickLink;
          this.$dialogPage.set("showQuickLink");
        },
      }, {
        icon: "delete_forever",
        tooltip: "Revoke and delete this QuickLink",
        onClick: this.onDeleteQuickLink.bind(this),
      }],
    }
  },
  ],
};