Enable Manual Column Width Configuration in ArcGIS Dashboards Table Widgets

[ArizonaGIS2]

Currently, column widths in ArcGIS Dashboards table widgets are auto-sized based on the "Fit to element width" or "Fit columns" settings. While this works for basic layouts, it becomes a limitation when specific columns require custom widths. For example, a field like "Fiscal Year" with short text gets disproportionate space compared to a "Description" field containing much longer text.

I propose adding the ability to manually configure column widths directly within the "Column Settings" of table widgets. Users should be able to specify widths in pixels or percentages for each column (e.g., Fiscal Year = 100px, Status = 100px, Description = 300px). This would allow for greater control over the table layout, especially in cases where data visualization requires balanced column sizes.

Benefits:

• Improved table aesthetics and readability.
• Greater flexibility for data presentation.
• Addresses usability issues when auto-sizing does not allocate space logically.

This enhancement would save time on workarounds, such as shortening field content or adjusting widget settings to force better sizing.

[DeniseWesleyWildlife]

Nice looking table. I didn't know you could color the fields/ records like this. I realize this isn't the topic of your post but am curious how you did that. I would like to have a color-coded table based on status in a web app. 

[ArizonaGIS2]

Hello Denise,

I'm sorry. I just saw this. I formatted the table within the ArcGIS Dashboard using the arcade expression. You can see the various color codes that trigger the conditional formatting with the cells. Let me know if you have any other questions.

// Characters per line before line break
var lineLength = 10

function wrapFieldText(text) {
    text = DefaultValue(text, "") // Ensure it's not null
    var textArray = Split(text, ' ')
    var wrapText = ""
    var words = 0
    var characters = 0

    while (words < Count(textArray)) {
        characters += Count(textArray[words] + " ")
        wrapText += textArray[words] + When(characters >= lineLength, "<br>", " ")
        characters = When(characters >= lineLength, 0, characters)
        words += 1
    }

    return wrapText
}

// Wrap each field
var wrappedAcctDept = wrapFieldText($datapoint.Acct_Dept)
var wrappedStatusName = wrapFieldText($datapoint.Status_Name)
var wrappedProjectName = wrapFieldText($datapoint.Project_Name)
var wrappedDescription = wrapFieldText($datapoint.Description)

// Handle Public_Status as before: if empty, "Future Project"
var ps = $datapoint.Public_Status
ps = When(
  ps == 'Complete', 'Complete',
  ps == 'On Track', 'On Track',
  ps == 'Delayed', 'Delayed',
  !IsEmpty(ps), ps,
  'Future Project'
)
var wrappedPublicStatus = wrapFieldText(ps)

var wrappedFiscalYear = wrapFieldText($datapoint.Fiscal_Year)

return {
  cells: {
    Acct_Dept: {
      displayText: "<b>" + wrappedAcctDept + "</b>",
      textColor: 'black',
      backgroundColor: IIF($rowindex % 2 == 0, '#e0e0e0', '#f5f5f5'),
      textAlign: 'center',
      iconName: '',
      iconAlign: '',
      iconColor: '',
      iconOutlineColor: ''
    },

    Status_Name: {
      displayText: "<b>" + wrappedStatusName + "</b>",
      textColor: 'white',
      backgroundColor: When(
        $datapoint.Status_Name == 'Executing', '#66cc66',
        $datapoint.Status_Name == 'Initiating', '#ffcc00',
        $datapoint.Status_Name == 'Planning', '#6699cc',
        $datapoint.Status_Name == 'Requested', '#cc6666',
        'gray'
      ),
      textAlign: 'center',
      iconName: '',
      iconAlign: '',
      iconColor: '',
      iconOutlineColor: ''
    },

    Project_Name: {
      displayText: "<b>" + wrappedProjectName + "</b>",
      textColor: 'white',
      backgroundColor: When(
        $datapoint.Goals == 'Fiscal & Resource Mgmt.', '#6d6642',
        $datapoint.Goals == 'Economic Vitality', '#03701d',
        $datapoint.Goals == 'Safe & Vibrant Community', '#0057c1',
        $datapoint.Goals == 'Innovation & High Performing Organization', '#ffb700',
        $datapoint.Goals == 'Infrastructure', '#e24301',
        'gray'
      ),
      textAlign: 'left',
      iconName: '',
      iconAlign: '',
      iconColor: '',
      iconOutlineColor: ''
    },

    Description: {
      displayText: "<b>" + wrappedDescription + "</b>",
      textColor: 'black',
      backgroundColor: IIF($rowindex % 2 == 0, '#e0e0e0', '#f5f5f5'),
      textAlign: 'left',
      iconName: '',
      iconAlign: '',
      iconColor: '',
      iconOutlineColor: ''
    },

    Public_Status: {
      displayText: "<b>" + wrappedPublicStatus + "</b>",
      textColor: 'white',
      backgroundColor: When(
        ps == 'Complete', '#66cc66',
        ps == 'On Track', '#4A90E2',
        ps == 'Delayed', '#FFA500',
        ps == 'Future Project', '#CCCCCC',
        '#6699cc'
      ),
      textAlign: 'center',
      iconName: '',
      iconAlign: '',
      iconColor: '',
      iconOutlineColor: ''
    },

    Fiscal_Year: {
      displayText: "<b>" + wrappedFiscalYear + "</b>",
      textColor: 'black',
      backgroundColor: IIF($rowindex % 2 == 0, '#e0e0e0', '#f5f5f5'),
      textAlign: 'center',
      iconName: '',
      iconAlign: '',
      iconColor: '',
      iconOutlineColor: ''
    }
  }
}