Add column config for actions

src/components/Table/components/TableHeaderCell/TableHeaderCell.styles.ts

@@ -1,12 +1,20 @@
 import { css } from '@emotion/css';
+import { GrafanaTheme2 } from '@grafana/data';
 
 /**
  * Get Styles
  */
-export const getStyles = () => {
+export const getStyles = (theme: GrafanaTheme2) => {
   return {
     labelSortable: css`
       cursor: pointer;
     `,
+    actionHeader: css`
+      margin: ${theme.spacing(0)};
+      margin-left: ${theme.spacing(1)};
+    `,
+    actions: css`
+      display: flex;
+    `,
   };
 };

src/components/Table/components/TableHeaderCell/TableHeaderCell.test.tsx

@@ -152,4 +152,33 @@ describe('TableHeaderCell', () => {
 
     expect(onAddRow).toHaveBeenCalled();
   });
+
+  it('Should display text in action header', () => {
+    const onAddRow = jest.fn();
+
+    render(
+      getComponent({
+        header: {
+          getContext: () =>
+            ({
+              label: 'action header',
+            }) as any,
+          column: {
+            id: ACTIONS_COLUMN_ID,
+            getIsSorted: jest.fn(),
+            getCanSort: jest.fn(),
+            getToggleSortingHandler: jest.fn(),
+            columnDef: {
+              header: ({ label }: any) => label,
+            },
+          } as any,
+        } as any,
+        isAddRowEnabled: true,
+        onAddRow,
+      })
+    );
+
+    expect(selectors.actionHeaderText()).toBeInTheDocument();
+    expect(selectors.actionHeaderText()).toHaveTextContent('action header');
+  });
 });

src/components/Table/components/TableHeaderCell/TableHeaderCell.tsx

@@ -58,11 +58,22 @@ export const TableHeaderCell = <TData,>({ header, size, isAddRowEnabled, onAddRo
    * Actions Header
    */
   if (header.column.id === ACTIONS_COLUMN_ID) {
-    if (isAddRowEnabled) {
-      return <IconButton name="plus" aria-label="Add Row" onClick={onAddRow} {...testIds.buttonAddRow.apply()} />;
-    }
-
-    return null;
+    return (
+      <div className={styles.actions}>
+        {isAddRowEnabled && (
+          <IconButton
+            name="plus"
+            size={size}
+            aria-label="Add Row"
+            onClick={onAddRow}
+            {...testIds.buttonAddRow.apply()}
+          />
+        )}
+        <p {...testIds.actionHeaderText.apply()} className={styles.actionHeader}>
+          {flexRender(header.column.columnDef.header, header.getContext())}
+        </p>
+      </div>
+    );
   }
 
   return (

src/components/Table/components/TableRow/TableRow.tsx

@@ -173,7 +173,12 @@ export const TableRow = <TData,>({
       /**
        * Set background color
        */
-      if (field.display && config.type === CellType.COLORED_BACKGROUND && !row.getIsGrouped()) {
+      if (
+        !cell.id.includes(ACTIONS_COLUMN_ID) &&
+        field.display &&
+        config.type === CellType.COLORED_BACKGROUND &&
+        !row.getIsGrouped()
+      ) {
         const displayValue = field.display(value);
 
         if (displayValue.color) {
@@ -192,6 +197,7 @@ export const TableRow = <TData,>({
        * Apply Display Processor to Aggregated Row
        */
       if (
+        !cell.id.includes(ACTIONS_COLUMN_ID) &&
         field.display &&
         config.type === CellType.COLORED_BACKGROUND &&
         cell.getIsAggregated() &&

src/components/TablePanel/TablePanel.tsx

@@ -99,6 +99,7 @@ export const TablePanel: React.FC<Props> = ({
   const { tableData, columns } = useTable({
     data,
     columns: currentTable?.items,
+    actionsColumnConfig: currentTable?.actionsColumnConfig,
     isAddRowEnabled,
     isDeleteRowEnabled,
     replaceVariables,