Note: Support for 3D on mobile devices may vary, view the system requirements for more information.

This sample demonstrates how to edit using the TableList widget. In this example, two FeatureLayer tables are displayed in this widget. One table is saved within a WebMap, while the other is added dynamically in the app by calling the fromPortalItem method and passing in the itemId of the associated hosted table.

The widget takes a map property which contains a collection of tables. The tables are read as a collection of layers. In order for the widget to recognize if a table is valid, the feature layer's isTable property must return true.

If a table is loaded dynamically, it must first be loaded and added to the map's tables collection. The following snippet shows how this is handled.

Layer.fromPortalItem({
  portalItem: {
    // autocasts new PortalItem()
    id: "6aa49be79248400ebd28f1d0c6af3f9f" // loads a feature layer table from AGO portal item
  }
}).then(function(layer) {
  layer.load().then(function() {
    // Must first load the layer and then check if it's a table
    if (layer.isTable) {
      webmap.tables.add(layer); // add this table to the map's tables collection
    }
  });
});

When instantiating the widget, pass in a valid Map. In this case, we are setting it to a WebMap containing a feature layer table.

const tableList = new TableList({
  // Two tables should display, the first one is stored within the webmap,
  //ie. Chicago public health statistics. The other is dynamically loaded
  //from the portal item, ie. Chicago Covid daily cases deaths and hospitalizations.
  map: webmap, // get access to the map which has the collection of tables
  selectionEnabled: true,
  listItemCreatedFunction: createActions,
  container: document.createElement("div");
});