How to adjust the width of actionColumn in treeTable

[michael-thin-timber]

Hey,
in our App we´re using a TreeTable with an actionColumn with label “Aktionen” (see below).
I´ve already read in the widgetShowCase that:
" width and fixedWidth properties have no affection for Action Column."" so this is actually unnecessary and I will/would remove it

const treeTableColumns: PrintModelBrowserTableColumn[] = [
		{
			fixedWidth: true,
			hierarchical: true,
			label: "Datenarten",
			getColumnContent: (node) => node.label,
			width: 2.5
		},
		{
			fixedWidth: true,
			label: "Label",
			getColumnContent(node) {
				return node.type === PrintModelBrowserType.FORM_MODEL ? node.printModelLabelName : "";
			},
			width: 0.5
		},
		{
			actionColumn: true,
			fixedWidth: true,
			label: "Aktionen",
			getColumnContent(node) {
				return <PrintModelBrowserMenu {...{ node, openCreateOModelWizard, openChangeLabelWizard }} />;
			}
		},
		{
			label: "",
			width: 0.1
		}
	];

Our Problem:
When no data is provided, the label of the actionColumn breaks and the width of the element is set to:

{
  width: 76px;
  min-width: 76px;
  max-width: 76px;
}

When data is provided it looks allright and the width of the element is set to:

{
  width: 171px;
  min-width: 171px;
  max-width: 171px;
}

How can I set the width of the actionColumn permanent to avoid breaking the label? Is there a triggerElement in the API or any other options like “actionColumnWidth”?

I could remove actionColumn prop and change it to width and implement also styling to <PrintModelBrowserMenu /> what kind of works. But I´d like to keep actionColumn as intended in the
widgetShowCase:

“Indicating that a column is holding action buttons. This is needed in order to calculate the size of column automatically. There is no need to specify a width for action column.”

Thanks for your help and best regards,

Michi

[hieu-raw-spruce]

Hi Michi,

To make the Table’s Action column stays fixed, you can set the pinning property for it. For example:

const treeTableColumns: <your_column_type>[] = [
// ... your other columns
{
   actionColumn: true,
   pinning: "right",
   label: "Aktionen",
   getColumnContent(node) { }
}

Hope that this could resolve your issue
Best,
Hieu

[michael-thin-timber]

Hey Hieu,
thanks for your answer

Unfortunately your suggestion is not working. It will affect the ui
and we´d like to keep it as it is:

With pinning prop set to “right” there´s to much space between.

And the problems still remains:

Any other ideas? As I mentionend before in my previous question…is the actionColumn prop just a recommendation or is it kind of a mandatory when using actions in tables? Actually in the showcase examples I couldn´t find any actionColumn with a label…it was always set to an empty string!?
Maybe a requirement for A12

Thanks again and best regards,
Michi