Class CrudTableModelFactory

Builds a table for a REST resource: loads the list (crudOptions.fetchList), derives the columns from the first item (nested objects flattened, e.g. address.city) and adds an "Actions" column (View / Edit / Clone / Delete) whose links open the CRUD dialogs (CrudTableModelFactory.onActionEvent). The table shows the result of a save or delete without reloading the list.

Example

const factory = new CrudTableModelFactory();
factory.createTableModel(
  {
    ...new CrudOptions(),
    urls: {
      list: new UrlInfo('GET', '/api/customers'),
      read: new UrlInfo('GET', '/api/customers/{id}'),
      update: new UrlInfo('PUT', '/api/customers/{id}'),
      create: new UrlInfo('POST', '/api/customers'),
      delete: new UrlInfo('DELETE', '/api/customers/{id}'),
    },
    getEmptyItem: () => ({ name: '', vip: false }),
  },
  {},
  ({ tableModel, tableOptions }) => {
    const tableScope = new TableScope(hostDiv, tableModel, new SimpleDomService(), tableOptions, new EventAdapter());
    tableScope.firstInit();
  }
);
document.querySelector('#create')!.addEventListener('click', () => factory.openDialogForCreate());
Copy