I am get trying to get the calcite components line up next to each other but it seems that css is overwritten by the table? Here is an example.
https://codepen.io/lkoumis1/pen/wvmbbYR
Solved! Go to Solution.
I figured it out. The solution was to get the components' div out of the tableDiv, and adjust the height in css.
<div id="appContainer">
<div id="viewDiv"></div>
<div id="tableContainer" class="container">
<div id="select-by-rectangle" style="float:left; text-align:center;">
<calcite-button appearance="transparent" color="red" icon-start="selection-x" scale="s">Select by
rectangle
</calcite-button>
</div>
<div id="clear-selection" style="float:left; text-align:center;">
<calcite-button appearance="transparent" color="red" icon-start="erase" scale="s">Clear
Selection
</calcite-button>
</div>
<div id="ExportInfo" style="float:left; text-align:center">
<calcite-button appearance="transparent" color="red" icon-start="download-to" scale="s">Export
to CSV
</calcite-button>
</div>
</div>
<div id="tableDiv"></div>
</div>
Hi @LefterisKoumis, In this case since the actions are related to the FeatureTable widget, you could leverage the widget's properties to add the functionality to the menu using the "menuConfig" property.
For instance:
const featureTable = new FeatureTable({
view: view,
layer: featureLayer,
// Custom FeatureTable menu items
menuConfig: {
items: [
{
label: "Clear Selection",
iconClass: "esri-icon-erase",
clickFunction: function (event) {
// Clear selection functionality
}
},
{
label: "Export to CSV",
iconClass: "esri-icon-download",
clickFunction: function (event) {
// Export to CSV functionality
}
}
]
},
tableTemplate: {
columnTemplates: [
{
type: "field",
fieldName: "state_name",
label: "State",
direction: "asc"
},
{
type: "field",
fieldName: "PercentagePrivate",
label: "Private school percentage"
},
{
type: "field",
fieldName: "PercentagePublic",
label: "Public school percentage"
}
]
},
container: tableDiv
});
Here's a Codepen for the full context.
Thank you. I had the components previously setup in the menuConfig, the same way as you mentioned. It is a good solution for a small number of tools. However, since I need to have a longer list of tools to be used for the feature table, it will make a long listing for the user to find the tool they need. To improve user's experience, I think placing the tools on the top of the feature table for easy and quick access is a better approach. Is there a way to deal with the issue that I described? Thanks.
I figured it out. The solution was to get the components' div out of the tableDiv, and adjust the height in css.
<div id="appContainer">
<div id="viewDiv"></div>
<div id="tableContainer" class="container">
<div id="select-by-rectangle" style="float:left; text-align:center;">
<calcite-button appearance="transparent" color="red" icon-start="selection-x" scale="s">Select by
rectangle
</calcite-button>
</div>
<div id="clear-selection" style="float:left; text-align:center;">
<calcite-button appearance="transparent" color="red" icon-start="erase" scale="s">Clear
Selection
</calcite-button>
</div>
<div id="ExportInfo" style="float:left; text-align:center">
<calcite-button appearance="transparent" color="red" icon-start="download-to" scale="s">Export
to CSV
</calcite-button>
</div>
</div>
<div id="tableDiv"></div>
</div>