topic Re: Feature Table Widget in ArcGIS JavaScript Maps SDK Questions

Feature Table Widget

BernardAbubakari — Wed, 09 Oct 2024 21:35:26 GMT

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!

Re: Feature Table Widget

KenBuja — Thu, 10 Oct 2024 14:20:20 GMT

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") });

Re: Feature Table Widget

BernardAbubakari — Thu, 10 Oct 2024 14:42:15 GMT

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.

Re: Feature Table Widget

RachaelNGarrett — Thu, 27 Mar 2025 21:45:52 GMT

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");