From eca35ded03eba225e84a255a6948d2e8acdefb6f Mon Sep 17 00:00:00 2001
From: Ramakrishnan Raman <raram@microsoft.com>
Date: Tue, 1 Aug 2023 20:51:25 +0530
Subject: [PATCH] fix: microsoft/powercat-creator-kit#176 (#324)

---
 DetailsList/DetailsList/Grid.tsx | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/DetailsList/DetailsList/Grid.tsx b/DetailsList/DetailsList/Grid.tsx
index b6e5ada1..00b6e73c 100644
--- a/DetailsList/DetailsList/Grid.tsx
+++ b/DetailsList/DetailsList/Grid.tsx
@@ -27,6 +27,7 @@ import {
     SelectionMode,
     ThemeProvider,
     IDetailsRowProps,
+    IDetailsColumnProps,
 } from '@fluentui/react';
 import * as React from 'react';
 import { IGridColumn } from './Component.types';
@@ -380,6 +381,22 @@ function mapToGridColumn(
         cellType ? ClassNames.cellTypePrefix + cellType.toString().toLowerCase() : '',
     ]);
 
+    //Set padding-left for headercell
+    const onRenderHeader: IRenderFunction<IDetailsColumnProps> = (props) => {
+        if (props) {
+            return (
+                <span
+                    style={{
+                        paddingLeft: column.getValue(ColumnsColumns.ColHeaderPaddingLeft) as string,
+                    }}
+                >
+                    {props.column.name}
+                </span>
+            );
+        }
+        return null;
+    };
+
     return {
         // Give the column a unique key based on the input collection so changing the columns will recalculate widths etc.
         key: 'col' + column.getRecordId(),
@@ -418,6 +435,7 @@ function mapToGridColumn(
         verticalAligned: undefinedIfNullish(column.getValue(ColumnsColumns.ColVerticalAlign)),
         horizontalAligned: undefinedIfNullish(column.getValue(ColumnsColumns.ColHorizontalAlign)),
         isRowHeader: column.getValue(ColumnsColumns.ColRowHeader) === true,
+        onRenderHeader: onRenderHeader,
     } as IGridColumn;
 
     function undefinedIfNullish<T>(value: T) {