Multiple Feature Tables for each Feature Layer in Map (JS 4.24)

[moremeowbell]

I am trying to add in multiple feature tables into my web application. I have seen the post below, but they were using JS 3.x and I am using 4.x.

https://community.esri.com/t5/arcgis-api-for-javascript-questions/display-several-feature-tables/td-...

Basically, I am hoping that I can add a tab that allows users to select which feature table they want to view. Here is the code I have so far that works, but it only displays one table...

JS

      // Create the feature table
      const featureTable = new FeatureTable({
        view: view, // Required for feature highlight to work
        layer: featureLayer,
        multiSortEnabled: true,
        visibleElements: {
          // Autocast to VisibleElements
          menuItems: {
            clearSelection: true,
            refreshData: true,
            toggleColumns: true,
            selectedRecordsShowAllToggle: true,
            selectedRecordsShowSelectedToggle: true,
            zoomToSelection: true
          }
        },
        container: document.getElementById("tableDiv")
      });

      // Listen for the view's click event and access the associated graphic.
      view.on("immediate-click", (event) => {
        view.hitTest(event).then((response) => {
          tableCandidate = response.results.find((result) => {
            return (
              result.graphic &&
              result.graphic.layer &&
              result.graphic.layer === featureLayer
            );
          });

          // Add the graphic's ObjectId into the collection of highlightIds.
          // Check that the featureTable.highlightIds collection
          // does not include an already highlighted feature.
          if (tableCandidate) {
            const objectId = tableCandidate.graphic.getObjectId();

            if (featureTable.highlightIds.includes(objectId)) {
              // Remove feature from current selection if feature
              // is already added to highlightIds collection
              featureTable.highlightIds.remove(objectId);
            } else {
              // Add this feature to the featureTable highlightIds collection
              featureTable.highlightIds.add(objectId);
            }
          }
        });
      });

      // Watch the featureTable's highlightIds.length property,
      // and get the count of highlighted features within
      // the table.

      featureTable.watch("highlightIds.length", (ids) => {
        highlightIdsCount = ids;

        // Iterate through the filters within the table.
        // If the active filter is "Show selection",
        // changes made to highlightIds (adding/removing)
        // are reflected.

        featureTable.viewModel.activeFilters.forEach((filter) => {
          if (filter.type === "selection") {
            selectionIdCount = filter.objectIds.length; // the filtered selection's id count
            // Check that the filter selection count is equal to the
            // highlightIds collection count. If not, update filter selection.
            if (selectionIdCount !== highlightIdsCount) {
              featureTable.filterBySelection();
            }
          }
        });
      });
    });

HTML

    <div id="mainWindow">
        <div class="container">
            <div id="tableDiv"></div>
          </div>
    </div>

[ReneRubalcava]

Here is an example of using multiple FeatureTables for multiple layers.

https://codepen.io/odoe/pen/YzaLVgJ?editors=0010

view.when(() => {
	const layers = map.layers
		.filter((layer) => {
			return layer.type === "feature";
		})
		.toArray();
	let count = 0;
	for (const layer of layers) {
		// nav
		const title = document.createElement("calcite-tab-title");
		title.innerText = layer.title;
		if (count === 0) {
			title.active = true;
			count++;
		}
		tableNav.appendChild(title);
		// content
		const container = document.createElement("div");
		container.classList.add("table");
		const table = new FeatureTable({
			view,
			layer,
			container
		});
		const tab = document.createElement("calcite-tab");
		tab.appendChild(container);
		tabDiv.appendChild(tab);
	}
});

[Ranga_Tolapi]

Hi @ReneRubalcava how to make that tab “closable”?

[ReneRubalcava]

You would need some logic using use DOMElement remove

https://developer.mozilla.org/en-US/docs/Web/API/Element/remove