nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Feature Table Widget

BernardAbubakari

I'm looking to integrate the attribute table of a layer into a webpage, but I've encountered an issue with the FeatureTable widget. It appears to create a standalone table by placing it in a container in the DOM, rather than allowing me to embed it directly in the expand widget

My goal is to use the Expand widget so that when I click on it, the attribute table opens. However, despite several attempts, the table consistently opens in the container (div container) instead of within the Expand widget.

Your help would be greatly appreciated!

code.png

Find more posts tagged with

Accepted answers

RachaelNGarrett

I was able to resolve only the Feature Table title showing by using the table's container as the content for the Expand widget instead. Then add height and width to the CSS for the table to fully display when expanded.

#tableDiv {
	width: 1000px;
	height: 500px;
}

const featureTable = new FeatureTable({
	view: view,
	layer: featureLayer,
	container: "tableDiv",
});

const tableExpand = new Expand({
	expandIcon: "esri-icon-table",
	view: view,
	content: document.getElementById("tableDiv"),
});
view.ui.add(tableExpand, "top-right");

All comments

RachaelNGarrett

#tableDiv {
	width: 1000px;
	height: 500px;
}

const featureTable = new FeatureTable({
	view: view,
	layer: featureLayer,
	container: "tableDiv",
});

const tableExpand = new Expand({
	expandIcon: "esri-icon-table",
	view: view,
	content: document.getElementById("tableDiv"),
});
view.ui.add(tableExpand, "top-right");

BernardAbubakari

Thanks for letting me know the "Insert/edit code sample"

Yes, that is the same results I am getting. I only get the title of the table when I click on the expand widget. The Expand widget and BasemapGallery widget works pretty well but the Expand and the FeatureTable widget is not.

kenbuja

When adding code to your question, please use the "Insert/edit code sample" button. Reading code in an image (especially as an attachment) is much more difficult.

You're setting the container to "tableDiv", which I'm guessing is the div below the map as in this sample. Normally, you could add it into its own container, such as in the Expand sample. However, in my initial testing, this is only adding the table title to the Expand widget, so I'm not sure if this is possible or not.

featureTable = new FeatureTable({
  view: view, // Required for feature highlight to work
  layer: featureLayer,
  header: false,
  visibleElements: {
    menuItems: meuItems
  },
  tableTemplate: template,
  //container: document.getElementById("tableDiv")
  container: document.createElement("div")
});

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.